/**
 * Caroussel - alterne des images
 *
 * @version		1.1
 *
 * @license		MIT-style license
 * @author		Guilhem Achikbache <guilhem [at] answeb.net>
 * @copyright	Author
 */

var Caroussel = new Class({

	Implements: Options,

	options: {
		duration: 3000,				// Délai entre chaque affichage
		container: 'slider',		// ID du conteneur des éléments
		elements: '#slider > div',	// Selcteur CSS des éléments
		arrows: true,				// Afficher les flèches ou non
		arrows_class: 'pages',		// Class CSS du div contenant les flèches
		arrow_left: '←',			// Fleche gauche (html ok)
		arrow_right: '→'			// Fleche droite (html ok)
	},

	initialize: function(options) {
		this.setOptions(options);
		this.container = $(this.options.container);
		if (this.container) {
			this.container.setStyle('position', 'relative');
			this.items = document.getElements(this.options.elements);
			this.items.setStyles({ 'position': 'absolute', 'z-index': 100, 'opacity': 0 });
			this.current = 0;
			$(this.items[this.current]).setStyle('opacity', 1);
			if (this.options.arrows) {
				var i = 0;
				this.items.each(function(item) {
					i++;
					var m = new Element('span').appendText(' '+i+'/'+this.items.length+' ');
					var l = new Element('a', { 'href': '#' }).set('html', this.options.arrow_left).addEvent('click', function(e) { this.prevflash(); e.stop(); }.bind(this));
					var r = new Element('a', { 'href': '#' }).set('html', this.options.arrow_right).addEvent('click', function(e) { this.nextflash(); e.stop(); }.bind(this));
					var div = new Element('div', { 'class': this.options.arrows_class}).setStyles({'position': 'absolute', 'z-index': 101, 'right': 0, 'top': 0});
					div.set('opacity','0.4').adopt([l, m, r]).injectTop(item);
				}.bind(this));
			}
			this.timer = this.nextflash.periodical(this.options.duration, this);
			this.container.addEvent('mouseenter', function() {
				if (this.options.arrows) {
					this.container.getElements('div.'+this.options.arrows_class).set('opacity', 1);
				}
				$clear(this.timer);
			}.bind(this));
			this.container.addEvent('mouseleave', function() {
				if (this.options.arrows) {
					this.container.getElements('div.'+this.options.arrows_class).set('opacity', 0.4);
				}
				this.timer = this.nextflash.periodical(this.options.duration, this);
			}.bind(this));
			// Corriger la hauteur si le container contient des images
			window.addEvent('load', function() { this.setHeight(); }.bind(this) );
		}
	},

	setHeight: function() {
		if (this.container) {
			// Hauteur max des images contenues
			var heights = this.container.getElements('img').getStyle('height');
			var max_height = 0;
			heights.each(function(item) { if (item.toInt() > max_height.toInt()) { max_height = item; } });
			if (max_height.toInt() > 0) this.container.setStyle('height', max_height);
		}
	},

	nextflash : function() {
		$(this.items[this.current]).tween('opacity', 1, 0);
		this.current++;
		if (this.current >= this.items.length) { this.current = 0; }
		$(this.items[this.current]).tween('opacity', 0, 1);
	},

	prevflash : function() {
		$(this.items[this.current]).tween('opacity', 1, 0);
		this.current--;
		if (this.current < 0) { this.current = this.items.length-1; }
		$(this.items[this.current]).tween('opacity', 0, 1);
	}

});
window.addEvent('domready', function() {
	c = new Caroussel({
		//duration: 3000,				// Délai entre chaque affichage
		//container: 'slider',		// ID du conteneur des éléments
		//elements: '#slider > div',	// Selcteur CSS des éléments
		//arrows: true,				// Afficher les flèches ou non
		//arrows_class: 'pages',		// Class CSS du div contenant les flèches
		//arrow_left: '←',			// Fleche gauche (html ok)
		//arrow_right: '→',			// Fleche droite (html ok)
	});
});