// JavaScript Document

var photoGalleryPhoto = 1;
var timer;
var time = 3500; //the time in milliseconds between the cycles of the main image and it's contents
var newIndex = 0; //the current thumbnail/image
var thumbnailClicked = false;

$(document).ready(function() { 	
	
	//display the thumbnails (will not show when JS is turned off)
	$('ul#thumbnails').css("display","block");
	
	//start the timer
	clearTimeout(timer);
	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);

		//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 border from all thumbnails
		$('#thumbnails > li a').removeClass("activeThumb");
		
		//add a border to the current thumbnail
		$(this).addClass("activeThumb");
		
		//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;
	});
	
	
	//Pause the main image from rotating when the image or the thumbnails are hovered over. Resume the cycle after the hover
	$("#mainImage img, #thumbnails li a").hover(
		function()
		{
			clearTimeout(timer);
		},
		function() 
		{	
			//a thumbnail has only been hovered over, not clicked...reset the cycle
			if(thumbnailClicked == false)
			{
				clearTimeout(timer);
				timer = setTimeout("timedCount()",time); 
			}
		}
	);
	
	
//	/***************************************************************/
//	/*  This jQuery function rotates the images                    */
//	/*  in the Photo Gallery tab.                                  */
//	/***************************************************************/
//
//	$("#photoGallery").jCarouselLite({btnPrev: ".galleryLeft", btnNext: ".galleryRight", visible: 1});
	

	if($.browser.msie && $.browser.version=="6.0") 
	{
		$("#globalNav ul li").hover(
		  function () {
			$(this).addClass("hover");
		  }, 
		  function () {
			$(this).removeClass("hover");
		  }
		);
		
		$("#home #leftNav ul li").hover(
		  function () {
			$(this).addClass("hover");
		  }, 
		  function () {
			$(this).removeClass("hover");
		  }
		);
		
		$("ul#largeButtons li").hover(
		  function () {
			$(this).addClass("hover");
		  }, 
		  function () {
			$(this).removeClass("hover");
		  }
		);
		
		//some ie6 housekeeping
		$("#home #slideshow li").css("position","relative").css("zoom","1").css("height","176px").css("width","290px");

		$("#home #leftNav").css("position","absolute").css("left","0px").css("top","0px").width("313px").css("z-index", "2000").css("zoom","1").css("display","block");
		$("#mainImage").css("margin-left","313px");
		$("#photoInfo").css("margin-left","155px").width("567px");
		
		$("#photoGalleryContent").css("position","absolute").css("zoom","1").css("z-index","1000").css("display","block");
		$("#photoGalleryContent p").css("position","absolute").css("zoom","1").css("z-index","1000");
		
		$("#photoGallery a").css("position","absolute").css("top","0px").css("left","0px").css("zoom","1").css("z-index","2000").css("display","block").width("19px").height("16px");
		$("#photoGallery a img.galleryLeft").css("position","absolute").css("top","250px").css("left","20px").css("zoom","1").css("z-index","2000").css("display","block").width("19px").height("16px");
		$("#photoGallery a img.galleryRight").css("top","250px").css("left","400px").css("position","absolute").css("zoom","1").css("z-index","2000").css("display","block").width("19px").height("16px");		
	}//end of IE6 if statement
	
	
	$('#leftNav ul li').css("position","relative").css("z-index","200");
});

	/***************************************************************/
	/*  This jQuery function controls the functionality of the     */
	/*  tabbedPanel on the homepage								   */
	/***************************************************************/

$(function(){
	// set all content containers to invisible
	$("#tabWrapper > div").css("display","none");
	// set active content container to visible
	$("#tabWrapper > div.active").css("display","block");
	$("#tabs li a").click(function()
	{
		// remove active class from currently visible content area
		$("#tabWrapper > div.active").removeClass("active");
		// get href attribute value from clicked link to determine which content area to make visible and set active class to that div
		$(("#tabWrapper > div"+$(this).attr("href"))).addClass("active");
		// make all content areas invisible
		$("#tabWrapper > div").css("display","none");
		// make new active content area visible
		$("#tabWrapper > div.active").css("display","block");
		// remove active class from old tab
		$("#tabs li.active").removeClass("active");
		// set active class to new tab based on the click
		$(this).parent().addClass("active");
		// prevent browser from scrolling to the div anchor
		return false;
	});
	
	
	
	/***************************************************************/
	/*  This function is used for the videos tab on the homepage.  */
	/*  When a small image is clicked on, it will update the large */
	/*  video. 													   */
	/***************************************************************/
			
	$('#videoImages img').click(function() {
										 
		var video = "";
		
		if($(this).attr("alt") == 'video image 1')
		{
			video = "<object width=\"316\" height=\"219\"><param name=\"movie\" value=\"http://www.youtube.com/v/TmsbpFchxXI&hl=en_US&fs=1&\"><param name=\"allowFullScreen\" value=\"true\"><param name=\"allowscriptaccess\" value=\"always\"><embed src=\"http://www.youtube.com/v/TmsbpFchxXI&hl=en_US&fs=1&\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"316\" height=\"219\"></embed></object><p>This is the text that goes along with the first video in the list.</p>";
		}
		else if($(this).attr("alt") == 'video image 2') 
			video = "<object width=\"316\" height=\"219\"><param name=\"movie\" value=\"http://www.youtube.com/v/4Fhd1QY6TtM&hl=en_US&fs=1&\"><param name=\"allowFullScreen\" value=\"true\"><param name=\"allowscriptaccess\" value=\"always\"><embed src=\"http://www.youtube.com/v/4Fhd1QY6TtM&hl=en_US&fs=1&\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"316\" height=\"219\"></embed></object><p>This is the text that goes along with the second video in the list.</p>";
		else  
			video = "<object width=\"316\" height=\"219\"><param name=\"movie\" value=\"http://www.youtube.com/v/UD-s1av7XSs&hl=en_US&fs=1&\"><param name=\"allowFullScreen\" value=\"true\"><param name=\"allowscriptaccess\" value=\"always\"><embed src=\"http://www.youtube.com/v/UD-s1av7XSs&hl=en_US&fs=1&\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"316\" height=\"219\"></embed></object><p>This is the text that goes along with the third video in the list.</p>";
		
		$('#largeVideo').html(video);
		
		return false;
	})
	
	
	
	/***************************************************************/
	/*  This function is used for the Photo Gallery tab on the     */
	/*  homepage. This is where the photo content goes. 		   */
	/***************************************************************/
	
	$('.galleryLeft').click(function() {					 
		photoGalleryPhoto--;
		
		if(photoGalleryPhoto < 1)
		{
			photoGalleryPhoto = $("#photoGallery li").length-2;
		}
		
		galleryText(photoGalleryPhoto);
	})
	
	
	$('.galleryRight').click(function() {					 
		
		if(photoGalleryPhoto >= $("#photoGallery li").length-2)
		{
			photoGalleryPhoto = 0;
		}
		
		photoGalleryPhoto++;
		
		galleryText(photoGalleryPhoto);
	})
	
	
	function galleryText(number)
	{
		$('#photoGalleryContent > p').css("display", "none");
		$('#photoGalleryContent p.galleryText'+number).css("display", "block");
	}
});


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);
	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");
	}

	//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");

	//change the photo text for the new image
	$('#photoInfo > p').css("display", "none");
	$('#photoInfo p.photo'+newIndex).css("display", "block");
	
	//make sure the left nav is still visible above the main image
	$('#leftNav ul li').css("position","relative").css("z-index","200");
}