// JavaScript Document

var timer;
var time = 5000; //the time (in milliseconds) between the cycles of the main image and its contents
var newIndex = 0; //the current thumbnail/image
var thumbnailClicked = false;
var cycle = true; 
var video, video0, video1, video2, video3;

$(document).ready(function() { 		
	$('.javascriptMsg').css("display","none");			   
		
	video0 = $("#videoURLs a.video0").attr("href");
	video1 = $("#videoURLs a.video1").attr("href");
	video2 = $("#videoURLs a.video2").attr("href");
	video3 = $("#videoURLs a.video3").attr("href");
	
	if($("#photoInfo p.photo0").hasClass("video"))
	{
		$('#ytplayer').css("display","block");
		//embed the video that shows up over the main image on the homepage
		var params = { allowScriptAccess: "always" };						
		swfobject.embedSWF(video0, "ytplayer", "400", "245", "8", null, null, params);
	}
	else
		$('#ytplayer').css("display","none");
	
	
	//display the thumbnails (will not show when JS is turned off)
	$('ul#thumbnails').css("display","block");
		
	$("#thumbnails li a.activeThumb img").css("width","108px").css("height","69px");
	
	clearTimeout(timer);
	//start the timer that controls how fast the thumbnails swap out the main image on the homepage
	if(cycle)
		timer = setTimeout("timedCount()",time);  
 
	//a thumbnail has been clicked
	$("#thumbnails li a").click(function()
	{
		//get the thumbnail that has been clicked
		var num = $("#thumbnails li a").index(this);
		
		loadVideo(num);

		//reset the z-index and opacity of all images to zero
		$('#mainImage img').css("z-index", "0").css("opacity", "0");
		
		//keep the current image viewable so the new image that was clicked on can fade into it
		$('.mainImg'+(newIndex)).css("opacity", "1");
		
		//put the current image on top
		$('.mainImg'+num).css("z-index", "1").animate({opacity:1}, 1000);

		//remove the activeThumb class from all thumbnails
		$('#thumbnails > li a').children('img').animate({'width':'59px','height':'38px'});
		
		$(this).children('img').animate({'width':'108px','height':'69px'},1500)
		
		//display the correct info for the current photo
		$('#photoInfo > p').css("display", "none");
		$('#photoInfo p.photo'+num).css("display", "block");
		
		//update the current thumbnail that has been clicked
		newIndex = num;
		
		//do not let the images cycle through once a thumbnail has been clicked on
		clearTimeout(timer);
		thumbnailClicked = true;
		
		return false;
	});


	//animate the arrows on the large buttons when they are hovered over
	$("ul#largeButton li").mouseover(function() { 
		$(this).stop().animate({backgroundPosition:"10px center"}, 250);
	}).mouseout(function(){
		$(this).stop().animate({backgroundPosition:"0px center"}, 250);
	})
	
	$("ul#largeButton li.lastLgBtn").css("border","none");


});


function timedCount()
{	
	//find the total number of thumbnails (and main images)
	var totalThumbs = $("#thumbnails li").length-1;

	//make sure this function gets called on a timer
	clearTimeout(timer);

	if(cycle)
		timer = setTimeout("timedCount()",time);
	
	//find the number of the active thumbnail
	newIndex = $("#thumbnails li a").index($("#thumbnails li a.activeThumb"))+1;

	//reset the z-index and opacity of all images to zero
	$('#mainImage img').css("z-index", "0").css("opacity", "0");

	//if the timer has reached the end of the thumbnails, reset it to zero
	if(newIndex > totalThumbs)
	{
		newIndex = 0;
		//make the last image viewable so the first one can fade into it
		$('.mainImg'+totalThumbs).css("opacity", "1");
	}
		
	if(newIndex > 0)
	{	
		//make the last image viewable so the new one can fade into it
		$('.mainImg'+(newIndex-1)).css("opacity", "1");
	}
	
	loadVideo(newIndex);

	//put the current image on top
	$('.mainImg'+newIndex).css("z-index", "1").animate({opacity:1}, 1000);
	
	//remove the active class from all thumbnails and apply it to the new one
	$("#thumbnails li a").removeClass("activeThumb");
	$("#thumbnails li a:eq("+newIndex+")").addClass("activeThumb");
	
	//remove the activeThumb class from all thumbnails
	$('#thumbnails > li a').children('img').animate({'width':'59px','height':'38px'});
	
	//animate the active thumbnail to it's new size
	$("#thumbnails li a:eq("+newIndex+") img").animate({'width':'108px','height':'69px'},1500);

	//change the photo text for the new image
	$('#photoInfo > p').css("display", "none");
	$('#photoInfo p.photo'+newIndex).css("display", "block");
}


	//if the youtube video is buffering(3) or playing(1), then stop the rotation of the thumbnails
	function onytplayerStateChange(newState) {
	   if(newState == 1 || newState == 3)
	   	clearTimeout(timer);
	}
	
	function onPlayerError(errorCode) {
			  alert("An error occurred: "+ errorCode);
			}
			
	function onYouTubePlayerReady(playerId) {
	  ytplayer1 = document.getElementById("ytplayer");
	  ytplayer1.addEventListener("onStateChange", "onytplayerStateChange");
	  ytplayer1.addEventListener("onError", "onPlayerError");
	}
	
	function play() {
	  if (ytplayer1) {
	ytplayer1.playVideo();
	  }
	}
	
	
	function loadVideo(index)
	{
		switch(index)
		{
			case 0:
			  video = video0;
			  break;
			case 1:
			  video = video1;
			  break;
			case 2:
			  video = video2;
			  break;
			case 3:
			  video = video3;
			  break;
		}
	
		//embed the video that shows up over the main image on the homepage
		var params = { allowScriptAccess: "always" };						
		swfobject.embedSWF(video, "ytplayer", "400", "245", "8", null, null, params);

		if($("#photoInfo p.photo"+index).hasClass("video"))
			$('#ytplayer').css("display","block");
		else
			$('#ytplayer').css("display","none");
	}