// Declaring Variables

var PhotoFrame = null; // Div that holds the div that holds all the photos
var NumberList = null; // <ul> that holds the clickable number for each photo
var NumberListItems = null; //each <li> in the NumberList
var PhotoSlider = null; // The div that holds all the large photos
var PhotoCount = 0;  // The number of large photos in the promo
var PhotoHeight = 0; // The height of each individual photo
var PhotoCurrent = 0; //The current item being displayed
var AutoRotateInterval = 1;
var AutoRotateSpeed = 5000;

//when the document has loaded...
$(document).ready(function(){
	
	//finds these HTML elements in the DOM
	PhotoFrame = $("div#largePhotos > div");
	NumberList = $("ul#largePhotoLinks");
	PhotoSlider = $("div#largePhotos > div > div");
	PhotoHeight = PhotoFrame.height();
	
	
	//get the number of photos in the promo
	PhotoCount = $("div#largePhotos p").size();
			 
	//create the numbers <li>s in the <ul>
	for (i = 1; i <= PhotoCount; i++) {
		NumberList.append("<li>" + i + "</li>");
	}
	
	//now that the <li>s have been created, we can create this reference to them
	NumberListItems = NumberList.children();
	
	
	//make the numbers clickable
	NumberListItems.click(function(){
		SetPhoto(NumberListItems.index(this));					 
	});
	
	
	//pause the interval when the mouse is over the photo, and unpause it when the mouse is out
	PhotoFrame.hover(StopAutoRotate, StartAutoRotate);
	
	SetPhoto(0);
	StartAutoRotate()
});





//function to animate to the chosen photo
function SetPhoto(PhotoIndex) {
	//if no photo number is specified, go to the next photo
	//if there is no next photo, go to the first photo
	if (PhotoIndex == null) {
		PhotoIndex = PhotoCurrent + 1;
		if (PhotoIndex >= PhotoCount) {
			PhotoIndex = 0;
		}
	} else {
		StopAutoRotate();
	}
	
	//move the div with all the the promo photos to the correct position
	PhotoSlider.animate({top: PhotoIndex * PhotoHeight * -1}, 500);
	
	//bold the number of the visible promo photo
	NumberListItems.removeClass("current");
	NumberListItems.eq(PhotoIndex).addClass("current");
	
	//we use this variable to remember which photo is currently displayed
	PhotoCurrent = PhotoIndex;
}




//function to rotate regularly on interval
function StartAutoRotate() {
	AutoRotateInterval = self.setInterval("SetPhoto()",AutoRotateSpeed);
}

//function to stop the interval
function StopAutoRotate() {
	AutoRotateInterval = window.clearInterval(AutoRotateInterval);
}