var ScrollBar = new Class({
	
	Implements: [Events],
	content: null,
	mode: null,
	slider: null,
	initialize: function(content, scrollbar, handle, mode, ignoreMouse)
	{
		this.mode = mode;
		content = $(content);
		this.content = content;
		var steps = ((mode == "horizontal")?(content.getScrollSize().x - content.getSize().x):(content.getScrollSize().y - content.getSize().y));
		$(scrollbar).setStyle("height", content.getSize().y);
		this.slider = new Slider(scrollbar, handle, {
			steps: steps,
			mode: mode,
			onChange: this.change.bindWithEvent(this)
		});
		this.slider.set(0);
		if(!(ignoreMouse))
		{
			// Scroll the content element when the mousewheel is used within the
			// content or the scrollbar element.
			$$(content, scrollbar).addEvent('mousewheel', this.mouseWheel.bindWithEvent(this));
		}
		$(document.body).addEvent('mouseleave', this.mouseLeave.bindWithEvent(this));
	},

	change: function()
	{
		var x = (this.mode == "horizontal"? this.slider.step : 0);
		var y = (this.mode == "horizontal"? 0 : this.slider.step);
		this.content.scrollTo(x,y);
		this.fireEvent("change", this.slider.step);
	},

	mouseLeave: function()
	{
		this.slider.drag.stop()
	},

	mouseWheel: function(event)
	{
		event = new Event(event).stop();
		var step = this.slider.step - event.wheel * 30;
		this.slider.set(step);
	},

	set: function(step)
	{
		this.slider.set(step);
		this.change();
	}

});