var ScrollerDP = Class.create({

	initialize: function(params) {
		this.params = $H({
			'fill': 4, // specify items' left+right margins
			'ul': 'scroll_images', // ul id
			'flechegauche': 'flechegauche', // handler id
			'flechedroite': 'flechedroite' // handler id
		});
		this.params.update(params); // merge custom/default params
		this.leftClickEvent = this.click.bindAsEventListener(this, 'left');
		this.rightClickEvent = this.click.bindAsEventListener(this, 'right');
		Event.observe(window,'load',this.load.bindAsEventListener(this));
	},

	load: function(event){
		this.list = $(this.params.get('ul'));
		if (!this.list)
			return;
		this.list.cleanWhitespace();
		this.expandList(); // clone items: 1,2,3 to get 1,2,3,1,2,3
		this.widths = this.getWidths(); // store items widths
		this.totalWidth = this.adjustWidth();
		this.centerList(); // start scroller on middle item: 1,2,3,[1],2,3
		this.registerClicks();
	},

	centerList: function() {
		this.pos = this.totalWidth/2; // will hold ul left shift value in pixels throughout script
		this.firstItem = this.widths.length/2; // will hold index of first item visible throughout script
		this.list.style.left = -this.pos + 'px';
	},

	registerClicks: function(){
		Event.observe(this.params.get('flechegauche'), 'click', this.leftClickEvent);
		Event.observe(this.params.get('flechedroite'), 'click', this.rightClickEvent);
	},

	unregisterClicks: function(){
		Event.stopObserving(this.params.get('flechegauche'), 'click', this.leftClickEvent);
		Event.stopObserving(this.params.get('flechedroite'), 'click', this.rightClickEvent);
	},

	click: function(event, dir){
		this.unregisterClicks();
		switch(dir){
			case 'right':
				this.pos += this.widths[this.firstItem++];
				break;
			case 'left':
				this.pos -= this.widths[--this.firstItem];
				break;
		}
		this.moveList(dir);
	},

	shiftItems: function(dir) {
		switch(dir){
			case 'right': // 1,2,3,1,2,3 becomes 2,3,1,2,3,1
				this.widths.push(this.widths.shift());
				this.list.appendChild(this.list.firstChild);
				break;
			case 'left': // 1,2,3,1,2,3 becomes 3,1,2,3,1,2
				this.widths.unshift(this.widths.pop());
				this.list.insertBefore(this.list.lastChild, this.list.firstChild);
				break;
		}
	},

	moveList: function(dir) {
		new Effect.Move(this.list, { x: -this.pos, y: 0, mode: 'absolute',
			afterFinish: function(){
				this.shiftItems(dir);
				this.centerList();
				this.registerClicks();
			}.bind(this)
		});
	},

	getWidths: function(){
		var widths = $A([]);
		var items = this.list.getElementsByTagName('li');
		for (var i = 0, len = items.length; i < len; ++i) {
			var dimensions = $(items[i]).getDimensions();
			widths.push(dimensions.width + this.params.get('fill'));
		}
		return widths;
	},

	adjustWidth: function(){
		var newWidth = 0;
		this.widths.each(function(w){ newWidth += w; });
		this.list.setStyle({'width': newWidth+'px','zIndex': 1});
		return newWidth;
	},

	expandList: function(){
		var items = this.list.getElementsByTagName('li');
		for (var i = 0, len = items.length; i < len; ++i)
			this.list.appendChild(items[i].cloneNode(true));
	}

});


var scrollerdp = new ScrollerDP({});