var mooScroller = new Class({
	options: {
		resizeScrollButton: true,
		wheelStep: 8,
		extraheight: 80,
		totalStep: null,
		slider: null
	},
	
	initialize: function(selector, margin_top, margin_left, image, options){
		
		this.setOptions(options);
		this.initScroller(selector, margin_top, margin_left, image);
	},
	
	initScroller: function(selector,  margin_top, margin_left, image){
		if ($type(selector) != "array") {
			return;
		}
		
		// create scroller
		var fn = this;
		selector.each(function(el){
			fn.setupScroller(el, margin_top, margin_left, image);
		});
	},
	
	setupScroller: function(el, margin_top, margin_left, image){
		var fn = this;
		
		// create scroller
		var bar = new Element("div", {
			"class": "smScroller",
			"html": "<p class=\"smScrollUp\"><a href=\"javascript:void(0);\"><span>&nbsp;</span></a></p><p class=\"smScrollDx\"><span>&nbsp;</span></p><p class=\"smScrollDn\"><a href=\"javascript:void(0);\"><span>&nbsp;</span></a></p>"
		}).inject(el, "after");
		
		// get elements
		var scroller = bar.getChildren();
		var upBtn = scroller[0].getFirst();
		var scrollBar = scroller[1];
		var scrollBtn = scroller[1].getFirst();
		var dnBtn = scroller[2].getFirst();
		
		// set height
		var elHeight = el.getCoordinates().height;
		bar.set("styles", {"height": elHeight});
		bar.set("styles", {"margin-top": margin_top});
		bar.set("styles", {"margin-left": margin_left});
		
		scrollBar.set("styles", {"height": elHeight});	
		scrollBar.setStyle("background-image","url("+image+")");	
		
		// calculate size
		var containerHeight = el.getSize().y;		
		//var availableScroll = el.getScrollSize().y + this.options.extraheight;		
		var availableScroll = el.getScrollSize().y;
		
		if(Browser.Engine.webkit){			
			if(availableScroll > containerHeight){
				availableScroll += 100;
			}
		}		
		
		if(availableScroll > containerHeight){
			availableScroll += 50;
		}		
		var scrollBarHeight = scrollBar.getCoordinates().height;
		var scale = Math.round(scrollBarHeight / availableScroll);
		var maxScroll = availableScroll - containerHeight;
		var totalStep = Math.round(maxScroll / this.options.wheelStep);		
		// store value to reset scroller
		el.store("maxScroll", maxScroll);
		el.store("currentPos", 0);
		this.options.totalStep = totalStep;
		
		// resize scroll button
		if (this.options.resizeScrollButton == true) {
			//scrollBtn.set("styles", {"height": scrollBarHeight * scale});
		}
		
		var hasScroll = ((availableScroll - elHeight) > 4);					
		
		scrollBtn.set("styles", {
			"display": (!hasScroll) ? "none" : "block"			
		});
		bar.set("opacity", (!hasScroll) ? 0 : 1);
		if(!hasScroll) return;
		
		// add slider (scroller behaviors)
		el.store("slider", new Slider(scrollBar, scrollBtn, {
			onChange: function(pos){				
				el.scrollTo(0, Math.round(el.retrieve("maxScroll") * pos / totalStep));
				el.store("currentPos", pos);
		    },
			mode: "vertical",
			range: [0, totalStep]
		}).set(0));
		this.options.slider = el.retrieve('slider');
		
		// element wheel
		el.scrollTo(0, 0).addEvents({
			"mousewheel": function(e){
				e.stop();
				el.retrieve("slider").set(el.retrieve("currentPos") - e.wheel);
			}
		});
		
		el.scrollTo(0, 0).addEvents({
			"DOMMouseScroll": function(e){
				e.stop();
				el.retrieve("slider").set(el.retrieve("currentPos") - e.wheel);
			}
		});
		 
		
		var scrolInterval = null;
		// up button
		upBtn.addEvents({
			"mousedown": function(e){
				scrolInterval = setInterval(function(){ 
					el.retrieve("slider").set(el.retrieve("currentPos") - 1);
				}, 20);
			},
			"mouseup": function(e){
				clearInterval(scrolInterval);
			},
			"mouseout": function(e){
				clearInterval(scrolInterval);
			}
		});
		
		// down button
		dnBtn.addEvents({
			"mousedown": function(e){
				scrolInterval = setInterval(function(){
					el.retrieve("slider").set(el.retrieve("currentPos") + 1);
				}, 20);
			},
			"mouseup": function(e){
				clearInterval(scrolInterval);
			},
			"mouseout": function(e){
				clearInterval(scrolInterval);
			}
		});
	},
	
	resetScroller: function(el) {
		var scrollBar = el.getNext().getElement("p.smScrollDx");
		var scrollBtn = scrollBar.getFirst();
		var containerHeight = el.getSize().y;
		var availableScroll = el.getScrollSize().y  + this.options.extraheight;
		var scrollBarHeight = scrollBar.getCoordinates().height;
		var scale = scrollBarHeight / availableScroll;
		var maxScroll = availableScroll - containerHeight;
		var totalStep = Math.round(maxScroll / this.options.wheelStep);
		
		// store value to reset scroller
		el.store("maxScroll", maxScroll);
		
		// resize scroll button
		
		if (this.options.resizeScrollButton == true) {
			scrollBtn.set("styles", {"height": scrollBarHeight * scale});
		}
		
		// re create new slider
		el.store("slider", new Slider(scrollBar, scrollBtn, {
			onChange: function(pos){
				el.scrollTo(0, el.retrieve("maxScroll") * pos / totalStep);
				el.store("currentPos", pos);
		    },
			mode: "vertical",
			range: [0, totalStep]
		}).set(el.retrieve("currentPos")));
	}
});
mooScroller.implement(new Events, new Options, new Chain);