function scrollOptions(){
    this.urlImages=({
	                arrowTop:"",
	                arrowBottom:"",
	                scroll:""
	                })
	this.sizeImages=({
	                arrowTop:{width:15,height:10},
	                arrowBottom:{width:15,height:10},
	                scroll:{width:15,height:10}
	                })
	           
}
function ScrollBar(obj){
	this.velocidadInit  = 0.5;
    this.velocidad      = null; 
	this.obj			= null;
	this.objHeight		= null;
	this.currentScroll 	= null;
	this.intervalScroll	= 1000;
	this.onEnterFrameScroll = null
	this.maxScroll 		= null;
	this.onEnterFrame	= null;
	this.initialize     = false
	this.buttons		= ({arrowTop:null,arrowBottom:null,scroll:null });
	this.options		= ({
	        urlImages:{
	            arrowTop:null,
	            arrowBottom:null,
	            scroll:null
	            },
	        sizeImages:{
	            arrowTop:{width:15,height:10},
	            arrowBottom:{width:15,height:10},
	            scroll:{width:15,height:10}
	            }
	            });
	this.content		= null;
	this.contentHTML	= null;
	this.contentControls= null;
	this.interval		= 10;
	this.stop			= function (){if(this.onEnterFrame){clearTimeout(this.onEnterFrame );this.velocidad = this.velocidadInit;}}
	this.updatePosScroll= function (){
		this.maxScroll 		= this.content.scrollHeight;
		var maxScrollBar = this.buttons.scroll.offsetHeight;
		if(this.onEnterFrameScroll){clearTimeout(this.onEnterFrameScroll )}
		this.buttons.scroll.style.backgroundPosition = "0px "+ (((maxScrollBar-10)/100)*((100/(this.maxScroll-this.objHeight))*this.currentScroll)) + "px";
		this.buttons.scroll.style.visibility = "visible"
		var _this = this;
		this.onEnterFrameScroll = window.setTimeout(function() { _this.buttons.scroll.style.visibility="hidden";},this.intervalScroll);
	}
	this.down			= function (){
	    if(this.content.offsetHeight<this.content.scrollHeight){
		    this.content.scrollTop +=  this.velocidad;
		    this.currentScroll = this.content.scrollTop
		    this.velocidad += 0.01;
		    var _this = this
		    this.updatePosScroll()
		    this.onEnterFrame = window.setTimeout(function() { _this.down();},this.interval);
		}
	}
	this.up 			= function (){
	     if(this.content.offsetHeight<this.content.scrollHeight){
		    this.content.scrollTop -=  this.velocidad;
		    this.currentScroll = this.content.scrollTop
		    this.velocidad += 0.01;
		    var _this = this
		    this.updatePosScroll()
		    this.onEnterFrame = window.setTimeout(function() { _this.up();},this.interval);
		}
	}
	
	    
	
	this.init= function (){
	    
		this.obj = document.getElementById(obj)
		
		this.velocidad = this.velocidadInit;
		this.objHeight = parseFloat(ToolKit.getProperty(this.obj,"height"));
		this.contentHTML = this.obj.innerHTML;
		this.obj.innerHTML = "";
		this.obj.id = ""
		
		
		this.content = document.createElement("DIV")
		this.contentControls = document.createElement("DIV")
		this.buttons.arrowTop =  document.createElement("DIV")
		this.buttons.arrowBottom = document.createElement("DIV")
		this.buttons.scroll = document.createElement("DIV")
        
        this.content.id = obj
        this.contentControls.style.borderLeft = "solid 5px #FFFFFF"
        
        if(ToolKit.navegadorIsGecko){
			var margin = (test(parseFloat(ToolKit.getProperty(this.obj,"margin-top")))+test(parseFloat(ToolKit.getProperty(this.obj,"margin-bottom"))))
			var padding = (test(parseFloat(ToolKit.getProperty(this.obj,"padding-top")))+test(parseFloat(ToolKit.getProperty(this.obj,"padding-bottom"))))
		}else{
			var margin = (test(parseFloat(ToolKit.getProperty(this.obj,"marginTop")))+test(parseFloat(ToolKit.getProperty(this.obj,"marginBottom"))))
			var padding = (test(parseFloat(ToolKit.getProperty(this.obj,"paddingTop")))+test(parseFloat(ToolKit.getProperty(this.obj,"paddingBottom"))))
		}

		with (this.buttons.arrowTop.style)
			{
				width = this.options.sizeImages.arrowTop.width +"px"
				height = this.options.sizeImages.arrowTop.height + "px"
				background = "transparent url('"+ this.options.urlImages.arrowTop +"') no-repeat scroll 0 0"
			}
		with (this.buttons.arrowBottom.style)
			{
				width = this.options.sizeImages.arrowBottom.width +"px"
				height = this.options.sizeImages.arrowBottom.height + "px"
				background = "transparent url('"+ this.options.urlImages.arrowBottom +"') no-repeat scroll 0 0"
			}
		with (this.buttons.scroll.style)
			{
				width = this.options.sizeImages.scroll.width +"px"
				height = (this.objHeight-this.options.sizeImages.scroll.height-this.options.sizeImages.arrowTop.height-this.options.sizeImages.arrowBottom.height-margin-padding)+"px"
				background = "transparent url('"+ this.options.urlImages.scroll +"') no-repeat scroll 2px 0"
			}
		
		with (this.content)
		{
			innerHTML = this.contentHTML;
			style.height = this.objHeight+"px"
			style.overflowY="hidden"
			style.width = this.obj.offsetWidth-this.options.sizeImages.scroll.width-margin-padding-10 +"px"
		}
		
		
		
		if(ToolKit.navegadorIsGecko){this.content.style.cssFloat = "left"}else{this.content.style.styleFloat="left"};
		if(ToolKit.navegadorIsGecko){this.contentControls.style.cssFloat = "left"}else{this.contentControls.style.styleFloat="left"}
		this.obj.appendChild(this.content)
		this.obj.appendChild(this.contentControls)
		this.contentControls.appendChild(this.buttons.arrowTop)
		this.contentControls.appendChild(this.buttons.scroll)
		this.contentControls.appendChild(this.buttons.arrowBottom)
		
		this.currentScroll 	= this.content.scrollTop;
		this.maxScroll 		= this.content.scrollHeight;
			
		var _this = this
		
		//up
		listen("click",this.buttons.arrowTop,function() {_this.stop;_this.up()})
		listen("mouseover",this.buttons.arrowTop,function() {_this.stop;_this.up()})
		listen("mouseout",this.buttons.arrowTop,function() {_this.stop()})
		//down
		listen("click",this.buttons.arrowBottom,function() {_this.stop;_this.down()})
		listen("mouseover",this.buttons.arrowBottom,function() {_this.stop;_this.down()})
		listen("mouseout",this.buttons.arrowBottom,function() {_this.stop()})
		
		listen("mouseover",this.buttons.scroll,function() {_this.stop})
		listen("mouseout",this.buttons.scroll,function() {_this.stop()})
		
		listen("mouseover",this.content ,function() {_this.stop()})
		listen("mouseout",this.content ,function() {_this.stop()})
		listen("click",this.content ,function() {_this.stop()})
		this.initialize = true
		//listen("scroll",this.content ,function(event) {alert(event.wheelDelta)})
		
		
	}

}