var divArray = new Array();
var smallDivArray= new Array();
var divNumber=0;
var imagePadding=0;
var animationSpeed=800;  //this is the speed of the animation
var waitInterval=5000;


var currentImage=0;
var previousImage=0;

var currentImageBorder="1px solid #c1c1c1";
var currentImagePadding="2px";
var currentImageBgColor="#fff";

var allImageStyle="1px solid #c1c1c1";

//*********Please change these settings if you have made some changes in the HTML or CSS files!************
var imageWidth=586;   //this is the width of a single image

var timer=-1;

$(function(){
getAllDivs();

setDefaultWidth();
setSlider();
setCurrentStyle();

timer = window.setInterval("moveLeft()", waitInterval);
});

/**
 *	Gets all the divs that have to be shown in the slider and fills them in an array.
 */
function getAllDivs(){
	//fill the big image divs in an array
	$(".imageHolder").each(function(i){
		divArray[i]=$(this);
		divNumber++;
	});
	
	//fill the small image divs in an array
	$(".smallImageHolder").each(function(i){
		smallDivArray[i]=$(this);
	});
}

function wait(){
	window.clearInterval(timer);
	timer=window.setInterval("moveLeft()", waitInterval);
}

/**
 *	Moves the image wrapper to the right.
 */
function moveRight(){
	if(currentImage>0){
		$(".wrapper ul").animate({marginLeft:"+="+animationLength*currentImage}, animationSpeed);
	}
}

/**
 *	Moves the image wrapper to the left.
 */
function moveLeft(){
	if(currentImage<divNumber-1){
		currentImage++;
		$(".wrapper ul").stop().animate({marginLeft:-animationLength*(currentImage)}, animationSpeed);
		setStyle(currentImage-1);
		
	}else{
		$(".wrapper ul").stop().animate({marginLeft:0}, animationSpeed);
		currentImage=0;
		setStyle(divNumber-1);
	}
}

function setStyle(previous){
	$(".smallImageWrapper img").eq(previous).css({border:allImageStyle, padding:"0px"});
	$(".smallImageWrapper img").eq(currentImage).css({border:currentImageBorder, padding:currentImagePadding, backgroundColor:currentImageBgColor});
}

function setCurrentStyle(){
	$(".smallImageWrapper img").eq(currentImage).css({border:currentImageBorder, padding:currentImagePadding, backgroundColor:currentImageBgColor});
}


/**
 *	This is the main function. It sets click event handlers to the arrows to animate the divs.
 */
function setSlider(){
	
	//set a click event handler for the right gradient 
	$("#rightArrow").click(function(){	
		moveLeft();
		window.clearInterval(timer);
		timer=window.setInterval("wait()", waitInterval);
	});
	
	$(".smallImageWrapper img").each(function(i){
		$(this).click(function(){
		var previous=currentImage;
		currentImage=i;
		window.clearInterval(timer);
		$(".wrapper ul").stop().animate({marginLeft:-animationLength*(currentImage)}, animationSpeed);
		setStyle(previous);
		timer=window.setInterval("wait()", waitInterval);
		});
	});

	
	$(".smallImageWrapper img").mouseover(function(){	
		$(".smallImageWrapper img").css({cursor:"pointer"});
	});
}

/**
 *	Sets the width of a single div and the width of the div wrapper.
 */
function setDefaultWidth(){
	var allDivsWidth=0;	
	
	imagePadding=0;
	$(".imageHolder").css({paddingLeft:imagePadding+"px", paddingRight:imagePadding+"px"});
	allDivsWidth=divNumber*(2*imagePadding+imageWidth+2);
	
	//set the width of the wrapper div
	$(".wrapper ul").css({width:allDivsWidth+"px"});
	
	var marginLeft=0;
	
	//initial position of the images
	$(".wrapper ul").animate({marginLeft:"-="+marginLeft},1);
	
	animationLength=imageWidth;
}