var $j = jQuery.noConflict();
$j(document).ready(function() {
	$j("#aboutus" ).hide();
	$j('#ourDetails').hide();
	$j('#hidden').hide();
	$j('#hiddenWrapper').css("display", "block");
	
	checkColorSet();
	assignColor();
	
	calcbottomHeight();
	startShowreel();
	startOurWorkNav();
});

/*******************************************************************************/
/***Function for reading the cookie, thats value determines the color scheme ***/
/*******************************************************************************/
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

/************************************************************************/
/***Function that is called every time the window of a page is resized***/
/************************************************************************/
$j(window).resize(function() {
	calcbottomHeight();
});

/******************************************************************************/
/***Function for checking that a color has been set. If not, it resets color***/
/******************************************************************************/
function checkColorSet(){
	var color = readCookie('color');
	if (color == null){
		resetColor();
	}
}

/****************************************/
/***Function for reseting color scheme***/
/****************************************/
function resetColor(){
	var n = 1;//(Math.floor(Math.random()*4))+1;
	
	switch(n)
	{	
		case 1://orange
			document.cookie = "color=orange; path=/";
			document.cookie = "color1=#fcca80; path=/";
			document.cookie = "color2=#f79421; path=/";
			document.cookie = "color3=#fa7c00; path=/";
			document.cookie = "colorLink=red; path=/";
			document.cookie = "link=#ea3e33; path=/";
			break;
		case 2://blue
			document.cookie = "color=blue; path=/";
			document.cookie = "color1=#a1bde3; path=/";
			document.cookie = "color2=#426eb6; path=/";
			document.cookie = "color3=#124498; path=/";
			document.cookie = "colorLink=orange; path=/";
			document.cookie = "link=#f79421; path=/";
			break;
		case 3://purple
			document.cookie = "color=purple; path=/";
			document.cookie = "color1=#ba9bc9; path=/";
			document.cookie = "color2=#673996; path=/";
			document.cookie = "color3=#41196b; path=/";
			document.cookie = "colorLink=orange; path=/";
			document.cookie = "link=#f79421; path=/";
			break;
		case 4://red
			document.cookie = "color=red; path=/";
			document.cookie = "color1=#f7a8a7; path=/";
			document.cookie = "color2=#ea3e33; path=/";
			document.cookie = "color3=#ce0f03; path=/";
			document.cookie = "colorLink=orange; path=/";
			document.cookie = "link=#f79421; path=/";
			break;
	}
}

function setCurrent(pageID){
	$j(pageID).addClass('current');
}

/**************************************************************************/
/***Function for assigning a colour scheme to all areas of the website. ***/
/**************************************************************************/
function assignColor(){
	var color = readCookie('color'); 
	var color1 = readCookie('color1');
	var color2 = readCookie('color2');
	var color3 = readCookie('color3');
	var colorLink = readCookie('colorLink');
	var link = readCookie('link');

	$j('#top').css("background-image", "url(/images/backgroundimages/topbanner"+color+".jpg)");
	$j('#topWrapper').append('<a href="/index.php"><img id="logo" src="/images/Logos/LABretecLogo'+color+'.png" alt="the Lab Logo"/></a>');
	$j('.current').css("color", color2);
	$j("#navigation a").hover(function (){ $j(this).css("color", color2); }, function (){$j(this).css("color", "#000"); $j('.current').css("color", color2);});
	document.getElementById('bullet1').src = "/images/icons/bullet"+color+".png";
	document.getElementById('bullet2').src = "/images/icons/bullet"+color+".png";
	document.getElementById('bullet3').src = "/images/icons/bullet"+color+".png";
	$j('#pageHeader').css("background-color", color1);
	$j('#banner').css("background-color", color1);
	$j('#previous a').css("color", color3);
	$j('#bottom').css("background-color", color2);
	$j('#latestTweet').css("color", color1);
	$j('.link').css("color", link);
	$j('#tweet').css("background-color", color3);
	$j('#twitter_update_list span a').css("color", link);
	$j('#fadedLogoHolder').append('<img id="fadedLogo" src="/images/Logos/LABLogo'+color+'DARK.png" alt="the Lab Logo" width="200" height="200"/>');
	$j('#pagingLeft').append('<img src="/images/showreel/showreel'+colorLink+'circle.png"/>');
	$j('#pagingRight').append('<img src="/images/showreel/showreel'+colorLink+'wrap.png"/>');
	$j('#pagingMid').css("background", "url(/images/showreel/showreel"+colorLink+"middle.png) repeat-x");
	$j('#equationTextHolder').append('<img id="equationText" src="/images/equation/equation'+colorLink+'.png" alt="equation characters"/>');
	$j('.contentText1 a').css("color", link);
	$j('#labPosts a').css("color", link);
	$j('#sidebarWrapper').css("background-color", color1);
	$j('#imageSliderLeft').append('<img src="/images/icons/'+color+'left.png"/>');
	$j('#imageSliderRight').append('<img src="/images/icons/'+color+'right.png"/>');
	$j('.bannerTitle').append('<img id="showHide" src="/images/icons/'+color+'down.png"/>');
}

/***********************************************************************/
/***Function for calculating and adjuting the bottom area of the page***/
/***********************************************************************/
function calcbottomHeight(){
	var contentHeight = $j('#contentArea').height();
	$j('#sidebarWrapper').css("height", contentHeight);
	
	var bottomTop = $j('#bottom').offset().top;
	var windowHeight = $j(window).height();
	var h = 145;
	
	if (windowHeight <= (bottomTop+145)){
		h = 145;
	}
	else{
		h = windowHeight - bottomTop;
	}
	
	$j('#bottom').css("height", h + "px");
	$j('#tweet').css("height", (h-95) + "px");
}

/****************************************************/
/***Function to toggle hidden area hover functions***/
/****************************************************/
function bannerHover(){
	$j('.bannerTitle').css("color", "#666");
	document.getElementById('showHide').src ="/images/icons/"+readCookie('color')+"down.png";
}

function bannerHoverOff(){
	$j('.bannerTitle').css("color", "#000");
	document.getElementById('showHide').src ="/images/icons/"+readCookie('color')+"right.png";
}

/**************************************************************/
/***Functions to show the meet the team and sneak peek areas***/
/**************************************************************/
var c = 0;
function showMeetTheTeam(){
	if (c==0){
		//document.getElementById('showHide').src = "/images/icons/"+readCookie('color')+"up.png";
		c = 1;
		setMeetTheTeamImages(0);
		
	} else {
		//document.getElementById('showHide').src = "/images/icons/"+readCookie('color')+"down.png";
		c = 0;
		}
	$j('#hidden').animate({ height: "toggle" }, 600 );
}

function showSneakPeek(){
	if (c==0){
		c = 1;
		changeHiddenImage(0);
	} else {
		c = 0;
		}
	$j('#hidden').animate({ height: "toggle" }, 600 );
}

/*********************************************************************/
/***Function to change what image appears in the meet the team area***/
/*********************************************************************/
function setAboutus(number,name, info){
	setMeetTheTeamImages(number);
	document.getElementById('aboutusName').innerHTML = name;
	document.getElementById('aboutusInfo').innerHTML = info;
}

function setMeetTheTeamImages(num){
	if(num > 0){
		document.getElementById('imgTopLeft').src = "images/meettheteam/Howard/howard" + num + ".jpg";
		document.getElementById('imgTopMid').src = "images/meettheteam/Elaine/elaine" + num + ".jpg";
		document.getElementById('imgTopRight').src = "images/meettheteam/Mark/mark" + num + ".jpg";
		document.getElementById('imgMidLeft').src = "images/meettheteam/Paul/paul" + num + ".jpg";
		document.getElementById('imgMid').src = "images/meettheteam/Simon/simon" + num + ".jpg";
		document.getElementById('imgMidRight').src = "images/meettheteam/Will/will" + num + ".jpg";
		document.getElementById('imgBottomLeft').src = "images/meettheteam/Gary/gary" + num + ".jpg";
		document.getElementById('imgBottomMid').src = "images/meettheteam/Chris/chris" + num + ".jpg";
		document.getElementById('imgBottomRight').src = "images/meettheteam/Jessi/jessi" + num + ".jpg";
		
		positionAboutus(num);
	}
	else{
		document.getElementById('imgTopLeft').src = "images/meettheteam/Howard/howard1.jpg";
		document.getElementById('imgTopMid').src = "images/meettheteam/Elaine/elaine2.jpg";
		document.getElementById('imgTopRight').src = "images/meettheteam/Mark/mark3.jpg";
		document.getElementById('imgMidLeft').src = "images/meettheteam/Paul/paul4.jpg";
		document.getElementById('imgMid').src = "images/meettheteam/Simon/simon5.jpg";
		document.getElementById('imgMidRight').src = "images/meettheteam/Will/will6.jpg";
		document.getElementById('imgBottomLeft').src = "images/meettheteam/Gary/gary7.jpg";
		document.getElementById('imgBottomMid').src = "images/meettheteam/Chris/chris8.jpg";
		document.getElementById('imgBottomRight').src = "images/meettheteam/Jessi/jessi9.jpg";
	}
}

function positionAboutus(number){
	var remainderX = (number%3);
	var remainderY;
	
	if (remainderX == 0){
		remainderX = 3;
	}
	
	if (number <= 3){remainderY = 3;}
	else if (number > 3 && number <=6){remainderY = 2;}
	else{ remainderY = 1;}
	
	xPos = (166*remainderX)-63;
	yPos = (166*remainderY)-83;
	
	$j('#aboutus').css("bottom", yPos);
	$j('#aboutus').css("left", xPos);
	
	$j('#aboutus').show();
}

/******************************************************************/
/***Function to change what image appears in the sneak peek area***/
/******************************************************************/
function changeHiddenImage(num){
	switch(num)
	{
		case 0:
			document.getElementById('hiddenImage').src = "images/ourwork/sneakpeek/main1.jpg";
			break;
		case 1:
			document.getElementById('hiddenImage').src = "images/ourwork/sneakpeek/main2.jpg";
			break;
		case 2:
			document.getElementById('hiddenImage').src = "images/ourwork/sneakpeek/main3.jpg";
			break;
	}
}

/******************************************************************/
/***Function for starting, rotating and controlling the showreel***/
/******************************************************************/
function startShowreel(){
	//Show the paging and activate its first link
	$j(".paging").show();
	$j(".paging a:first").addClass("active");

	//Get size of the image, how many images there are, then determin the size of the image reel.
	var imageWidth = $j(".viewport").width();
	var imageSum = $j(".imageReel img").size();
	var imageReelWidth = imageWidth * imageSum;

	//Adjust the image reel to its new size
	$j(".imageReel").css({'width' : imageReelWidth});
	
	//Paging  and Slider Function
	rotate = function(){
		var triggerID = $jactive.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

		$j(".paging a").removeClass('active'); //Remove all active class
		$jactive.addClass('active'); //Add active class (the $jactive is declared in the rotateSwitch function)

		//Slider Animation
		$j(".imageReel").animate({
			left: -image_reelPosition
		}, 500 );

	}; 

	//Rotation  and Timing Event
	rotateSwitch = function(){
		play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
			$jactive = $j('.paging a.active').next(); //Move to the next paging
			if ( $jactive.length === 0) { //If paging reaches the end...
				$jactive = $j('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 7000); //Timer speed in milliseconds (7 seconds)
	};

	rotateSwitch(); //Run function on launch
	//On Hover
	$j(".imageReel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation timer
	});	

	//On Click
	$j(".paging a").click(function() {
		$jactive = $j(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation timer
		return false; //Prevent browser jump to link anchor
	});
}

/*************************************************************************/
/***Function for starting, rotating and controlling the ourwork nav bar***/
/*************************************************************************/
function startOurWorkNav(){
	var counter = 0
	//Get size of the image, how many images there are, then determin the size of the image reel.
	var imageWidth = 180;
	var imageSum = $j(".imageSlider img").size();
	var imageReelWidth = imageWidth * imageSum;

	//Adjust the image reel to its new size
	$j(".imageSlider").css({'width' : imageReelWidth});
		

	//On Click
	$j(".imageSliderLeft a").click(function() {
		counter--;
		if (counter < 0){
			counter = 0;
		}
		$j(".imageSlider").animate({
			left: (imageWidth*counter*-1)
		}, 500 );
		//alert(counter);
		return false; //Prevent browser jump to link anchor
	});
	
	$j(".imageSliderRight a").click(function() {
		counter++;
		if (counter > imageSum - 4){
			counter = imageSum - 4;
		}
		$j(".imageSlider").animate({
			left: (imageWidth*counter*-1)
		}, 500 );
		//alert(counter);
		return false; //Prevent browser jump to link anchor
	});
}