/* Nice Semantically correct slideshow class based on Mootools engine:  
 * Programming: Ilja Maas, Dreamsolution, Delft, the Netherlands
 * Feel free to copy and use
 */

var DsSlideshow = new Class({
	options: {
		direction: 'RTL',
		changeDirection: false,
		slideElement: false,
		slideContainer: false,
		slideWidth: 0,
		slideHeight: 0,
		moveDuration: 1000,
		waitDuration: 2000,
		moveState: false,
		theEffect: null,
		reteater: null
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.options.theEffect = new Fx.Style( 	this.options.slideElement, 
												'margin-left',{	duration: this.options.moveDuration, 
																transition: Fx.Transitions.Quad.easeInOut, 
																onComplete: this.repeat.bind(this)
											});
		
		// How many LIs are present?
		var lis=$(this.options.slideElement).getElements('li');
		
		// Create the right size for the slideContainer and the UL.
		var theLi=$(this.options.slideElement).getFirst();
		var dimensions=theLi.getFirst().getSize();
		this.options.slideWidth=dimensions.size.x;
		this.options.slideHeight=dimensions.size.y;
		$(this.options.slideContainer).setStyle('width',this.options.slideWidth);
		$(this.options.slideContainer).setStyle('height',this.options.slideHeight);
		$(this.options.slideElement).setStyle('width',this.options.slideWidth*lis.length);
		
		// depending on the direction, shift the left margin. And put the last li in front
		if(this.options.direction=='LTR'){
			this.options.theEffect.set(-dimensions.size.x);
			var leftOne=$(this.options.slideElement).getFirst();
			leftOne.injectAfter($(this.options.slideElement).getLast());
		} 
		
		// Add an onclick handler to the buttons.
		$('toleft').addEvent('click', this.setLTR.bindWithEvent(this));
		$('toright').addEvent('click', this.setRTL.bindWithEvent(this));
		
		this.options.repeater=this.animate.delay(this.options.waitDuration,this);
	},
	
	animate: function(){
		if(this.options.moveState){
			return;
		}
		this.options.moveState=true;
		if(this.options.changeDirection){
			this.options.direction=(this.options.direction=='LTR')?'RTL':'LTR';
			this.rearrange();
			this.options.changeDirection=false;
		}
		if(this.options.direction=='LTR'){
			this.options.theEffect.start(-this.options.slideWidth,0);
		} else {
			this.options.theEffect.start(0,-this.options.slideWidth);
		}
	},
	
	setLTR: function(){
		if(this.options.direction!='LTR'){
			this.options.changeDirection=true;
		}				
		if(!this.options.moveState){
			this.options.repeatEffect=false;
			this.animate();
		}
	},
	setRTL: function(){
		if(this.options.direction!='RTL'){
			this.options.changeDirection=true;
		}			
		if(!this.options.moveState){
			this.options.repeatEffect=false;
			this.animate();
		}
	},
	
	repeat: function(){
		this.rearrange();
		this.options.moveState=false;		
		$clear(this.options.repeater);
		this.options.repeater=this.animate.delay(this.options.waitDuration,this);
		

	},
	
	rearrange: function(){
		if(this.options.direction=='LTR'){
			this.options.theEffect.set(-this.options.slideWidth);
			var rightOne=$(this.options.slideElement).getLast();
			rightOne.injectBefore($(this.options.slideElement).getFirst());
		} else {
			this.options.theEffect.set(0);
			var leftOne=$(this.options.slideElement).getFirst();
			leftOne.injectAfter($(this.options.slideElement).getLast());
		}
	}
	
});
DsSlideshow.implement(new Options, new Events);

/* Fade home top image */
function initFader(){
	$('fadeshow').getElements('img').each(function(theEle){
		theEle.theEffect = new Fx.Style( theEle.id , 'opacity',{	duration: 1000	});
	});
	$('fadeshow').getLast().theEffect.set(0);	
	fadeTopImage.delay(7000);
}

function fadeTopImage(){
	var frontOne=$('fadeshow').getLast();
		frontOne.injectBefore($('fadeshow').getFirst());
	$('fadeshow').getFirst().theEffect.set(1);	
	$('fadeshow').getLast().theEffect.start(1,0);
	fadeTopImage.delay(7000);										
}

window.addEvent('domready', function(){
									new DsSlideshow({
										direction: 'RTL',
										slideElement: 'referentieslideshow',
										slideContainer: 'referenties',
										moveDuration: 1000,
										waitDuration: 4000
									})
								});
window.addEvent('domready',initFader);