var BandeauDefilement = new Class({
	
	Implements: [Options, Events],
	
	options: {
		nbrElements: 5,	//<-- Nombre d'éléments visibles dans le bandeau
		tween: {transition:'cubic:out', duration: 100},
		startIndex: 0,
		identifiant: 'bandeau', //<-- Identifiant pour les classes
		//-----
		zone_compteur: null,
		//-----
		zone_slide: null,
		zone_slide_poignee: null,
		//-----
		zone_bandeau: null,
		dernier_bandeau_marge: true, //<-- Mettre à false pour que le dernier bandeau ne défile pas complètement si il y a des espaces de libres à la fin des photos
		btn_bandeauSuivant: null,
		btn_bandeauPrecedent: null
	},
	
	/**
	 * @brief Mets en place un bandeau animé pour faire défiler des listes d'éléments
	 * @param container String Id de l'élément qui contient les éléments
	 */
	initialize: function(container, options){
		this.baliseMiniatures = $(container);
		this.setOptions(options);
		//--> Ajout des miniatures
		this.addMiniatures(container);
		this.baliseMiniatures.setStyle('display', 'none');
		//--> Ajoute la gestion du slide
		this.gereSlide();
		//--> Création des bandeaux de vignettes
		this.addBandeaux();
		//--> Vidage du container d'origine
		this.baliseMiniatures.destroy();
		//--> Affichage de l'élément demandé
		if(this.miniatures.length){
			this.currentIndex = this.options.startIndex;
			this.change(null, this.currentIndex);
		}
	},
	
	miniatures: [],
	bandeaux: [],
	
	addMiniatures: function(miniatures){
		$(miniatures).getChildren().each(function(miniature, index){
			this.miniatures.include(miniature);
		}.bind(this));
	},
	
	addBandeaux: function(){
		if(this.options.zone_bandeau != null){
			this.zone_bandeau = $(this.options.zone_bandeau);
			var i=0;
			var j=0;
			var divBandeau = new Element('div', {'class':this.options.identifiant+'_sous_bandeau', 'styles':{'display':'block','float':'left'}});
			this.bandeaux.include(divBandeau);
			this.miniatures.each(function(miniature, index){
				if(i>=this.options.nbrMiniatures){
					j++;
					i=0;
					divBandeau = new Element('div', {'class':this.options.identifiant+'_sous_bandeau', 'styles':{'display':'block','float':'left'}});
					this.bandeaux.include(divBandeau);
				}
				miniature.bandeau = j;
				miniature.inject(divBandeau);
				i++;
			}.bind(this));
			this.bandeauTotal = new Element('div', {'styles':{'width':'100000px'}});
			this.bandeauTotal.inject(this.zone_bandeau);
			this.bandeaux.each(function(bandeau, index){
				bandeau.inject(this.bandeauTotal);
				bandeau.posX = bandeau.getPosition(this.bandeauTotal).x;
			}.bind(this));
			if(this.options.btn_bandeauSuivant != null){
				this.btn_bandeauSuivant = $(this.options.btn_bandeauSuivant);
			}
			if(this.options.btn_bandeauPrecedent != null){
				this.btn_bandeauPrecedent = $(this.options.btn_bandeauPrecedent);
			}
			this.bandeauFx = new Fx.Tween(this.bandeauTotal, this.options.tween);
		}
	},
  			
	change: function(event, index){
		this.ajusteBandeau(index);
		//--> Change la class current sur la miniature en cours
		this.miniatures.each(function(miniature, index){
			miniature.removeClass('current');
		}.bind(this));
		this.miniatures[this.currentIndex].addClass('current');
		//--> Mets à jour le compteur
		this.gereCompteur();
	},
	
	gereCompteur: function(){
		if(this.options.zone_compteur != null){
			$(this.options.zone_compteur).set('text', (this.currentIndex + 1) + '/' + this.miniatures.length);
		}
	},
	
	gereSlide: function(){
		if(this.options.zone_slide != null && this.options.zone_slide_poignee != null){
			this.zone_slide 		= $(this.options.zone_slide);
			this.zone_slide_poignee = $(this.options.zone_slide_poignee);
			this.slide = new Slider(this.zone_slide, this.zone_slide_poignee, {
				range: [0, this.miniatures.length-1],
				initialStep: this.options.startIndex,
				onChange: function(step){
					if(step != this.currentIndex) this.change(null, step);
				}.bind(this)
			});
		}
	},
	
	changeSlide: function(){
		if("slide" in this){
			this.slide.set(this.currentIndex);
		}
	},
	
	//--> Ajuste la position du bandeau en fonction de la photo demandée
	ajusteBandeau: function(index){
		if("zone_bandeau" in this){
			this.defileBandeau(this.miniatures[index].bandeau);
		}
	},
	
	//--> Affiche le bandeau à la position demandée
	defileBandeau: function(position){
		if(position != this.currentIndexBandeau){
			this.currentIndexBandeau = position;
			//--> Gestion de l'état des boutons de bandeaux
			nbrBandeaux = this.bandeaux.length-1;
			if("btn_bandeauPrecedent" in this){
				this.btn_bandeauPrecedent.removeEvents('click');
				if(this.currentIndexBandeau > 0){
					if(this.btn_bandeauPrecedent.hasClass('invalide')) this.btn_bandeauPrecedent.removeClass('invalide');
					this.btn_bandeauPrecedent.addEvent('click', function(event){
						this.bandeauPrecedent(event);
					}.bind(this));
				} else {
					if(!this.btn_bandeauPrecedent.hasClass('invalide')) this.btn_bandeauPrecedent.addClass('invalide');
				}
			}
			if("btn_bandeauSuivant" in this){
				this.btn_bandeauSuivant.removeEvents('click');
				if(this.currentIndexBandeau < nbrBandeaux){
					if(this.btn_bandeauSuivant.hasClass('invalide')) this.btn_bandeauSuivant.removeClass('invalide');
					this.btn_bandeauSuivant.addEvent('click', function(event){
						this.bandeauSuivant(event);
					}.bind(this));
				} else {
					if(!this.btn_bandeauSuivant.hasClass('invalide')) this.btn_bandeauSuivant.addClass('invalide');
				}
			}
			//--> Animation du bandeau
			if(nbrBandeaux > 0){
				if(this.ie7etInf()){
					this.bandeaux.each(function(bandeau, index){
						bandeau.setStyle('display', 'none');
					}.bind(this));
					this.bandeaux[this.currentIndexBandeau].setStyle('display', 'block');
				} else {
					if(this.currentIndexBandeau == nbrBandeaux && this.options.dernier_bandeau_marge == false){
						yBandeau = this.bandeaux[position].posX - this.zone_bandeau.getSize().x + this.bandeaux[position].getSize().x;
					} else {
						yBandeau = this.bandeaux[position].posX;
					}
					this.bandeauFx.cancel();
					this.bandeauFx.start('margin-left', yBandeau*-1);
				}
			}
		}
	},
	
	bandeauSuivant: function(event){
		event.stop();
		var currentIndexBandeau = this.currentIndexBandeau;
		var index = currentIndexBandeau + 1 < this.bandeaux.length ? currentIndexBandeau + 1 : 0;
		this.defileBandeau(index);
	},
	
	bandeauPrecedent: function(event){
		event.stop();
		var currentIndexBandeau = this.currentIndexBandeau;
		var index = currentIndexBandeau - 1 < 0 ? this.bandeaux.length - 1 : currentIndexBandeau - 1;
		this.defileBandeau(index);
	},
	
	ie7etInf: function(){
		if(Browser.Engine.name == 'trident' && Browser.Engine.version < 6){
			return true;
		}
		return false;
	}
	,
	
	ie8etInf: function(){
		if(Browser.Engine.name == 'trident' && Browser.Engine.version <= 6){
			return true;
		}
		return false;
	}
  
});