/**
 * @author POP webdev [tw]
 * @version 0.1
 * @classDescription SideScroller moves/slides a LIst horizontally.
 * @return {Object}	Returns a new  object.
 * This class depends on Prototype v1.6 and Scriptaculous controls.
 */
var SideScroller = Class.create({
	initialize: function(slideFrame, options){
		// set options
		this.options = Object.extend({
			initialIndex: 0,
			durationPerSlide: 0.25,
			restAlignment: 'center'
		}, options || {});

		// construction tasks
		//this.slideFrame = $(slideFrame).makePositioned().makeClipping(); //using set width + overflow hidden instead of clipping.
		
		this.slideFrame = $(slideFrame).makePositioned(); 
		this.slideList = $(slideFrame).down().cleanWhitespace();
		this.slides = this.slideList.childElements().invoke('cleanWhitespace'); // get some clean list items
		this.slideFrameWidth = this.slideFrame.getWidth();
		
		// BEGIN horrible ie6 hack to get appropriate slideFrame width (it add overflown elements to width);
		this.slideList.hide();
		this.slideFrameWidth = this.slideFrame.getWidth();
		this.slideList.show();
		// END horrible ie6 hack
		
		//get the real width of slideList
		this.currentSlideIndex = this.options.initialIndex; 
		this.moveEffect = null;
		this.isMoving = false;
		
		// move to 
		this.jumpTo(this.currentSlideIndex);
	},
	
	_calculateMoveByX: function(slideIndex){
		var moveByX = 0;
		
		var slideListCurrentLeftPos = this.slideList.positionedOffset()[0];
		var slideCurrentLeftPos = this.slides[slideIndex].positionedOffset()[0];
		//var slideFrameWidth = this.slideFrame.getWidth();
		var slideFrameWidth = this.slideFrameWidth;// use ie6 hack
		
		var slideWidth = this.slides[slideIndex].getWidth();
		// switch on this.options.restAlignment to determine resting place
		switch(this.options.restAlignment){
			case 'left':
				moveByX = ((slideFrameWidth - slideListCurrentLeftPos) - (slideCurrentLeftPos)) - slideFrameWidth;	
				break;
			case 'right':
				moveByX = ((slideFrameWidth - slideCurrentLeftPos) - slideListCurrentLeftPos) - (slideWidth);
				break;
			default:
				// center (default)
				moveByX = (((slideFrameWidth/2) - slideCurrentLeftPos) - slideListCurrentLeftPos) - (slideWidth/2);
				break;
		}
		return Math.round(moveByX);
	},
	
	// moveToSlide
	moveTo: function (slideIndex){
		var seconds = Math.abs(this.currentSlideIndex - slideIndex) * this.options.durationPerSlide;
		this.currentSlideIndex = slideIndex;
		var moveByX = this._calculateMoveByX(slideIndex);
		this.isMoving = true;
		this.moveEffect = new Effect.MoveBy(this.slideList, 0, moveByX, {duration:seconds, afterFinish: this.stopMoving.bind(this), transition: Effect.Transitions.sinoidal, fps: 15});
	},
	
	stopMoving: function(){
		if(this.isMoving){
			this.moveEffect.cancel();// stops animation wherever it is
		}
		this.isMoving = false;
	},

	jumpTo: function(slideIndex){
		// stop the animation and go directly to the given index.
		this.currentSlideIndex = slideIndex;
		this.stopMoving();
		
		var slideListCurrentLeftPos = this.slideList.positionedOffset()[0];
		var slideCurrentLeftPos = this.slides[slideIndex].positionedOffset()[0];
		
		//var slideFrameWidth = this.slideFrame.getWidth();
		var slideFrameWidth = this.slideFrameWidth;// use ie6 hack
		
		var slideWidth = this.slides[slideIndex].getWidth();
		
		var leftPos = 0;
		switch(this.options.restAlignment){
			case 'left':
				leftPos = - slideCurrentLeftPos;	
				break;
			case 'right':
				leftPos = (slideFrameWidth - slideWidth) - (slideCurrentLeftPos);
				break;
			default:
				// center
				leftPos = (slideFrameWidth/2 - slideCurrentLeftPos) - (slideWidth/2);
				//moveByX = (((slideFrameWidth/2) - slideCurrentLeftPos) - slideListCurrentLeftPos) - (slideWidth/2);
				break;
		}

		this.slideList.setStyle({left: leftPos + 'px'});
		
	},
	
	reset: function(){
		this.currentSlideIndex = this.options.initialIndex;
		this.jumpTo(this.currentSlideIndex);
	}

});