/*
you could use the following css as base:
#fader-container{position:relative;height:420px;width:940px; }
#fader-container ul#fader-list{ position:relative;height:420px;width:940px;list-style-type:none;list-style-image:none;margin:0px;padding:0px; }
#fader-container ul#fader-list li{ position:relative;height:420px;width:940px;list-style-type:none;list-style-image:none;margin:0px;padding:0px;overflow:visible; }


make sure you adjust the widths and heights to your needs
@author: mathijs@weide-ic.nl

*/

var fader = function(){
	/**
	* requires jquery 1.4
	* fade images over eachother.
	*/
	var thisObj = this;
	var containerSelector 	= 'div#slideshow-container';
	var listSelector 		= 'div#slideshow-container > ul#slider';
	var listItemsSelector 	= 'div#slideshow-container > ul#slider > li';
	var timeBetweenAnim = 5000;
	var fadeDuration = 1000;
	var height;
	var aantal;
	var current = 0;
	var t;
	var z = 100;
	var busy = false;
	this.init = function(){
		
		//height = $(listItemsSelector).outerHeight();
        height = 390;
		aantal = $(listItemsSelector).size();
		$('<div  id="slider-navigation"></div>').insertAfter(listSelector);
		$('<ul class="fader-nav"></ul>').appendTo('#slider-navigation');
		for(var i=0;i<aantal;i++){
			$('<li id="nav-'+i+'"><span>'+(i+1)+'</span></li>').appendTo(containerSelector+' #slider-navigation .fader-nav');
		}

        $("li#nav-0 span").text("Pallet pooling");
        $("li#nav-1 span").text("Pallet production");
        $("li#nav-2 span").text("FHG PAKi");
        $("li#nav-3 span").text("FHG EasyPal");
		
		$('#slider-navigation li').click(function(){
			thisObj.showSelect($(this).index('#slider-navigation li'));
		});
		$('#slider-navigation li:eq(0)').addClass('active');
		$(containerSelector).css({height: height+'px', overflow:'hidden'});
		$(listItemsSelector).not(listItemsSelector+':eq(0)').hide();
		thisObj.resetInterval();
	}
	
	this.resetInterval = function(){
		t = clearInterval(t);
		t = setInterval(function(){ thisObj.next(); }, timeBetweenAnim+fadeDuration);
	}
	
	this.next = function(){
		if(current<(aantal-1)) next = current+1;
		else next = 0;
		this.show(next);
	}
	
	this.show = function(number){
        if(!busy){
            $('#slider-navigation li.active').removeClass('active');
            $('#slider-navigation li:not(.devider):eq('+number+')').addClass('active');
			busy = true;
			$(listItemsSelector+':eq('+(current)+')').css('z-index', 1+z);
			$(listItemsSelector+':eq('+(number)+')').css('z-index', 2+z);
			//if(number > current) $(listItemsSelector+':eq('+number+')').css('top', '-'+height+'px');
			//else $(listItemsSelector+':eq('+current+')').css('top', '-'+height+'px');
            $(listItemsSelector+':eq('+number+')').fadeIn(fadeDuration, function(){
				$(listItemsSelector).not(listItemsSelector+':eq('+number+')').hide();
				//$(listItemsSelector).css('top', '0px');
				busy = false;
			});

			//var navP = $('.fader-nav').offset().left;
			//var navIP = $('.fader-nav li:not(.devider):eq('+number+')').offset().left;
			//var bP = navIP - navP;
			//$('.fader-nav li:not(.devider):eq('+number+')').css('background-position', '-'+bP+'px center');
			current = number;
		}
	}
	
	this.showSelect = function(number){
		if(number !=  current){
			clearInterval(t);
			if(busy) setTimeout(function(){ thisObj.showSelect(number); }, fadeDuration+10);
			else this.show(number);
			t = setInterval(function(){ thisObj.next(); }, timeBetweenAnim+fadeDuration);
		}
	}
	
	this.init();
}
var fade = null;
$(document).ready(function(){
	if(fade == null) fade = new fader();

});