Scrollbar = Class.create( {
	viewAdjusted: false,
	sliderMoving: false,
	lastPos: null,
	slideSpace: 0,
	scrollRatio: 0,
	
	initialize: function( container, textarea, settings ) {
		this.container = container;
		this.textarea = textarea;
		this.settings = settings || {
			width: 16,
			buttonUpHeight: 16,
			buttonDownHeight: 16,
			sliderTopHeight: 8,
			sliderBottomHeight: 8,
			baseImage: '/images/scrollbar/base.png',
			buttonUpImage: '/images/scrollbar/btup.png',
			buttonDownImage: '/images/scrollbar/btdown.png',
			sliderTopImage: '/images/scrollbar/slidertop.png',
			sliderMiddleImage: '/images/scrollbar/slidermiddle.png',
			sliderBottomImage: '/images/scrollbar/sliderbottom.png'
		};
		
		this.container.scrollBar = this;
		this.textarea.scrollBar = this;
		
		this.box = new Element( 'div' );
		this.bgBox = new Element( 'div' );
		this.btUp = new Element( 'img', { src: this.settings.buttonUpImage, width: this.settings.width, height: this.settings.buttonUpHeight, unselectable: 'on' } );
		this.btDown = new Element( 'img', { src: this.settings.buttonDownImage, width: this.settings.width, height: this.settings.buttonDownHeight, unselectable: 'on' } );
		this.slider = new Element( 'div' );
		this.sliderTop = new Element( 'img', { src: this.settings.sliderTopImage, width: this.settings.width, height: this.settings.sliderTopHeight, unselectable: 'on' } );
		this.sliderMiddle = new Element( 'img', { src: this.settings.sliderMiddleImage, width: this.settings.width, height: '1', unselectable: 'on' } );
		this.sliderBottom = new Element( 'img', { src: this.settings.sliderBottomImage, width: this.settings.width, height: this.settings.sliderBottomHeight, unselectable: 'on' } );
		
		this.box.insert( this.btUp );
		this.box.insert( this.bgBox );
		this.box.insert( this.slider );
		this.box.insert( this.btDown );
		this.slider.insert( this.sliderTop );
		this.slider.insert( this.sliderMiddle );
		this.slider.insert( this.sliderBottom );
		
		this.box.setStyle( {
			position: 'absolute',
			top: '0px',
			float: 'right',
			width: this.settings.width+'px'
			//,background: 'url('+this.settings.baseImage+')'
		} );
		
		
		this.slider.setStyle( {
			position: 'absolute',
			top: this.settings.buttonUpHeight+'px',
			left: '0px',
			zIndex: '2'
		} );

		this.btUp.setStyle( {
			position: 'absolute',
			top: '0px',
			left: '0px'
		} );
		
		this.btDown.setStyle( {
			position: 'absolute',
			left: '0px'
		} );
		
		this.container.insert( this.box );

		var oThis = this;
		this.slider.observe( 'mousedown', function(event) { oThis.sliderMouseDown(event); } );
		this.btUp.observe( 'mousedown', function(event) { oThis.moveUp(); oThis.buttonTimer = setInterval( function() { oThis.moveUp() }, 200 ); } );
		this.btUp.observe( 'mouseup', function(event) { clearInterval( oThis.buttonTimer ); oThis.buttonTimer = null; } );
		
		this.btDown.observe( 'mousedown', function(event) { oThis.moveDown(); oThis.buttonTimer = setInterval( function() { oThis.moveDown() }, 200 ); } );
		this.btDown.observe( 'mouseup', function(event) { clearInterval( oThis.buttonTimer ); oThis.buttonTimer = null; } );
		
		this.resetToContent();
	},

	resetToContent: function() {
		var contWidth = this.container.getWidth();
		var contHeight = this.container.getHeight();
		
		this.box.setStyle( {
			left: (contWidth-this.settings.width)+'px',
			height: contHeight+'px'
		} );
		
		if( contHeight > 0 ) {
			this.bgBox.setStyle( {
				height: ( contHeight - this.settings.buttonUpHeight - this.settings.buttonDownHeight )+"px",
			//	marginTop: this.settings.buttonUpHeight+"px",
				position: 'relative',
				top: this.settings.buttonUpHeight + "px",
				background: 'url('+this.settings.baseImage+')'
			});
		}
		
		this.btDown.setStyle( {
			top: (contHeight-this.settings.buttonDownHeight)+'px'
		} );
		
		var contentHeight = this.textarea.scrollHeight;
		var viewHeight = this.container.getHeight();

		this.slider.style.marginTop = '0px';
		this.textarea.style.marginTop = '0px';
		
		var textPaddingRight = parseInt( this.textarea.getStyle( 'padding-right' ) );

		if( contentHeight <= viewHeight ) {
			if( this.viewAdjusted ) {
				this.textarea.style.paddingRight = (textPaddingRight - this.settings.width) + 'px';
				this.viewAdjusted = false;
			}
			this.container.stopObserving( 'mousewheel' );
			this.container.stopObserving( 'DOMMouseScroll' );
			this.box.hide();
			return;
		}
		else {
			if( !this.viewAdjusted ) {
				this.textarea.style.paddingRight = (textPaddingRight + this.settings.width) + 'px';
				this.viewAdjusted = true;
			}
			var oThis = this;
			this.container.observe( 'mousewheel', function(event) { oThis.onMouseWheel(event) } );
			this.container.observe( 'DOMMouseScroll', function(event) { oThis.onMouseWheel(event) } );
			this.box.show();
		}
		
		var slideArea = viewHeight - this.settings.buttonUpHeight - this.settings.buttonDownHeight;
		
		var sliderHeight = Math.round( (viewHeight/contentHeight) * slideArea );
		this.scrollRatio = (contentHeight/slideArea);
		
		this.sliderMiddle.style.height = (sliderHeight < (this.settings.sliderTopHeight+this.settings.sliderBottomHeight+1) ? 1 : sliderHeight - (this.settings.sliderTopHeight+this.settings.sliderBottomHeight))+'px';

		this.slideSpace = slideArea - sliderHeight;
	},

	sliderMouseDown: function( event ) {
		this.sliderMoving = true;
		this.lastPos = event.pointerY();
		var oThis = this;
		document.observe( 'mousemove', function(event) { oThis.sliderMouseMove(event); } );
		document.observe( 'mouseup', function(event) { oThis.sliderMouseUp(event); } );
		
		event.stop();
	},

	sliderMouseUp: function( event ) {
		this.sliderMoving = false;
		document.stopObserving( 'mousemove' );
		document.stopObserving( 'mouseup' );
	},

	sliderMouseMove: function( event ) {
		if( ! this.sliderMoving ) return;
		
		var diff = event.pointerY() - this.lastPos;
		var newOffset = parseInt(this.slider.style.marginTop) + diff;
		
		if( newOffset < 0 )
			newOffset = 0;
		if( newOffset > this.slideSpace )
			newOffset = this.slideSpace;
		
		this.slider.style.marginTop = newOffset + 'px';
		this.textarea.style.marginTop = Math.round(-newOffset*this.scrollRatio)+'px';
		this.lastPos = event.pointerY();
	},

	moveUp: function( pix ) {
		if(! pix ) pix = 10;
		var sliderOffset = parseInt(this.slider.style.marginTop) - pix;
		var pageOffset = parseInt(this.textarea.style.marginTop) + (this.scrollRatio*pix);
		
		if( sliderOffset < 0 ) {
			sliderOffset = 0;
			pageOffset = 0;
		}
		
		this.slider.style.marginTop = sliderOffset + 'px';
		this.textarea.style.marginTop = pageOffset + 'px';
	},

	moveDown: function( pix ) {
		if(! pix ) pix = 10;
		var sliderOffset = parseInt(this.slider.style.marginTop) + pix;
		var pageOffset = parseInt(this.textarea.style.marginTop) - (this.scrollRatio*pix);
		
		if( sliderOffset > this.slideSpace ) {
			sliderOffset = this.slideSpace;
			pageOffset = -this.slideSpace * this.scrollRatio;
		}
		
		this.slider.style.marginTop = sliderOffset + 'px';
		this.textarea.style.marginTop = pageOffset + 'px';
	},

	onMouseWheel: function( event ) {
		var delta = 0;
		
		if( event.wheelDelta ) {
			delta = event.wheelDelta/120;
			if( window.opera )
				delta = -delta;
		}
		else if( event.detail ) {
			delta = -event.detail/3;
		}

		if( delta < 0 )
			this.moveDown( -delta*5 );
		else if( delta > 0 )
			this.moveUp( delta*5 );

		Event.stop(event);
	}
} );