/* -------------------------------------------------------------------
	ShowcasePager
 ------------------------------------------------------------------ */
var ShowcasePager = Class.create({
initialize: function(elm){	
	this.name = ((new Date()).getTime());
	this.elm			= elm;
	this.elmID 		= elm.id;
	
	this.conf		= config.get(this.elmID);

	this.elmWidth	= (128+1+18);
	
	this.shownElms	= 4;
	this.animating	= false;	
	
	// define the Buttons to move	
	this.lft 		= elm.down('.sub-lft a');
	this.rgt 		= elm.down('.sub-rgt a');
	this.lft.href = 'javascript: void(0);';
	this.rgt.href = 'javascript: void(0);';
	
	this.overlay = this.elm.down('.sub-overlay');
  this.overlay.setOpacity(50);  

	this.boundFinishedCallback = this.finishedCallback.bindAsEventListener(this);

	this.resetList();		 
	this.initEventHandler();
},
resetList: function(){
	this.ul			= this.elm.down('ul');
	this.elms		= this.ul.childElements();
	this.maxHeight 	= this.elms.max(function(prod){
		return prod.getHeight();
	});
	
	this.moveFirstPos(); // move to the first position
	this.curPosition = 1;
	this.maxPosition = this.elms.length; 

	//this.elmsPerPage = Math.max(0, Math.min(this.elms.length-this.shownElms, this.shownElms));
	this.elmsPerPage = 4;
	this.lftIndex	= 0;

	// add 2 cause of the border	
	this.elm.down('.sub-mask').setStyle({height: this.maxHeight + 'px'});
	
	if (this.elms.length<=this.shownElms){
		this.lft.hide();
		this.rgt.hide();
	} else {
		this.lft.show();
		this.rgt.show();
	}

	this.checkButtons();
	this.ul.observe('pager:finished', this.boundFinishedCallback);
},
initEventHandler: function(){
	this.lft.observe('click', this.turnpage.bindAsEventListener(this, 'lft'));
	this.rgt.observe('click', this.turnpage.bindAsEventListener(this, 'rgt'));	
},

moveFirstPos: function () {
	this.ul.setStyle({left: '0'});
},

turnpage: function(e, direction){
	if (this.animating) // is false
		return;
		
	this.animating = true;
	var left = this.elmLeft(direction);
	var elmpp = this.elmsPerPage;

	if (this.elmsPerPage > left && left > 0 ) {
		var elmpp = left; 
	}

	this.curPosition = (direction == 'rgt') ? this.curPosition+=elmpp : this.curPosition-=elmpp;

	var newPos = parseInt(this.ul.getStyle('left'))+((direction=='rgt' ? -1 : 1)*this.elmWidth*elmpp);
	var that = this;
	this.ul.morph('left:'+newPos+'px', {
		delay: 0.0, /* delay to start */ 
		duration: this.elmsPerPage * 0.1, /* speed - less is faster */ 
		transition: Effect.Transitions.EaseFromTo ? Effect.Transitions.EaseFromTo : Effect.Transitions.spring, 
		afterFinish: function() {
			that.ul.fire('pager:finished');
		}	
	});
},
finishedCallback: function(e){	
	this.animating = false;
	this.checkButtons();
},
changeGoRightButton: function () {
	if(this.curPosition == 1 ) {
		$('butRightFirst').style.display = 'block';
		$('butRight').style.display = 'none';
	}
	else {
		$('butRightFirst').style.display = 'none';
		$('butRight').style.display = 'block';
	}
},
checkButtons: function () {
	/* Ein-/ausblenden von "Go Right" */
	if(this.curPosition == (this.elms.length-3) ||  this.elms.length <  5) {
		//ausblenden von right;
		this.rgt.hide();
	}
	else {
		this.rgt.show();
	}

	/* Ein-/ausblenden von "Go Left" */
	this.changeGoRightButton();
	if(this.curPosition == 1 ) {
		// Wenn linke Position erreicht, einblenden von "anderem Button"
		this.lft.hide();
	}
	else {
		this.lft.show();
	}
},

elmLeft: function(direction){
	if (direction=='lft'){
		return -1*(parseInt(this.ul.getStyle('left')) / this.elmWidth);
	} else {
		return Math.max(0, this.elms.length-this.shownElms+(parseInt(this.ul.getStyle('left')) / this.elmWidth));
	}
},
move: function(direction){
	// not needed any more 
	if (direction=='lft'){
		var elmIndex2Remove = this.lftIndex-1;
		if (elmIndex2Remove<0)
			elmIndex2Remove = this.elms.length-1;	
		this.lftIndex = elmIndex2Remove;	
		
		var current = parseInt(this.ul.getStyle('left'));
		this.ul.setStyle({left: current-this.elmWidth+'px'});
		this.ul.insert({ top: this.elms[elmIndex2Remove].remove()});
		
	} else {
		var elmIndex2Remove = this.lftIndex;
		this.lftIndex++;
		if (this.lftIndex>this.elms.length-1)
			this.lftIndex = 0;
		var current = parseInt(this.ul.getStyle('left'));
		this.ul.setStyle({left: current+this.elmWidth+'px'});
		this.ul.insert({ bottom: this.elms[elmIndex2Remove].remove()});
		
	}
},
finishing: function () {
	this.animating = false;
},
resetPager: function () {
 	this.stopEventHandler();
	this.ul.setStyle({left: '0'});
	this.rgt.hide();
	this.lft.hide();
	this.lftIndex = 0;
	this.curPosition = 1;
	
	// wenn weniger als 5 Produkte vorhanden, keine Buttons
	

/*
	this.rgt = null;
	this.lft = null;
	this.elmID 		= null;
	this.elm			= null;
	this.overlay = null;
*/
},
stopEventHandler: function () {
	this.lft.stopObserving('click', this.finishing() );
	this.rgt.stopObserving('click', this.finishing() );
	this.ul.stopObserving('pager:finished', this.finishing());
}
});