var ScrollBar = function($target)
{
	this.__target = $($target);
};

ScrollBar.prototype =
{
	__active: false,
	
	__slideControl: null,
	
	__scrollingUp: false,
	
	__scrollingDown: false,
	
	__scrollingUpInterval: 0,
	
	__scrollingDownInterval: 0,
	
	__scrollHeight: 0,
	
	__trackHeight: 0,
	
	__factor: 0,
	
	__draw: function()
	{
		// hoogte van target
		var $displayHeight  = this.__target.offsetHeight;
		// totale hoogte van target
		var $totalHeight = this.__target.scrollHeight;
		// de te scrollen hoogte van target
		this.__scrollHeight = ($totalHeight - $displayHeight);
		if(this.__scrollHeight > 0)
		{
			var $buttonUpH		= this.__buttonUp.offsetHeight;
			var $buttonDownH	= this.__buttonDown.offsetHeight;
			var $sliderH		= this.__slider.offsetHeight;
			
			// track height bepalen
			this.__trackHeight = ($displayHeight - $buttonUpH - $buttonDownH - $sliderH);
			
			// factor uitrekenen
			this.__factor = (this.__scrollHeight / this.__trackHeight);
			
			this.__track.style.height = (this.__trackHeight + $sliderH) +'px';
			
			this.__buttonUp.style.cursor	= 'pointer';
			this.__buttonDown.style.cursor	= 'pointer';
			
			var $this = this;
			
			/******************************************************************************************/
			
			this.__buttonUp.onmousedown = function()
			{
				$this.scroll(1);
				/*if(!$this.__scrollingUp)
				{
					var exec = function()
					{
						$this.scroll(1)
					};
					
					$this.__scrollingUp			= true;
					$this.__scrollingUpInterval	= setTimeout('exec()', 10);
				}*/
			};
			
			/*this.__buttonUp.onmouseup = function()
			{
				if($this.__scrollingUp)
				{
					clearTimeout($this.__scrollingUpInterval);
					$this.__scrollingUp = false;
				}
			};*/
			
			this.__buttonDown.onmousedown = function()
			{
				$this.scroll(-1);
				/*if($this.__scrollingDown)
				{
					var exec = function()
					{
						$this.scroll(-1)
					};
					
					$this.__scrollingDown			= true;
					$this.__scrollingDownInterval	= setTimeout('exec()', 10);
				}*/
			};
			
			/*this.__buttonDown.onmouseup = function()
			{
				if($this.__scrollingDown)
				{
					clearTimeout($this.__scrollingDownInterval);
					$this.__scrollingDown = false;
				}
			};*/
			
			/******************************************************************************************/
			
			var slideHandler = function($f)
			{
				$this.__target.scrollTop = ($f * $this.__scrollHeight);
			};
			
			this.__slideControl = new Control.Slider(this.__slider.id, this.__track.id,
			{
				axis:		'vertical',
				onSlide:	slideHandler,
				onChange:	slideHandler
			});
			
			/******************************************************************************************/
			
			var scrollHandler = function($event)
			{
				var $delta = 0;
				
				if(!$event) var $event = window.event;
				if($event.wheelDelta)
				{
					$delta = ($event.wheelDelta/120);
					if(window.opera) $delta = -$delta;
				}
				else if($event.detail)
				{
					$delta = -($event.detail/3);
				}
				
				if($delta) $this.scroll($delta/2);
		
				if($event.preventDefault) $event.preventDefault();
				$event.returnValue = false;
			};
			
			// mozilla event toevoegen voor muis wiel
			Event.observe(this.__target, 'DOMMouseScroll', scrollHandler);
			// IE/Opera event toevoegen voor muis wiel
			Event.observe(this.__target, 'mousewheel', scrollHandler);
			if(document.layers) document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
		}
		else
		{
			this.hide();
		}
	},
	
	setButtons: function($buttonUp, $buttonDown)
	{
		this.__buttonUp		= $($buttonUp);
		this.__buttonDown	= $($buttonDown);
	},
	
	setTrack: function($track, $slider)
	{
		this.__track	= $($track);
		this.__slider	= $($slider);
	},
	
	scroll: function($delta)
	{
		$delta /= -this.__factor;
		$delta /= 10;
		
		this.__slideControl.setValueBy($delta);
	},
	
	scrollToPercentage: function($percentage)
	{
		this.__slideControl.setValueBy($percentage / 100);
	},
	
	create: function()
	{
		if(!this.__active && this.__target)
		{
			this.__active = true;
			this.__draw();
		}
	},
	
	redraw: function()
	{
		if(this.__active)
		{
			this.__buttonUp.style.display	= 'block';
			this.__buttonDown.style.display	= 'block';
			this.__track.style.display		= 'block';
			this.__slider.style.display		= 'block';
			
			this.__draw();
			this.scrollToPercentage(0);
		}
		else
		{
			this.create();
		}
	},
	
	hide: function()
	{
		this.__buttonUp.style.display	= 'none';
		this.__buttonDown.style.display	= 'none';
		this.__track.style.display		= 'none';
		this.__slider.style.display		= 'none';
	}
};