var scrollerArray = new Array();

function Scroller(S1, S2) {
    this.container = document.getElementById(S1);
    this.content = document.getElementById(S2);
    this.contentOver = this.container.offsetHeight - this.content.offsetHeight;
    this.scrollOver = 0;
    this.overPercent = 0.0;
    this.mouseDown = false; 

    this.scrollPanel = document.createElement("div");
    this.scrollPanel.className = "lluScrollPanel";
    this.scrollPanel.style.top = this.container.offsetTop + "px";
    this.scrollPanel.style.left = ((this.container.offsetLeft + this.container.offsetWidth) + 10) + "px";
    this.scrollPanel.style.height = this.container.offsetHeight + "px";

    this.scrollPanelTop = document.createElement("div");
    this.scrollPanelTop.className = "lluScrollPanelTop";
    this.scrollPanelTop.setAttribute("onmousedown", "setMouseDown('" + (scrollerArray.length) + "', true, 'up')");
    this.scrollPanelTop.setAttribute("onmouseup", "setMouseDown('" + (scrollerArray.length) + "', false, '')");

    this.scrollPanelMid = document.createElement("div");
    this.scrollPanelMid.className = "lluScrollPanelSlice";
    this.scrollPanelMid.style.height = (this.container.offsetHeight - 36) + "px";

    this.scrollPanelBot = document.createElement("div");
    this.scrollPanelBot.className = "lluScrollPanelBot";
    this.scrollPanelBot.setAttribute("onmousedown", "setMouseDown('" + (scrollerArray.length) + "', true, 'down')");
    this.scrollPanelBot.setAttribute("onmouseup", "setMouseDown('" + (scrollerArray.length) + "', false, '')");

    this.scroller = document.createElement("div");
    this.scroller.className = "lluScroller";
    this.scroller.setAttribute("onmouseover", "setRollOver(this, 'over')");
    this.scroller.setAttribute("onmouseout", "setRollOver(this, 'out')");

    this.scrollerTop = document.createElement("div");
    this.scrollerTop.className = "lluScrollerTop";

    this.scrollerMid = document.createElement("div");
    this.scrollerMid.className = "lluScrollerSlice";

    this.scrollerBot = document.createElement("div");
    this.scrollerBot.className = "lluScrollerBot";

    this.scrollPanel.appendChild(this.scrollPanelTop);
    this.scrollPanel.appendChild(this.scrollPanelMid);
    this.scrollPanel.appendChild(this.scrollPanelBot);
    this.scroller.appendChild(this.scrollerTop);
    this.scroller.appendChild(this.scrollerMid);
    this.scroller.appendChild(this.scrollerBot);

    this.scrollPanel.appendChild(this.scroller);

    this.container.parentNode.appendChild(this.scrollPanel);
    this.setScrollerDraggable = function () {
        var currScroller = this;
        $(this.scroller).draggable({ containment: this.scrollPanel,
            drag: function () {
                if (this.offsetTop > 0) {
                    currScroller.content.style.top = (currScroller.contentOver * (this.offsetTop / currScroller.scrollOver)) + "px";
                }
                else {
                    currScroller.content.style.top = "0px";
                }
                if (this.offsetTop == (currScroller.scrollPanel.offsetHeight - currScroller.scroller.offsetHeight)) {
                    currScroller.content.style.top = (currScroller.container.offsetHeight - currScroller.content.offsetHeight) + "px";
                }
            }
        });
    }
    this.setScrollHeight = function () {
        this.contentOver = this.container.offsetHeight - this.content.offsetHeight;
        this.overPercent = this.container.offsetHeight / this.content.offsetHeight;
        if (this.overPercent > 1) {
            this.overPercent = 1;
        }
        this.scroller.style.height = parseInt(this.scrollPanel.offsetHeight * this.overPercent) + "px";
        var tempHeight = (parseInt(this.scrollPanel.offsetHeight * this.overPercent) - 44);
        if (tempHeight < 1) {
            tempHeight = 1;
        }
        this.scrollerMid.style.height = tempHeight + "px";
        this.scrollOver = this.scrollPanel.offsetHeight - this.scroller.offsetHeight;
    }
    this.addScroller = function (newScroller) {
        scrollerArray.push(newScroller);
    }
    this.removeScroller = function () {
        for (var iScroll = 0; iScroll < scrollerArray.length; iScroll++) {
            if (scrollerArray[iScroll] == this) {
                scrollerArray.splice(iScroll, 1);
                this.container.parentNode.removeChild(this.scrollPanel);
            }
        }
    }
    this.setScrollerDraggable();
    this.setScrollHeight();
    return this;
}

function setMouseDown(index, status, dir) {
    var currScroller = scrollerArray[index];
    currScroller.mouseDown = status;
    if (status) {
        manualScroll(index, dir);
    }
}

function manualScroll(index, dir) {
    var currScroller = scrollerArray[index];
    if (currScroller.mouseDown) {
        var top = parseInt(currScroller.scroller.offsetTop);
        if (dir == "up") {
            if (top > 0) {
                currScroller.scroller.style.top = (top - 1) + "px";
                currScroller.content.style.top = (currScroller.contentOver * (top / currScroller.scrollOver)) + "px";
                setTimeout("manualScroll('" + index + "', 'up')", 10);
            }
            else {
                currScroller.content.style.top = "0px";
            }
        }
        if (dir == "down") {
            if (top < (currScroller.scrollPanel.offsetHeight - currScroller.scroller.offsetHeight)) {
                currScroller.scroller.style.top = (top + 1) + "px";
                currScroller.content.style.top = (currScroller.contentOver * (top / currScroller.scrollOver)) + "px";
                setTimeout("manualScroll('" + index + "', 'down')", 10);
            }
            else {
                currScroller.content.style.top = (currScroller.container.offsetHeight - currScroller.content.offsetHeight) + "px";
            }
        }
    }
}

function setRollOver(element, status) {
    if (status == "over") {
        for (var i = 0; i < element.childNodes.length; i++) {
            var tempElem = element.childNodes[i];
            if (tempElem.className != null) {
                if (tempElem.className == "lluScrollerTop") {
                    tempElem.style.backgroundImage = "url(http://image.locallinkup.com/console/scroll_sprite.png)";
	                tempElem.style.backgroundPosition = "-127px 8px";
                }
                if (tempElem.className == "lluScrollerSlice") {
                    tempElem.style.backgroundImage = "url(http://image.locallinkup.com/console/scroller_slice_on.png)";
                }
                if (tempElem.className == "lluScrollerBot") {
                    tempElem.style.backgroundImage = "url(http://image.locallinkup.com/console/scroll_sprite.png)";
                    tempElem.style.backgroundPosition = "-211px -10px";
                }
            }
        }
    }
    if (status == "out") {
        for (var i = 0; i < element.childNodes.length; i++) {
            var tempElem = element.childNodes[i];
            if (tempElem.className != null) {
                if (tempElem.className == "lluScrollerTop") {
                    tempElem.style.backgroundImage = "url(http://image.locallinkup.com/console/scroll_sprite.png)";
                    tempElem.style.backgroundPosition = "-106px 8px";
                }
                if (tempElem.className == "lluScrollerSlice") {
                    tempElem.style.backgroundImage = "url(http://image.locallinkup.com/console/scroller_slice_off.png)";
                }
                if (tempElem.className == "lluScrollerBot") {
                    tempElem.style.backgroundImage = "url(http://image.locallinkup.com/console/scroll_sprite.png)";
                    tempElem.style.backgroundPosition = "-191px -10px";
                }
            }
        }
    }
}