var ScrollBar = new Class({
	Implements: [Events, Options],
	/**
	 * Default Options
	 * 
	 * trackDimension: The width of the track and thumb
	 * wheel: The number of px scroller per mouse wheel click
	 * steps: A larger number produces a smoother scroll while a lower number is more chunky
	 */
	options: {
		
		trackDimension: 18,
		wheel: 16,
		steps: 1000
	},
	initialize: function(wrapper, options){
		this.setOptions(options);
		
		this.wrapper = $(wrapper).setStyle('position', 'relative');
		var wrapperSize = this.wrapper.getSize();
		
		this.contents = new Element('div').addClass('contents').setStyles({
			'width': wrapperSize.x - this.options.trackDimension,
			'height': wrapperSize.y
		});
		this.contents.adopt(this.wrapper.getChildren());
		this.contents.inject(this.wrapper);
		this.wrapper.removeClass('scroll-wrapper');
		
		this.vTrack = new Element('div').addClass('vTrack').setStyle('height', wrapperSize.y);
		this.vThumb = new Element('div').addClass('vThumb').inject(this.vTrack);
		this.vTrack.injectInside(this.wrapper);
		
		this.slider = new Slider(this.vTrack, this.vThumb,{
			mode: 'vertical',
			steps: this.options.steps
		});
		
		this.update();
		this.attach();
	},
	attach: function(){
		// onchange for when the thumb is dragged
		this.slider.addEvent('onChange', function(step){
			this.contents.scrollTop = this.scrollRatio * (step / this.options.steps);
		}.bind(this));
		
		// mousewheel event for scrolling
		this.contents.addEvent('mousewheel', function(e){
			this.contents.scrollTop -= e.wheel * this.options.wheel;
			this.vUpdateThumbContentScroll();
			e.stop();
		}.bind(this));
	},
	update: function(){
		var wrapperSize = this.wrapper.getSize();
		
		// calculate how much of the area needs to be scrolled
		this.scrollRatio =  this.contents.scrollHeight - wrapperSize.y;
		
		// hide or show the thumb depending on if it is needed or not
		if(this.scrollRatio <= 0){
			this.vThumb.setStyle('display', 'none');
			this.vTrack.setStyle('display', 'none');
		}
		else{
			this.vThumb.setStyle('display', 'block');
			this.vTrack.setStyle('display', 'block');
		}
	},
	vUpdateThumbContentScroll: function(){
		// calculate the current scroll position as a value between 0 - 100
		var value = (this.contents.scrollTop * this.options.steps) / this.scrollRatio;
		
		// set the thumb position 0 - 100
		this.slider.set(value);
	},
	/**
	 * vSnapTo - Scroll to a specified position
	 * 
	 * param {Number}: px value to scroll to
	 */
	vSnapTo: function(position){
		this.contents.scrollTop = position;
		this.vUpdateThumbContentScroll();
	}
});