Element.Events.extend({
	'wheelup': {
		type: Element.Events.mousewheel.type,
		map: function(event){
			event = new Event(event);
			if (event.wheel >= 0) this.fireEvent('wheelup', event)
		}
	},
 
	'wheeldown': {
		type: Element.Events.mousewheel.type,
		map: function(event){
			event = new Event(event);
			if (event.wheel <= 0) this.fireEvent('wheeldown', event)
		}
	}
});

var mzScroller = new Class({

	options: {
		knobClass:"knobScroller",
		wrapperClass:"thumbsWrapper",
		cmdUporLeft:null,
		cmdDownorRight:null,
		wrapperwidth:null,
		wrapperheight:null,
		speed:100,
		step:20,
		mode:"vertical"
	}, 

	initialize: function(elementdiv,elementscroll, options) {

		this.setOptions(options);

		this.content = $(elementdiv);
		this.wrapper = this.content.getElement("div[class="+this.options.wrapperClass+"]");
		if(this.options.wrapperwidth) this.wrapper.setStyle('width',this.options.wrapperwidth+'px');
		if(this.options.wrapperheight) this.wrapper.setStyle('height',this.options.wrapperheight+'px');
		this.scroller = $(elementscroll);
		this.uporleft = (this.options.cmdUporLeft) ? $(this.options.cmdUporLeft) : null;
		this.downorright = (this.options.cmdDownorRight) ? $(this.options.cmdDownorRight) : null;
		this.knob = this.scroller.getElement("div[class="+this.options.knobClass+"]");

		if(this.uporleft){
			this.uporleft.addEvent('mousedown',function(){
				this.startScroll(-1);
			}.bind(this));
			this.uporleft.addEvent('mouseup',function(){
				this.endScroll();
			}.bind(this));
		}
	
		if(this.downorright){
			this.downorright.addEvent('mousedown',function(){
				this.startScroll(1);
			}.bind(this));
			this.downorright.addEvent('mouseup',function(){
				this.endScroll();
			}.bind(this));
		}
		
		this.content.addEvents({
			'wheelup': function(e) {
				e = new Event(e).stop();
		 
				this.dir=-1;
				this.slider.set(this.slider.step+(this.dir*this.options.step));
			}.bind(this),
		 
			'wheeldown': function(e) {
				e = new Event(e).stop();
		 
				this.dir=1;
				this.slider.set(this.slider.step+(this.dir*this.options.step));
			}.bind(this)
		});
		

		this.reset();
		
	},


	reset: function() {

		this.necessary = (this.options.mode=='vertical' && this.content.getSize().scrollSize.y>this.content.getSize().size.y) ? true : ((this.options.mode=='horizontal' && this.content.getSize().scrollSize.x>this.content.getSize().size.x) ? true : false)
		
		if(this.necessary){

			this.scroller.setStyle('display','block');
			if(this.uporleft) this.uporleft.setStyle('display','block');
			if(this.downorright) this.downorright.setStyle('display','block');

			this.slider = new Slider(this.scroller, this.knob, {	
				steps: (this.options.mode=='vertical') ? this.content.getSize().size.y : this.content.getSize().size.x,	
				mode: this.options.mode,	
				onChange: function(step){
					if(this.content) {
						(this.options.mode=='vertical') ? this.content.scrollTo(0, ((this.content.getSize().scrollSize.y-this.content.getSize().size.y)/this.content.getSize().size.y)*step) : this.content.scrollTo(((this.content.getSize().scrollSize.x-this.content.getSize().size.x)/this.content.getSize().size.x)*step,0);
					}
				}.bind(this)
			}).set(0);
			
			this.content.scrollTo(0,0);
			
		}else{
			
			if(this.slider) this.slider.set(0);
			this.content.scrollTo(0,0);
			this.scroller.setStyle('display','none');
			if(this.uporleft) this.uporleft.setStyle('display','none');
			if(this.downorright) this.downorright.setStyle('display','none');

		}
		
	},

	startScroll: function(dir) {
		if (this.aniTimer) window.clearTimeout(this.aniTimer)

		this.dir=dir
		this.slider.set(this.slider.step+(this.dir*this.options.step));

		this.aniTimer	= window.setTimeout(this.scroll.bind(this), this.options.speed)
	},

	scroll: function() {
		this.aniTimer	= window.setTimeout(this.scroll.bind(this), this.options.speed)
		
		this.slider.set(this.slider.step+(this.dir*this.options.step));
	},

	endScroll: function() {
		if (this.aniTimer) this.aniTimer = window.clearTimeout(this.aniTimer)
	},
	
	set: function(step) {
		if(this.slider) this.slider.set(step);
	}
	
});

mzScroller.implement(new Options);
