var VN_Slider = Class.create();

VN_Slider.prototype = {

	initialize : function(params) {
		
		this._params = Object.extend(
			{
				contentId 		: '',
				elemntClassName	: '',
				moveLeftId		: '',
				moveRightId		: '',
				hideDisabled	: false,
				step			: 138/4,
				stepLen			: 4,
				mode			: 'time'	
			},
			params || {}
		);
		
		this._contentWidth  = 0;
		this._conWidth 		= 0; 
		this._elmtsWidth  	= 0;
		this._current 		= 0;
		
		this._actualStep	= -1;
		this._moveStep		= 0;  
		this._interval		= false;
		this._isInterval	= false;
		this._prepareNavigation();
		this._getContentWidth();
		
		
	},
	
	_getContentWidth : function() {
		
		this._conWidth = $(this._params.contentId).getWidth();
		
		
		$$('.' + this._params.elemntClassName).each(function(el) {
			
				this._contentWidth += (el.getWidth() + 5);
			}.bind(this)
		);	

		$(this._params.contentId).setStyle({'width' : this._contentWidth + 'px'});
		
		this._elmtsWidth = $(this._params.contentId).getWidth();
	},
	
	
	_checkPosition : function() {
		
		var result = true;
		

		if ($(this._params.contentId).getStyle('margin-left') != null) {		
		
			var margin = $(this._params.contentId).getStyle('margin-left').sub('px','', 1);
		} else {
			
			var margin = 0;
		}
		
		
		if (this._elmtsWidth <= this._conWidth - margin) {
			
			result = false;
		}

		return result;
	},
	
	_prepareNavigation : function() {
		
		$(this._params.moveLeftId).onclick = function() {

			if (this._isInterval == false) {
				
				this._actualStep++;
				
				if (this._actualStep <= -1) {
				
					this._moveStep = 1;
				
					if (this._params.mode == 'time') {
						this._startInterval();
					} else {
						
						this._startFor();
					}
				} else {
					
					this._actualStep = -1;
				}
			}
			return false;
			
		}.bind(this);
		
		
		$(this._params.moveRightId).onclick = function() {
			
			if (this._isInterval == false) {
				
				if (this._checkPosition()) {
				
					this._actualStep--;
					
					this._moveStep = -1;			
					if (this._params.mode == 'time') {
						this._startInterval();
					} else {
						
						this._startFor();
					}
				}
			}
			return false;
		
		}.bind(this);
	},	
	
	_startFor : function() {
		
		this._isInterval = true;
		if (this._moveStep == 1) {
		
			this._current = this._actualStep * this._params.step;
		}
		
		for ( ; ; ) {
			
			if (this._moveStep == 1) {

				var start = this._actualStep * this._params.step;
				var end   = (this._actualStep + 1) * this._params.step;
			
				
				if (this._current >= start && this._current < end) {
					
					this._move();
					
				} else {
					
					this._current = end;
					break;
				}
			} else if (this._moveStep == -1) {
			
				var start = (this._actualStep + 1) * this._params.step;
				var end   = (this._actualStep + 2) * this._params.step;
				
				if (this._current > start && this._current <= end) {
					
					this._move();
					
				} else {
					
					this._current = start;
					break;
				}
			}
		}
		this._isInterval = false;
	},
	
	_startInterval : function() {
		
		this._isInterval = true;
		if (this._moveStep == 1) {
		
			this._current = this._actualStep * this._params.step;
		}
		
		this._interval = window.setInterval(
		
			function() {
				
				
				if (this._moveStep == 1) {

					var start = this._actualStep * this._params.step;
					var end   = (this._actualStep + 1) * this._params.step;
					
					if (this._current >= start && this._current < end) {
						
						this._move();
						
					} else {
						
						this._current = end;
						clearInterval(this._interval);
						this._isInterval = false;
					}
				} else if (this._moveStep == -1) {
				
					var start = (this._actualStep + 1) * this._params.step;
					var end   = (this._actualStep + 2) * this._params.step;
					
					if (this._current > start && this._current <= end) {
						
						this._move();
						
					} else {
						
						this._current = start;
						clearInterval(this._interval);
						this._isInterval = false;
					}
				}
				
				
			}.bind(this), 
			5
		);
	},
	_move : function() {
		
		this._current += this._moveStep;
		
		$(this._params.contentId).setStyle({'margin-left' : (this._current*this._params.stepLen) + 'px'});
		
		
	}
}