/*  *******************************************************************************************************************
	Class: Slider
		Makes the slider for specials left and right work
*/
var SpecialsSlider = Class.create({
	/*
		Initializes Slider
	*/
	initialize : function(content, triggerLeft, triggerRight, viewable, options) {
		
		this.options = {
			//test	:	false
		};
		Object.extend(this.options, options || { });
		
		this.content 		= $(content);
		this.leftArrow 		= $(triggerLeft);
		this.rightArrow 	= $(triggerRight);
		
		boxes = this.content.select('.special');
		this.boxTotal = boxes.length;
		this.boxWidth = boxes[1].getWidth();
		
		this.viewable = viewable;
		this.position = 0;
		this.target = 0;
		
		Event.observe(this.leftArrow, 'click', this.triggerLisenter.bindAsEventListener(this));
		Event.observe(this.rightArrow, 'click', this.triggerLisenter.bindAsEventListener(this));
		
		/*
			initially, create some padding on the left
		*/
		if (this.boxTotal > 1) {
			this.clonePadding('left');
		}
	},
	triggerLisenter : function (event) {
		event.stop();
		elem = event.element();
		direction = elem.id.split('-')[1];
		/*
			clone me some padding
		*/
		this.clonePadding(direction);
		/*
			move it along, nothing to see here
		*/
		this.move(direction);
	},
	/*
		Moves the slider in a given direction
	*/
	move : function (direction) {
		
		this.target = (direction == 'left') ? (this.target + this.boxWidth) : (this.target = this.target - this.boxWidth);
		
		new Effect.Move (this.content , { x: this.target, y: 0, mode: 'absolute', duration: .7, afterFinish: this.adjust } );
		
		(direction == 'left') ? this.position-- : this.position++;
		
	},
	adjust : function () {
		/* not used yet */
	},
	/*
		clones nodes (left or right) to create the illusion that the slider
		never ends...
	*/
	clonePadding : function (direction) {
		
		boxes = this.content.select('.special');
		
		/* left position */
		currLeft = parseFloat(this.content.getStyle('left'));
			
		/* 
			depending on the direciton... clone nodes and put them on either
			the start or the end of the stack to allow the illusion of 
			endless looping. 
			
			After placing cloned node, remove its original
			element to keep the amount of DOM elements to a minimum.
		*/
		if (direction == 'right') {
			
			special = boxes[0];
			special_clone = special.cloneNode(true);
			
			this.content.appendChild(special_clone);
			
			/* target */
			targetLeft = currLeft + this.boxWidth;
			/* set new pos */
			this.content.style.left = targetLeft+'px';
			
			special.remove();
			this.target = this.target + this.boxWidth;
			
		} else if (direction == 'left') {
			
			special = boxes[boxes.length -1];
			special_clone = special.cloneNode(true);
			
			this.content.insertBefore(special_clone, boxes[0]);
			
			/* target */
			targetLeft = currLeft - this.boxWidth;
			/* set new pos */
			this.content.style.left = targetLeft+'px';
			
			special.remove();
			this.target = this.target - this.boxWidth;
		}
		
	}
});
function initSpecialsSlider () {
	
	if ($('slider-content')) {
		var tmpslider = new SpecialsSlider('slider-content', 'slide-left', 'slide-right', 1);
	}
	
}

/*  *******************************************************************************************************************
	Call Event Slider		
*/

  	Event.observe(window, 'load', initSpecialsSlider, false);