$$('html').addClass('hasjs');

var Une = new Class({

	options: {
		illusSpeed:   500,
		uneSpeed:     350,
		cycleSpeed:   5000
	},

	initialize: function(element,options){
		this.element = this.element || element;
		this.setOptions(options);
		
		// Get elements
		this.unes = $$('#une li');
		this.titles = $$('#une h3');
		this.td = $$('#une table td');
		
		this.construct();
		
		// Launch cycle
		this.interval = setInterval(this.cycle.bind(this),this.options.cycleSpeed);
	},
	
	/**
	 *  Prépare les Unes pour le défilement
	 */
	construct: function() {
		// Construction des éléments de la une
		this.tbody = new Element('tbody')
							.injectInside(
								new Element('table',{
									id:'list'
								}).injectInside($('une'))
							);
		var i=0;
		this.titles.forEach(function(une){
			new Element('td',{id:'td'+i++})
				.setHTML(une.innerHTML)
				.injectInside(
					new Element('tr').injectInside(this.tbody)
				);
		}.bind(this));
		
		// Ajout des événements		
		$$('#une table a').forEach(function(link){
			link.addEvent('mouseover',this.display.bind(this));
		}.bind(this));
		
		// Cherche la hauteur max et l'applique à tous
		this.setHeight(this.getMax());
		
		// Met la première une en actif
		var i=0;
		this.unes.forEach(function(une){
			une.setStyle('z-index',i--);
		})
		this.active = $('td0').addClass('active');
	},
	
	/**
	 * Affiche l'illustration de la une
	 * @param {Object} e
	 */
	display: function(e) {
		if($type(e)=='string') var id = e;
		else {
			var id = new Event(e).getTarget('TD').id.replace('td','');
			new Event(e).stop();
			// Stop l'intervale si on reste sur une Une
			clearInterval(this.interval);
			new Event(e).getTarget('A').addEvent('mouseout',function(){
				clearInterval(this.interval); // Security
				this.interval = setInterval(this.cycle.bind(this),this.options.cycleSpeed);
			}.bind(this));
		}		
		if('td'+id==this.active.id) return false;
		
		var i=8;
		this.unes.forEach(function(une){
			if (une.getStyle('z-index') == 10) zindex = 9;
			else zindex = i--;
			une.setStyle('z-index',zindex);
			
		}.bind(this));
		
		this.active.removeClass('active');
		
		this.active = $('td'+id).addClass('active');
		this.unes[id].setStyles({
			'opacity':0,
			'z-index':10
		});
		
		new Fx.Style(this.unes[id], 'opacity',{duration:this.options.illusSpeed}).start(0,1);	
	},
	
	/**
	 * Fait cycler les unes
	 */
	cycle: function() {
		var tr = this.active.getParent().getNext();
		if (!tr) var tr = this.active.getParent().getParent().getFirst();
		
		id = tr.getFirst().id.replace('td','');
		
		var link = tr.getFirst().getFirst();
		link.fireEvent('mouseover',id);
	},
	
	/**
	 * Récupère la hauteur max d'une Une
	 */
	getMax: function() {
		var max=320;
		this.unes.forEach(function(une) {
			var height = une.offsetHeight;
			if(height>max) max=height;
		});
		return max;
	},
	
	/**
	 * Applique la hauteur max à toutes les unes
	 * @param {Object} height
	 */
	setHeight: function(height) {
		this.unes.forEach(function(une) {
			une.setStyle('height',height+'px');
		});
		$('une').setStyle('height',(height+16)+'px');
	}
});
Une.implement(new Options());



window.addEvent('domready',function(){
	new Une();	
});