// MooTools Slider - scrollbars are dependent on this line
var Scrollbars = {
    elements: $$('.scrollbars'),
    
    init: function(ele) {
        if (ele)
            this.elements = ele;
        
        this.applyEvents();
    },
    
    applyEvents: function() {
	    var scrolls = this.elements;
        
        // duplicate "this" for use outside of scope
        _this_scroll = this;
        
	    for (var i = 0; i < scrolls.length; i++) {
		    var thumb = $$("#" + scrolls[i].id + " .scrollThumb")[0];
		    var ele = $(thumb.elementToScroll);
		    var wrapper = ele.parentElement ? ele.parentElement.parentElement : ele.parentNode.parentNode;
		    // resize the thumb bar to indicate the content displacement
		    var newHeight = (wrapper.offsetHeight / ele.offsetHeight) * scrolls[i].offsetHeight;
		    // only increase the height of the thumb bar. the minimum height will be set in the CSS
		    if (newHeight > thumb.offsetHeight) {
			    thumb.style.height = newHeight + "px";
		    }
    		
		    ele.style.position = "absolute";
		    scrolls[i].Slide = new Slider($(scrolls[i].id), $(thumb.id), {
			    steps: 50,
			    mode: 'vertical',
			    onChange: function(step){
				    if (this.elementToScroll) {
					    var ele = $(this.elementToScroll);
					    var parent = ele.parentElement ? ele.parentElement.parentElement : ele.parentNode.parentNode;
					    var space = ele.offsetHeight - parent.offsetHeight;
					    var thumb = $(this.thumb);
					    var scrollCont = thumb.parentElement ? thumb.parentElement : thumb.parentNode;
					    var currPercent = (thumb.offsetTop) / (scrollCont.offsetHeight - thumb.offsetHeight);
					    ele.style.top = (space * currPercent * -1) + "px";
				    }
			    }
		    }).set(0);
    		
		    scrolls[i].onclick = function() {
			    this.Slide.fireEvent("onChange");
		    }
		    scrolls[i].Slide.elementToScroll = thumb.elementToScroll;
		    scrolls[i].Slide.thumb = thumb.id;
	    }
    	
	    var upBtns = $$(".arrowUpBtn");
	    for (var i = 0; i < upBtns.length; i++) {
		    upBtns[i].onmousedown = function() {
			    this.cancelScroll = false;
			    _this_scroll.scrollUp(this);
		    }
		    upBtns[i].onmouseup = function() {
			    this.cancelScroll = true;
		    }
	    }
    	
	    var downBtns = $$(".arrowDownBtn");
	    for (var i = 0; i <  downBtns.length; i++) {
		     downBtns[i].onmousedown = function() {
			    this.cancelScroll = false;
			    _this_scroll.scrollDown(this);
		    }
		     downBtns[i].onmouseup = function() {
			    this.cancelScroll = true;
		    }
	    }
	},
	
	moveThumb: function (percent, thumb) {
	    var thmb = $(thumb);
	    var parent = thmb.parentElement ? thmb.parentElement : thmb.parentNode;
	    var totHeight = parent.offsetHeight - thmb.offsetHeight;
	    thmb.style.top = (totHeight * percent) + "px";
    },
    
    scrollUp: function (obj) {
	    if (typeof(obj) == "string") {
		    obj = $(obj);
	    }
	    if (!obj.cancelScroll) {
		    var ele = $(obj.elementToScroll);
		    var parent = ele.parentElement ? ele.parentElement.parentElement : ele.parentNode.parentNode;
		    var arrowJump = parent.offsetHeight / 2;
		    if (ele.offsetTop + arrowJump <= 0) {
			    ele.style.top = (ele.offsetTop + arrowJump) + "px";
			    var contentpercent = (ele.offsetTop / (ele.offsetHeight - parent.offsetHeight)) * -1;
			    this.moveThumb(contentpercent, obj.thumbElement);
			    setTimeout("_this_scroll.scrollUp('" + obj.id + "')", 10);
		    }
		    else {
			    ele.style.top = "0px";
			    this.moveThumb(0, obj.thumbElement);
		    }
	    }
    },
    
    scrollDown: function (obj) {
	    if (typeof(obj) == "string") {
		    obj = $(obj);
	    }
	    if (!obj.cancelScroll) {
		    var ele = $(obj.elementToScroll);
		    var parent = ele.parentElement ? ele.parentElement.parentElement : ele.parentNode.parentNode;
		    var arrowJump = parent.offsetHeight / 2;
		    if (ele.offsetTop - arrowJump >= (ele.offsetHeight - parent.offsetHeight) * -1) {
			    ele.style.top = (ele.offsetTop - arrowJump) + "px";
			    var contentpercent = (ele.offsetTop / (ele.offsetHeight - parent.offsetHeight)) * -1;
			    this.moveThumb(contentpercent, obj.thumbElement);
			    setTimeout("_this_scroll.scrollDown('" + obj.id + "')", 10);
		    }
		    else {
			    ele.style.top = ((ele.offsetHeight - parent.offsetHeight) * -1) + "px";
			    this.moveThumb(1, obj.thumbElement);
		    }
	    }
    }
};