/**
 * MZ Image Slider
 *
 * @bug	if image slider is in display none element the elementLength is calculated wrong
 *		so that moveStep is also wrong calculated
 *		solution:
 *			after creating MZ_Image_Slider Object set elementLength manually and re-calculate the slider
 *		example:
 *			var myImageSlider = new MZ_Image_Slider('image-slider', 'elements', 95, 10, 6);
 *			myImageSlider.elementLength = 69;
 *			myImageSlider.resetSize();
 *
 * JS-Slider for Magento Shop
 */
 
var MZ_Image_Slider = Class.create({
	/**
	 * Constructor / Setup
	 *
	 * @param	object	HTML-Elemenet
	 * @param	int		HTML-Element Width
	 */
	initialize: function(pElement, pElements, pHeight, pElementMarginRight, pNumberElementsToShow) {
		// set Class Attributes
		this.root					= $(pElement);
		this.pElements				= $(pElements);
		//this.element				= $(pElements);
		this.element				= $$('#favorite-elements p').first(); // a little cheating for wysiwyg editor p insertion
		this.leftArrow				= $(pElement + '-left');
		this.rightArrow				= $(pElement + '-right');
		this.childElements			= this.element.childElements();
		this.numberElements			= this.childElements.length;
		this.actualElement			= 0;
		this.numberElementsToShow	= pNumberElementsToShow;
		this.childElementsMargin	= pElementMarginRight;
		this.sliderHeight			= pHeight;

		// calculate element length
		this.elementLength			= this.childElements && this.childElements[0] ? this.childElements[0].getWidth() : 0;
		this.setupMoveStep();
		
		// Setup Div Container, division by 2 for 2-row-layout
		this.resetSize();
		this.element.setStyle({
			width: this.getElementsSumWidth()/2+'px'
		});
		this.root.setStyle({
			overflow: 'hidden'
		});
		
		this.leftArrow.addClassName('disabled');
		
		if(this.numberElements < this.numberElementsToShow) {
			this.rightArrow.addClassName('disabled');
		}
		
		// Reset Elements in Div Container
		this.resetElements();
		this.showElements();
	},
	
	/**
	 * Recalculates Slider Size
	 */
	resetSize: function() {
		this.sliderWidth = (this.elementLength + this.childElementsMargin) * (this.numberElementsToShow-1) + this.elementLength;
		this.setSize(this.sliderWidth, this.sliderHeight);
		this.setupMoveStep();
        
		this.element.setStyle({
			width: this.getElementsSumWidth()/2+'px'
		});
	},
		/**
	 * Calculates total width of Elements in Order to work with 2-row-layout (therefore the Modulo)
	 */
	getElementsSumWidth: function() {
    return (this.elementLength + this.childElementsMargin) * (this.numberElements%2 ? this.numberElements+1 : this.numberElements);
  },
	
	/**
	 * Hide all childElements
	 */
	resetElements: function() {
		for(i = 0; i < this.numberElements; i++) {
			this.childElements[i].setStyle({
				margin: '0 ' + this.childElementsMargin + 'px 0 0',
				'float': 'left'
			});
		}
	},
	
	/**
	 * Calculate the move step
	 */
	setupMoveStep: function() {
		//this.moveStep = (this.elementLength + this.childElementsMargin)*this.numberElementsToShow;
		this.moveStep = (this.elementLength + this.childElementsMargin);
	},
	
	/**
	 * Show element by id
	 *
	 * @param	int	id
	 */
	showElement: function(id) {
		this.childElements[id].show();
	},
	
	/**
	 * Show specific number (setup in constructor) of elements starting from actual element
	 */
	showElements: function() {
		for(i = this.actualElement; i < (this.actualElement + this.numberElementsToShow) && i < this.numberElements; i++) {
			this.showElement(i);
		}
	},
	
	/**
	 * Set size of the Div Container
	 *
	 * @param	int	width
	 * @param	int	height
	 */
	setSize: function(pWidth, pHeight) {
		this.root.setStyle({
			width:	pWidth + 'px',
			height:	pHeight + 'px'
		});
	},
	
	/**
	 * Go to next element, round Number of elements in case of odd numer
	 */
	nextElement: function(n) {
		if (! n) n = 1;
		if((this.actualElement) < Math.round(this.numberElements/2) - this.numberElementsToShow) {
			if (this.actualElement + n > Math.round(this.numberElements/2) - this.numberElementsToShow) {
				n = Math.round(this.numberElements/2) - this.numberElementsToShow - this.actualElement;
			}
			this.actualElement += n;
			this.leftArrow.removeClassName('disabled');
			var delta = this.moveStep * n;
			if(this.vertical){
				new Effect.Move(this.element, { x: 0, y: -delta, queue: 'end'});
			}
			else{
				new Effect.Move(this.element, { x: -delta, y: 0, queue: 'end'});
			}
		}
		if(this.actualElement ==  Math.round(this.numberElements/2) - this.numberElementsToShow){
			this.rightArrow.addClassName('disabled');
		}
	},
	
	/**
	 * Go to previous element
	 */
	previousElement: function(n) {
		if (! n) n = 1;
		if(this.actualElement < n) n = this.actualElement;
		if (n > 0) {
			this.actualElement -= n;
			this.rightArrow.removeClassName('disabled');
			var delta = this.moveStep * n;
			if(this.vertical){
				new Effect.Move(this.element, { x: 0, y: delta, queue: 'end'});
			}
			else{
				new Effect.Move(this.element, { x: delta, y: 0, queue: 'end'});
			}
		} 
		if(this.actualElement === 0) {
			this.leftArrow.addClassName('disabled');
		}
	}
});