var Slider = Class.create({
	
	wrapper		: null,
	container 	: null,
	width		: 0,
	per_second 	: 15,
	
	initialize : function (wrapper) {
		this.wrapper 	= $(wrapper);
		if(this.wrapper){
			this.container	= this.wrapper.down('ul');
			this.items 		= this.wrapper.select('li');
	
			for(var i=0; i < this.items.size(); i++){
//				 this.width += this.items[i].getWidth(); 
				 this.width += 165; 
			}
			
			this.container.setStyle({ width: this.width+'px' });
			
			if ( this.items.size() > 1 ) {
				this.slideLeft();
			}
		}
	},

	slideLeft : function() {
		new Effect.Move(this.container, {
			duration: (this.width-this.wrapper.getWidth())/this.per_second,
			fps: 100,
			x: -(this.width-this.wrapper.getWidth()), 
			transition: Effect.Transitions.linear,
			afterFinish: function () { this.slideRight(); }.bind(this) 
		});
	},
	
	slideRight : function(){
		new Effect.Move(this.container, {
			duration: (this.width-this.wrapper.getWidth())/this.per_second,
			fps: 100,
			x: (this.width-this.wrapper.getWidth()), 
			transition: Effect.Transitions.linear,
			afterFinish: function () { this.slideLeft(); }.bind(this) 
		});
	}
});

document.observe("dom:loaded", function(event) {
	var slider = new Slider('merken');
});