ScrollBars = new Class({
	Implements: Options,

	options: {
		'sliderClassName':	'scrollBarSlider',
		'knobClassName':	'scrollBarKnob'
	},

	initialize: function(elements, options) {
		this.elements = [];

		$splat(elements).each(function(el) {	
			this.elements.push( new this.ScrollBar(this, el) );
		}.bind(this));
	},



	ScrollBar: new Class({
		initialize: function(parent, el) {
			this.parent = parent;
			this.element = $(el);

			this.element.setStyles({
				overflow: 'hidden'
			});

			this.slider = new Element('div', {
				'class': this.parent.options.sliderClassName,
				'styles': {
					position: 'absolute',
					display: 'none'
				}
			});
			this.slider.inject(this.element, 'top');

			this.knob = new Element('div', {
				'class': this.parent.options.knobClassName
			});
			this.knob.inject(this.slider);

			this.reset();
		},

		reset: function() {
			this.sliderObj = null;

			this.slider.setStyles({
				height: this.element.getHeight() + this.element.getStyle('padding-top').toInt() + this.element.getStyle('padding-bottom').toInt(),
				top: this.element.getTop(),
				left: this.element.getLeft() + this.element.getWidth()
			});

			if( this.element.getScrollHeight() > this.element.getHeight() ) {
				this.slider.setStyle('display', 'block');


				this.sliderObj = new Slider(this.slider, this.knob, {
					snap: false,
					offset: 0,
					wheel: true,
					steps: 100,
					mode:  'vertical',
					initialStep: 0,
	
					onChange: function(step) {
						this.element.scrollTo(0, (step * ( (this.element.getScrollHeight() - this.element.getHeight()) / 100)).toInt() );
					}.bind(this)
				});
			}
			else this.slider.setStyle('display', 'none');
		}
	})
});