var spaceFinder = function(fTotalWidth, fElWidth, iButee, iDiff){
	//largeur global < fElWidth
	if (fTotalWidth == (fElWidth - iDiff) * iButee) return iDiff /2;
	if (fTotalWidth > (fElWidth - iDiff) * iButee){
		var pdg = parseInt((fTotalWidth - ((fElWidth - iDiff) * iButee))/iButee);
		return  pdg / 2
	}
}
function pickerInit(){
	var picker = document.getElement('.modelPicker .picker'); if(!picker) return;
	var hScroll = picker.getElement('.hScroll'); if(!hScroll) return;
	var lis = picker.getElements('ul li');
	var pickOffs = picker.getElements('ul li a.pickOff');
	var returnButton = picker.getElement('a.return');
	var followButton = picker.getElement('a.follow');
	var buttons = picker.getElements('a.arrow');
	var i = 0;
	lis[0].addClass('noBrd');
	// rollover avec apparition en opacité du visuel
	pickOffs.each(function(pickOff, i){
		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();

		// 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;
	}
	else if(lis.length <= 2){
		buttons.addClass('hidden');
		picker.setStyle('width', lis[i].offsetWidth * lis.length);
		hScroll.getElement('ul').setStyle('width', lis[i].offsetWidth * lis.length);
	}
	else if(lis.length > 2){
		hScroll.getElement('ul').setStyle('width', 100000);
	}
	picker.setStyle('width', picker.parentNode.offsetWidth);
	hScroll.setStyle('width', picker.offsetWidth - (returnButton.offsetWidth + followButton.offsetWidth + 1));
	// calcul du nbre max d'elm à afficher
	var butee = Math.round((hScroll.offsetWidth) / (lis[0].offsetWidth));
	
	if (butee > lis.length){
		hScroll.getElement('ul').setStyle('position', 'relative');
	}
	
	
	if (butee != lis.length){
		// on applique au padding des elms la place disponible
		var pdg = spaceFinder(hScroll.offsetWidth, lis[0].offsetWidth, butee,  50);
		lis.each(function(li){
			for (var i=0; i < li.getElements('a').length; i++) {
				li.getElements('a')[i].setStyles({
					'padding-left': pdg,
					'padding-right': pdg
				})
			};
		})
		butee = Math.round((hScroll.offsetWidth) / (lis[0].offsetWidth));
	}
	// init du scroll
	var scroll = new Fx.Scroll(hScroll, {
		wait:false,
		transition:Fx.Transitions.linear,
		duration:500
	});
	
	
	
	// design scrolls
	if(i == 0) returnButton.addClass('noImg');
	if(lis.length - butee == i || lis.length < butee) followButton.addClass('noImg');
	if(lis.length > butee){
		lis[butee].addClass('noBrd');
	}
	var period;
	var increment = function(button) {
		lis.removeClass('noBrd');
		if(!!button.className.match(/\breturn\b/)) {
			
			if(i > 0) i--;
			lis[i].addClass('noBrd');
			scroll.toElement(lis[i]);
		}
		else if(!!button.className.match(/\bfollow\b/)) {
			if(i < lis.length - butee) i++;
			lis[i].addClass('noBrd');
			scroll.toElement(lis[i]);
		}

		if (lis[i+butee]) lis[i + butee].addClass('noBrd');
	};
	
      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);
      });
	
};

window.addEvent('load', pickerInit);