var SlideJLA = new Class({
    Implements: [Options,Events],
	options: {
		onChange: Class.empty,
		onComplete: Class.empty,
		//taille max du slide, rien de depassera de cette zone
		slide_size:500,
		// id de la zone container
		slide_id:'slide_container',
		//classe des elements disponibles pour l'affichage
		item_class:'.item_class',
		//elements affichés/à afficher
		displayed_items: new Array(),
		//taille actuelle de la suite d'elements visibles dans le slide
		present_items_size:0,
		//liste des elements qui font partie du slide
		items:null,
		// boutons de l'interface
		buttons:{
			//bouton precedent
			previous_class:'.slide_previous',
			//bouton suivant
			next_class:'.slide_next'
		}
	},
	
    initialize: function(options){
        this.setOptions(options);
		//on limite la taille du slide
		$(this.options.slide_id).setStyle('width', this.options.slide_size);
		$(this.options.slide_id).setStyle('overflow', 'hidden');
		this.options.items = $$(this.options.item_class);
		
		//on regarde combien on peut afficher d'elements
		for(var i=0; i < this.options.items.length; ++i){
			if(!this.add_item_to_display(this.options.items[i])){
				i = this.options.items.length; // on sort de la boucle
			}
		}
		
		//gestion des boutons
			//styles
		$$(this.options.buttons.previous_class).setStyle('cursor', 'pointer');
		$$(this.options.buttons.next_class).setStyle('cursor', 'pointer');
			//evenements
		$$(this.options.buttons.previous_class).addEvent('click', this.slide_previous.bind(this));
		$$(this.options.buttons.next_class).addEvent('click', this.slide_next.bind(this));
		
		this.display();
    },
	
	// si l'element peut rentrer dans l'espace restant
	add_item_to_display: function(my_item){
		var item_size = my_item.getSize();
		if((item_size.x + this.options.present_items_size) < this.options.slide_size){
			this.options.present_items_size += item_size.x;
			this.options.displayed_items.push(my_item);
			return true;
		}else{
			return false;
		}
	},
	
	// on supprime des elements jusqu'a ce que la taille des elements à afficher soit inferieure à la taille du container
	remove_item_to_display: function(direction){
		if(direction == 'removeFromBegin'){
			for(var i=0; i < this.options.displayed_items.length; i++){
				if(this.options.present_items_size > this.options.slide_size){
					var free_size = this.options.displayed_items[0].getSize().x;
					//alert('on enleve : '+this.options.displayed_items[0].getElement('.wf').innerHTML);
					this.options.displayed_items.shift();
					this.options.present_items_size -= free_size;
				}else{
					i = this.options.items.length; // on sort de la boucle
				}
			}
		}else if(direction == 'removeFromEnd'){
			for(var i = (this.options.displayed_items.length-1); i >= 0; i--){
				if(this.options.present_items_size > this.options.slide_size){
					var free_size = this.options.displayed_items[i].getSize().x;
					//alert('on enleve : '+this.options.displayed_items[i].getElement('.wf').innerHTML);
					this.options.displayed_items.pop();
					this.options.present_items_size -= free_size;
				}else{
					i = -1; // on sort de la boucle
				}
			}
		}
	},
	
	//affichage des elements
	display: function(){
		this.options.items.each(function(item, index){
			item.fade('hide');
			item.setStyle('display', 'none');
		});
		try{
			this.options.displayed_items.each(function(item, index){
			    item.setStyle('display', 'block');
			    item.fade('in');
			});
		}catch(e){
			alert('Aucun element à afficher');
		};
		
		var index = 0;
		if(index == 0){
			$$(this.options.buttons.previous_class).removeEvents('click');
			$$(this.options.buttons.previous_class).each(
				function(item){
					item.setStyle('cursor', 'default');
					
					
					if (Browser.Engine.trident && document.querySelectorAll){ //IE8
						item.fade('hide');
					}else{
						item.fade(0.2);
					}
					item.disable = 1;
				});
		}
	},
	
	refresh: function(index){
		//on decale les elements à effacer en douceur		
		for(var i=0; i < this.options.items.length; ++i){
			if(!this.options.displayed_items.contains(this.options.items[i])){
				/*var myFx = new Fx.Tween(this.options.items[i]);
				myFx.onComplete(function(){
					alert('coucou');
					this.options.items[i].fade('hide');
					this.options.items[i].setStyle('display', 'none');
				});
				myFx.start('width',0);*/
				//this.options.items[i].tween('width',0);
				//alert(this.options.items[i].getElement('.wf').innerHTML);
				this.options.items[i].fade('hide');
				this.options.items[i].tween('display', 'none');
			}
		};
		//on fait apparaitre les nouveaux elements
		for(var i=0; i < this.options.displayed_items.length; ++i){
			//alert(this.options.items[i].getElement('.wf').innerHTML);
			if(this.options.displayed_items[i].getStyle('visibility') == 'hidden'){
				this.options.displayed_items[i].fade('in');
				this.options.displayed_items[i].setStyle('display', 'block');
//			    this.options.displayed_items[i].fade('in');
			}
		};
		
		//on gère les boutons
		//si fin de slide
		if(index == (this.options.items.length-1)){
			$$(this.options.buttons.next_class).removeEvents('click');
			$$(this.options.buttons.next_class).each(
				function(item){
					item.setStyle('cursor', 'default');
					if (Browser.Engine.trident && document.querySelectorAll){ //IE8
						item.fade('hide');
					}else{
						item.fade(0.2);
					}
					item.disable = 1;
				});
		}else if($$(this.options.buttons.next_class)[0].disable){
			$$(this.options.buttons.next_class).each(
				function(item){
					item.setStyle('cursor', 'pointer');
					item.fade('in');
					item.disable = 0;
			});
			$$(this.options.buttons.next_class).addEvent('click', this.slide_next.bind(this));
		}
		
		//si debut de slide
		if(index == 0){
			$$(this.options.buttons.previous_class).removeEvents('click');
			$$(this.options.buttons.previous_class).each(
				function(item){
					item.setStyle('cursor', 'default');
					if (Browser.Engine.trident && document.querySelectorAll){ //IE8
						item.fade('hide');
					}else{
						item.fade(0.2);
					}
					item.disable = 1;
				});
		}else if($$(this.options.buttons.previous_class)[0].disable){
			$$(this.options.buttons.previous_class).each(
				function(item){
					item.setStyle('cursor', 'pointer');
					item.fade('in');
					item.disable = 0;
			});
			$$(this.options.buttons.previous_class).addEvent('click', this.slide_previous.bind(this));
		}
	},
	
	//on affiche de nouveaux elements
	slide: function(direction, index){
		var new_item = this.options.items[index];
		//alert('on ajoute : '+new_item.getElement('.wf').innerHTML);
		//pour pouvoir calculer la taille 
		//(voir dans la lib More de Mootools il y a quelque expres pour eviter de faire ca, mais là j'ai pas le net :( )
		new_item.setStyle('display', 'block');
		var new_item_size = new_item.getSize();
		if(direction == 'endBy'){
			// on ajoute l'element
			this.options.displayed_items.push(new_item);
			this.options.present_items_size += new_item_size.x;
			this.remove_item_to_display('removeFromBegin');				
		}else if(direction == 'beginBy'){
			// on ajoute l'element
			this.options.displayed_items = this.pushFirst(this.options.displayed_items,new_item);
			this.options.present_items_size += new_item_size.x;
			this.remove_item_to_display('removeFromEnd');		
		}
		
		this.refresh(index);
		//this.fireEvent('onChange');
	},
	
	slide_next: function(event){
		var index = this.options.items.indexOf(this.options.displayed_items[this.options.displayed_items.length-1]);
		//index ne doit pas depasser les limites du tableau
		index = ((index+1)>=this.options.items.length) ? (this.options.items.length-1) : (index+1);
		this.slide('endBy',index);
	},
	
	slide_previous: function(event){
		var index = this.options.items.indexOf(this.options.displayed_items[0]);
		//index ne doit pas depasser les limites du tableau
		index = ((index-1)<0) ? 0 : index-1;
		this.slide('beginBy',index);
	},
	
	//on empile sur le debut du tableau
	pushFirst: function(array, element){
		var my_other_array = new Array();
		my_other_array[0] = element;
		for(var i=0; i < array.length; ++i){
			my_other_array.push(array[i]);
		}		
		return(my_other_array);
	}
});