var ScrollBar = new Class( {
	
	    Implements: [ Events, Options ],
	
	    options: {
	    	maxKnobSize: 15,
	    	wheel: 8
	    },
	
	    initialize: function( content, gutter, knob, options ) {
	    	this.setOptions( options );
	
	    	this.content = $( content );
	    	this.gutter = $( gutter );
	    	this.knob = $( knob );
	
	    	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.gutterSize = this.gutter.offsetHeight;
	
	    	this.contentRatio = this.contentSize / this.contentScrollSize;
	
	    	this.knobSize = ( this.gutterSize * this.contentRatio ).limit( this.options.maxKnobSize, this.gutterSize );
	
	    	this.scrollRatio = this.contentScrollSize / this.gutterSize;
	
	    	this.knob.setStyle( 'height', this.knobSize );
	
	    	this.updateKnobFromContentScroll();
	    	this.updateContentFromKnobPosition();
	    },
	
	    updateContentFromKnobPosition: function(){
	    	this.content.scrollTop = this.position.now * this.scrollRatio;
	    },
	
	    updateKnobFromContentScroll: function(){
	    	this.position.now = ( this.content.scrollTop / this.scrollRatio).limit(0, ( this.gutterSize - this.knobSize ) );
	    	this.knob.setStyle( 'top', this.position.now );
	    },
	
	    attach: function(){
	    	this.knob.addEvent( 'mousedown', this.bound.start );
	    	if( this.options.wheel ) this.content.addEvent( 'mousewheel', this.bound.wheel );
	    	this.gutter.addEvent( 'mouseup', this.bound.page );
	    },
	
	    wheel: function( event ) {
	    	this.content.scrollTop -= event.wheel * this.options.wheel;
	    	this.updateKnobFromContentScroll();
	    	event.stop();
	    },
	
	    page: function( event ) {
	    	if( event.page.y > this.knob.getPosition().y ) this.content.scrollTop += this.content.offsetHeight;
	    	else this.content.scrollTop -= this.content.offsetHeight;
	    	this.updateKnobFromContentScroll();
	    	event.stop();
	    },
	
	    start: function( event ){
	    	this.mouse.start = event.page.y;
	    	this.position.start = this.knob.getStyle( 'top' ).toInt();
	    	document.addEvent( 'mousemove', this.bound.drag );
	    	document.addEvent( 'mouseup', this.bound.end );
	    	this.knob.addEvent( 'mouseup', this.bound.end );
	    	event.stop();
	    },
	
	    end: function( event ){
	    	document.removeEvent( 'mousemove', this.bound.drag );
	    	document.removeEvent( 'mouseup', this.bound.end );
	    	this.knob.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.gutterSize - this.knobSize ) );
	    	this.updateContentFromKnobPosition();
	    	this.updateKnobFromContentScroll();
	    	event.stop();
	    },

   	    setposition: function( pos ) {
	    	this.content.scrollTop = pos;
	    	this.updateKnobFromContentScroll();
	    	event.stop();
	    }
	
	} );