var ScrollBars = Class.create({
	initialize: function(ele, options) {
		this.ele = $(ele);
		this.options = Object.extend({
			LeftBar: false,
			TopBar: false,
			RightBar: true,
			BottomBar: true,
			BarHandlerMinSize: 10,
			BarSize: 12
		},options);
		
		this.mouseDown = false;
		
		//console.log(Element.childElements(this.ele).last().offsetTop);
		//console.log(Position.positionedOffset(Element.childElements(this.ele).last()));
		//alert(this.ele.scrollHeight);
		//console.log(this.ele.scrollHeight);
		
		//this.ele.scrollTop = 9999;
		//console.log(this.ele.scrollHeight);
		//console.log(Element.childElements(this.ele).last().getWidth());
		
		//if (this.ele.scrollHeight>=Element.getHeight(this.ele) || this.ele.scrollWidth>=Element.getWidth(this.ele)) {
			Element.setStyle(this.ele, {'overflow':'hidden'});
			/*var BarVerticalSize = parseInt(  Element.getHeight(this.ele) / this.ele.scrollHeight * Element.getHeight(this.ele));
			var BarHorizontalSize = parseInt( Element.getWidth(this.ele) / this.ele.scrollWidth * Element.getWidth(this.ele));
			if (BarVerticalSize<BarMinSize) BarVerticalSize = BarMinSize;
			if (BarHorizontalSize<BarMinSize) BarHorizontalSize = BarMinSize;*/
			
			if (this.options.LeftBar) {
				var LeftBar = new Element('div', {
					'id':Element.identify(this.ele) + '-scrollbar-left',
					'class':'scrollbars-vertical',
					'style':'position:absolute; display:block; width:'+this.options.BarSize+'px; height:'+Element.getHeight(this.ele)+'px;'
				}).update('<div class="scrollbar-handler scrollbars-vertical-handler" style="position:relative">&nbsp;</div>');
				Element.insert(this.ele, {top:LeftBar});
				//var LeftBar = new Element('div', {'class':'scrollbars-horizontal'}
				//Event.observe(
			}
			
			if (this.options.TopBar) {
				
			}
			
			if (this.options.RightBar) {
				var RightBar = new Element('div', {
					'id':Element.identify(this.ele) + '-scrollbar-right',
					'class':'scrollbars-vertical',
					'style':'position:absolute; display:block; width:'+this.options.BarSize+'px; margin-left:'+(Element.getWidth(this.ele) - this.options.BarSize) + 'px; height:'+Element.getHeight(this.ele)+'px;'
				}).update('<div class="scrollbar-handler scrollbars-vertical-handler" style="position:relative">&nbsp;</div>');
				Element.insert(this.ele, {top:RightBar});
				
				/*Event.observe(Element.select(RightBar, '.scrollbars-vertical-handler').first(), 'mousedown', this.verticalHandler.bindAsEventListener(this), false);
				Event.observe(Element.select(RightBar, '.scrollbars-vertical-handler').first(), 'mouseup', this.verticalHandler.bindAsEventListener(this), false);*/
			}
			
			if (this.options.BottomBar) {
				
			}
			
			Element.select(this.ele, '.scrollbars-vertical .scrollbars-vertical-handler').each(function(e) {
				Event.observe(e, 'mousedown', this.verticalHandlerMouseDown.bindAsEventListener(this), false);
				Event.observe(e, 'mouseup', this.verticalHandlerMouseUp.bindAsEventListener(this), false);
				console.log(e);
			}.bind(this));
			
			Event.observe(this.ele, 'scroll', this.updateBars.bindAsEventListener(this), false);
		//}
		//Event.observe(this.ele, 'scroll', this.updateBars.bindAsEventListener(this), false);
	},
	updateBars: function(event) {
		//Element.select(this.ele, '.scrollbars-vertical').invoke('setStyle', {height:Element.getHeight(this.ele)});
		console.log(event);
		//console.log(this.ele.scrollTop + ', ' + this.ele.scrollHeight);
		//console.log();
		//console.log(event);
		//console.log(this);
	},
	verticalHandlerMouseDown: function(event) {
		console.log(event);
		Event.observe(event.target, 'mousemove', this.verticalHandlerMove.bindAsEventListener(this), false);
	},
	verticalHandlerMouseUp: function(event) {
		console.log(event);
		//Event.stopObserving(event.target, 'mousemove', this.verticalHandlerMove.bindAsEventListener(this), false);
	},
	verticalHandlerMove: function(event) {
		//event.target
		console.log(event);
	},
	verticalHandlerMoveWithCursor: function() {
		
	}
});