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

var Une = new Class({
	
	setOpt:function(opt){
		this.options={
			illusSpeed:   250,
			uneSpeed:     350,
			cycleSpeed:   5000
		};
		Object.extend(this.options,opt ||{});
	},

	initialize: function(element,options){
		this.element = this.element || element;
		this.setOpt(options);
		
		// Get elements
		this.links = $$('#une h2 a');
		this.previews = $$('#une .preview');
		this.themes = $$('#une .theme');
		this.accroches = $$('#une .accroche');
		this.illus = $$('#une .illus');
		
		this.construct();
	},
	
	/**
	 *  Prépare les Unes pour le défilement
	 */
	construct: function() {
		// Making this fucking rounded corners
		var corners = ['tl','tr','br','bl'];
		for(var i=0;corners.length>i;i++) {
			}
		
		// Making the list
		var ul = new Element('ul').setProperty('id','une-list').injectInside($('une'));
		
		var l = this.previews.length;
		
		for(var i=0;l>i;i++) {
			var li = new Element('li').setProperty('id','une-li'+i).injectInside(ul);
			var a = new Element('a').setProperty('href',this.links[i]).injectInside(li);
			if(l==i+1) li.addClass('last');
			
			this.previews[i].injectInside(a);
			this.themes[i].injectInside(a);
		}
		
		// Making the navigation
		ul = new Element('ul').setProperty('id','une-nav').injectInside($('une'));
		new Element('a')
			.setProperties({
				id: 'une-prev',
				title: 'Précédente'
			})
			.appendText('Précédente')
			.addEvent('click',function(){
				this.prev();
			}.bind(this))
			.injectInside(new Element('li').injectInside(ul));
			
		new Element('a')
			.setProperties({
				id: 'une-next',
				title: 'Suivante'
			})
			.appendText('Suivante')
			.addEvent('click',function(){
				this.next();
			}.bind(this))
			.injectInside(new Element('li').injectInside(ul));
		
		
		// Ajout des événements		
		$$('#une-list a').forEach(function(link){
			link.addEvent('mouseover',this.display.bind(this));
		}.bind(this));
		
		// Met la première une en actif
		var i=20;
		this.accroches.forEach(function(accroche){
			i = i-2;
			accroche.setStyle('z-index',i);
		})
		var i=19;
		this.illus.forEach(function(illu){
			i = i-2;
			illu.setStyle('z-index',i);
		})
		this.active = $('une-li0').addClass('active');
		this.follow   = $('une-li1').addClass('follow');
	},
	
	/**
	 * Affiche l'illustration de la une
	 * @param {Object} e
	 */
	display: function(e) {
		if($type(e)=='string' || $type(e)=='number') var id = e;
		else {
			var id = new Event(e).getTarget('LI').id.replace('une-li','');
			new Event(e).stop();
		}		
		if('une-li'+id==this.active.id) return false;
		
		var i=18;
		this.accroches.forEach(function(accroche){
			if (accroche.getStyle('z-index') == 20) zindex = 18;
			else zindex = i = i-2;
			accroche.setStyle('z-index',zindex);
		}.bind(this));
		var i=17;
		this.illus.forEach(function(illu){
			if (illu.getStyle('z-index') == 19) zindex = 17;
			else zindex = i = i-2;
			illu.setStyle('z-index',zindex);
		}.bind(this));
		
		this.active.removeClass('active');
		this.follow.removeClass('follow');
		
		this.active = $('une-li'+id).addClass('active');
		var nid = id*1+1;
		if($('une-li'+nid)) this.follow = $('une-li'+nid).addClass('follow');
		this.accroches[id].setStyles({
			'opacity':0,
			'z-index':20
		});
		this.illus[id].setStyles({
			'opacity':0,
			'z-index':19
		});
		
		if(window.ie && window.ie6 && window.ie7) var end = 1;
		else var end = 1;
		
		new Fx.Style(this.accroches[id], 'opacity',{duration:this.options.illusSpeed}).start(0,end);
		new Fx.Style(this.illus[id], 'opacity',{duration:this.options.illusSpeed}).start(0,1);
	},
	
	prev: function() {
		var id = this.active.id.replace('une-li','')*1-1;
		if(id<0) id = this.previews.length-1;
		this.display(id);
	},
	
	next: function() {
		var id = this.active.id.replace('une-li','')*1+1;
		if(id>this.previews.length-1) id = 0;
		this.display(id);
	}
});
Une.implement(new Options());

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