/* effet is running */
var isRunning = false;
var cufonSiteLocal = cufonSiteLocal ? cufonSiteLocal : "";

window.addEvent("domready", function(){
	var MP = new ModelPicker();
});

/**
 * objet Notifier : gere les evenements
 **/
var Notifier = new Class({
	initialize: function (){}
});
Notifier.implement(new Events);
// Singleton
Notifier = new Notifier;

/**
 * 
 * class Model Picker
 * 
 **/
var ModelPicker = new Class({
	
	options : {
		id : "modelPicker"
	},
	
	initialize : function(options){
		var _self = this;
		this.setOptions(options);
		this.modelPicker = $(this.options.id);
		if(!this.modelPicker) return;
		if(isIE8()) {
			$$(".invisible").each(function(el){
				el.removeClass("invisible");
			});
		}
		//if(window.ie6) _self.createIFrame();
		_self.createContainerRoll();
		
		var toCufon = [];
		Cufon.now();
		$("modelPicker").getElements("a").each( function(el){
			if( !el.getParent().getParent().hasClass("sub_img") )
				toCufon.push(el);
		});
        if (!localCyrillic.contains(cufonSiteLocal)){
            Cufon.replace(toCufon);
        }
		
		this.items = this.modelPicker.getElement("ul").getChildren();
		this.MP_Effect = new Fx.Elements( this.modelPicker.getElements("ul div"), { 
			onStart : function(){
				_self.startHandler(_self);
			},
			onComplete : function(){
				_self.completeHandler(_self);
			}
		});
		
		var _self = this;
		Cufon.DOM.ready(function() {
			_self.mp_accordion = new MP_Accordion( _self );
			_self.modelPicker.removeClass("invisible");
		});
		
		/* pbm de fireevent
		Notifier.addEvent("sizeReady", function(){
			_self.initRolls();
		});
		*/
	},
	
	createIFrame : function (){
		var iframe = new Element('iframe', {
			id: "iframeModelPicker"
		});
		$(document.body).adopt(iframe);
	},
	
	createContainerRoll : function (){
		var div = new Element('div', { id: "rollContainer" }).addClass("hidden");
		$(document.body).adopt(div);		
	},
	
	initRolls : function(){
		var _self = this;
		_self.rolls = [];
		this.items.each(function(li){
			_self.rolls.push(new MP_Roll( li ));
		});
		this.show();
	},
	show : function(){
		this.modelPicker.addClass('started');
	},
	startHandler : function(){
		isRunning = true;
		Notifier.fireEvent("effectStarted");
	},
	completeHandler : function(o){
		isRunning = false;
		Notifier.fireEvent("effectComplete", o.mp_accordion.currentLink);
	}
});
ModelPicker.implement(new Options, new Events);

/**
 * 
 * class MP_Accordion
 * 
 **/
var MP_Accordion = new Class({
	
	oMPDimensions : { },
	
	initialize : function(parent){
		this.parent = parent;
		this.getSizes();
	},
	
	getSizes : function(){
		var dimensions = this.parent.modelPicker.getCoordinates();
		this.oMPDimensions.totalWidth = dimensions.width;
		this.oMPDimensions.itemWidth = [];
		this.oMPDimensions.ulWidth = [];
		this.oMPDimensions.baseWidth = this.oMPDimensions.totalWidth;
		
		var _self = this;
		
		this.parent.items.each( function(li, i){
			_self.oMPDimensions.itemWidth[i] = li.getElement("a").getCoordinates().width;
			_self.oMPDimensions.ulWidth[i] = li.getElement("ul").getCoordinates().width;
			_self.oMPDimensions.baseWidth -= _self.oMPDimensions.itemWidth[i];
		});
		
		this.setSizes(0);
	},
	
	setSizes : function(toOpen){
		var _self = this;
		toOpen = toOpen ? toOpen : 0;
		this.parent.items.each( function(li, i){
			ulWidth = ( _self.oMPDimensions.ulWidth[i] < _self.oMPDimensions.baseWidth ) ? _self.oMPDimensions.baseWidth : _self.oMPDimensions.ulWidth[i];
			li.getElement("ul").setStyle("width", ulWidth);
			
			if ( i == toOpen) {
				li.getElement("div").setStyle("width", _self.oMPDimensions.baseWidth);
				_self.animate(i, li.getElement("a"));
			}
			else {
				li.getElement("div").setStyle("width", 0);
				if(window.webkit) li.getElement("ul").setStyle("display", "none");
			}
			
			if( _self.oMPDimensions.ulWidth[i] > _self.oMPDimensions.baseWidth )
				new MP_Scroller( li, _self.oMPDimensions.ulWidth[i], _self.oMPDimensions.baseWidth, _self.oMPDimensions.itemWidth, i );
			
			_self.setEvents(li, i);
		});
		
		// Notifier.fireEvent("sizeReady"); // pbm de fireevent ?!
		// if(window.webkit) _self.parent.initRolls();
		_self.parent.initRolls();
	},
	
	setEvents : function(li, i){
		var _self = this;
		li.getElement("a").addEvent(
			"click", function(e){
				new Event(e).stop();
				if ( !this.hasClass("current") ) _self.animate(i, this);
			}
		);
	},
	
	animate : function(i, a){
		if(!isRunning) {
			
			var _self = this;
			if(_self.currentLink) {
				var ul = _self.currentLink.getNext().getElement("ul");
				ul.addClass("invisible");
				
				var next = _self.currentLink.getNext().getElement(".next");
				var prev = _self.currentLink.getNext().getElement(".prev");

				if(next && prev){
					next.addClass("invisible");
					prev.addClass("invisible");
				}
				
				if(window.webkit) ul.setStyle("display", "none");
			}
			
			Notifier.addEvent("effectComplete", function(currentA){
				if( currentA == a ) {
					var currentUl = a.getNext().getElement("ul");
					if(window.webkit) currentUl.setStyle("display", "block");
					currentUl.removeClass("invisible");
					
					var next = a.getNext().getElement(".next");
					var prev = a.getNext().getElement(".prev");
					
					if(next && prev){
						next.removeClass("invisible");
						prev.removeClass("invisible");
					}
					
					currentA.addClass("current");
				}
			});
			
			var current = (this.current) ? this.current : 0;
			var oEffect = { };
			oEffect[current] = { 'width' : 0 };
			oEffect[i] = { 'width' : this.oMPDimensions.baseWidth }
			this.parent.MP_Effect.start(oEffect);
			this.current = i;
			
			if( !a.hasClass("current") ) {
				if(_self.currentLink)
					_self.currentLink.removeClass("current");
				_self.currentLink = a;
			}
		}
	}
});
Accordion.implement(new Events);


/**
 * 
 * class MP_Roll
 * 
 **/
var MP_Roll = new Class({
	
	initialize : function(container){
		var _self = this;
		_self.items = container.getElement("ul").getChildren();
		_self.container = $("rollContainer");
		_self.currentUl = null;
		_self.lastLi = null;
		
		// init sizes
		_self.totalHeight = $("body").getCoordinates().height - 20;
		_self.initCols(container.getElement("ul"));
		_self.setPositions(_self);
	},
	
	initCols : function(ulContainer){
		var _self = this;

		ulContainer.getElements("ul").each(function(ul, i){
			var nbEls = ul.getElements("li").length;
			var maxEls = 4;
			var heightEl = 90;
			
			if ( nbEls > maxEls ) {
				ul.addClass("two_cols");
				ul.getElements("li").each( function(li, i) {
					if( i >= maxEls && i < 2*maxEls ) {
						li.addClass("cut");
						li.setStyle("top", (i-maxEls)*heightEl);
					} else if( i >= 2*maxEls ) {
						li.addClass("cut_2");
						li.setStyle("top", (i-maxEls-maxEls)*heightEl);
					}
				});
			}
			if ( nbEls > 2*maxEls ) {
				ul.removeClass("two_cols");
				ul.addClass("three_cols");
			}
		});
	},
	
	setPositions : function(self){
		var _self = self;
		_self.items.each(function(li,i){
			var currentUl = $(li.getElement("ul"));
			if( !$(currentUl) ) return;
			
			var top = - (currentUl.getCoordinates().height) + 1;
			
			// fix webkit
			/*if( window.webkit ) {
				var nbEls = currentUl.getChildren().length;
				top = -(nbEls*110);
			}*/
			
			currentUl.setStyles({
				"top": top,
				"display" : "none",
				"visibility" : "visible"
			});
			
			_self.setEvents(li);
		});
		
		Notifier.fireEvent("positionsReady");
	},
	
	setEvents : function(li){
		var _self = this;
		li.addEvents({
			"click" : function(e){
				new Event(e).stop(); 
				_self.clickHandler(li);
			},
			"mouseleave" : function(){
				if(!_self.li_current.hasClass("current")){
					_self.li_current.getElement("span").setStyle("display", "block");
					_self.li_current.getElement("span.roll").setStyle("display", "none");
				}
				
				_self.leaveHandler(li);
			},
			"mouseenter": function(){
				_self.enterHandler(li, true);
				_self.clickHandler(li);
				_self.li_current = li;
				li.getElement("span").setStyle("display", "none");
				li.getElement("span.roll").setStyle("display", "block");
			}
		});
		
		_self.container.addEvents({
			"mouseenter" : function(){
				_self.enterHandler(li, false);
			},
			"mouseleave": function(){
				_self.leaveHandler(li);
			}
		});
		/*
		li.getParent().addEvent("mouseleave", function(){
			
			li.getElement("span").setStyle("display", "block");
			li.getElement("span.roll").setStyle("display", "none");
			
		});
		*/
	},
	
	leaveHandler : function(li){
		var _self = this;

		_self.lastLi = li;
		//console.log(_self.lastLi.getElement("a"))
//		_self.lastLi.getElement("span").setStyle("display", "none");
//		_self.lastLi.getElement("span.roll").setStyle("display", "block");
		
		_self.hideTimer = (function(){
			_self.hide(li);
		}).delay(500);
		_self.currentUl = null;
		
	},
	
	enterHandler : function(li, cufonize){
		var _self = this;
		$clear(_self.hideTimer);
		
		if (cufonize) {
			li.getElement("span").setStyle("display", "none");
			li.getElement("span.roll").setStyle("display", "block");
			if (_self.lastLi) 
				_self.hide(_self.lastLi);
		}
	},
	

	clickHandler : function(li){
		var _self = this;
		var ul = li.getElement("ul");
		if(ul == _self.currentUl) return;
		/* Test de position 
		var tolerance = 5;
		var itemLeft = li.getCoordinates().left;
		var itemRight = li.getCoordinates().width + itemLeft;
		
		var next = li.getParent().getParent().getElement(".next");
		var prev = li.getParent().getParent().getElement(".prev")
		if( next && prev ) {
			var maxRight = next.getCoordinates().left + tolerance;
			var coordPrev = prev.getCoordinates();
			var minLeft = coordPrev.left + coordPrev.width + tolerance;
			
			if( !next.hasClass("hidden") && maxRight > itemLeft && maxRight < itemRight ) 
				return;
			if( !prev.hasClass("hidden") && minLeft > itemLeft && minLeft < itemRight ) 
				return;
		}
		/* // Test de position */
		
		if ( _self.hideTimer )
			_self.hideTimer = $clear(_self.hideTimer);
		
		// ajoute le new contenu au container
		var newUl = ul.clone();
		_self.container.adopt(newUl);
		_self.container.removeClass("hidden");
		
		// set style sur la liste
		li.addClass("current");
		newUl.setStyle("display", "block");
		
		// positionne le container
		var liPos = li.getPosition();
		var ulCoor = newUl.getCoordinates();
		
		_self.container.setStyles({
			top : liPos.y - ulCoor.height -1,
			left : liPos.x
		});
		
		// fix IFrame pour IE6
		/*
		if(window.ie6){
			var dimension = newUl.getCoordinates();
			$("iframeModelPicker").setStyles({
				'width': dimension.width,
				'height': dimension.height,
				'top': dimension.top,
				'left': dimension.left,
				'z-index': 1,
				'display' : 'block'
			});
		}*/

		// lance l effet
		_self.effects = [];
		var lis = newUl.getChildren().reverse();
		var i = 0;
		var url = null;
		
		_self.displayTimer = (function(){
			if(lis[i]) {
				lis[i].showEffect = lis[i].effect('opacity', {duration: 200});
				if (!lis[i].childrenImagesRegistered){
					if (ConfigMenuMP[li.id]){
						var url = ConfigMenuMP[li.id][lis[i].id];
					}

					if (url){
						var img = new Asset.image(ConfigMenuMP[li.id][lis[i].id], {
							onload : function(){
								this.injectTop(this.li.getElement('a'));
							}
						});
						img.li = lis[i];
					};
					lis[i].childrenImagesRegistered = true;
				}
				
				lis[i].showEffect.start(1);
			}
			if (i< lis.length -1){
				i++
			}else{
				$clear(_self.displayTimer);
			}
		}).periodical(100, this);
		
		_self.currentUl = ul;
	},
	
	hide : function(li){
		var _self = this;
		
		li.removeClass("current");
		
		var ul = _self.container.getElement("ul");
		if(ul){
			var lis = ul.getChildren().reverse();
			lis.each(function(el, i){
				if(el.showEffect) el.showEffect.stop();
			});
			$clear(_self.displayTimer);
		}
		
		_self.container.empty();
		_self.container.addClass("hidden");
		
		/* trick pour etat roll over */
		li.getParent().getParent().getPrevious().focus();
		li.getElement("span").setStyle("display", "block");
		li.getElement("span.roll").setStyle("display", "none");
		
		/*
		if(window.ie6){
			var dimension = newUl.getCoordinates();
			$("iframeModelPicker").setStyles({
				'width': 0,
				'height': 0,
				'top': 0,
				'left': 0,
				'z-index': 1,
				'display' : 'none'
			});
		}
		*/
	}
});


/**
 * 
 * class MP_Scroller
 * 
 **/
var MP_Scroller = new Class({
	
	initialize : function(container, ulWidth, totalWidth, aWidth, index){
		
		this.container = container;
		this.totalWidth = totalWidth;
		this.index = index;
		this.aWidth = aWidth;
		this.div = container.getElement("div");
		this.ul = container.getElement("ul");
		this.maxDecal = ulWidth - totalWidth;
		this.nbSteps = Math.ceil(ulWidth / totalWidth);
		this.currentStep = 1;
		
		this.injectHandlers();
	},
	
	injectHandlers : function(){
		
		var _self = this;
		var next = new Element("a", { href : "#" }).setHTML("&gt;").addClass("next invisible");
		var prev = new Element("a", { href : "#" }).setHTML("&lt;").addClass("prev hidden invisible");
		
		var baseMargin = (window.ie6) ? -10 : 0;
		this.ul.setStyle("margin-left", baseMargin);
		
		prev.addEvent("click", function(e){
			new Event(e).stop();
			
			// var baseMargin = (window.ie6) ?  (_self.totalWidth * (_self.currentStep-1)) - 10 : (_self.totalWidth * (_self.currentStep-1));
			
			var newMargin = _self.ul.getStyle("margin-left").toInt() + _self.totalWidth;
			newMargin = (newMargin > 0) ? 0 : newMargin;
			
			_self.ul.effect('margin-left', {
				duration: 200,
				onComplete : function(){
					_self.currentStep--;
					if( _self.currentStep == 1 ) {
						prev.addClass("hidden");
						next.removeClass("hidden");
					} else {
						prev.removeClass("hidden");
						next.removeClass("hidden");
					}
				}
			}).start( newMargin );
		});
		
		next.addEvent("click", function(e){
			new Event(e).stop();
			
			var newValue = ( (_self.totalWidth * _self.currentStep) < _self.maxDecal ) ? (- ( _self.totalWidth * _self.currentStep ) - 10) : ( - _self.maxDecal - 10);
			
			_self.ul.effect('margin-left', {
				duration: 200,
				onComplete : function(){
					_self.currentStep++;
					if( _self.currentStep == _self.nbSteps ) {
						prev.removeClass("hidden");
						next.addClass("hidden");
					} else {
						prev.removeClass("hidden");
						next.removeClass("hidden");
					}
				}
			}).start( newValue );
			
		});
		
		this.div.adopt(prev);
		this.div.adopt(next);
	}
});


/* Utils */
function isIE8 (){
	if( /MSIE 8.0/.test(navigator.userAgent) ) return true;
	return false;
}