function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){
	var steps = (horizontal?(content.getScrollSize().x - content.getSize().x):(content.getScrollSize().y - content.getSize().y))
	var slider = new Slider(scrollbar, handle, {	
		steps: steps,
		mode: (horizontal?'horizontal':'vertical'),
		onChange: function(step){
			// Scrolls the content element in x or y direction.
			var x = (horizontal?step:0);
			var y = (horizontal?0:step);
			content.scrollTo(x,y);
		}
	}).set(0);
	if( !(ignoreMouse) ){
		// Scroll the content element when the mousewheel is used within the 
		// content or the scrollbar element.
		$$(content, scrollbar).addEvent('mousewheel', function(e){	
			e = new Event(e).stop();
			var step = slider.step - e.wheel * 30;	
			slider.set(step);					
		});
	}
	// Stops the handle dragging process when the mouse leaves the document body.
	$(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
}

var ScrollBar = new Class({

		Implements: [Events, Options],

		options: {
			maxThumbSize: 30,
			wheel: 8
		},

		initialize: function(content, track, thumb, options){
			this.setOptions(options);

			this.content = $(content);
			this.track = $(track);
			this.thumb = $(thumb);

			this.bound = {
				'start': this.start.bind(this),
				'end': this.end.bind(this),
				'drag': this.drag.bind(this),
				'wheel': this.wheel.bind(this),
				'page': this.page.bind(this)
			};

			this.position = {};
			this.mouse = {};
			this.update();
			this.attach();
		},

		update: function(){

			this.contentSize = this.content.offsetHeight;
			this.contentScrollSize = this.content.scrollHeight;

			this.thumbSize = this.thumb.offsetHeight;
			
			this.trackSize = this.track.offsetHeight - this.thumbSize;

			this.contentRatio = (this.contentScrollSize-this.contentSize) / this.trackSize;

			this.scrollRatio = this.trackSize / (this.contentScrollSize-this.contentSize);

			this.thumb.setStyle('height', this.thumbSize);

			this.updateThumbFromContentScroll();
			this.updateContentFromThumbPosition();
			
			// alert('scroll');
			
			// alert("this.trackSize: "+this.trackSize+" this.contentSize: "+this.contentSize);
		},

		updateContentFromThumbPosition: function(){
			this.content.scrollTop = this.position.now * this.contentRatio;
		},

		updateThumbFromContentScroll: function(){
			this.position.now = (this.content.scrollTop * this.scrollRatio).limit(0, this.trackSize);
			this.thumb.setStyle('top', this.position.now);
			
		},

		attach: function(){
			this.thumb.addEvent('mousedown', this.bound.start);
			if (this.options.wheel) this.content.addEvent('mousewheel', this.bound.wheel);
			this.track.addEvent('mouseup', this.bound.page);
		},

		wheel: function(event){
			this.content.scrollTop -= event.wheel * this.options.wheel;
			this.updateThumbFromContentScroll();
			event.stop();
		},

		page: function(event){
			if (event.page.y > this.thumb.getPosition().y) this.content.scrollTop += this.content.offsetHeight;
			else this.content.scrollTop -= this.content.offsetHeight;
			this.updateThumbFromContentScroll();
			event.stop();
		},

		start: function(event){
			this.mouse.start = event.page.y;
			this.position.start = this.thumb.getStyle('top').toInt();
			document.addEvent('mousemove', this.bound.drag);
			document.addEvent('mouseup', this.bound.end);
			this.thumb.addEvent('mouseup', this.bound.end);
			event.stop();
		},

		end: function(event){
			document.removeEvent('mousemove', this.bound.drag);
			document.removeEvent('mouseup', this.bound.end);
			this.thumb.removeEvent('mouseup', this.bound.end);
			event.stop();
		},

		drag: function(event){
			this.mouse.now = event.page.y;
			this.position.now = (this.position.start + (this.mouse.now - this.mouse.start)).limit(0, this.trackSize);
			this.updateContentFromThumbPosition();
			this.updateThumbFromContentScroll();
			event.stop();
		}

	});

/*

var ScrollBar = new Class({

		Implements: [Events, Options],

		options: {
			maxThumbSize: 30,
			wheel: 8
		},

		initialize: function(content, track, thumb, options){
			this.setOptions(options);

			this.content = $(content);
			this.track = $(track);
			this.thumb = $(thumb);

			this.bound = {
				'start': this.start.bind(this),
				'end': this.end.bind(this),
				'drag': this.drag.bind(this),
				'wheel': this.wheel.bind(this),
				'page': this.page.bind(this)
			};

			this.position = {};
			this.mouse = {};
			this.update();
			this.attach();
		},

		update: function(){

			this.contentSize = this.content.offsetHeight;
			this.contentScrollSize = this.content.scrollHeight;
			this.trackSize = this.track.offsetHeight;

			this.contentRatio = this.contentSize / this.contentScrollSize;

			this.thumbSize = (this.trackSize * this.contentRatio).limit(this.options.maxThumbSize, this.trackSize);

			this.scrollRatio = this.contentScrollSize / this.trackSize;

			this.thumb.setStyle('height', this.thumbSize);

			this.updateThumbFromContentScroll();
			this.updateContentFromThumbPosition();
		},

		updateContentFromThumbPosition: function(){
			this.content.scrollTop = this.position.now * this.scrollRatio;
		},

		updateThumbFromContentScroll: function(){
			this.position.now = (this.content.scrollTop / this.scrollRatio).limit(0, (this.trackSize - this.thumbSize));
			this.thumb.setStyle('top', this.position.now);
		},

		attach: function(){
			this.thumb.addEvent('mousedown', this.bound.start);
			if (this.options.wheel) this.content.addEvent('mousewheel', this.bound.wheel);
			this.track.addEvent('mouseup', this.bound.page);
		},

		wheel: function(event){
			this.content.scrollTop -= event.wheel * this.options.wheel;
			this.updateThumbFromContentScroll();
			event.stop();
		},

		page: function(event){
			if (event.page.y > this.thumb.getPosition().y) this.content.scrollTop += this.content.offsetHeight;
			else this.content.scrollTop -= this.content.offsetHeight;
			this.updateThumbFromContentScroll();
			event.stop();
		},

		start: function(event){
			this.mouse.start = event.page.y;
			this.position.start = this.thumb.getStyle('top').toInt();
			document.addEvent('mousemove', this.bound.drag);
			document.addEvent('mouseup', this.bound.end);
			this.thumb.addEvent('mouseup', this.bound.end);
			event.stop();
		},

		end: function(event){
			document.removeEvent('mousemove', this.bound.drag);
			document.removeEvent('mouseup', this.bound.end);
			this.thumb.removeEvent('mouseup', this.bound.end);
			event.stop();
		},

		drag: function(event){
			this.mouse.now = event.page.y;
			this.position.now = (this.position.start + (this.mouse.now - this.mouse.start)).limit(0, (this.trackSize - this.thumbSize));
			this.updateContentFromThumbPosition();
			this.updateThumbFromContentScroll();
			event.stop();
		}

	});
*/