/*
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#fader-container';
	var listSelector 		= 'div#fader-container > ul#fader-list';
	var listItemsSelector 	= 'div#fader-container > ul#fader-list > li';
	var timeBetweenAnim = 8000;
	var fadeDuration = 1000;
	var height;
	var aantal;
	var current = 0;
	var t;
	var z = 100;
	var busy = false;
	this.init = function(){
		height = $(listItemsSelector).outerHeight();
		aantal = $(listItemsSelector).size();
		$(containerSelector).css({height: height+'px', overflow:'hidden'});
		$(listItemsSelector).not(listItemsSelector+':eq(0)').hide();
		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){
		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;
		});
		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();

}
$(document).ready(function(){
	var fade = new fader();
	$('#anim-0').click(function(){
		fade.showSelect(0);
	});
	$('#anim-1').click(function(){
		fade.showSelect(1);
	});
	$('#anim-2').click(function(){
		fade.showSelect(2);
	});
	$('#anim-3').click(function(){
		fade.showSelect(3);
	});
	$('#anim-4').click(function(){
		fade.showSelect(4);
	});
});