/**
 * Enable Diaporama
 */
var diaporama = new Class({
	/** 
	 * Constructor
	 * @param psAppUrl root url for application
	 */
	initialize: function(poElm){
		//specify the number of elements to display
		this.viewable = poElm.className.match(/viewable_[0-9]*/);
		if(this.viewable != null){ 
			this.viewable = this.viewable[0].split("_")[1];
		}else {
			this.viewable = 3
		}
		
		//detect tag component
		this.ul = poElm.getElement('ul');
		this.lis = poElm.getElements('li');
		
		//modify click on element
		this.lis.each(function(poLi, pnIndex){
			var loTxt = $(poLi.lastChild.nodeType == 3 ? poLi.lastChild.previousSibling : poLi.lastChild);
			if(loTxt.hasClass("promoCtn")){
				poLi.setStyle("cursor", "pointer");
			} 
			
			var loOldClick = poLi.onclick;
			if(typeof loOldClick == "function"){
				poLi.removeEvent("click", loOldClick);
			}
			
			poLi.addEvent("click", function (poOldClick, poTxt){
				this.displayPromoTxt(poLi, poTxt);
				if(typeof poOldClick == "function") poOldClick();
			}.bind(this, loOldClick,loTxt));
		}.bind(this));
		
		//define size
		this.size2apply = this.lis[0].offsetWidth+ this.lis[0].getStyle('margin-right').toInt()+ this.lis[0].getStyle('margin-left').toInt();
		
		this.ul.setStyle("width" , this.size2apply * (this.lis.length));
		this.ctn = poElm.getElement('div');
		this.promoCtn = $("promoCtn");
		if(this.ctn){
				this.ctn.setStyle("width" , this.size2apply * this.viewable);
		}
		if (this.promoCtn)
			this.promoCtn.setStyle("width" , (this.lis[0].offsetWidth + 10) * 3);

		//detetec navigation buttons
		this.btnLeft = poElm.getElement("a.btnLeft");
		this.btnRight = poElm.getElement("a.btnRight");
		this.btnLeft.addEvent("click", function(){ this.scroll(-1);return false;}.bind(this));
		this.btnRight.addEvent("click", function(){ this.scroll(1);return false;}.bind(this));
		
		//init scroll parameters
		this.current = 1;
		if(this.ctn) this.ctn.scrollLeft = 0;
		this.maxScroll = this.ctn.scrollWidth - this.ctn.offsetWidth;
		this.checkOfferNumbers();
	},
	
	checkOfferNumbers : function(){
		if (this.lis.length < 4){
			this.btnLeft.setStyle('visibility','hidden');
			this.btnRight.setStyle('visibility','hidden');
	        
			var lnCurrWidth = 0;
			for (var lnJ = 0, lnN = this.lis.length; lnJ < lnN; lnJ++){
				//lnCurrWidth += this.lis[lnJ].getSize().x;
				lnCurrWidth += this.lis[lnJ].offsetWidth + this.lis[lnJ].getStyle('margin-right').toInt() + this.lis[lnJ].getStyle('margin-left').toInt();
			}

			this.ul.setStyle('margin', '0 auto');
			this.ul.setStyle('width', lnCurrWidth );
	    }
	},
	
	/**
	 * Display promotion text
	 * @param poElm element selected
	 * @param poCtn promotion text container
	 */
	displayPromoTxt: function (poElm, poCtn){
		if(poCtn && !poCtn.hasClass("promoCtn")) return;
		if(!poElm) return;
		poElm.addClass(" hilighted");
		if(this.oldElm){
			this.oldElm.removeClass("hilighted"); 
			//this.oldCtn.setStyle("display" , "");
		}
		
		var loTxt = $(poElm.lastChild.nodeType == 3 ? poElm.lastChild.previousSibling : poElm.lastChild);
		this.currentPromo = loTxt;
		this.oldElm = poElm;
		//this.oldCtn = poCtn;
		if(!loTxt.hasClass("promoCtn")){
			this.promoCtn.setProperty("html", "");
		}else {
			loTxt.setStyle("display" , "none");
			this.promoCtn.setProperty("html", loTxt.getProperty("html"));
		}
	},
	
	/**
	 * Define current element
	 * @param pnSens direction
	 */
	setCurrent : function (pnSens){
		this.current += pnSens;
		if(this.current < 0) this.current = 0;
		if(this.current > this.lis.length-1) this.current =  this.lis.length-1;
	},
	
	/**
	 * Scroll diaporama
	 * @param pnSens direction to scroll
	 */
	scroll: function (pnSens){
		this.displayPromoTxt();
		this.setCurrent(pnSens);
		if(!this.TO){
			this.conf = {};
			this.conf.endVal = this.ctn.scrollLeft + (this.size2apply * pnSens);
		}
		else {
			clearInterval(this.TO);
			this.conf.endVal += (this.size2apply * pnSens);
		}
		this.conf.startTime = new Date().getTime();
		this.conf.startVal = this.ctn.scrollLeft;
		this.conf.step = (this.conf.endVal - this.conf.startVal) / 500;
		this.engine();
		
		//remove class managing put some promotion to lower highlight
		if (this.ul.hasClass("downlighted")) this.ul.removeClass("downlighted");
	},
	
	/**
	 * start auto scrolling
	 */
	engine : function (){
		this.TO = setInterval(function (){
					var currentTime = new Date().getTime();
					this.ctn.scrollLeft = this.conf.startVal + (currentTime - this.conf.startTime) * this.conf.step;
					if( currentTime >= this.conf.startTime + 500 ) {
						clearInterval(this.TO);
						this.TO = null;
						this.ctn.scrollLeft = this.conf.endVal;
						this.check();
					}
				}.bind(this),40);			
	},
	
	/**
	 * Check navigation button display
	 */
	check: function (){
		if(this.ctn.scrollLeft < this.size2apply){
			this.ctn.scrollLeft = 0;
			this.btnLeft.addClass("inactive");
			this.btnRight.removeClass("inactive");
		}else if(this.maxScroll - this.ctn.scrollLeft < this.size2apply) {
			this.ctn.scrollLeft = this.ctn.scrollWidth;
			this.btnRight.addClass("inactive");
			this.btnLeft.removeClass("inactive");
		}else {
			this.btnRight.removeClass("inactive");
			this.btnLeft.removeClass("inactive");
		}
	}
});