var ScrollBar = new Class( {

		Implements: [ Events, Options ],

		options: {
			maxKnobSize: 9,
			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.offsetWidth;
			this.contentScrollSize = this.content.scrollWidth ;
			this.gutterSize = this.gutter.offsetWidth;

			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( 'width', this.knobSize );

			this.updateKnobFromContentScroll();
			this.updateContentFromKnobPosition();
		},

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

		updateKnobFromContentScroll: function(){
			this.position.now = ( this.content.scrollLeft / this.scrollRatio).limit(0, ( this.gutterSize - this.knobSize ) );
			this.knob.setStyle( 'left', 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.scrollLeft -= event.wheel * this.options.wheel;
			this.updateKnobFromContentScroll();
			event.stop();
		},

		page: function( event ) {
			if( event.page.x > this.knob.getPosition().x ) this.content.scrollLeft += this.content.offsetWidth;
			else this.content.scrollLeft -= this.content.offsetWidth;
			this.updateKnobFromContentScroll();
			event.stop();
		},

		start: function( event ){
			this.mouse.start = event.page.x;
			this.position.start = this.knob.getStyle( 'left' ).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.x;
			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.scrollLeft = pos;
			this.updateKnobFromContentScroll();
		},


		moveposition: function( pos ) {
			this.content.scrollLeft += pos;
			this.updateKnobFromContentScroll();
		}

	} );