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
		},
		
		onChange: function(step){
			var myFx = new Fx.Morph(this.content, {duration: 200, transition: Fx.Transitions.Sine.easeOut});
			
			this.fireEvent('scroll',step);
			
			/* THIS IF FOR THE SNAP... TO LOCK TO ELEMENTS INSIDE THE SCROLLBAR */
			this.options.snap = (this.options.mode == 'horizontal') ? this.options.snap : false; // IF mode == vertical no snapping allowed...
			(this.options.snap) ? this.snap() : null; // if options.snap is true then fire snap -- only happen if m	ode is set to horizontal
		
			if(this.options.mode == 'vertical'){
				if(this.tweenFlag){
				myFx.start({'margin-top': step * -1});
				}
				else{
					this.content.setStyle('margin-top',step * -1);
				}
			}
			else{
				if(this.tweenFlag){
					myFx.start({'margin-left': step * -1});
				}
				else{
					this.content.setStyle('margin-left',step * -1);
				}
			}
		}
	},
	
	initialize: function(container, options){
		this.container = $(container);
		this.tweenFlag = false;
		this.scrollbar = this.container.getElement('.scrollbar');
		this.content = this.container.getElement('.scrollContent');
		this.options.mode = ($type(options.mode)) ? options.mode : 'vertical'; 
		
		if(!this.getDifference()){
			this.scrollbar.setStyle('display', 'none');
			return 0;
		}
		else{
			
			this.knob = this.container.getElement('.knob');
			
			if(!this.element) {
				this.element = new Element('div',{'class':'track'});
				this.knob.inject(this.element);
				this.element.inject(this.scrollbar);
			}

			this.setOptions(options);
			if(!this.contentWrapper){
				this.contentWrapper = new Element('div');
				this.contentWrapper.adopt(this.content);
				this.contentWrapper.inject(this.container,'top');
			}	
			var styles = this.content.getStyles();
			this.contentWrapper.setStyles(styles);
			this.contentWrapper.setStyle('position','static');
			
			this.calculateSteps(this.options.mode);
			
			if(this.options.mode == 'vertical'){
				this.element.setStyles({
					'height':this.container.getSize().y,
					'position':'static',
					'float':'right'
				});
				this.content.setStyle('float','left');
			}else{
				var topTarget = this.container.getSize().y - this.element.getStyle('height').toInt()
				this.scrollbar.setStyles({
					'width':this.container.getSize().x,
					'position':'relative',
					'top': topTarget,
					'clear':'both',
					'float':'none',
					'left':0
				});
				if(!this.options.buttons){
					this.element.setStyle('width',this.container.getSize().x);
					this.element.setStyle('float','none');
				}
				this.scrollbar.inject(this.container,'top');
			}
			if(this.options.buttons) this.createButtons();
			this.scrollbar.addClass(this.options.mode);
			if (this.options.wheel) this.wheelEvent = this.container.addEvent('mousewheel', this.scrolledElement.bindWithEvent(this));
			
			if(this.options.buttons){
				this.sizeElement();
			}
			
			this.parent(this.element, this.knob, options);
		}
	},
	clickedElement: function(event){
		var mouseDown = new Event(event);
		mouseDown.stopPropagation();
		if(mouseDown.target.getParent() === this.knob){
			this.tweenFlag = false;
			mouseDown.stop();
		}else{
			this.fireEvent('onScrollClick');
			this.tweenFlag = true;
			this.parent(mouseDown);
		}
	},
	calculateSteps: function(mode){
		if(mode == 'vertical'){
			if(this.container.getScrollSize().y - this.container.getSize().y > 0){
				this.options.steps = this.container.getScrollSize().y - this.container.getSize().y;
				var ch = this.container.getScrollSize().y;
				var mh = this.container.getSize().y;
				var th = this.container.getSize().y;
				var diff = (th * mh)/ch;
				this.createKnob(diff.toInt());
			}
			else{
				this.knob.setStyle('display','none');
				this.element.setStyle('display','none');
			}
		}
		else{
			if(this.container.getScrollSize().x - this.container.getSize().x > 0){
				this.options.steps = this.container.getScrollSize().x - this.container.getSize().x;
				var ch = this.container.getScrollSize().x;
				var mh = this.container.getSize().x;
				var th = this.container.getSize().x;
				var diff = (th * mh)/ch; 
				this.createKnob(diff.toInt());
			}
			else{
				this.knob.setStyle('display','none');
				this.element.setStyle('display','none');
			}
		}
	},
	scrolledElement: function(event){
		var mode = (this.options.mode == 'horizontal') ? (event.wheel > 0) : (event.wheel > 0);
		this.set(mode ? this.step - 40 : this.step + 40);
		if(event.type != 'mousedown'){
			this.tweenFlag = false;
			new Event(event).stop();
		}
		else{
		}
	},
	createKnob: function(totalSize){
		var style = '';
		var endSize;
		this.knob.addClass(this.options.mode);
		if(this.options.mode == 'vertical'){
			this.knob.setStyle('height',totalSize);
			style = 'height';
			endSize = 4;
		}
		else{
			style= 'width';
			this.knob.setStyle('width',totalSize);
			endSize = 4;
		}
		if(this.knob.getChildren().length >=3){
			this.knob.getElement('.knobMiddle').setStyle(style,totalSize - (2 * endSize));
		}else{
			var knobMiddle = new Element('div',{'class': 'knobMiddle'});
			knobMiddle.setStyle(style,totalSize - (2 * endSize));
			
			var knobTop = new Element('div',{
				'class':'knobTop'
			});
			var knobBottom = new Element('div',{
				'class':'knobBottom'
			});
			knobMiddle.inject(this.knob,'top');
			knobTop.inject(this.knob,'top');
			knobBottom.inject(knobMiddle,'after');
		}
	},
	createButtons: function(){
		var clickValueDown = -1;
		var clickValueUp = 1;
		if(this.options.mode == 'vertical'){
			var downStyles = {'position':'static','clear': 'both'}
		}
		else{
			this.element.setStyle('width',this.element.getSize().x);
			var downStyles = {'position':'static'}
		}
		
		if(!this.upButton){
			this.upButton = new Element('a',{
				'class':'scrollbarUp',
				'events':{
					'mousedown':this.startScroll.bind([this,clickValueUp]),
					'mouseup': this.stopScroll.bind(this),
					'mouseout': this.stopScroll.bind(this),
					'mouseover': function(){
						this.setStyle('background-position','center left');
					}
				}
			});
			this.upButton.inject(this.scrollbar,'top');
		}
		if(!this.downButton){
			this.downButton = new Element('a',{
				'class':'scrollbarDown',
				'events':{
					'mousedown':this.startScroll.bind([this,clickValueDown]),
					'mouseup': this.stopScroll.bind(this),
					'mouseout': this.stopScroll.bind(this),
					'mouseover': function(){
						this.setStyle('background-position','center left');
					}
				}
			});
			
			this.downButton.setStyles(downStyles);
			this.downButton.inject(this.scrollbar,'bottom');
		}
		
	},
	sizeElement: function(){
		
		if(this.options.mode == 'vertical'){
			var sum = this.upButton.getStyle('height').toInt();
			sum += this.downButton.getStyle('height').toInt();
			var diff = this.element.getSize().y - (sum);
			this.element.setStyle('height',diff);
		}
		else{
			var sum = this.upButton.getStyle('width').toInt();
			sum += this.downButton.getStyle('width').toInt();
			var diff = this.element.getSize().x - (sum);
			this.element.setStyle('width',diff);
		}	
	},
	startScroll: function(e){
		new Event(e).stop();
		var direction = this[1];
		e.wheel = direction;
		e.target.setStyle('background-position','bottom left');
		this.tweenFlag = false;
		this[0].interval = (function(event){
			this.tweenFlag = false;
			this.container.fireEvent('mousewheel',e);
		}).bind(this[0]).periodical(40);
	},
	stopScroll: function(e){
		new Event(e).stop();
		e.target.setStyle('background-position','top left');
		$clear(this.interval);
	},
	scrollToElement: function(id){
		this.tweenFlag = true;
		if(this.content.getElement('#'+id)){
			if(this.options.mode == 'vertical') this.set(this.content.getElement('#'+id).getPosition(this.content).y);
			if(this.options.mode == 'horizontal') this.set(this.content.getElement('#'+id).getPosition(this.content).x);
		}
	},
	snap: function(){
		this.fireEvent('onSnap',this);
	},
	getDifference:function(){
		if(this.options.mode == 'vertical'){
			var diff = this.content.getCoordinates().height - this.container.getCoordinates().height;
		}
		else{
			var diff = this.content.getCoordinates().width - this.container.getCoordinates().width;
		}
		if(diff <= 0){
			return false;
		}
		else{
			return diff;
		}
	},
	refresh:function(){
		//IF TRACK DOESNT EXIST AND THE CONTENT IS LARGER THAN THE CONTAINER CALL this.initialize(this.container,this.options); 
		if(!this.element && this.getDifference()){
			this.initialize(this.container,this.options);
		}
		//IF TRACK DOES EXIST AND CONTENT IS SMALLER THAN THE CONTAINER THEN HIDE SCROLLBAR AND REMOVE MOUSEWHEEL EVENT
		else if(this.element && !this.getDifference()){
			if(this.options.mode == "vertical"){
				this.content.setStyle('margin-top',0);
			}
			else{
				this.content.setStyle('margin-left',0);
			}
			this.container.removeEvents();
			this.scrollbar.setStyle('visibility','hidden');
		}
		//IF TRACK DOES EXIST AND CONTENT IS LARGER THAN THE CONTAINER THEN SHOW SCROLLBAR.
		else if(this.element && this.getDifference()){
			if(this.options.mode == "vertical"){
				this.content.setStyle('margin-top',0);
			}
			else{
				this.content.setStyle('margin-left',0);
			}
			this.initialize(this.container,this.options);
			this.scrollbar.setStyle('visibility','visible');
		}
		
		
	}
	
})
Scrollbar.implement(new Options, new Events);