// JavaScript Document

$(document).ready(function(){
	
	$('#mainImages').cycle({ 		//this cycles through the main images on the homepage
		fx: 	'fade', 			//this is the type of transition of the images
		speed:  500,				//this is how long (in milliseconds) the transition takes to complete
		timeout: 8000,				//this is how long in between cycles
		prev:	'.prev',			//this assigns the previous arrow button with it's class name
		next:	'.next',			//this assigns the next arrow button with it's class name
		before: before,				//this is the function that runs before the transaction takes place
		after: 	mainImageCarousel	//this is the function that runs after a transition has taken place
	});
	
	//the photoLink area displays a random image on page load and refresh
	var photoNum = $('div.photoLink img').size(); //find out how many photos are in the HTML
	var randomNum = Math.floor(Math.random()*photoNum +1); //this generates a random number based on how many photos there are   
	$('img.photoLink1, img.photoLink2, img.photoLink3, img.photoLink4').css("display","none"); //there are only 2 photos here now, but this shows you can add as many as you like. Don't display any.
	$('img.photoLink'+randomNum).css("display","block"); //display a random photo
	
	//we are looking for div's with a class of programSpotlight. For each one we find, we increment our counter. Now we know how many program spotlights we have dynamically.
	var programSpotlight = 0;
	$('div.programSpotlight').each(function(){
		programSpotlight++;
	});
	
	//a random program will be displayed on page load and refresh
	programSpotlight = Math.floor(Math.random()*programSpotlight+1); //generate a random number based on the number of program spotlights we have
	
	$('div.spotlight_1, div.spotlight_2, div.spotlight_3, div.spotlight_4').css("display","none"); //don't display any of them
	$('div.spotlight_' + programSpotlight).css("display","block"); //only display 1. A random one. 

});

function before()
{
	$(".text1, .text2, .text3, .text4, .text5").css("display","none");	//don't show any of the text for the images
	$(".info1, .info2, .info3, .info4, .info5").css("display","none");	//don't show any of the info for the images
}


function mainImageCarousel(a) //this funtion runs after the main image completes a transition
{	
	var photoIndex = $(this).index()+1;	//the index of the current image that is visible

	if($.browser.msie) 
	{
		$(".text" + photoIndex).css("display","block");	//display the current text for the image that is displayed
		$(".info" + photoIndex).css("display","block");	//display the current info for the image that is displayed
	}
	else
	{
		$(".text" + photoIndex).fadeIn(500);//display the current text for the image that is displayed
		$(".info" + photoIndex).fadeIn(500);//display the current info for the image that is displayed
	}
}