/**
 * This file contains the functionality for the image fader on the home page.
 * 
 * Author: Pexeto
 * http://pexeto.com/
 */


var perception_fader={
	divNumber:0,
	imgArray:new Array(),
	navArray:new Array(),
	currentImage:0,
	selectedImage:0,
	waitInterval:5000, //this is the interval between each fade
	fadeSpeed:2000,  //this is the speed of the fade action
	selectFadeSpeed:1000,
	timer:-1,
	
	init:function(){
		this.getAllDivs();
		this.setFader();
		this.setClickHandlers();
		this.setLinks();
		this.timer = window.setInterval(function(){perception_fader.fade();}, this.waitInterval);
	},

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

		$('#fader').append('<div id="fader_navigation"><ul></ul></div>');
		
		var html = '';
		// fill the divs in an array
		$(".fade_holder img").each(function(i) {
			perception_fader.imgArray[i] = $(this);
			perception_fader.divNumber++;
			if (i !== 0) {
				html += '<li><a href="#"></a></li>';
			} else {
				html += '<li class="selected"><a href="#"></a></li>';
			}
		});
		
		$("#fader_navigation ul").append(html);
		this.navArray=$("div#fader_navigation ul li");
	},
	
	/**
	 *	Makes all the images invisible.
	 */
	setFader : function(){
		for(var i=1; i<this.divNumber; i++){
			this.imgArray[i].css({display:"none"});
		}
	},
	
	setClickHandlers : function(){
		$("#fader_navigation ul li a").each(function(i){	
			$(this).click(function(event){
				event.preventDefault();
				window.clearInterval(perception_fader.timer);
				perception_fader.selectedImage=i;
				perception_fader.fadeSelected();	
				perception_fader.timer = window.setInterval(function(){perception_fader.fade();}, perception_fader.waitInterval);
			});		
		});
	},
	
	fadeSelected: function(){
		var img=this.imgArray[this.currentImage];
		img.fadeOut(this.selectFadeSpeed);
		
		var navLi=$(this.navArray[this.currentImage]);
		navLi.removeClass("selected");
				
		img=this.imgArray[this.selectedImage];
		img.fadeIn(this.selectFadeSpeed);
		
		navLi=$(this.navArray[this.selectedImage]);
		navLi.addClass("selected");
		
		this.currentImage=this.selectedImage;
	},
	
	setLinks:function(){		
		$('.fade_holder').click(function(){
			var link=$(this).find("a").attr("href");
				if(link!=null){
					location.href=link;
				}
		});
		
		$('.fade_holder').mouseover(function(){
			$(this).css({cursor:"pointer"});		
		});
		
	},
	
	/**
	 *	The whole fading is performed here.
	 */
	fade:function(){
		var img=this.imgArray[this.currentImage];
		img.fadeOut(this.fadeSpeed);
		
		var navLi=$(this.navArray[this.currentImage]);
		navLi.removeClass("selected");
		
		if(this.currentImage<this.divNumber-1){
			img=this.imgArray[this.currentImage+1];
			navLi=$(this.navArray[this.currentImage+1]);
			this.currentImage++;
		}else{
			img=this.imgArray[0];
			navLi=$(this.navArray[0]);
			this.currentImage=0;
		}
			
		img.fadeIn(this.fadeSpeed);
		navLi.addClass("selected");
	}
		
};