var divArray = new Array();
var navArray = new Array();

var fadeDivNumber=0;
var currentFade=0;
var selectedFade=0;

var fadeWaitInterval=5000;  //this is the interval between each fade
var fadeSpeed=200;    //this is the speed of the fade action
var selectFadeSpeed=200;


var timer=-1;

jQuery(function(){
	getAllFaderDivs();
	if(fadeDivNumber>0){
		setFader();
		timer = window.setInterval("fade()", fadeWaitInterval);
		setClickHandlers();
		setArrowClickHandlers();
	}

});

/**
 *	Gets all the divs that have to be shown in the slider and fills them in an array.
 */
function getAllFaderDivs(){

jQuery("#sliderNavigation").append("<ul class=\"navUl\"></ul>");

	//fill the divs in an array
	jQuery(".singleFade").each(function(i){
		divArray[i]=jQuery(this);
		fadeDivNumber++;
		if(i!=0){
			jQuery(".navUl").append("<li><a href=\"#\"></a></li>");
		}else{
			jQuery(".navUl").append("<li class=\"selected\"><a href=\"#\"></a></li>");
		}
		
		navArray[i]=jQuery("ul.navUl li").eq(i);
	});
	
	if(fadeDivNumber>0){
		jQuery(".navUl li").mouseover(function(){
			jQuery(this).css({cursor:"pointer"});
		});
	}
}

/**
 *	Makes all the images invisible.
 */
function setFader(){
	for(var i=1; i<fadeDivNumber; i++){
		divArray[i].css({display:"none"});
	}
}

function setClickHandlers(){
	jQuery("ul.navUl li").each(function(i){	
		jQuery(this).click(function(){
			window.clearInterval(timer);
			selectedFade=i;
			fadeSelected();	
			timer = window.setInterval("fade()", fadeWaitInterval);
		});		
	});
}

function setArrowClickHandlers(){
	jQuery("#leftArrow").click(function(){
		if(currentFade!=0){
			window.clearInterval(timer);
			selectedFade=currentFade-1;
			fadeSelected();	
			timer = window.setInterval("fade()", fadeWaitInterval);
		}
	});
	
	jQuery("#rightArrow").click(function(){
		if(currentFade!=fadeDivNumber-1){
			window.clearInterval(timer);
			selectedFade=currentFade+1;
			fadeSelected();	
			timer = window.setInterval("fade()", fadeWaitInterval);
		}
	});
}

function fadeSelected(){
	var img=divArray[currentFade];
	img.fadeOut(selectFadeSpeed);
	
	var navLi=navArray[currentFade];
	navLi.removeClass("selected");
			
	img=divArray[selectedFade];
	img.fadeIn(selectFadeSpeed * 3);
	
	navLi=navArray[selectedFade];
	navLi.addClass("selected");
	
	currentFade=selectedFade;
}

/**
 *	The whole fading is performed here.
 */
function fade(){
	var img=divArray[currentFade];
	img.fadeOut(fadeSpeed);
	
	var navLi=navArray[currentFade];
	navLi.removeClass("selected");
	
	if(currentFade<fadeDivNumber-1){
		img=divArray[currentFade+1];
		navLi=navArray[currentFade+1];
		currentFade++;
	}else{
		img=divArray[0];
		navLi=navArray[0];
		currentFade=0;
	}
		
	//img.fadeIn(fadeSpeed * 3);
	setTimeout(function() { img.fadeIn(fadeSpeed * 3); }, fadeSpeed);
	navLi.addClass("selected");
}