var ScrollBar = new Class({

	Extends: Slider,

	options: {
		onTick: function(pos){
			if (this.options.snap) pos = this.toPosition(this.step);
			if (this.knobFx) this.knob.tween(this.property, pos);
			else this.knob.setStyle(this.property, pos);
		},
		onChange: function(step){
			this.scroll(step / this.ratioScroll);
		},
		/*onComplete: function(step){},*/
		initialStep: 0,
		snap: false,
		offset: 0,
		range: false,
		wheel: true,
		steps: 100,
		mode: 'horizontal',
		scroll: {
			// onStart: function(){},
			// onComplete: function(){},
			duration: 2000,
			link: 'cancel',
			transition: 'elastic:out'
		},
		knob: {
			duration: 1000,
			transition: 'elastic:out',
			link: 'cancel'
		}
	},

	initialize: function(Container, options){
		this.setOptions(Options);
		this.bar=new Element('div',{Class:'Bar',id:'Bar'});
		this.bar.grab(this.knob=new Element('div',{Class:'Knob',id:'Knob'}));
		this.container=Container;
		this.container.grab(this.bar);
		this.content=this.container.getFirst();
		this.bar.setStyle('position','absolute');
		this.content.setStyle('position','relative');
		this.container.setStyle('overflow','hidden');
		this.setOptions(options);
		this.scroller = this.container.getFirst();
		this.parent(this.bar, this.knob);

		this.scroller.set('tween', this.options.scroll);
		this.knob.set('tween', this.options.knob);

		this.scrollFx = this.scroller.get('tween');
		if (this.options.knob.duration || this.options.knob.transition) this.knobFx = this.knob.get('tween');

		if (this.options.wheel) this.container.addEvent('mousewheel', function(event){
			this.element.fireEvent('mousewheel', event);
		}.bind(this));

		this.ratio = this.steps / (this.element.getSize()[this.axis] - this.knob.getSize()[this.axis]);
		this.ratioScroll = this.steps / (this.scroller.getSize()[this.axis] - this.container.getSize()[this.axis]);
	},

	scroll: function(pos){
		this.scroller.tween(this.property, -pos);
	},

	draggedKnob: function(){
		this.parent();
		this.scrollFx.cancel();
		this.scroller.setStyle(this.property, -this.step / this.ratioScroll);
	},

	clickedElement: function(event){
		if (this.knobFx && event.target === this.knob) this.knobFx.cancel();
		this.parent(event);
	},

	scrolledElement: function(event){
		if (this.knobFx) this.knobFx.cancel();
		var mode = (this.options.mode == 'horizontal') ? (event.wheel < 0) : (event.wheel > 0);
		this.set(this.step + 10 * ((mode) ? -this.stepSize : this.stepSize));
		event.stop();
	},

	set: function(pos){
		if (typeOf(pos) === 'element') pos = pos.getPosition(this.scroller)[this.axis] * this.ratioScroll;
		this.parent(pos);
	}

});