var Scrollbar = Class.create();
Scrollbar.prototype = {
	scrollBtnStep: 15,
	button_height: 21,

	initialize: function (element, scroll) {
		this.element = element;
		this.scroll = scroll;
		this.button = document.createElement('div');
		this.button.className = 'scrollbar_btn';
		this.scroll.appendChild(this.button);

		this.button_top = 0; // px
		this.value = 0; // %
		this.button.onmousedown = this.startScrolling.bindAsEventListener(this);

		this._onMouseWheel = this.onMouseWheen.bindAsEventListener(this)
		Event.observe (this.element, "mousewheel", this._onMouseWheel);
	},

	update: function (height) {
		this.scroller_height = (arguments.length == 0?this.scroll.offsetHeight:height);

  		this.element_height = (arguments.length == 0?this.element.offsetHeight:height);
  		this.inner_height = this.element.scrollHeight;
  		if (this.element.scrollTop >  this.inner_height - this.element_height)
  			this.element.scrollTop = this.inner_height - this.element_height;
		this.button_top = this.element.scrollTop * (this.scroller_height - this.button_height) / (this.inner_height - this.element_height);
		if (!this.button_top) this.button_top = 0;
		this.button.style.top = this.button_top + "px";

		if (this.inner_height <= this.element_height)
			this.button.style.display = "none";
		else
			this.button.style.display = "block";
		this.value = 100 * (this.button_top / (this.scroller_height - this.button_height));
	},

	startScrolling: function (event) {
		if (this.scrolling) {
			this.endScrolling(event);
			return;
		}
		this.scrolling = true;
		this.eventMouseUp   = this.endScrolling.bindAsEventListener(this);
    	this.eventMouseMove = this.updateScrolling.bindAsEventListener(this);
    	Event.observe(document, "mouseup", this.eventMouseUp);
  		Event.observe(document, "mousemove", this.eventMouseMove);

  		this.sY = Event.pointerY(event);

  		this.scroller_height = this.scroll.offsetHeight;
  		this.scroller_top = Position.cumulativeOffset(this.scroll)[1];

  		this.element_height = this.element.offsetHeight;
  		this.inner_height = this.element.scrollHeight;
  		Event.stop(event);
	},

	updateScrolling: function (event) {
		if (!this.scrolling) return;

		var ny = Event.pointerY(event);

		if (ny < this.scroller_top) ny = this.scroller_top;
		if (ny > this.scroller_top + this.scroller_height) ny = this.scroller_top + this.scroller_height;

		var delta = this.sY - ny;

		this.new_button_top = this.button_top - delta
		if (this.new_button_top < 0) this.new_button_top = 0;
		if (this.new_button_top > this.scroller_height - this.button_height)
			this.new_button_top = this.scroller_height - this.button_height;
		this.button.style.top = this.new_button_top + "px";
		// now scroll the content respectively
		this.element.scrollTop = this.new_button_top * (this.inner_height - this.element_height) / (this.scroller_height - this.button_height);
		this.value = 100 * (this.new_button_top / (this.scroller_height - this.button_height));
		Event.stop(event);
	},

	endScrolling: function (event) {
		if (!this.scrolling) return;
		this.scrolling = false;
		this.button_top = this.new_button_top;
		Event.stopObserving(document, "mouseup", this.eventMouseUp);
  		Event.stopObserving(document, "mousemove", this.eventMouseMove);
		Event.stop(event);
		if (this.onEndScrolling)
			this.onEndScrolling(this.value);
	},

	scrollUp: function () {
		this.element.scrollTop = Math.max (this.element.scrollTop - this.scrollBtnStep, 0);
		this.update();
		if (this.onEndScrolling)
			this.onEndScrolling(this.value);
	},
	scrollDown: function () {
		this.element.scrollTop = Math.min (this.element.scrollTop + this.scrollBtnStep, this.inner_height - this.element_height);
		this.update();
		if (this.onEndScrolling)
			this.onEndScrolling(this.value);
	},
	onMouseWheen: function (event) {
		var d = Event.wheelDelta(event);
		if (d == 0) return true;
		if (d > 0)
			this.scrollUp();
		else
			this.scrollDown();
		Event.stop(event);
		return true;
	}
}