Panoramic = Class.create({
	initialize: function() {
		this.params	= null;	// parametre
		this.timer = null; // timer associer au a l'evenement defilement
		this.def_pano = true; // defilement panoramic autorise
		this.pos_a_aller = null;
		this.effect = null;
		this.ancien_element_select = null;
		this.elements_panoramic = null; // les elements du panoramic ayant la classe "class_elements_panoramic"
	},
	setup: function(params) {
		function param_default(pname, def) { if (typeof params[pname] == "undefined") { params[pname] = def; } };
		param_default("nb_pixel",4);
		param_default("bordure_panoramic",0);
		param_default("bordure_element_select",0);
		param_default("class_hover_elements_panoramic",'');
		param_default("hover_elements_panoramic",true);
		
		this.params = params;
		// attributs ayant un valeur par defaut
		this.nb_pixel_depl = $(this.params["nb_pixel"]); // nombre de pixel lors d'un deplacement
		this.bordure_panoramic = this.params["bordure_panoramic"]; // nb pixel de la bordure du panoramic 
		this.bordure_element_select = this.params["bordure_element_select"]; // nb pixel de la bordure de l'element selectionne
		this.class_hover_elements_panoramic = this.params["class_hover_elements_panoramic"]; // classe au rollover de l'element selectionne
		this.hover_elements_panoramic = this.params["hover_elements_panoramic"]; // classe au rollover de l'element selectionne
		this.class_elements_panoramic = (this.params["class_elements_panoramic"]) ? this.params["class_elements_panoramic"] : null; // classe permettant de declarer les elements du panoramic

		// attributs obligatoires
		this.bloc_pano = $(this.params["id_bloc_panoramic"]); // bloc entourant le panoramic
		this.pano = $$("#"+this.bloc_pano.id+" ."+this.params["class_panoramic"])[0]; // panoramic
		this.c_pano = $$("#"+this.bloc_pano.id+" ."+this.params["class_conteneur_panoramic"])[0]; // conteneur
		this.bt_p = $$("#"+this.bloc_pano.id+" ."+this.params["class_bt_precedent"])[0]; // bouton precedent (gauche)
		this.bt_s = $$("#"+this.bloc_pano.id+" ."+this.params["class_bt_suivant"])[0]; // bouton suivant (droit)
		this.dernier_element = $$("#"+this.bloc_pano.id+" ."+this.params["class_dernier_element"])[0]; // dernier element du panoramic ayant la classe "class_dernier_element"
		this.class_elements_panoramic = (this.params["class_elements_panoramic"]) ? this.params["class_elements_panoramic"] : null; // classe permettant de declarer les elements du panoramic

		// attributs optionnels
		this.element_select = $(this.params["id_element_selectionne"]); // element selectionné

		// attributs generes	
		this.largeur_pano = Element.getWidth(this.pano); // largeur du panoramic
		this.largeur_c_pano = this.dernier_element.offsetLeft + Element.getWidth(this.dernier_element); // largeur du conteneur
		
		// affiche le panoramic 
		this.maj();
		
		//evenement
		this.bt_p.onmouseover = this.defilement_l.bindAsEventListener(this,false);
		this.bt_p.onmouseout = this.arret_def.bindAsEventListener(this);
		this.bt_p.onmousedown = this.defilement_l.bindAsEventListener(this,true);
		this.bt_p.onmouseup = this.defilement_l.bindAsEventListener(this,false);
		this.bt_s.onmouseover = this.defilement_r.bindAsEventListener(this,false);
		this.bt_s.onmouseout = this.arret_def.bindAsEventListener(this);
		this.bt_s.onmousedown = this.defilement_r.bindAsEventListener(this,true);
		this.bt_s.onmouseup = this.defilement_r.bindAsEventListener(this,false);
		
	},
	//association evenement objet pour extension
	association_evt_element_panoramic: function(element) {
	},
	// depasse
	depasse: function() {
		// attributs regeneres	
		//this.largeur_c_pano = this.dernier_element.offsetLeft + Element.getWidth(this.dernier_element); // largeur du conteneur
		return (this.largeur_c_pano > this.largeur_pano)
	},
	mouseover_element_panoramic: function(evt,element) {
		if(this.element_select != element)
		{
			this.etat_on_element(element);
		}
	},
	mouseout_element_panoramic: function(evt,element) {
		if(this.element_select != element)
		{
			this.etat_off_element(element);
		}
	},
	//evenement clic associé l'objet
	clic_element_panoramic: function(evt,element) {
		this.element_select = $(element);
		if(this.depasse())
		{
			this.selectionner_pos_a_aller(this.element_select);
			this.aller_a_element_select(true);
		}
	},
	//evenement clic a associer a l'objet
	clic_element: function(element) {
		this.element_select = $(element);
		if(this.depasse())
		{
			this.selectionner_pos_a_aller(this.element_select);
			this.aller_a_element_select(true);
		}
	},
	etat_on_element: function(element) {
		Element.addClassName(element, this.class_hover_elements_panoramic);
	},
	etat_off_element: function(element) {
		Element.removeClassName(element, this.class_hover_elements_panoramic);
	},
	affiche_boutons: function() {
		this.bt_p.style.display = "block";
		this.bt_s.style.display = "block";
	},
	cache_boutons: function() {
		this.bt_p.style.display = "none";
		this.bt_s.style.display = "none";
	},
	maj: function() {
		
	
		// association evenement sur les elements du panoramic et width de l'image ecrti en HTML
		if(this.class_elements_panoramic)
		{
			this.elements_panoramic = $$("#"+this.bloc_pano.id+" ."+this.params["class_elements_panoramic"]);
			
			for(var i=0; i < this.elements_panoramic.length ; i++)
			{
				
				// fixe taille
				this.elements_panoramic[i].width = this.elements_panoramic[i].width;
				this.elements_panoramic[i].onclick = this.clic_element_panoramic.bindAsEventListener(this,this.elements_panoramic[i]);
				// si rollover
				if(this.hover_elements_panoramic)
				{
					this.elements_panoramic[i].onmouseover = this.mouseover_element_panoramic.bindAsEventListener(this,this.elements_panoramic[i]);
					this.elements_panoramic[i].onmouseout = this.mouseout_element_panoramic.bindAsEventListener(this,this.elements_panoramic[i]);
				}
				this.association_evt_element_panoramic(this.elements_panoramic[i])
			}
		}
		
		if(!this.depasse())
		{
			this.cache_boutons();
			this.centrer_contenu();
		}
	
		// centrage image seulement si selectionner au depart
		if(this.element_select){
			if(this.depasse())
			{
				this.selectionner_pos_a_aller(this.element_select);
				this.aller_a_element_select(false);
			}
			else
			{
				this.selectionner_element();
			}
		}
	},
	centrer_contenu: function() {
		this.c_pano.parentNode.style.width = (Element.getWidth(this.pano) - (2*this.bordure_panoramic))+"px";
		var milieu = (Element.getWidth(this.pano)/2) - (this.largeur_c_pano)/2;
		this.largeur_c_pano = 0;
		this.c_pano.setStyle({left : milieu+"px"});
	},
	aller_a_element_select: function(transition) {
		//si on n'est pas deja sur le meme element
		if(this.element_select != this.ancien_element_select)
		{
			// positionner
			if(transition)
			{
				this.effect = new Effect.MoveBy(this.c_pano, 0, (this.pos_a_aller - Element.getX(this.c_pano)), {beforeStart:function() {this.anim=true;}, afterFinish:function(){this.anim=false;}});
			}
			else
			{
				this.c_pano.style.left = this.pos_a_aller+"px";
			}
			
			// selection
			this.selectionner_element()
		}
	},
	selectionner_element: function() {
		if(this.ancien_element_select != null)
		{
			this.etat_off_element(this.ancien_element_select);
		}
		this.ancien_element_select = this.element_select;
		this.etat_on_element(this.element_select);
	},
	selectionner_pos_a_aller: function(element) {
		// remet ancien element selectionne a off
		this.element_select = $(element);
		this.pos_element_select = this.element_select.offsetLeft;
		this.largeur_element_select = Element.getWidth(this.element_select);
		this.c_g_element_select = this.pos_element_select;
		this.c_d_element_select = this.pos_element_select + this.largeur_element_select;
		this.c_c_element_select = this.pos_element_select + (this.largeur_element_select/2);

		if(this.depasse())
		{
			this.element_select_place = false;

			// cote gauche
			if(!this.element_select_place && (this.c_c_element_select < (this.largeur_pano/2)))
			{
				this.pos_a_aller = 0;
				this.element_select_place = true;
			}
			
			// cote droit
			if(!this.element_select_place && ((this.c_c_element_select) > (this.largeur_c_pano - (this.largeur_pano/2))))
			{
				this.pos_a_aller = -(this.largeur_c_pano - this.largeur_pano+(2*this.bordure_element_select));
				this.element_select_place = true;
			}
			
			// alors centre
			if(!this.element_select_place)
			{
				this.pos_a_aller = -(this.c_c_element_select - (this.largeur_pano/2));
				this.element_select_place = true;
			}
		}

	},
	defilement_l: function(evt) {
		if(this.effect == null || this.effect.options['anim'] == false)
		{
			this.effect == null
			this.def_pano = true;
			this.def_l();
		}
	},
	def_l: function() {
		if(this.def_pano)
		{
			if(Element.getX(this.c_pano) < 0)
			{$(this.c_pano).style.left = (Element.getX(this.c_pano) + this.nb_pixel_depl)+'px';}
			
			if(Element.getX(this.c_pano) > (this.largeur_c_pano - this.largeur_pano))
			{this.timer = null;return;}
						
			this.timer = new TimerExecuter(this.def_l.bind(this),0.01)
		}
	},
	defilement_r: function(evt) {
		if(this.effect == null || this.effect.options['anim'] == false)
		{
			this.effect == null
			this.def_pano = true;
			this.def_r();
		}
	},
   	def_r: function() {
		if(this.def_pano)
		{
			if(Element.getX(this.c_pano) >= -(this.largeur_c_pano - this.largeur_pano))
			{$(this.c_pano).style.left = (Element.getX(this.c_pano) - this.nb_pixel_depl)+'px';}
			
			if(Element.getX(this.c_pano) < -(this.largeur_c_pano - this.largeur_pano))
			{this.timer = null;return;}	
			
			this.timer = new TimerExecuter(this.def_r.bind(this),0.01)
		}
	},
	arret_def: function(evt) {
		this.def_pano = false;
		this.timer = null;
	}
});