var z = 100; // z-index counter
var boxHeight = "16.7em"; // default box height
var boxHeightOpen = "34.2em"; // default open box height
// map parameters
var _mapLt = 53.728062;
var _mapLn = -1.86317;
var _minZoom = 8;
var _maxZoom = 16;
var _startZoom = 12;
var _isMapInited = false;
var _map;
var _boxOpacity = 0.4;
var isMobile = false;

// get our next available z-index value
function getZIndex(){
	return z++;
}

function killTabs(scope){
	scope.attr("tabindex", "-1");
}

function enableTabs(scope){
	scope.attr("tabindex", "0");
}

function accessTextExpand(scope){
	$("span.accessHidden", scope).text("- click to expand");
}

function accessTextClose(scope){
	$("span.accessHidden", scope).text("- click to close");
}

//update the top position of the more content 
function updateContentTop(){
	$(".contentToggle").each(function(){
		var box = $(this).parents(".box");
		var content = $(".content", box);
	
		// our open target position is immediately beneath the toggle element
		var target = $(this).height() + 30;
		// if our box is closed, we hide the content just beneath the box height
		if (box.data("status") == "closed") {
			// close
			target = boxHeight;
		}
		
		// animate
		content.stop().animate({
			top: target
		}, 200);
	});
	
};

// ========================
/*
function loadMap(){
	var startPoint = new google.maps.LatLng(_mapLt, _mapLn);
	
	if(!_isMapInited){
		
		// define our map options
		var mapOptions = {
			zoom: _startZoom,
			center: startPoint,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		
		// get the map container as a DOM object	
		DOMContainer = $("#mapContainer").get(0); //map container
		
		// define map in DOM
		_map = new google.maps.Map(DOMContainer, mapOptions);
		
		// set the minimum and maximum zoom
		google.maps.event.addListener(_map, "maptypeid_changed", function (){
			_map.mapTypes[map.getMapTypeId()].minZoom = _minZoom;
			_map.mapTypes[map.getMapTypeId()].maxZoom = _maxZoom;
	
			google.maps.event.trigger(_map, "zoom_changed");
		}); 
		
		// add our marker
		var options = {
			position: startPoint,
			map: _map
		};
		var marker = new google.maps.Marker(options);
		
		_isMapInited = true;
	}else{
		// re-centre the map
		google.maps.event.trigger(_map, "resize");
		_map.setCenter(startPoint);
	}
};
*/
// jquery init
$(function(){
	
	
	
	if($("html").hasClass("mobile")){
		isMobile = true;
	}
	
	if (!isMobile) {
	
		//assign initial z-index to boxes
		$(".box").each(function(){
			$(this).css("z-index", getZIndex());
		});
	
		//setup the grid model
		var vg = $("#contentGrid").vgrid({
			easeing: "easeOutQuint",
			time: 400,
			delay: 20,
			useFontSizeListener: true,
			useFontSizeFunctionToCall: updateContentTop,
			fadeIn: {
				time: 500,
				delay: 50
			},
			onStart: function(){
			
			},
			onFinish: function(){
			
			}
		});
		
		
		// set our box status
		$(".box, .boxContent").data("status", "closed");
		// set opacity for ie
		$(".box:has(.over)").css("opacity", _boxOpacity);
		killTabs($(".content a"));
		
		
		// catch a return on a focused boxToggle
		$(".boxToggle").keydown(function(e){
			if (e.keyCode == 13) {
				$(this).click(); // fire a click event
			}
		});
		
		// toggle to open and close a box
		$(".boxToggle").click(function(e){
			var box = $(this).parents(".box");
			var target = boxHeightOpen;
			var self = $(this);
			
			// toggle our fill class if it is available - this makes the toggle link fill the box when it is closed
			if ($(this).hasClass("fillBox")) {
				$(this).removeClass("fillBox");
				$(this).addClass("fillBox_suspended");
			}
			
			// if this is a fixed size box, we simply toggle our box status
			if (box.hasClass("fixed")) {
				if (box.data("status") == "closed") {
					box.data("status", "open");
					enableTabs($(".content a", box));
					accessTextClose(this);
				}
				else {
					box.data("status", "closed");
					killTabs($(".content a", box));
					accessTextExpand(this);
				}
			}
			else {
				// determine our target height depending on whether or not the box is open or closed
				if (box.data("status") == "closed") {
					// open
					target = boxHeightOpen;
					box.data("status", "open");
					enableTabs($(".content a", box));
					accessTextClose(this);
					
					//remove the box opacity
					box.css("opacity", "none");
					box.addClass("boxOpen");
				}
				else {
					// close
					target = boxHeight;
					box.data("status", "closed");
					killTabs($(".content a", box));
					accessTextExpand(this);
					box.removeClass("boxOpen");
					
				}
				
				// up our z-index
				box.css("z-index", getZIndex());
				
				
				// animate
				box.stop().animate({
					height: target
				}, 200, function(){
				
					if (box.data("status") == "closed") {
						if (self.hasClass("fillBox_suspended")) {
							self.addClass("fillBox");
							self.removeClass("fillBox_suspended");
						}
					}
					vg.vgrefresh();
					
				});
			}
			
			
			if (box.data("status") == "closed") {
				$(this).removeClass("headingUp");
					$(this).animate({paddingTop: '105'}, 100, function() {
				});
				
			}else{
				$(this).animate({paddingTop: '15'}, 100, function() {
				   $(this).addClass("headingUp");
				});
			}
			
			
			// toggle our background image depending on our new status
			//var backgroundValue = $(this).css("backgroundImage");
			/*
			if(backgroundValue == "none"){
				//image is with boxContent
				var oBoxContent = $(".boxContent", box);
				
				if (box.data("status") == "closed") {
					//oBoxContent.css("backgroundImage", "url(../images/holding/arrow_down.gif)");
				}
				else {
					oBoxContent.css("background", "url(../images/holding/arrow_left.gif) no-repeat top left");
				}
			}else{
				if (box.data("status") == "closed") {
					//$(this).css("backgroundImage", "url(../images/holding/arrow_down.gif)");
				}
				else {
					$(this).css("background", "url(../images/holding/arrow_left.gif) no-repeat top left");
				}
			}*/
			
			
			e.preventDefault();
		});
		
		
		// toggle our content within a box
		$(".contentToggle").click(function(e){
			var box = $(this).parents(".box");
			var content = $(".content", box);
			var self = $(this);
			
			// our open target position is immediately beneath the toggle element
			var target = $(this).height() + 45;
			// if our box is closed, we hide the content just beneath the box height
			if (box.data("status") == "closed") {
				// close
				target = boxHeight;
			}
			
			// animate
			content.stop().animate({
				top: target
			}, 200, function(){
				if (box.data("status") == "closed") {
					if (self.hasClass("fillBox_suspended")) {
						self.addClass("fillBox");
						self.removeClass("fillBox_suspended");
					}
				}
				
			});
			
			e.preventDefault();
		});
		
		
		//get in touch
		
		$('a[href="#getInTouchBox"]').click(function(e){
			var box = $("#getInTouchBox");
			var target = boxHeightOpen;
			var boxHeading = $("#getInTouchBox h2");
			
			
			// toggle our fill class if it is available - this makes the toggle link fill the box when it is closed
			if (boxHeading.hasClass("fillBox")) {
				boxHeading.removeClass("fillBox");
				boxHeading.addClass("fillBox_suspended");
			}
			
			// determine our target height depending on whether or not the box is open or closed
			if (box.data("status") == "closed") {
				// open
				target = boxHeightOpen;
				box.data("status", "open");
				enableTabs($(".content a", box));
				accessTextClose(boxHeading);
			}
			// up our z-index
			box.css("z-index", getZIndex());
				
			// animate
			box.stop().animate({
				height: target
			}, 200, function(){
			
				if (box.data("status") == "closed") {
					if (boxHeading.hasClass("fillBox_suspended")) {
						boxHeading.addClass("fillBox");
						boxHeading.removeClass("fillBox_suspended");
					}
				}
				vg.vgrefresh();
				
			});
			
			
			if (box.data("status") == "closed") {
				boxHeading.removeClass("headingUp");
					boxHeading.animate({paddingTop: '105'}, 100, function() {
				});
				
			}else{
				boxHeading.animate({paddingTop: '15'}, 100, function() {
				   boxHeading.addClass("headingUp");
				});
				
				//remove the box opacity
				box.css("opacity", "none");
				box.addClass("boxOpen");
			}
			
			
			var content = $(".content", box);
			
			// our open target position is immediately beneath the toggle element
			var target = boxHeading.height() + 45;
			// if our box is closed, we hide the content just beneath the box height
			if (box.data("status") == "closed") {
				// close
				target = boxHeight;
			}
			
			// animate
			content.stop().animate({
				top: target
			}, 200, function(){
				if (box.data("status") == "closed") {
					if (boxHeading.hasClass("fillBox_suspended")) {
						boxHeading.addClass("fillBox");
						boxHeading.removeClass("fillBox_suspended");
						
					}
				}
				
			});
			
			
			//e.preventDefault();
		});
		
		
		
		
		// keyboard focus and blur
		$(".over .boxToggle").focus(function(e){
			$(this).parent().mouseenter();
		});
		
		$(".over .boxToggle").blur(function(e){
			$(this).parent().mouseleave();
		});
		
		// hover box
		$(".box .over").hover(function(e){
		
			var box = $(this).parents(".box");
			if (box.data("status") == "closed") {
				var content = $(".boxContent", box);
				// the top of our content is our box title - bring this into view
				content.stop().animate({
					top: box.height() - 55
				}, 200);
				// up our opacity to none, otherwise content under it breaks on IE 8
				//if($.browser.msie){
					//box.css("opacity", "none");
				//}else{
					//box.css("opacity", "1");
				//}
				
				box.stop(true, true).animate({
					opacity: 1
				}, 200);
				
				
			}
		}, function(e){
			var box = $(this).parents(".box");
			if (box.data("status") == "closed") {
				var content = $(".boxContent", box);
				// hide our content
				content.stop().animate({
					top: boxHeight
				}, 200);
				// reduce our opacity
				//box.css("opacity", "0.1"); 
				
				box.stop(true, true).animate({
					opacity: _boxOpacity
				}, 200);
			}
			
		});
		
		
		//setTimeout(loadMap, 1000);
	}
	
	
	
	
	// =======================================
	// setup our analytics tracking
	var tracking = [{selector: ".moreLink",
					category: "Navigation",
					action: "main section to view more",
					label: "@text"},
					
					{selector: ".boxToggle",
					category: "Navigation",
					action: "box toggle",
					label: "@text"}];
	var googleTracking = new googleAnalytics();
	googleTracking.init(tracking);
	//googleTracking.setDebug(true);
	
});