var mooScroller = new Class({
	options: {
		resizeScrollButton: true,
		wheelStep: 30
	},
	
	initialize: function(selector, options){
		this.setOptions(options);
		this.initScroller(selector);
	},
	
	initScroller: function(selector){
		if ($type(selector) != "array") {
			return;
		}
		// create scroller
		var fn = this;
		selector.each(function(el, index){
			/**/
			var _height = el.getCoordinates().height;
			var heightsmScroll = el.getScrollSize();			
			if(heightsmScroll.y < _height){
					return true;
			} else {
				
				fn.setupScroller(el);
			}			
		});
	},
	
	setupScroller: function(el){
		var fn = this;
		var temp = 100;
		if($('careerList')){
			temp = 0;
		}
		// create scroller
		var bar = new Element('div', {
			'class': 'smScroller',
			'html': '<p class="smScrollUp"><a href="javascript:void(0);"></a></p><p class="smScrollDx"><a href="javascript:void(0);"></a></p><p class="smScrollDn"><a href="javascript:void(0);"></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}); // Hung edited
		scrollBar.set("styles", {"height": elHeight - 30});		
		// calculate size		
		var containerHeight = el.getSize().y;
		var availableScroll = el.getScrollSize().y + temp;
		var scrollBarHeight = scrollBar.getCoordinates().height;
		var scale = scrollBarHeight / availableScroll;		
		var maxScroll = availableScroll - containerHeight + temp + 50 ;
		var totalStep = Math.round(maxScroll / this.options.wheelStep);

		// store value to reset scroller
		el.store("maxScroll", maxScroll);
		el.store("steps", totalStep);
		el.store("currentPos", 0);
		
		// resize scroll button
		if (this.options.resizeScrollButton == true) {
			scrollBtn.set("styles", {"height": (scrollBarHeight * scale),"width": "13px", "margin": "0 0 0 1px"});
		}
		
		// if have scroll
		var hasScroll = (availableScroll - elHeight - temp > 0);
		scrollBtn.set("styles", {
			"display": (!hasScroll) ? "none" : "block"
		});
		bar.set("opacity", (!hasScroll) ? 0 : 1);
		
		
		// add slider (scroller behaviors)
		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(0));
		
		// element wheel
		el.addEvents({
			"mousewheel": 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);
			}
		});
		//remove click		
		$$('.smScrollDx').each(function(element) {
			element.removeEvents();
		});
	}	
});
mooScroller.implement(new Events, new Options, new Chain);

///////////////////////////////////////////////////////////
//mooScroller Horizontal 
///////////////////////////////////////////////////////////
var mooScrollerHorizon = new Class({
	options: {
		resizeScrollButton: true,
		wheelStep: 30
	},
	
	initialize: function(selector, options){
		if(!selector) return;
		this.setOptions(options);
		this.initScroller(selector);
	},
	
	initScroller: function(el){		
		// create scroller
		var fn = this;
		if(!el) return;
			/**/
			var _width = el.getCoordinates().width + el.getStyle('padding-left').toInt() + el.getStyle('padding-right').toInt() - 30;
			var widthsmScroll = el.getScrollSize();			
			if(widthsmScroll.x < _width){
					return true;
			} else {
				fn.setupScroller(el);
			}
	},
	
	setupScroller: function(el){
		var fn = this;
		// create scroller
		var bar = new Element('div', {
			'class': 'smScroller01',
			'html': '<p class="smScrollLeft"><a href="javascript:void(0);"></a></p><p class="smScrollBar"><a href="javascript:void(0);"></a></p><p class="smScrollRight"><a href="javascript:void(0);"></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 Width
		var elWidth = el.getCoordinates().width;
		bar.set("styles", {"width": elWidth});
		scrollBar.set("styles", {"width": elWidth - upBtn.getCoordinates().width - dnBtn.getCoordinates().width});
		
		// calculate size
		var containerWidth = el.getSize().x;
		var availableScroll = el.getScrollSize().x;
		var scrollBarWidth = scrollBar.getCoordinates().width;
		var scale = scrollBarWidth / availableScroll;
		var maxScroll = availableScroll - containerWidth;
		var totalStep = Math.round(maxScroll / this.options.wheelStep);
		
		// store value to reset scroller
		el.store("maxScroll", maxScroll);
		el.store("currentPos", 0);
		
		// resize scroll button
		if (this.options.resizeScrollButton == true) {
			scrollBtn.set("styles", {"width": scrollBarWidth * scale,"height": "13px", "margin": "0 0 0 1px"});
		}
		
		// if have scroll		
		var hasScroll = (availableScroll - elWidth > 0);
		scrollBtn.set("styles", {
			"display": (!hasScroll) ? "none" : "block"
		});
		bar.set("opacity", (!hasScroll) ? 0.5 : 1);
		
		// add slider (scroller behaviors)
		el.store("slider", new Slider(scrollBar, scrollBtn, {
			/**/ onChange: function(pos){			
				el.scrollTo(el.retrieve("maxScroll") * pos / totalStep, 0);
				el.store("currentPos", pos);
		    }, 
			mode: "horizontal",
			range: [0, totalStep]
		}).set(0));
		
		// element wheel
		el.scrollTo(0, 0).addEvents({
			"mousewheel": 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) {
		el.setStyle('top', 0);
		var scrollBar = el.getNext().getElement("p.smScrollBar");
		var scrollBtn = scrollBar.getFirst();
		var containerWidth = el.getSize().x;
		var availableScroll = el.getScrollSize().x;
		var scrollBarWidth = scrollBar.getCoordinates().width;
		var scale = scrollBarWidth / availableScroll;
		var maxScroll = availableScroll - containerWidth;
		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", {"width": 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")));
	}
});

var scroller, scroller02;
mooScrollerHorizon.implement(new Events, new Options, new Chain);
window.addEvent("load", function(){
	setTimeout(function() {
		scroller = new mooScroller($$(".smScrollContent"), {
		});
		var isScrollMe = false, scrollMePos = 0;
		$$('.smScrollContent').each(function(el){
			el.addEvents({
				'mousedown': function(e){
					scrollMePos = e.page.y;
					isScrollMe = true;
				},
				'mouseup': function(){
					isScrollMe = false;
					scrollMePos = 0;
				},
				'mousemove': function(e){
					var curHeight = el.getHeight();
					var curTop = el.getCoordinates().top;
					var curBottom = curTop + curHeight;
					var cur = e.page.y;
					if(isScrollMe){
						if(cur > curBottom){
							el.retrieve("slider").set(el.retrieve('steps'));														
						}
						else if(cur <= curTop){
							el.retrieve("slider").set(0);							
						}
					}
					/*
					var cur = e.page.y - scrollMePos;
					if(isScrollMe && Math.abs(cur) >= el.getHeight() - 50){
						if(cur > el.getHeight()){
							el.retrieve("slider").set(el.retrieve('steps'));														
						}
						else{
							el.retrieve("slider").set(0);							
						}
					}*/
				}
			});
		});
		if($$(".smScrollContentHorizontal")[0]){
			scroller02 = new  mooScrollerHorizon($$(".smScrollContentHorizontal")[0], {});
		}
	}, 100);
});