var slideWidth = 598;
var slideSpeed = 1500;
//jQuery.easing.def = "easeInOutElastic";
var ease = "easeInOutExpo";

var currentSlide = 0;
var maxSlide = 3;

$(document).ready(function(){
	
	$("#slider ul li img").hide();
	$("#slider ul li img:first").show();
	$("#slider ul li a:first").addClass("ON"); 								//Add the class ON to the first link
	
	/*uncomment the block below to reenable to the click functionality for the links to the left of the image.*/
	/*
	$("#slider ul li a").click(function(){ 											//Click functions for the links
		var index = this.id.replace('slide','');									//The classes on the links are slide0 - slide4, I'm removing the word slide so that we have the slide number to work with
		$("#slidebox").animate({right: slideWidth * index}, slideSpeed, ease);		//Create the onclick a
		switchButtons(index);														//Call the switchButtons() function
		currentSlide = index;														//set the currentSlide var to the current index so that the timed animation will go to the next slide after the one clicked.
		return false;
	});
	*/
	
	// hover for left links
	$("#slider ul li a").hover(
		function()
		{ 																
			var index = this.id.replace('slide','');					//The classes on the links are slide0 - slide4, I'm removing the word slide so that we have the slide number to work with
			$("#slidebox").animate({right: slideWidth * index},0);		//Create the onclick a
			switchButtons(index);										//Call the switchButtons() function
			currentSlide = index;										//set the currentSlide var to the current index so that the timed animation will go to the next slide after the one clicked.
		},
		function() {}
	);

	
	
	autoAnimate();														//Call the autoAnimate() function to start the timer
	
	$("#slider").hover(
		function(){
			$("#slider").stopTime();									//Stop the animation on hover
		},
		function(){
			autoAnimate();												//resume the animation on mouse out
		}
	);
	
	
});

function autoAnimate()
{
	$("#slider").everyTime(8500,function(){
				currentSlide = nextSlide(currentSlide);
				$("#slidebox").animate({right: slideWidth * currentSlide}, slideSpeed, ease);
				switchButtons(currentSlide);
			});
}

function nextSlide(cs)
{
	if (cs ==  maxSlide) {
		cs = 0;}
	else {
		cs++;}
	return cs;
}

function switchButtons(n)												//This function controls the display of the left hand buttons when the the slides change
{
	$("#slider ul li img").hide();										//hide all of the arrows
	$("#slider ul li:eq("+n+") img").show();							//show the arrow for the link for the current slide
	$("#slider ul li a").removeClass("ON");								//remove all of the ON class from the left hand links
	$("#slider ul li:eq("+n+") a").addClass("ON");						//Add the ON class to the link for the current slide
}