/*
Gallery
@version 1.0
@description Crée un diaporama interactif
@author IRCF
Exemple :
<div class="gallery">
	<a class="button prev"><span>Précédent</span></a>
	<div>
		<ul>
			<li>Diapo 1</li>
			<li>Diapo 2</li>
			<li>Diapo 3</li>
		</ul>
	</div>
	<a class="button next"><span>Suivant</span></a>
</div>
*/
var Gallery = new Class({
	Implements : Options,
	options : {
		buttons : '.button',
		auto : true,
		step : 3,
		delay : 6000,
		containerEvents : null,
		itemEvents : null
	},
	initialize : function(element,options){
		this.element = $(element);
		this.setOptions(options);
		this.container = this.element.getElement('div');
		this.items = this.element.getElements('li');
		this.buttons = this.element.getElements(this.options.buttons);
		this.list = this.container.getElement('ul');
		this.itemWidth = this.items[0].getStyle('width').toInt()+this.items[0].getStyle('padding-right').toInt()+this.items[0].getStyle('padding-left').toInt();
		this.i = 0;
		this.maxStep = Math.ceil(this.items.length/this.options.step);
		if (this.maxStep>0){
			if (this.options.auto){
				this.start();
				this.element.addEvents({'mouseenter':this.stop.bind(this),'mouseleave':this.start.bind(this)});
			}
			this.buttons[0].addEvent('click',this.scroll.bind(this,[0]));
			this.buttons[1].addEvent('click',this.scroll.bind(this,[1]));
		};
	},
	scroll : function (direction){			
		this.i = (this.i+(direction*2-1)+this.maxStep) % this.maxStep;
		this.list.tween('margin-left',-this.itemWidth*this.i * this.options.step);
		return direction;
	},
	start : function(){
		this.buttons[1].fireEvent('mouseenter');
		this.timer = this.scroll.bind(this,[1]).periodical(this.options.delay);
	},
	stop : function(){
		this.buttons[1].fireEvent('mouseleave');
		this.timer = $clear(this.timer);
	}
});