var scrollerCollection = {activeElementId:null};

function createComponentScroller(containerId){
	return (scrollerCollection[containerId] = new scrollerClass(containerId));
}

function scrollerClass(containerId){
	/* SERVICE PROPERTIES */
	this.id = containerId;	
	this.containerId = containerId;
	this.containerObj = null;	
	this.contentObj = null;
	this.sliderObj = null;			
	
	this.dxSlider = 0;	
	this.wSlider = 0;
	this.wSliderArea = 0;
	
	this.wContainer = 0;
	this.wContent = 0;
	
	this.ratio = 1;
	this.scrollStep = 3;
	this.scrollSpeed = 2;	
	
	this.timer = null;	
	
	this.overStatus = 0;
	this.mouseStatus = 0;	

	/* METHODS */
	this.render = __scroller_render;	
	this.init = __scroller_init;
	
	this.startDrag = __scroller_start_drag;
	this.drag = __scroller_drag;	
	this.endDrag = __scroller_end_drag;

	
	this.getMouseStatus = function(e){
		e = e || window.event;
		var status = {};
		status.x = e.pageX || (event.clientX + document.body.scrollLeft);
		status.y = e.pageY || (event.clientY + document.body.scrollTop);		
		status.button = e.button || 0;
		status.e = e;
		return status;
	}	
	
	this.setPosSlider = function(x){
		if(x < 0){
			x = 0;
		}	
		else if(x > this.wSliderArea - this.wSlider){
			x = this.wSliderArea - this.wSlider;
		}
		this.sliderObj.style.left =  parseInt(x)+"px";	
		return x;		
	}
	
	this.setPosContent = function(x){
		if(x < 0){
			x = 0;
		}	
		else if(x > this.wContent - this.wContainer){
			x = this.wContent - this.wContainer;
		}
		
		this.contentObj.style.left = - parseInt(x)+"px";
		return x;						
	}
	
	this.startScroll = function(vector){
		if(vector){
			this.scrollUp();
		}
		else{
			this.scrollDown();
		}	
	}				

	this.scrollUp = function(){
		var x = -parseInt(this.contentObj.style.left) - this.scrollStep*this.scrollSpeed;	
		this.setPosSlider(this.setPosContent(x) * 1/this.ratio);
		this.timer = setTimeout("scrollerCollection."+this.id+".scrollUp()",25);				
	}
	
	this.scrollDown = function(){
		var x = -parseInt(this.contentObj.style.left) + this.scrollStep*this.scrollSpeed;	
		this.setPosSlider(this.setPosContent(x) * 1/this.ratio);
		this.timer = setTimeout("scrollerCollection."+this.id+".scrollDown()",25);				
	}	
	
	this.stopScroll = function(){
		clearTimeout(this.timer);	
	}	
	
	this.clearSelection = function(){
		try{
			if(document.selection){
				document.selection.clear();
			}
			else if(window.getSelection){
				getSelection().removeAllRanges()
			}
		}
		catch(e){}
	}					
	
}

function __scroller_render(){
	this.containerObj = $(this.containerId);
	this.contentObj = $(this.containerId+"_inner");
	this.sliderObj = $(this.containerId+"_slider");	
	
	/* set events */
	var oButtonL = $(this.containerId+"_navL").getElementsByTagName("A")[0];
	oButtonL.onmousedown = function(o){ return function(){o.startScroll(1);return false} }(this);
	oButtonL.onmouseup = function(o){ return function(){o.stopScroll();return false} }(this);
	var oButtonR = $(this.containerId+"_navR").getElementsByTagName("A")[0];
	oButtonR.onmousedown = function(o){ return function(){o.startScroll(0);return false} }(this);
	oButtonR.onmouseup = function(o){ return function(){o.stopScroll();return false} }(this);
	
	this.sliderObj.onmousedown =  function(o){ return function(){o.startDrag(arguments[0]);return false} }(this);
}

function __scroller_init(){
	this.wContainer = this.containerObj.offsetWidth;
	this.wContent = this.contentObj.offsetWidth;	
	
	this.wSliderArea = $(this.containerId+"_navB").offsetWidth;

	this.wSlider = 140;
	this.ratio = (this.wContent-this.wContainer)/(this.wSliderArea-this.wSlider);
	this.contentObj.style.left = "0px";	
	this.sliderObj.style.left = "0px";		
}

function __scroller_start_drag(e){
	if(scrollerCollection.activeElementId){
		var actElm = scrollerCollection.activeElementId;
		scrollerCollection.activeElementId  = null;	
		scrollerCollection[actElm].outSlider();
	}

	var status = this.getMouseStatus(e);
	if(status.button == 1){
		this.mouseStatus = 1;
	}
	
	this.dxSlider = status.x - __getPosX(this.sliderObj)   
	scrollerCollection.activeElementId = this.id;
	
	document.onmousemove = function(e){scrollerCollection[scrollerCollection.activeElementId].drag(e);return false};
	document.onmouseup = function(){scrollerCollection[scrollerCollection.activeElementId].endDrag()};
}

function __scroller_drag(e){
	this.clearSelection();	
	var status = this.getMouseStatus(e);
	
	if(this.mouseStatus == 1 && status.button == 0){
		this.endDrag();
		return;
	}	
	
	var x = status.x - __getPosX(this.sliderObj.parentNode) - this.dxSlider;
	this.setPosContent(this.setPosSlider(x) * this.ratio);	
}

function __scroller_end_drag(){
	scrollerCollection.activeElementId  = null;	

	document.onmousemove = null;
	document.onmouseup = null;
}

function __getPosX(o){
	var x = 0;
		while(o && o.tagName!="BODY"){
			x+= o.offsetLeft + (o.clientLeft || 0);
			o = o.offsetParent;		
		}
	return x;		
}