// JavaScript Document

function zoom() {
	$('.jqzoom').jqzoom({
		zoomType: 'innerzoom',
		preloadImages: true,
		alwaysOn:false,
		zoomWidth: 960,  
		zoomHeight: 444,
		title: false,
		showEffect: 'fadein',
		hideEffect: 'fadeout',
		fadeinSpeed: 350,
		fadeoutSpeed: 350
	});
}
//create an array to manipulate/reorder
var imageArray=$("#imgWrapper .tmbWrapper").toArray();
//builds a arrays for animation
var animationOrder= new Array();
animationOrder["0"]= new Array(0,4,1,8,5,2,9,6,3,10,7,11);
animationOrder["1"]= new Array(1,0,5,2,4,9,6,3,8,10,7,11);
animationOrder["2"]= new Array(2,1,6,3,0,5,10,7,4,9,11,8);
animationOrder["3"]= new Array(3,2,7,1,6,11,0,5,10,4,9,8);
animationOrder["4"]= new Array(4,0,5,8,1,6,9,2,7,10,3,11);
animationOrder["5"]= new Array(5,4,1,6,9,0,2,7,10,8,3,11);
animationOrder["6"]= new Array(6,5,2,7,10,9,4,1,3,11,8,0);
animationOrder["7"]= new Array(7,3,6,11,2,5,10,1,4,9,0,8);
animationOrder["8"]= new Array(8,4,9,0,5,10,1,6,11,2,7,3);
animationOrder["9"]= new Array(9,8,5,10,4,1,6,11,0,2,7,3);
animationOrder["10"]= new Array(10,9,6,11,8,5,2,7,4,1,3,0);
animationOrder["11"]= new Array(11,10,7,9,6,3,8,5,2,4,1,0);
animationOrder['close']= new Array(3,2,7,1,6,11,0,5,10,4,9,8);
//for the looping images
animationOrder["randomFades"]= new Array(6,0,9,3,11,1,10,4,2,8,7,5);
var loopPlayed=new Array();
//duration of animation for a sinlge square
var cellAtATimeArray=new Array(2,3,3,2,3,4,4,3,2,3,3,2);
var squareDuration=350;
var animSeq='';
var cellAtATime='';
//hides images on load
$('#imgWrapper').hide();
//function to fade non-hovered images
boxHover = function() {
	//mouse events
	$("#imgWrapper a").bind({
		mouseenter: function() {//fades all but current
			$(this).fadeTo(0,1);
			$imgSib=$(this).children('img');
			var imgName=$imgSib.attr('alt');
			if($(this).children('.barInfo').length==0) {
				$(this).append('<div class="barInfo"><h3>'+imgName+'</h3></div>');
				if($(this).css('display')=='none' || $(this).children('img').css('display')=='none') {
					$(this).children('barInfo').hide();
				}
			}
		},
		mouseleave: function() {
			$(this).children(".barInfo").remove();															  
		},
		click: function() {//the animate out function
			
		}
	});
	$("#imgWrapper").bind({
		mouseleave: function() {//restores all fades
			$("#imgWrapper a .barInfo").remove();
		}
	});
}
//ajax load of info
function pageNameSelect(clicked) {
	var pageID=$clicked.attr('title').split('_');
	var pageID=pageID[1];
	var pageData = $.ajax({
		type: "POST",
		url: "scripts/AJAX_details.php",
		data: 'pageID='+pageID,
		dataType: "json",
		async: false,
		success: function(data){//add the content to the page
			//content
			var mainImg=data.images.mainImg
			/* old skool image loading for compatibility */
			var img = new Image();
			img.onload = function() {
				$('#fullImg').html('<a href="#" id="featImgA"><img id="featImgID" src="'+mainImg.img+'" width="960" height="444" alt="'+mainImg.altTag+'" title="'+mainImg.title+'" /></a>');
				$('#featImgA').attr('imgID',mainImg.ID);
				//describes the content area
				var content='';
				if(data.totalImages>1){content+='<div id="leftInfo">'}
				content+=mainImg.description;
				if(data.totalImages>1){content+='</div>'}
				//writes the content area
				$('#contentText').append(content);
				
				if(data.totalImages>1) {//if there are extra images by this client. Create tmbs
					var subImages='<div id="xtraImages"></div>';
					$('#contentText').append(subImages);
					$.each(data.images, function(k, v) {
						$('#xtraImages').append('<a id="tmb_'+v.ID+'" href="'+v.img+'?'+v.fullImg+'" ><img src="'+v.tmb+'" alt="'+v.altTag+'" title="'+v.altTag+'" /></a>');
						$('#tmb_'+v.ID).attr('imgID',v.img);
					});
				}
				$('.loader').remove();
				clickAnimate($clicked);
			}
			img.src = mainImg.img;
		}
	}).responseText;
}
//animation function for loading full size image
function clickAnimate(linkClicked) {
	//removes rotating animation
	$("#imgWrapper .tmbWrapper a").clearQueue();
	//end rotating animation
	$clicked=linkClicked;
	$clicked.children(".barInfo").fadeToggle(squareDuration);
	var clickIndex='';
	var tmbID=$clicked.parent().attr('id');
	clickIndex=(tmbID.substr(4))-1;
	//defines the animation array. What order and how many at a time.
	cellAtATime=cellAtATimeArray[clickIndex];
	animSeq=animationOrder[clickIndex];
	//shows the close button
	$('#closeX').fadeToggle(squareDuration);
	//marks the current as active
	$clicked.attr('id','active');
	//removes all mouse events on the 12 squares
	$("#imgWrapper, #imgWrapper a").unbind('mouseenter mouseleave click');
	//loops the array
	$('#fullImg').show();
	$.each(animSeq,function (i) {
		var currentNum=animSeq[i]+1;
		//animate out the images first
		var $item = $("#imgWrapper .tmbWrapper:nth-child("+currentNum+")");
		clickTimout=setTimeout(function() {//animation timing for each image
			
			if(i==animSeq.length-1){
				//delay the text fade as it causes performance issues
				clickTimout=setTimeout(function() {
					$('#textWrapper').height($('#contentText').height());
					$('#homeText').fadeToggle(squareDuration);
					$('#contentText').fadeToggle(squareDuration);
				}, (squareDuration));
				$('#fullImg').css("z-index",99);
				//calls up the navigation system
				if($('#xtraImages').html().length>0) {navControls();}
			}
			$item.fadeTo(squareDuration,0);
		}, (squareDuration/2)*Math.ceil(i/cellAtATime));			
	});
}
var currentFade=0;
rotatingBoxes = function() {
	var animSeq=animationOrder['randomFades'];
	if(currentFade==animSeq.length) {currentFade=0;}
		//sets the item in the loop to be animated
		var currentNum=animSeq[currentFade]+1;
		//alert('currentFade: '+currentFade+' -- currentNum:' +currentNum);
		var $item = $("#imgWrapper .tmbWrapper:nth-child("+currentNum+")");
		//delay between each fade
		var animationDelay=(squareDuration*4);
		//all the links under this particular image location
		var toRotate=$item.children('a').toArray();
		$.each(toRotate, function(j) {//determines what the current Num is				  
			if($(toRotate[j]).hasClass('topImg')){
				currentImgIndex=j;
			}
		});
		//fades out the current tmb
		$(toRotate[currentImgIndex]).delay(animationDelay).fadeToggle(squareDuration*2, function() {
			$(this).toggleClass('topImg');
			var currID=$(this).parent().attr('id').substr(4);
			//loopPlayed.push(currID);
			currentFade++;
			rotatingBoxes();
		});
		//determines what the next item in the array is
		if(currentImgIndex+1>=toRotate.length) {
			var nextFade=0;
		} else {
			var nextFade=currentImgIndex+1;
		}
		//fades in the new tmb
		$(toRotate[nextFade]).delay(animationDelay).fadeToggle(squareDuration*2, function() {
			$(this).toggleClass('topImg');
		});	
}
//animates them out on click
boxClick = function() {
	$("#imgWrapper a").click(function() {
		$clicked=$(this);
		_gaq.push(['_trackEvent', 'Home-Boxes', 'Clicked', $(this).parent().attr('id')]);
		$clicked.children('.barInfo').remove();
		$clicked.append('<div class="loader"><img src="media/loader3.gif" width="32" height="32" /></div>');
		pageNameSelect($clicked);
	});
}
//close animation
$('#closeX').ready(function() {
	$('#closeX').click(function() {
		$('#fullImg').css("z-index",0);
		boxHover();
		//defines the animation array. What order and how many at a time.
		cellAtATime=3;
		animSeq=animationOrder['close'];
		//loops, hides from Top right corner (near the close box). Controlled via an array
		$.each(animSeq,function (i) {
			var currentNum=animSeq[i]+1;
			var $item = $("#imgWrapper .tmbWrapper:nth-child("+currentNum+")");
			//animate in images
			closeTimout=setTimeout(function() { 
				$item.fadeTo(squareDuration, 1);
				if(i==animSeq.length-1){//waits until everything is hidden to re-enable
					rotatingBoxes();
					boxClick();
					//hide gallery controls, move image to the back of the stacking order.
					if($('#navControls').css('display')!='none') {$('#navControls').fadeToggle(squareDuration,0);}
					//sets the home text hight to match current content. Crossfades
					clickTimout=setTimeout(function() {
						$('#textWrapper').height($('#homeText').height());
						$('#homeText').fadeToggle(squareDuration);
						$('#contentText').fadeToggle(squareDuration, function() {$('#contentText').html('<div id="xtraImages"></div>');});
					}, (squareDuration));
				}
			}, ((animSeq.length*.75)*(squareDuration/2)/cellAtATime)+((squareDuration/2)*(i/cellAtATime)));
		});
		$('#closeX').fadeToggle(squareDuration);
	});
});
//appends a hide class to the body to hide objects on load
$(function() {
	$("body").addClass("hideLoad");
});
//animates images in, removes hideLoad Class
$(document).ready(function() {
	var startDelay=0;
	loadingTimout=setTimeout(function() {
		$('#imgWrapper').show();
		var cellAtATime=cellAtATimeArray[0];
		var animSeq=animationOrder[0];
		$.each(animSeq,function (i) {
			var currentNum=animSeq[i]+1;
			var $item = $("#imgWrapper .tmbWrapper:nth-child("+currentNum+")").children('.topImg'); 
			loadingTimout2=setTimeout(function() {//animation timing for each image
				if(i==animSeq.length-1){
					$('#textWrapper').fadeToggle(1000);
					boxHover();
					boxClick();
					rotatingBoxes();
					$("body").removeClass("hideLoad");
				}
				$item.fadeTo(squareDuration, 1 );
			}, (squareDuration/2)*Math.ceil(i/cellAtATime));			
		});
	}, startDelay);
	//loads loading img
	var img = new Image();
	img.src='media/loader3.gif';
});

function fadeMed(featMed) {
	//adds a div to contain the image
	$('#fullImg').append('<a id="featImgB" style="display:none;"></a>');
	//sets up image.
	var imgFade = new Image();
	imgFade.onload = function() {//preload function.
		//adds the image to the div
		$('#featImgB').html('<img src="'+featMed+'" height="444" width="960" alt="" />');
		$('#featImgB').fadeToggle(350, function() {//fades it in
			//changes the src of the original image once fade is complete
			$('#featImgID').attr('src',featMed);
			$('#featImgID').load(function() {
				 //once original image has been replaced, remove new image wrapper
				$('#featImgB').remove();
				$('#featImgID').unbind('load');
				$('.loader').remove();
			});
		});
	}
	//loads img. Calls preloader
	imgFade.src=featMed;
}
function navControls() {
	$("#xtraImages a, #navControls a").unbind('click');
	//displays the controls
	$('#navControls').fadeToggle(350);
	//current image ID
	var currentImg=$('#featImgA').attr('imgID');
	//sets the current border
	$currTmb=$('#xtraImages').children('#tmb_'+currentImg);
	$currTmb.toggleClass('currentTmb');
	//num of images
	var numOfImages = $('#xtraImages').children('a').length;
	//array of each button
	var tmbImages=$("#xtraImages a").toArray();
	//the current position of the active button
	var clickIndex;
	$("#xtraImages a").each(function(i) {//determines what the current Num is
		if($(this).attr('id')==$currTmb.attr('id')){
			clickIndex=i;
		}				 
	});
	var nextImgIndex;
	$('#navControls a').click(function() {
		if($(this).attr('id')=='next') {
			if(clickIndex+1<numOfImages) {
				nextImgIndex=clickIndex+1;
			}else{
				nextImgIndex=0;
			}
		} else if($(this).attr('id')=='previous') {
			if(clickIndex-1<0) {
				nextImgIndex=numOfImages-1;
			}else{
				nextImgIndex=clickIndex-1;
			}
		}
		$(tmbImages[clickIndex]).toggleClass('currentTmb');
		$(tmbImages[nextImgIndex]).toggleClass('currentTmb');
		var tmbImgURL=$(tmbImages[nextImgIndex]).attr('href');
		$('#topDisplay').append('<div class="loader"><img src="media/loader3.gif" width="32" height="32" /></div>');
		$(tmbImages[nextImgIndex]).append('<div class="loader"><img src="media/loader3.gif" width="32" height="32" /></div>');
		tmbImgURL=tmbImgURL.split('?');
		var featMed=tmbImgURL[0];
		var featFull=tmbImgURL[1];
		fadeMed(featMed);
		clickIndex=nextImgIndex;
		return false;
	});
	$('#xtraImages a').click(function() {
		$('#topDisplay').append('<div class="loader"><img src="media/loader3.gif" width="32" height="32" /></div>');
		$(this).append('<div class="loader"><img src="media/loader3.gif" width="32" height="32" /></div>');
		//mark as current
		$(tmbImages[clickIndex]).toggleClass('currentTmb');
		$(this).toggleClass('currentTmb');
		$currTmb=$(this);
		$("#xtraImages a").each(function(i) {//determines what the current Num is
			if($(this).attr('id')==$currTmb.attr('id')){
				clickIndex=i;
			}				 
		});
		//get img href
		var tmbImgURL=$(this).attr('href');
		tmbImgURL=tmbImgURL.split('?');
		var featMed=tmbImgURL[0];
		fadeMed(featMed);
		return false;
	});
}