// JavaScript Document

var photoInterval = 5000; //the amount of time in between photo transitions
var transitionInterval = 500; //the amount of time it takes for the photos to transition to the next
var $index; //the index of the current photo (Zero based)

var $active; 
var $next;

$(document).ready(function() { 
	
	
	//IE 6 sucks!
	if($.browser.msie && $.browser.version=="6.0") 
	{
		$('#pageDot').css("display","none");
	}
	else
	{
		$('#pageDot').css("display","block");
	}
	
	
	//call the photoSwitch function based on the time set in the variable interval.
	var timer = setInterval( "photoSwitch()", photoInterval);	
	
	
	$('#pageDot li').click(function() {
		
		clearTimeout(timer);
		
		$active = $('#slideshow img.active'); 
		$index = $("#pageDot li").index($(this));	  
		$next = $('#slideshow img').eq($index);

	  	$active.addClass('lastActive');

		//add the active class and fade in the photo
		$next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, transitionInterval, function() {
			//remove the classes that were assigned																				
			$active.removeClass('active lastActive');

			//remove the active class from all of the circles
			$('#pageDot > li').css("background-position", "0 0");
			
			//apply the active class to the circle that corresponds to the active photo
			$('#pageDot li.pageDot' + $index).css("background-position", "0 -11px");
				
			//change the photo text for the new image
			$('#photoText > p').css("display", "none");
			
			//display the text that will be overlayed on the main image
			$('#photoText p.photo' + $index).css("display", "block");
  
		});	
		
	});
});
	

function photoSwitch() 
{
	//assign the active class to the current photo
	$active = $('#slideshow img.active'); 
	//assign the first image to next if the end of the loop has reached
	$next =  $active.next().length ? $active.next(): $('#slideshow img.first');
	//make the active class the lastActive class
	$active.addClass('lastActive');

	//add the active class and fade in the photo
	$next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, transitionInterval, function() {
		//remove the classes that were assigned																				
		$active.removeClass('active lastActive');

		//get the index of the active slide
		$index = $("#slideshow img").index($(".active"));

		//remove the active class from all of the circles
		$('#pageDot > li').css("background-position", "0 0");
		
		//apply the active class to the circle that corresponds to the active photo
		$('#pageDot li.pageDot' + $index).css("background-position", "0 -11px");
			
		//change the photo text for the new image
		$('#photoText > p').css("display", "none");
		
		//display the text that will be overlayed on the main image
		$('#photoText p.photo' + $index).css("display", "block");
   	});
}