﻿var scrollerArray = new Array();

function Scroller(S1, S2, offset) {
    var newScroller = new Object();
    if (S1.tagName != null) {
        newScroller.container = S1;
        newScroller.content = S2;
    }
    else {
        newScroller.container = document.getElementById(S1);
        newScroller.content = document.getElementById(S2);
    }
    newScroller.contentOver = newScroller.container.offsetHeight - newScroller.content.offsetHeight;
    newScroller.scrollOver = 0;
    newScroller.overPercent = 0.0;
    newScroller.mouseDown = false;
    newScroller.mouseOver = false;

    if (window.addEventListener) {
        /** DOMMouseScroll is for mozilla. */
        window.addEventListener('DOMMouseScroll', scrollerMouseWheel, false);
    }
    else {
        /** IE/Opera. */
        window.onmousewheel = document.onmousewheel = scrollerMouseWheel;
    }

    newScroller.content.setAttribute("onmouseover", "setScrollerMouseOver('" + (scrollerArray.length) + "', true)");
    newScroller.content.setAttribute("onmouseout", "scrollerFixOnMouseOut(this, event, '" + (scrollerArray.length) + "')");

    newScroller.scrollPanel = document.createElement("div");
    newScroller.scrollPanel.id = "scroller" + scrollerArray.length;
    newScroller.scrollPanel.className = "lluScrollPanel";

    newScroller.scrollPanelTop = document.createElement("div");
    newScroller.scrollPanelTop.className = "lluScrollPanelTop";
    newScroller.scrollPanelTop.setAttribute("onmousedown", "setScrollerMouseDown('" + (scrollerArray.length) + "', true, 'up')");
    newScroller.scrollPanelTop.setAttribute("onmouseup", "setScrollerMouseDown('" + (scrollerArray.length) + "', false, '')");

    newScroller.scrollPanelMid = document.createElement("div");
    newScroller.scrollPanelMid.className = "lluScrollPanelSlice";

    newScroller.scrollPanelBot = document.createElement("div");
    newScroller.scrollPanelBot.className = "lluScrollPanelBot";
    newScroller.scrollPanelBot.setAttribute("onmousedown", "setScrollerMouseDown('" + (scrollerArray.length) + "', true, 'down')");
    newScroller.scrollPanelBot.setAttribute("onmouseup", "setScrollerMouseDown('" + (scrollerArray.length) + "', false, '')");

    newScroller.scroller = document.createElement("div");
    newScroller.scroller.className = "lluScroller";
    newScroller.scroller.style.top = "0px";
    newScroller.scroller.setAttribute("onmouseover", "setScrollerRollOver(this, 'over')");
    newScroller.scroller.setAttribute("onmouseout", "setScrollerRollOver(this, 'out')");

    newScroller.scrollerTop = document.createElement("div");
    newScroller.scrollerTop.className = "lluScrollerTop";

    newScroller.scrollerMid = document.createElement("div");
    newScroller.scrollerMid.className = "lluScrollerSlice";

    newScroller.scrollerBot = document.createElement("div");
    newScroller.scrollerBot.className = "lluScrollerBot";

    newScroller.scrollPanel.appendChild(newScroller.scrollPanelTop);
    newScroller.scrollPanel.appendChild(newScroller.scrollPanelMid);
    newScroller.scrollPanel.appendChild(newScroller.scrollPanelBot);
    newScroller.scroller.appendChild(newScroller.scrollerTop);
    newScroller.scroller.appendChild(newScroller.scrollerMid);
    newScroller.scroller.appendChild(newScroller.scrollerBot);

    newScroller.scrollPanel.appendChild(newScroller.scroller);

    newScroller.container.parentNode.appendChild(newScroller.scrollPanel);
    newScroller.setScrollerDraggable = function () {
        var currScroller = newScroller;
        $(newScroller.scroller).draggable({ containment: newScroller.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";
                }
            }
        });
    }
    newScroller.scrollToElement = function (scrollBy, multi) {
        var top = parseInt(newScroller.scroller.style.top.replace("px", ""));
        var difference = 0;
        if (scrollBy < 0) {
            difference = newScroller.scrollPanel.offsetHeight - (newScroller.scroller.offsetTop + newScroller.scroller.offsetHeight);
        }
        else {
            difference = newScroller.scroller.offsetTop;
        }
        if (difference != 0) {
            if (scrollBy < 0) {
                newScroller.scroller.style.top = (top + parseInt(difference / multi)) + "px";
            }
            else {
                newScroller.scroller.style.top = (top - parseInt(difference / multi)) + "px";
            }
        }
        newScroller.content.style.top = (newScroller.content.offsetTop + scrollBy) + "px";
    }
    newScroller.setScrollVisible = function (hideShow) {
        newScroller.scrollPanel.style.display = hideShow;
    }
    newScroller.setScrollHeight = function () {
        newScroller.scroller.style.top = "0px";
        if (newScroller.container.offsetHeight > 36) {
            newScroller.scrollPanel.style.top = newScroller.container.offsetTop + "px";
            newScroller.scrollPanel.style.left = ((newScroller.container.offsetLeft + newScroller.container.offsetWidth) + offset) + "px";
            newScroller.scrollPanel.style.height = newScroller.container.offsetHeight + "px";
            newScroller.scrollPanelMid.style.height = (newScroller.container.offsetHeight - 36) + "px";
            newScroller.contentOver = newScroller.container.offsetHeight - newScroller.content.offsetHeight;
            if (newScroller.contentOver < 0) {
                newScroller.setScrollVisible("inline");
            }
            else {
                newScroller.setScrollVisible("none");
            }
            newScroller.overPercent = newScroller.container.offsetHeight / newScroller.content.offsetHeight;
            if (newScroller.overPercent > 1) {
                newScroller.overPercent = 1;
            }
            newScroller.scroller.style.height = parseInt(newScroller.scrollPanel.offsetHeight * newScroller.overPercent) + "px";
            var tempHeight = (parseInt(newScroller.scrollPanel.offsetHeight * newScroller.overPercent) - 44);
            if (tempHeight < 1) {
                tempHeight = 1;
            }
            newScroller.scrollerMid.style.height = tempHeight + "px";
            newScroller.scrollOver = newScroller.scrollPanel.offsetHeight - newScroller.scroller.offsetHeight;
        }
    }
    scrollerArray[scrollerArray.length] = newScroller;
    newScroller.removeScroller = function () {
        for (var iScroll = 0; iScroll < scrollerArray.length; iScroll++) {
            if (scrollerArray[iScroll] == newScroller) {
                scrollerArray.splice(iScroll, 1);
                newScroller.container.parentNode.removeChild(newScroller.scrollPanel);
            }
        }
    }
    newScroller.setScrollerDraggable();
    return newScroller;
}

function setScrollerMouseOver(index, status) {
    var currScroller = scrollerArray[index];
    currScroller.mouseOver = status;
}

function setScrollerKeyUp(e, index) {
    var currScroller = scrollerArray[index];
    if (event.keyCode == 40 || event.keyCode == 38) {
        currScroller.keyDown = 0;
    }
    if (event.preventDefault)
        event.preventDefault();
    event.returnValue = false;
}

function setScrollerMouseDown(index, status, dir) {
    var currScroller = scrollerArray[index];
    currScroller.mouseDown = status;
    if (status) {
        manualScroll1(index, dir);
    }
}

function scrollerMouseWheel(e) {
    for (var iScroll = 0; iScroll < scrollerArray.length; iScroll++) {
        var currScroller = scrollerArray[iScroll];
        if (currScroller.mouseOver) {
            var delta = 0;
            if (!event) /* For IE. */
                event = window.event;
            if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta / 120;
                /** In Opera 9, delta differs in sign as compared to IE.
                */
                if (window.opera)
                    delta = -delta;
            } else if (event.detail) { /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                * Also, delta is multiple of 3.
                */
                delta = -event.detail / 3;
            }
            /** If delta is nonzero, handle it.
            * Basically, delta is now positive if wheel was scrolled up,
            * and negative, if wheel was scrolled down.
            */
            if (delta)
                var top = parseInt(currScroller.scroller.offsetTop);
                if (delta > 0) {
                    if (top > 0) {
                        currScroller.scroller.style.top = (top - 11) + "px";
                        currScroller.content.style.top = (currScroller.contentOver * (top / currScroller.scrollOver)) + "px";
                    }
                    else {
                        currScroller.content.style.top = "0px";
                    }
                }
                else {
                    if (top < (currScroller.scrollPanel.offsetHeight - currScroller.scroller.offsetHeight)) {
                        currScroller.scroller.style.top = (top + 11) + "px";
                        currScroller.content.style.top = (currScroller.contentOver * (top / currScroller.scrollOver)) + "px";
                    }
                    else {
                        currScroller.content.style.top = (currScroller.container.offsetHeight - currScroller.content.offsetHeight) + "px";
                    }
                }
            /** Prevent default actions caused by mouse wheel.
            * That might be ugly, but we handle scrolls somehow
            * anyway, so don't bother here..
            */
            if (event.preventDefault)
                event.preventDefault();
            event.returnValue = false;
        }
    }
}

function manualScroll1(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("manualScroll1('" + 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("manualScroll1('" + index + "', 'down')", 10);
            }
            else {
                currScroller.content.style.top = (currScroller.container.offsetHeight - currScroller.content.offsetHeight) + "px";
            }
        }
    }
}

function manualScroll2(index, dir) {
    var currScroller = scrollerArray[index];
    if (currScroller.mouseOver) {
        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("manualScroll1('" + 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("manualScroll1('" + index + "', 'down')", 10);
            }
            else {
                currScroller.content.style.top = (currScroller.container.offsetHeight - currScroller.content.offsetHeight) + "px";
            }
        }
    }
}

function setScrollerRollOver(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";
                }
            }
        }
    }
}

function scrollerIsChildOf(parent, child) {
    if (child != null) {
        while (child.parentNode) {
            if ((child = child.parentNode) == parent) {
                return true;
            }
        }
    }
    return false;
}

function scrollerFixOnMouseOut(element, event, index) {
    var current_mouse_target = null;
    if (event.toElement) {
        current_mouse_target = event.toElement;
    } else if (event.relatedTarget) {
        current_mouse_target = event.relatedTarget;
    }
    if (!scrollerIsChildOf(element, current_mouse_target) && element != current_mouse_target) {
        setScrollerMouseOver(index, false);
    }
}
