var modelPicker = new Class({
	initialize:function(){
        var ctn = $('mainInside') || $('body');
        this.modelPicker = ctn.getElement('.modelPicker');
        this.buttons = this.modelPicker.getElements('.pickerToggler li a');
		this.pickers = this.modelPicker.getElements('.picker');
		this.buttonsParent = this.modelPicker.getElement('.pickerToggler .body');
		this.buttonsParentHeight = ((this.buttonsParent.offsetHeight) - (this.buttons.length -1))/this.buttons.length;
		
		this.toggled = this.pickers[0];
		
		this.construction();
		
		
		setTimeout(function(){
			this.buttons.each(function(button, i){				
				
				var buttonElem = $(button);
				var paddingBtn = (this.buttonsParentHeight - buttonElem.offsetHeight)/2;
				
				//lancement de l'evenement de switch
				buttonElem.addEvent('click',function(e){
					new Event(e).stop();
					if (buttonElem.hasClass('open')) return;
					this.switchPickers(button, i);
				}.bind(this));
				
				//style a ajouter specifique à chaque bouton
				buttonElem.setAttribute("style","padding-top:"+paddingBtn+"px; padding-bottom:"+paddingBtn+"px");
				
				
			}.bind(this));
		}.bind(this),500);
		
	},
	construction:function(){
		//etat initial ajout classes et styles
		this.pickers.setOpacity(0);
		this.pickers[0].setOpacity(1);
		this.buttons[0].addClass('open');
		this.buttons[this.buttons.length - 1].getParent().setStyle('margin-bottom', 0);
		
		//lancement gestion modeles
		pickerInit(this.pickers[0]);
		
	},
	switchPickers:function(button, i){
		var self = this;
		
		//creation de l'effet de transition et lancement de celui-ci
		new Fx.Style(self.toggled, 'opacity', {
			duration:300,
			transition: Fx.Transitions.Quart.easeOut,
			onStart:function(){
				self.buttons.removeClass('open');
				button.addClass('open');
			},
			onComplete: function(){
				self.toggled = self.pickers[i];
				pickerInit(self.pickers[i]);
				new Fx.Style(self.pickers[i], 'opacity', {duration:400,transition: Fx.Transitions.Quart.easeIn}).start(1);
			}
		}).start(0);
	}
	
	
	
});

var popingTips = new Class({
	initialize:function(lis, hScroll){
		
		this.hScroll = hScroll;
		
		//on lance la creation dune box
		this.createBox();
		
/*
	Correctif Dacia
		lis.each(function(li){
			li.addEvent('mouseenter',this.enter.bind(this,[li]));
			li.addEvent('mouseleave',this.leave.bind(this,[li]));
		}.bind(this));
*/
		
	},
	createBox:function(){
		
		//creation du conteneur de la box et des divisions skinnees
		this.box = new Element('div',{'class':'tool-tip'});
		this.toolTitle = new Element('div',{'class':'tool-title'}).adopt(
			new Element('span')
		).injectInside(this.box);
		
		this.toolText = new Element('div',{'class':'tool-text'}).adopt(
			new Element('span')
		).injectInside(this.box);
		
		//j'injecte la boite dans la page
		$E('body').adopt(this.box);
		
	},
	setTipInfos:function(li){
		
		//je recupere le texte a afficher dans le rel du li
		li.texte = li.getAttribute('rel').split('::')
		li.titreTexte = li.texte[0];
		li.labelTexte = li.texte[1];
		
		//je l'applique dans la box
		this.toolTitle.setHTML(li.titreTexte);
		this.toolText.setHTML(li.labelTexte);
	},
	enter:function(li){
		
		this.setTipInfos(li);
		
		this.box.setStyles({
			'top': li.getTop() - this.box.offsetHeight,
			'left':li.getLeft([this.hScroll]) + li.offsetWidth/3
		});
		
		
		// test : si trop a droite, on passe a gauche
		if (li.getLeft([this.hScroll]) + li.offsetWidth > this.hScroll.getCoordinates().right){
			this.box.setStyle('left',li.getLeft([this.hScroll]) - li.offsetWidth/3);
		}
		
		//this.effect = this.box.effect('opacity',{duration:200}).start(1);
		this.box.setStyle('visibility','visible');
		
	},
	leave:function(li){
	//	this.effect.stop();
		this.box.setStyle('visibility','hidden');
		
	}
})



function pickerInit(picker){
	var hScroll = picker.getElement('.hScroll'),
		lis = picker.getElements('ul li'),
		pickOffs = picker.getElements('ul li a.pickOff'),
		returnButton = picker.getElement('a.return'),
		followButton = picker.getElement('a.follow'),
		buttons = picker.getElements('a.arrow'),
		i = 0;
	
		
	/* rollover avec apparition en opacité du visuel */
	pickOffs.each(function(pickOff){
		var pickOn = pickOff.getNext();
		var spanText = pickOff.getElement('span');
		//recupeartion du Span permettant la mise en forme
		var spanLibelle = spanText.getFirst();
		//positionnement de ce span
		spanLibelle.setStyle('margin-top', (spanText.offsetHeight - spanLibelle.offsetHeight) / 2)
		
		//recup li pour ajout eventement
		var li = pickOn.getParent();
		//li.setStyle('height',80);
		/* sizing pickOns pickOffs et texte */
		var heightToUse = -(pickOff.offsetHeight);
		pickOn.setStyle('margin-top',heightToUse);
		var op = pickOn.effect('opacity', {duration: 400, wait:false,fps:25}).set(0);
		var lien = li.getFirst(); /// hack temporaire pour eviter conflit d'events sur ie
		lien.addEvent('mouseenter',function() {
			op.start(1);
		});
		li.addEvent('mouseleave',function() {
			op.start(0);
		});
		//Suppression du alt sur les images
		$$([pickOn,pickOff]).getFirst().setProperty('alt','');
	});
	/* sizing */
	if (lis.length == 0) return;
	hScroll.getElement('ul').setStyle('width', lis[i].offsetWidth * lis.length);
	hScroll.setStyle('width', picker.offsetWidth - (returnButton.offsetWidth + followButton.offsetWidth +1) );
	/* init du scroll */
	var scroll = new Fx.Scroll(hScroll, {
		wait: false,
		transition: Fx.Transitions.linear,
		duration: 500
	});
	/* calcul du nbre max d'elm à afficher */
	
	var butee = Math.round((hScroll.offsetWidth)/(lis[0].offsetWidth));
	/*design scrolls*/
	if (i == 0){
		returnButton.addClass('noImg');
	}
	if (lis.length - butee == i || lis.length < butee){
		followButton.addClass('noImg');
	}
	var period ;
 	var increment = function(button) {
          if (!!button.className.match(/\breturn\b/)){
              if (i>0) i--;
              scroll.toElement(lis[i]);
          }else if(!!button.className.match(/\bfollow\b/)){
              if (i<lis.length-butee)    i++;
              scroll.toElement(lis[i]);
          }
      };
      buttons.addEvent('click',function(e){
		new Event(e).preventDefault();
		increment(this,e.target);
		if (i == 0){
			returnButton.addClass('noImg');
		}else{
			returnButton.removeClass('noImg');
		}
		if (lis.length - butee == i){
			followButton.addClass('noImg');
		}else{
			followButton.removeClass('noImg');
		}
      });
      buttons.addEvent('mousedown', function(e){
		e = new Event(e);
		e.preventDefault();
		period = increment.periodical(300,this,e.target);
		
      });
      buttons.addEvent('mouseup', function(e){
          new Event(e).preventDefault();
          $clear(period);
      });
	
	
	new popingTips(lis, hScroll);
	
};

window.addEvent('load', function () {
	new modelPicker();
});