// <div class="scrollbar">
// 	<div class="knob"></div>
// </div>
			
var Scrollbar = new Class({
	Extends: Slider,
	options:{
		mode: 'vertical',
		wheel: true,
		snap: false,
		onSnap: $empty,
		buttons: true,
		onScrollClick: function(){
		},
		onScroll: $empty,
		offSet: {
			top: 10,
			bottom: 10
		},
		onTick: function(pos){
			this.scrl_container.getFirst().setStyle('margin-top',((pos+1)*10));
			// $(document.body).appendText(pos,'top');
		},
		onChange: $empty
	},
	initialize: function(el,options) {
		this.scrl_container = el;
		this.scrl_container.setStyle('overflow','hidden');
		// this.scrl_container.getFirst().setStyle('position','relative');
		this.scrl_container.getFirst().setStyle('margin-top',0);
		var elements = this.createScrollBarElements();
		this.parent(elements[0],elements[1],options);
		elements[0].removeEvents('mousedown');
	},
	createScrollBarElements: function() {
		this.scrollbar = new Element('div',{
			'class':'scrollbar'
		}).inject(this.scrl_container);
		
		var topButton = new Element('div',{
			'class':'scrollbarUp',
			'events':{
				'mousedown': this.stepUp.bind(this),
				'mouseup': this.stepUp.bind(this)
			}
		}).inject(this.scrollbar);
		
		var track = new Element('div',{
			'class':'track'
		}).inject(this.scrollbar);
		
		var knob = new Element('div',{
			'class':'knob'
		}).inject(track);

		var bottomButton = new Element('div',{
			'class':'scrollbarDown',
			'events':{
				'mousedown': this.stepDown.bind(this),
				'mouseup': this.stepDown.bind(this)
			}
		}).inject(this.scrollbar);

		return [track,knob];
	},
	stepUp: function() {
		if(this.step >= -1){
			return 0;
		}
		this.step += 1;
		this.fireEvent('tick',this.step)
	},
	stepDown: function(){
		this.step -= 1;
		this.fireEvent('tick', this.step);
	},
	set:function(step){
		this.parent(step);
	},
	refresh: function(){
		this.initialize(this.scrl_container,this.options);
	},
	clear: function(){
		this.scrollbar.dispose();
	}
})