﻿/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

Drop Down Combo Box

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

var dropDownArray = new Array();

function DropDownBox(panelToAddTo, defaultText, dropDownWidth, resultPanelWidth, resultPanelHeight, resultPanelOffset, isInput, autoFill, callBackFunction) {
    var newDropDown = new Object();
    if (typeof panelToAddTo == "string") {
        newDropDown.parentPanel = document.getElementById(panelToAddTo);
    }
    else {
        newDropDown.parentPanel = panelToAddTo;
    }
    newDropDown.dropDownPanelHeight = resultPanelHeight;
    newDropDown.selectedIndex = -1;
    newDropDown.itemCount = 0;
    newDropDown.autoFill = autoFill;
    newDropDown.arrayIndex = dropDownArray.length;
    newDropDown.isInput = isInput;
    newDropDown.defaultText = defaultText;
    newDropDown.ajaxCallFunction = "";
    newDropDown.countBeforeCall = 0;
    newDropDown.lastTextVal = "";
    newDropDown.callBackFunction = callBackFunction;
    newDropDown.enabled = true;
    newDropDown.showSampleText = false;
    newDropDown.sampleTextArray = new Array();

    newDropDown.lluDropDownMain = document.createElement("div");
    newDropDown.lluDropDownMain.className = "lluDropDownMain";

    if (!newDropDown.isInput) {
        newDropDown.lluDropDownMain.style.width = dropDownWidth + 6 + "px";
        newDropDown.lluDropDownMain.onclick = function () { showLLUDropDown(newDropDown.arrayIndex); };
    }
    else {
        newDropDown.lluDropDownMain.style.width = dropDownWidth + "px";
    }
    newDropDown.parentPanel.appendChild(newDropDown.lluDropDownMain);

    newDropDown.lluDropDownLeftPanel = document.createElement("div");
    newDropDown.lluDropDownLeftPanel.className = "lluDropDownLeftPanel";
    newDropDown.lluDropDownMain.appendChild(newDropDown.lluDropDownLeftPanel);

    newDropDown.lluDropDownSampleTextPanel = document.createElement("div");
    newDropDown.lluDropDownSampleTextPanel.id = "lluDropDownSampleTextPanel";
    newDropDown.lluDropDownSampleTextPanel.style.display = "none";
    newDropDown.lluDropDownSampleTextPanel.style.left = resultPanelWidth + "px";
    newDropDown.lluDropDownSampleTextPanel.innerHTML = "Aa";
    newDropDown.lluDropDownMain.appendChild(newDropDown.lluDropDownSampleTextPanel);

    if (newDropDown.isInput) {
        newDropDown.lluDropDownCentrePanel = document.createElement("input");
        newDropDown.lluDropDownCentrePanel.setAttribute("type", "text");
        newDropDown.lluDropDownCentrePanel.onclick = function () { setDropDownDefaultText('set', newDropDown.arrayIndex); };
        newDropDown.lluDropDownCentrePanel.onblur = function () { setDropDownDefaultText('clear', newDropDown.arrayIndex); };
        newDropDown.lluDropDownCentrePanel.onkeyup = function () { checkDropDownText(newDropDown.arrayIndex); };
        newDropDown.lluDropDownCentrePanel.style.width = (dropDownWidth - 6) + "px";
        newDropDown.lluDropDownCentrePanel.value = newDropDown.defaultText;
    }
    else {
        newDropDown.lluDropDownCentrePanel = document.createElement("div");
        newDropDown.lluDropDownCentrePanel.innerHTML = newDropDown.defaultText;
        newDropDown.lluDropDownCentrePanel.style.width = (dropDownWidth - 6) + "px";
    }
    newDropDown.lluDropDownCentrePanel.onkeydown = function (e) { e = window.event || e; setDropDownKeyDown(e, newDropDown.arrayIndex); };
    newDropDown.lluDropDownCentrePanel.className = "lluDropDownCentrePanel";
    newDropDown.lluDropDownMain.appendChild(newDropDown.lluDropDownCentrePanel);

    newDropDown.lluDropDownRightPanel = document.createElement("div");
    newDropDown.lluDropDownRightPanel.className = "lluDropDownRightPanel";
    newDropDown.lluDropDownMain.appendChild(newDropDown.lluDropDownRightPanel);

    if (!newDropDown.isInput) {
        newDropDown.lluDropDownArrow = document.createElement("div");
        newDropDown.lluDropDownArrow.className = "lluDropDownArrow";
        newDropDown.lluDropDownMain.appendChild(newDropDown.lluDropDownArrow);
    }

    newDropDown.lluDropDownListAnimatePanel = document.createElement("div");
    newDropDown.lluDropDownListAnimatePanel.className = "lluDropDownListAnimatePanel";
    newDropDown.lluDropDownListAnimatePanel.style.width = resultPanelWidth + "px";
    newDropDown.lluDropDownListAnimatePanel.style.marginLeft = resultPanelOffset + "px";
    newDropDown.lluDropDownListAnimatePanel.style.height = "0px";
    newDropDown.lluDropDownMain.appendChild(newDropDown.lluDropDownListAnimatePanel);

    newDropDown.lluDropDownListPanel = document.createElement("div");
    newDropDown.lluDropDownListPanel.className = "lluDropDownListPanel";
    newDropDown.lluDropDownListPanel.style.width = resultPanelWidth + "px";
    newDropDown.lluDropDownListPanel.style.height = resultPanelHeight + "px";
    newDropDown.lluDropDownListPanel.style.zIndex = "1";
    newDropDown.lluDropDownListAnimatePanel.appendChild(newDropDown.lluDropDownListPanel);

    newDropDown.lluDropDownList = document.createElement("div");
    newDropDown.lluDropDownList.className = "lluDropDownList";
    newDropDown.lluDropDownList.style.width = (resultPanelWidth - 24) + "px";
    newDropDown.lluDropDownListPanel.appendChild(newDropDown.lluDropDownList);

    newDropDown.lluDropDownList.onkeydown = function (e) { e = window.event || e; setDropDownKeyDown(e, newDropDown.arrayIndex); };

    newDropDown.lluScroller = new Scroller(newDropDown.lluDropDownListPanel, newDropDown.lluDropDownList, -20);
    newDropDown.lluScroller.setScrollVisible("none");
    newDropDown.lluScroller.scrollPanel.style.zIndex = "2";

    newDropDown.setAjaxCallFunction = function (functionName, countBeforeCall) {
        newDropDown.ajaxCallFunction = functionName + "();";
        newDropDown.countBeforeCall = countBeforeCall;
    }

    newDropDown.setScrollList = function (content) {
        newDropDown.lluDropDownList.innerHTML = "";
        newDropDown.lluDropDownListPanel.style.top = "0px";
        var dataArray = content.split("^^");
        newDropDown.itemCount = dataArray.length;
        var scrollListText = "";
        for (var iTemp = 0; iTemp < dataArray.length; iTemp++) {
            var loopArray = dataArray[iTemp];
            var dropDownFunctions = newDropDown.callBackFunction + "('" + loopArray.split("**")[0] + "," + loopArray.split("**")[2] + "');";
            if (newDropDown.autoFill == true) {
                dropDownFunctions += "setDropDownText('" + loopArray.split("**")[2] + "', '" + newDropDown.arrayIndex + "');";
                if (iTemp == 0) {
                    if (!newDropDown.isInput) {
                        newDropDown.lluDropDownCentrePanel.innerHTML = loopArray.split("**")[2];
                    }
                }
            }
            dropDownFunctions += " setDropDownSelectedindex('" + iTemp + "', '" + newDropDown.arrayIndex + "');";
            var newItem = "<div id=\"lluDropDownItem" + iTemp + "\" onmouseover=\"setSampleText('" + iTemp + "', '" + newDropDown.arrayIndex + "');\"";
            if (loopArray.split("**")[1] == "1") {
                newItem += " class=\"lluDropDownItemRed\"";
            }
            else if (loopArray.split("**")[1] == "-1") {
                newItem += " class=\"lluDropDownItemDis\"";
            }
            else {
                newItem += " class=\"lluDropDownItemGrey\"";
                newItem += " onclick=\"" + dropDownFunctions + "\"";
            }
            newItem += " style=\"width:" + (resultPanelWidth - 24) + "px;\">" + loopArray.split("**")[2] + "</div>";
            scrollListText += newItem;
        }
        newDropDown.lluDropDownList.innerHTML = scrollListText;
        if (newDropDown.lluDropDownList.offsetHeight > newDropDown.lluDropDownListPanel.offsetHeight) {
            newDropDown.lluScroller.setScrollVisible("inline");
            newDropDown.lluScroller.setScrollHeight();
        }
        else {
            newDropDown.lluScroller.setScrollVisible("inline");
            newDropDown.lluScroller.setScrollFullHeight();
        }
        if (newDropDown.isInput) {
            showLLUDropDown(newDropDown.arrayIndex);
        }
    }
    newDropDown.hideLLUDropDown = function () {
        newDropDown.lluDropDownSampleTextPanel.style.display = "none";
        $(newDropDown.lluDropDownListAnimatePanel).animate({ height: "0px" }, 250);
        newDropDown.lluScroller.mouseOver = false;
    }
    newDropDown.showLLUDropDown = function () {
        showLLUDropDown(newDropDown.arrayIndex);
    }
    newDropDown.showSamplePanel = function (status, text) {
        newDropDown.showSampleText = status;
        newDropDown.sampleTextArray = text.split("^^");
        newDropDown.lluDropDownSampleTextPanel.className = newDropDown.sampleTextArray[0];
    }
    dropDownArray[dropDownArray.length] = newDropDown;
    newDropDown.setEnabled = function (status) {
        newDropDown.enabled = status;
    }
    return newDropDown;
}

function setSampleText(index, dropDownIndex) {
    var currDropDown = dropDownArray[dropDownIndex];
    currDropDown.lluDropDownSampleTextPanel.className = currDropDown.sampleTextArray[index];
}

function evaluateDropDownFunctions(functs) {
    eval(functs);
}

function setDropDownDefaultText(type, dropDownIndex) {
    var currDropDown = dropDownArray[dropDownIndex];
    if (type == "set") {
        currDropDown.lluDropDownCentrePanel.value = "";
    }
    else {
        if (currDropDown.lluDropDownCentrePanel.value == "") {
            currDropDown.lluDropDownCentrePanel.value = currDropDown.defaultText;
        }
    }
}

function checkDropDownText(dropDownIndex) {
    var currDropDown = dropDownArray[dropDownIndex];
    if (currDropDown.ajaxCallFunction != "") {
        var currDropDownText = currDropDown.lluDropDownCentrePanel.value;
        if (currDropDownText != currDropDown.defaultText) {
            if (currDropDownText.length > currDropDown.countBeforeCall) {
                if (currDropDownText != currDropDown.lastTextVal) {
                    eval(currDropDown.ajaxCallFunction);
                    currDropDown.lastTextVal = currDropDownText;
                }
            }
        }
    }
}

function setDropDownText(selectedText, dropDownIndex) {
    var currDropDown = dropDownArray[dropDownIndex];
    if (currDropDown.isInput) {
        currDropDown.lluDropDownCentrePanel.value = selectedText;
    }
    else {
        currDropDown.lluDropDownCentrePanel.innerHTML = selectedText;
    }
    currDropDown.hideLLUDropDown();
}

function setDropDownSelectedindex(elemIndex, dropDownIndex) {
    var currDropDown = dropDownArray[dropDownIndex];
    try {
        currDropDown.lluDropDownList.childNodes[currDropDown.selectedIndex].style.borderStyle = "solid";
    }
    catch (err) { }
    currDropDown.selectedIndex = elemIndex;
    var currElement = currDropDown.lluDropDownList.childNodes[elemIndex];
    currElement.style.borderStyle = "dashed";
    currDropDown.hideLLUDropDown();
}

function setDropDownKeyDown(event, index) {
    var elem2;
    if (event.srcElement) {
        elem2 = event.srcElement;
    }
    if (event.target) {
        elem2 = event.target;
    }
    var currDropDown = dropDownArray[index];
    var actioned = false;
    if (elem2.className == "lluDropDownCentrePanel") {
        if (event.keyCode == 9) {
            var firstElement = currDropDown.lluDropDownList.firstChild;
            if (firstElement) {
                firstElement.focus();
                firstElement.style.borderStyle = "dashed";
                currDropDown.selectedIndex = 0;
            }
            actioned = true;
        }
    }
    else {
        if (currDropDown.selectedIndex > -1) {
            if (event.keyCode == 32) {
                var selectedElement2 = currDropDown.lluDropDownList.childNodes[currDropDown.selectedIndex];
                setDropDownSelectedindex(currDropDown.selectedIndex, index);
                setDropDownText(selectedElement2.innerHTML, index);
                if (selectedElement2.className.indexOf('lluDropDownItemGrey') > -1) {
                    var temp = selectedElement2.getAttribute("onclick").split(";")[0] + ";";
                    eval(temp);
                    actioned = true;
                }
            }
            else {
                var selectedElement = currDropDown.lluDropDownList.childNodes[currDropDown.selectedIndex];
                var selectedElementTop = selectedElement.offsetTop;
                var selectedElementHeight = selectedElement.offsetHeight;
                var selectedElementBottom = selectedElementTop + selectedElementHeight;
                var contentTop = selectedElement.parentNode.offsetTop;
                var contentHeight = selectedElement.parentNode.offsetHeight;
                var contentBottom = contentTop + contentHeight;
                var containerHeight = currDropDown.dropDownPanelHeight;
                var moveBy = 0;
                var multiplier = 0;
                if (event.keyCode == 40) {
                    if (contentBottom > containerHeight && selectedElementBottom >= containerHeight) {
                        multiplier = (contentHeight - selectedElementBottom) / 22;
                        if ((contentHeight - selectedElementBottom) % 22 == 0) {
                            moveBy = -22;
                        }
                        else {
                            moveBy = ((contentBottom - selectedElementBottom) % 22) * -1;
                        }
                        currDropDown.lluScroller.scrollToElement(moveBy, multiplier);
                    }
                    if (currDropDown.selectedIndex < (currDropDown.itemCount - 1)) {
                        try {
                            selectedElement.nextSibling.style.borderStyle = "dashed";
                        }
                        catch (err) { }
                        selectedElement.style.borderStyle = "solid";
                        currDropDown.selectedIndex++;
                    }
                    actioned = true;
                }
                else if (event.keyCode == 38) {
                    if (contentTop < 0 && selectedElementTop <= (contentTop * -1)) {
                        multiplier = selectedElementTop / 22;
                        if (contentTop + selectedElementTop == 0) {
                            moveBy = 22;
                        }
                        else {
                            moveBy = (contentTop + selectedElementTop) * -1;
                        }
                        currDropDown.lluScroller.scrollToElement(moveBy, multiplier);
                    }
                    if (currDropDown.selectedIndex > 0) {
                        try {
                            selectedElement.previousSibling.style.borderStyle = "dashed";
                        }
                        catch (err) { }
                        selectedElement.style.borderStyle = "solid";
                        currDropDown.selectedIndex--;
                    }
                    actioned = true;
                }
            }
        }
    }
    if (actioned) {
        if (event.preventDefault) event.preventDefault();
        if (event.stopPropagation) event.stopPropagation();
        if (event.returnValue) event.returnValue = false;
        return false;
    }
}

function showLLUDropDown(index) {
    var currDropDown = dropDownArray[index];
    if (currDropDown.enabled) {
        if (currDropDown.lluDropDownListAnimatePanel.offsetHeight == 0) {
            var newDropDownListPos = dropDownArray[index].dropDownPanelHeight + "px";
            $(currDropDown.lluDropDownListAnimatePanel).animate({ height: newDropDownListPos }, 250);
            if (currDropDown.showSampleText) {
                currDropDown.lluDropDownSampleTextPanel.style.display = "inline";
            }
        }
        else {
            currDropDown.hideLLUDropDown();
        }
    }
}

/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

                                                        Scroller

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

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;
    newScroller.arrayIndex = scrollerArray.length;

    if (window.addEventListener) {
        /** DOMMouseScroll is for mozilla. */
        window.addEventListener('DOMMouseScroll', scrollerMouseWheel, false);
    }
    else {
        /** IE/Opera. */
        window.onmousewheel = document.onmousewheel = scrollerMouseWheel;
    }

    newScroller.content.onmouseover = function () { setScrollerMouseOver(newScroller.arrayIndex, true); };
    newScroller.content.onmouseout = function (e) { e = window.event || e; scrollerFixOnMouseOut(this, e, newScroller.arrayIndex); };

    newScroller.scrollPanel = document.createElement("div");
    newScroller.scrollPanel.id = "scroller" + newScroller.arrayIndex;
    newScroller.scrollPanel.className = "lluScrollPanel";

    newScroller.scrollPanelTop = document.createElement("div");
    newScroller.scrollPanelTop.className = "lluScrollPanelTop";
    newScroller.scrollPanelTop.onmousedown = function () { setScrollerMouseDown(newScroller.arrayIndex, true, 'up'); };
    newScroller.scrollPanelTop.onmouseout = function () { setScrollerMouseDown(newScroller.arrayIndex, false, ''); };

    newScroller.scrollPanelMid = document.createElement("div");
    newScroller.scrollPanelMid.className = "lluScrollPanelSlice";

    newScroller.scrollPanelBot = document.createElement("div");
    newScroller.scrollPanelBot.className = "lluScrollPanelBot";
    newScroller.scrollPanelBot.onmousedown = function () { setScrollerMouseDown(newScroller.arrayIndex, true, 'down'); };
    newScroller.scrollPanelBot.onmouseout = function () { setScrollerMouseDown(newScroller.arrayIndex, false, ''); };

    newScroller.scroller = document.createElement("div");
    newScroller.scroller.className = "lluScroller";
    newScroller.scroller.style.top = "0px";
    newScroller.scroller.onmouseover = function () { setScrollerRollOver(this, 'over'); };
    newScroller.scroller.onmouseout = function () { setScrollerRollOver(this, 'out'); };

    newScroller.scrollerTop = document.createElement("div");
    newScroller.scrollerTop.className = "lluScrollerTop";

    newScroller.scrollerMid = document.createElement("div");
    newScroller.scrollerMid.className = "lluScrollerSliceOff";

    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.mouseDown = false;
        newScroller.mouseOver = false;
    }
    newScroller.setScrollHeight = function () {
        newScroller.scroller.style.top = "0px";
        if (newScroller.container.offsetHeight > 24) {
            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 - 24) + "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) - 28);
            if (tempHeight < 1) {
                tempHeight = 1;
            }
            newScroller.scrollerMid.style.height = tempHeight + "px";
            newScroller.scrollOver = newScroller.scrollPanel.offsetHeight - newScroller.scroller.offsetHeight;
            $(newScroller.scroller).draggable("enable");
        }
    }
    newScroller.setScrollFullHeight = function () {
        newScroller.scroller.style.top = "0px";
        if (newScroller.container.offsetHeight > 24) {
            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.content.offsetHeight + "px";
            newScroller.scrollPanelMid.style.height = newScroller.content.offsetHeight + "px";
            if (newScroller.content.offsetHeight > 27) {
                newScroller.scrollerMid.style.height = (newScroller.content.offsetHeight - 28) + "px";
            }
            else {
                newScroller.scrollerMid.style.height = newScroller.content.offsetHeight + "px";
            }
            $(newScroller.scroller).draggable("disable");
        }
    }
    scrollerArray[newScroller.arrayIndex] = 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 setScrollerKeyUp(event, index) {
    var currScroller = scrollerArray[index];
    if (event.keyCode == 40 || event.keyCode == 38) {
        currScroller.keyDown = 0;
    }
    if (event.preventDefault) event.preventDefault();
    if (event.stopPropagation) event.stopPropagation();
    if (event.returnValue) event.returnValue = false;
    return false;
}

function setScrollerMouseDown(index, status, dir) {
    var currScroller = scrollerArray[index];
    currScroller.mouseDown = status;
    if (status) {
        manualScroll1(index, dir);
    }
}

function setScrollerMouseOver(index, status) {
    var currScroller = scrollerArray[index];
    currScroller.mouseOver = status;
}

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);
    }
}

function scrollerIsChildOf(parent, child) {
    if (child != null) {
        while (child.parentNode) {
            if ((child = child.parentNode) == parent) {
                return true;
            }
        }
    }
    return false;
}

function scrollerMouseWheel(event) {
    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();
            if (event.stopPropagation) event.stopPropagation();
            if (event.returnValue) event.returnValue = false;
            return 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.backgroundPosition = "-126px 12px";
                }
                if (tempElem.className.indexOf("lluScrollerSlice") > -1) {
                    tempElem.className = "lluScrollerSliceOn";
                }
                if (tempElem.className == "lluScrollerBot") {
                    tempElem.style.backgroundPosition = "-210px 0px";
                }
            }
        }
    }
    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.backgroundPosition = "-105px 12px";
                }
                if (tempElem.className.indexOf("lluScrollerSlice") > -1) {
                    tempElem.className = "lluScrollerSliceOff";
                }
                if (tempElem.className == "lluScrollerBot") {
                    tempElem.style.backgroundPosition = "-189px 0px";
                }
            }
        }
    }
}

/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

                                                        Time Picker

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

var timePickerArray = new Array();

function TimePicker() {
    var newTimePicker = new Object();
    newTimePicker.selectedInputField;
    newTimePicker.offset = 0;
    newTimePicker.callBack = "";
    newTimePicker.arrayIndex = timePickerArray.length;

    newTimePicker.TimePickerPanel = document.createElement("div");
    newTimePicker.TimePickerPanel.className = "TimePickerPanel";

    newTimePicker.TimePickerAmPmTimePanel = document.createElement("div");
    newTimePicker.TimePickerAmPmTimePanel.className = "TimePickerAMPMTimePanel";
    newTimePicker.TimePickerPanel.appendChild(newTimePicker.TimePickerAmPmTimePanel);

    newTimePicker.TimePickerSaveButton = document.createElement("div");
    newTimePicker.TimePickerSaveButton.className = "TimePickerSaveButton";
    newTimePicker.TimePickerSaveButton.onclick = function () { setTimePickerTime(newTimePicker.arrayIndex); };
    newTimePicker.TimePickerPanel.appendChild(newTimePicker.TimePickerSaveButton);

    newTimePicker.TimePickerCloseButton = document.createElement("div");
    newTimePicker.TimePickerCloseButton.className = "TimePickerCloseButton";
    newTimePicker.TimePickerCloseButton.onclick = function () { hideTimePickerPanel(newTimePicker.arrayIndex); };
    newTimePicker.TimePickerPanel.appendChild(newTimePicker.TimePickerCloseButton);

    newTimePicker.TimePickerHoursLabelsPanel = document.createElement("div");
    newTimePicker.TimePickerHoursLabelsPanel.className = "TimePickerHoursLabelsPanel";
    newTimePicker.TimePickerHoursLabelsPanel.innerHTML = "Choose: Hour";
    newTimePicker.TimePickerPanel.appendChild(newTimePicker.TimePickerHoursLabelsPanel);

    newTimePicker.TimePickerHoursPanel = document.createElement("div");
    newTimePicker.TimePickerHoursPanel.className = "TimePickerHoursPanel";
    newTimePicker.TimePickerPanel.appendChild(newTimePicker.TimePickerHoursPanel);

    for (var i = 0; i < 24; i++) {
        var timePickerHour = "<div id=\"hrs" + i + "\" class=\"TimePickerHour\"";
        if (i.toString().length == 1) {
            timePickerHour += " onclick=\"setTimePickerHours('0" + i + "', " + newTimePicker.arrayIndex + ");\">0" + i + "</div>";
        }
        else {
            timePickerHour += " onclick=\"setTimePickerHours('" + i + "', " + newTimePicker.arrayIndex + ");\">" + i + "</div>";
        }
        newTimePicker.TimePickerHoursPanel.innerHTML += timePickerHour;
    }

    newTimePicker.TimePickerMinutesLabelsPanel = document.createElement("div");
    newTimePicker.TimePickerMinutesLabelsPanel.className = "TimePickerMinutesLabelsPanel";
    newTimePicker.TimePickerMinutesLabelsPanel.innerHTML = "Minutes";
    newTimePicker.TimePickerPanel.appendChild(newTimePicker.TimePickerMinutesLabelsPanel);

    newTimePicker.TimePickerMinutesPanel = document.createElement("div");
    newTimePicker.TimePickerMinutesPanel.className = "TimePickerMinutesPanel";
    newTimePicker.TimePickerPanel.appendChild(newTimePicker.TimePickerMinutesPanel);

    for (var i = 0; i < 60; i += 5) {
        var timePickerMinute = "<div id=\"mins" + i + "\" class=\"TimePickerMinute\"";
        if (i.toString().length == 1) {
            timePickerMinute += " onclick=\"setTimePickerMinutes('0" + i + "', " + newTimePicker.arrayIndex + ");\">0" + i + "</div>";
        }
        else {
            timePickerMinute += " onclick=\"setTimePickerMinutes('" + i + "', " + newTimePicker.arrayIndex + ");\">" + i + "</div>";
        } 
        newTimePicker.TimePickerMinutesPanel.innerHTML += timePickerMinute;
    }

    newTimePicker.hideTimePicker = function () {
        newTimePicker.TimePickerPanel.style.display = "none";
    }

    newTimePicker.showTimePicker = function (inputField, offset, callBack) {
        newTimePicker.selectedInputField = document.getElementById(inputField);
        newTimePicker.offset = offset;
        newTimePicker.callBack = callBack;
        newTimePicker.selectedInputField.parentNode.appendChild(newTimePicker.TimePickerPanel);
        newTimePicker.TimePickerPanel.style.top = newTimePicker.selectedInputField.offsetTop + newTimePicker.selectedInputField.offsetHeight + "px";
        newTimePicker.TimePickerPanel.style.left = newTimePicker.selectedInputField.offsetLeft + newTimePicker.selectedInputField.offsetWidth - newTimePicker.offset + "px";
        if (newTimePicker.selectedInputField.tagName.toLowerCase() == "input") {
            var tempHour = parseInt(newTimePicker.selectedInputField.value.split(":")[0], 10);
            var tempMins = newTimePicker.selectedInputField.value.split(":")[1];
            if (tempHour > 12) {
                var newHour = (tempHour - 12).toString();
                newTimePicker.TimePickerAmPmTimePanel.innerHTML = newHour + ":" + tempMins + "pm";
            }
            else {
                if (tempHour == 12) {
                    newTimePicker.TimePickerAmPmTimePanel.innerHTML = tempHour + ":" + tempMins + "pm";
                }
                else {
                    if (tempHour == 0) {
                        tempHour = 12;
                    }
                    newTimePicker.TimePickerAmPmTimePanel.innerHTML = tempHour + ":" + tempMins + "am";
                }
            }
        }
        else {
            var tempHour = parseInt(newTimePicker.selectedInputField.innerHTML.split(":")[0], 10);
            var tempMins = newTimePicker.selectedInputField.innerHTML.split(":")[1];
            if (tempHour > 12) {
                var newHour = (tempHour - 12).toString();
                newTimePicker.TimePickerAmPmTimePanel.innerHTML = newHour + ":" + tempMins + "pm";
            }
            else {
                if (tempHour == 12) {
                    newTimePicker.TimePickerAmPmTimePanel.innerHTML = tempHour + ":" + tempMins + "pm";
                }
                else {
                    if (tempHour == 0) {
                        tempHour = 12;
                    }
                    newTimePicker.TimePickerAmPmTimePanel.innerHTML = tempHour + ":" + tempMins + "am";
                }
            }
        }
        newTimePicker.TimePickerPanel.style.display = "inline";
    }
    timePickerArray.push(newTimePicker);
    return newTimePicker;
}

function setTimePickerTime(index) {
    var curTimePicker = timePickerArray[index];
    if (curTimePicker.callBack != "") {
        if (curTimePicker.selectedInputField.tagName.toLowerCase() == "input") {
            eval(curTimePicker.callBack + "('" + curTimePicker.selectedInputField.value + "');");
        }
        else {
            eval(curTimePicker.callBack + "('" + curTimePicker.selectedInputField.innerHTML + "');");
        }
        
    }
    curTimePicker.TimePickerPanel.style.display = "none";
}

function setTimePickerMinutes(mins, index) {
    var curTimePicker = timePickerArray[index];
    var currentTimePickerTime = "";
    if (curTimePicker.selectedInputField.tagName.toLowerCase() == "input") {
        currentTimePickerTime = curTimePicker.selectedInputField.value;
        curTimePicker.selectedInputField.value = currentTimePickerTime.substring(0, currentTimePickerTime.indexOf(":") + 1) + mins;
    }
    else {
        currentTimePickerTime = curTimePicker.selectedInputField.innerHTML;
        curTimePicker.selectedInputField.innerHTML = currentTimePickerTime.substring(0, currentTimePickerTime.indexOf(":") + 1) + mins;
    }

    var tempHour = curTimePicker.TimePickerAmPmTimePanel.innerHTML.split(":")[0];
    var tempAmPm = curTimePicker.TimePickerAmPmTimePanel.innerHTML.split(":")[1].substring(2);
    curTimePicker.TimePickerAmPmTimePanel.innerHTML = tempHour + ":" + mins + tempAmPm;
}

function setTimePickerHours(hours, index) {
    var curTimePicker = timePickerArray[index];
    var tempMins = "";
    var currentTimePickerTime = "";
    if (curTimePicker.selectedInputField.tagName.toLowerCase() == "input") {
        currentTimePickerTime = curTimePicker.selectedInputField.value;
        curTimePicker.selectedInputField.value = hours + currentTimePickerTime.substring(currentTimePickerTime.indexOf(":"));
        tempMins = curTimePicker.selectedInputField.value.split(":")[1];
    }
    else {
        currentTimePickerTime = curTimePicker.selectedInputField.innerHTML;
        curTimePicker.selectedInputField.innerHTML = hours + currentTimePickerTime.substring(currentTimePickerTime.indexOf(":"));
        tempMins = curTimePicker.selectedInputField.innerHTML.split(":")[1];
    }
    var tempHour = parseInt(hours, 10);
    if (tempHour > 12) {
        var newHour = (tempHour - 12).toString();
        curTimePicker.TimePickerAmPmTimePanel.innerHTML = newHour + ":" + tempMins + "pm";
    }
    else {
        if (tempHour == 12) {
            curTimePicker.TimePickerAmPmTimePanel.innerHTML = tempHour + ":" + tempMins + "pm";
        }
        else {
            if (tempHour == 0) {
                tempHour = 12;
            }
            curTimePicker.TimePickerAmPmTimePanel.innerHTML = tempHour + ":" + tempMins + "am";
        }
    }

}

function hideTimePickerPanel(index) {
    var curTimePicker = timePickerArray[index];
    curTimePicker.TimePickerPanel.style.display = "none";
}

/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

                                                        Slider

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

function Slider(panel, width, mLeft, mTop, start, stop, incr, scale, callBackFunction) {
    var sliderObject = this;
    this.scale = (width - 20) / (stop - start);
    this.callBackFunction = callBackFunction;

    this.mainPanel = document.createElement("div");
    this.mainPanel.className = "lluSliderMainPanel";
    this.mainPanel.style.width = width + "px";
    this.mainPanel.style.marginLeft = mLeft + "px";
    this.mainPanel.style.marginTop = mTop + "px";
    document.getElementById(panel).appendChild(this.mainPanel);

    this.slidePanel = document.createElement("div");
    this.slidePanel.className = "lluSlidePanel";
    this.slidePanel.style.width = width + "px";
    this.mainPanel.appendChild(this.slidePanel);

    this.slideColourPanel = document.createElement("div");
    this.slideColourPanel.className = "lluSlideColourPanel";
    this.slideColourPanel.style.width = (width - 18) + "px";
    this.slidePanel.appendChild(this.slideColourPanel);

    this.sliderPanel = document.createElement("div");
    this.sliderPanel.className = "lluSlider";
    this.slidePanel.appendChild(this.sliderPanel);

    this.scaleNotchPanel = document.createElement("div");
    this.scaleNotchPanel.className = "lluNotchPanel";
    this.scaleNotchPanel.style.width = (width - 20) + "px";
    this.mainPanel.appendChild(this.scaleNotchPanel);

    this.scalePanel = document.createElement("div");
    this.scalePanel.className = "lluScalePanel";
    this.scalePanel.style.width = width + "px";
    this.mainPanel.appendChild(this.scalePanel);

    this.startPanel = document.createElement("div");
    this.startPanel.className = "lluStartPanel";
    this.startPanel.innerHTML = start;
    this.scalePanel.appendChild(this.startPanel);

    var spacer = (((width - 20) / ((stop - start) / scale)) - 1);
    var loopCount = ((stop - start) / scale) - 1;
    var halfway = (loopCount + 1) / 2;

    for (var mCounter = 0; mCounter < loopCount; mCounter++) {
        var marker = document.createElement("div");
        if (mCounter == halfway - 1) {
            marker.className = "lluSliderMarkerSmall";
        }
        else {
            marker.className = "lluSliderMarkerSmall";
        }
        marker.style.marginLeft = spacer + "px";
        this.scaleNotchPanel.appendChild(marker);

        var tagPanel = document.createElement("div");
        tagPanel.className = "lluTagPanel";
        tagPanel.style.marginLeft = (spacer - 19) + "px";
        tagPanel.innerHTML = scale * (mCounter + 1);
        this.scalePanel.appendChild(tagPanel);
    }

    this.stopPanel = document.createElement("div");
    this.stopPanel.className = "lluStopPanel";
    this.stopPanel.innerHTML = stop;
    this.scalePanel.appendChild(this.stopPanel);

    $(this.sliderPanel).draggable({ containment: this.slidePanel, grid: [incr, incr],
        drag: function () {
            var newVal = Math.round((this.offsetLeft / sliderObject.scale) * 100) / 100;
            eval(sliderObject.callBackFunction + "(" + newVal + ");");
        }
    });

    this.setPos = function (pos) {
        this.sliderPanel.style.left = pos;
    }
}

/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

                                                            Menu

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

function LLUMenu() {
    this.lluMenuBar = document.getElementById('menuBar');
    this.isVertical = (this.lluMenuBar.firstChild.getAttribute("orient") == "vertical");
    this.rootHeight = this.lluMenuBar.offsetHeight;
    this.rootWidth = this.lluMenuBar.offsetWidth;
    this.subLevelOneWidth = 0;
    if (this.isVertical) {
        this.lluMenuBar.firstChild.style.width = "100%";
    }
    for (var i = 0; i < this.lluMenuBar.firstChild.childNodes.length; i++) {
        var elem = this.lluMenuBar.firstChild.childNodes[i];
        if (elem.nodeType != 3) {
            if (elem.tagName.toLowerCase() == "li") {
                if (this.rootHeight == 0) {
                    if (this.isVertical) {
                        this.rootHeight = elem.parentNode.offsetHeight;
                    }
                    else {
                        this.rootWidth = elem.offsetWidth;
                    }
                }
                if (this.isVertical) {
                    elem.style.width = "100%"; ;
                    for (var k = 0; k < elem.childNodes.length; k++) {
                        if (elem.childNodes[k].nodeType != 3) {
                            if (elem.childNodes[k].tagName.toLowerCase() == "a") {
                                elem.childNodes[k].style.padding = "0px";
                                elem.childNodes[k].style.width = "100%";
                            }
                        }
                    }
                }
                if (elem.innerHTML.indexOf("lluNavGroupSub") > -1) {
                    for (var m = 0; m < elem.childNodes.length; m++) {
                        var nextLevel = elem.childNodes[m];
                        if (nextLevel.nodeType != 3) {
                            if (nextLevel.tagName.toLowerCase() == "ul") {
                                if (this.isVertical) {
                                    nextLevel.style.top = "0px";
                                    nextLevel.style.left = this.rootWidth + "px";
                                }
                                else {
                                    nextLevel.style.top = this.rootHeight + "px";
                                    nextLevel.style.left = "0px";
                                }
                                if (this.subLevelOneWidth == 0) {
                                    this.subLevelOneWidth = nextLevel.offsetWidth;
                                }
                                lluMenuBuilder(this, nextLevel);
                            }
                        }
                    }
                }
            }
        }
    }
}

function lluMenuBuilder(menu, elem) {
    var panelWidth = elem.offsetWidth + "px";
    for (var j = 0; j < elem.childNodes.length; j++) {
        var elem2 = elem.childNodes[j];
        if (elem2.nodeType != 3) {
            if (elem2.tagName.toLowerCase() == "li") {
                for (var l = 0; l < elem2.childNodes.length; l++) {
                    if (elem2.childNodes[l].nodeType != 3) {
                        if (elem2.childNodes[l].tagName.toLowerCase() == "a") {
                            elem2.childNodes[l].style.width = "100%";
                        }
                    }
                }
                if (elem2.innerHTML.indexOf("lluNavGroupSub") > -1) {
                    for (var n = 0; n < elem2.childNodes.length; n++) {
                        var nextLevel2 = elem2.childNodes[n];
                        if (nextLevel2.nodeType != 3) {
                            if (nextLevel2.tagName.toLowerCase() == "ul") {
                                nextLevel2.style.top = "0px";
                                nextLevel2.style.left = menu.subLevelOneWidth + "px";
                                lluMenuBuilder(menu, nextLevel2);
                            }
                        }
                    }
                }
            }
        }
    }
}

function showSubMenu(elem) {
    elem.style.overflow = "visible";
}

function fixOnMouseOutNav(element, event) {
    var current_mouse_target = null;
    if (event.toElement) {
        current_mouse_target = event.toElement;
    } else if (event.relatedTarget) {
        current_mouse_target = event.relatedTarget;
    }
    if (!isChildOfNav(element, current_mouse_target) && element != current_mouse_target) {
        element.style.overflow = "hidden";
    }
}

function isChildOfNav(parent, child) {
    if (child != null) {
        while (child.parentNode) {
            if ((child = child.parentNode) == parent) {
                return true;
            }
        }
    }
    return false;
}

/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

                                                            Image Viewer

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

var viewerIndex = 0;
var viewerReference;

function LLUImageViewer(cont) {
    this.container = cont;
    this.imageUrls;
    this.imageName;
    this.imageDesc;
    this.imageSize;
    this.top = 0;

    if (document.body.offsetHeight > GetHeight()) {
        this.top = document.body.offsetHeight;
    }
    else {
        this.top = GetHeight();
    }

    this.modalPanel = document.createElement("div");
    this.modalPanel.setAttribute("id", "viewerModalPanel");
    this.modalPanel.style.top = "-" + (this.top + 20) + "px";
    this.modalPanel.style.height = this.top + "px";

    this.mainPanel = document.createElement("div");
    this.mainPanel.setAttribute("id", "viewerMainPanel");

    this.countPanel = document.createElement("div");
    this.countPanel.setAttribute("id", "viewerCountPanel");
    this.countPanel.innerHTML = "Image 1 of 5";
    this.mainPanel.appendChild(this.countPanel);

    this.closePanel = document.createElement("div");
    this.closePanel.setAttribute("id", "viewerClosePanel");
    this.closePanel.onclick = function () { hideViewer(); };
    this.mainPanel.appendChild(this.closePanel);

    this.imagePanel = document.createElement("img");
    this.imagePanel.setAttribute("id", "viewerImagePanel");
    this.mainPanel.appendChild(this.imagePanel);

    this.nextPanelOff = document.createElement("div");
    this.nextPanelOff.setAttribute("id", "viewerNextPanelOff");
    this.mainPanel.appendChild(this.nextPanelOff);

    this.nextHoverPanel = document.createElement("div");
    this.nextHoverPanel.onmouseout = function (e) { e = window.event || e; fixViewerMouseOut(this, e, 'next'); };
    this.nextHoverPanel.onmouseover = function () { showViewerButton('next') };
    this.nextHoverPanel.setAttribute("id", "viewerNextHoverPanel");
    this.mainPanel.appendChild(this.nextHoverPanel);

    this.nextPanel = document.createElement("div");
    this.nextPanel.setAttribute("id", "viewerNextPanel");
    this.nextPanel.onclick = function () { changeImage('up'); };
    this.nextHoverPanel.appendChild(this.nextPanel);

    this.prevPanelOff = document.createElement("div");
    this.prevPanelOff.setAttribute("id", "viewerPreviousPanelOff");
    this.mainPanel.appendChild(this.prevPanelOff);

    this.prevHoverPanel = document.createElement("div");
    this.prevHoverPanel.onmouseout = function (e) { e = window.event || e; fixViewerMouseOut(this, e, 'prev'); };
    this.prevHoverPanel.onmouseover = function () { showViewerButton('prev') };
    this.prevHoverPanel.setAttribute("id", "viewerPreviousHoverPanel");
    this.mainPanel.appendChild(this.prevHoverPanel);

    this.prevPanel = document.createElement("div");
    this.prevPanel.setAttribute("id", "viewerPreviousPanel");
    this.prevPanel.onclick = function () { changeImage('down'); };
    this.prevHoverPanel.appendChild(this.prevPanel);

    this.namePanel = document.createElement("div");
    this.namePanel.setAttribute("id", "viewerNamePanel");
    this.mainPanel.appendChild(this.namePanel);

    this.descPanel = document.createElement("div");
    this.descPanel.setAttribute("id", "viewerDescriptionPanel");
    this.mainPanel.appendChild(this.descPanel);

    this.modalPanel.appendChild(this.mainPanel);
    this.container.parentNode.appendChild(this.modalPanel);

    this.showViewer = function (id, urls, names, descr, sizes) {
        $('html, body').animate({ scrollTop: 0 }, 'slow');
        this.imageUrls = urls;
        this.imageName = names;
        this.imageDesc = descr;
        this.imageSize = sizes;
        $(this.modalPanel).animate({ top: "0px" }, 1000, "linear");
        viewerIndex = parseInt(id);
        changeImage("");
    }
    viewerReference = this;
}

function hideViewer() {
    var viewerHidePos = "-" + (viewerReference.top + 20) + "px";
    $(viewerReference.modalPanel).animate({ top: viewerHidePos }, 1000, "linear");
}

function isChildOf(parent, child) {
    if (child != null) {
        while (child.parentNode) {
            if ((child = child.parentNode) == parent) {
                return true;
            }
        }
    }
    return false;
}

function fixViewerMouseOut(element, event, id) {

    var current_mouse_target = null;
    if (event.toElement) {
        current_mouse_target = event.toElement;
    } else if (event.relatedTarget) {
        current_mouse_target = event.relatedTarget;
    }
    if (!isChildOf(element, current_mouse_target) && element != current_mouse_target) {
        if (id == "next") {
            viewerReference.nextPanel.style.display = "none";
        }
        else {
            viewerReference.prevPanel.style.display = "none";
        }
    }
}

function showViewerButton(id) {
    if (id == "next") {
        if (viewerIndex < viewerReference.imageUrls.length - 1) {
            viewerReference.nextPanel.style.display = "inline";
        }
    }
    else {
        if (viewerIndex > 0) {
            viewerReference.prevPanel.style.display = "inline";
        }
    }
}

function changeImage(dir) {
    if (dir == "up") {
        if (viewerIndex != viewerReference.imageUrls.length - 1) {
            viewerIndex++;
        }
    }
    if (dir == "down") {
        if (viewerIndex != 0) {
            viewerIndex--;
        }
    }
    if (viewerIndex == 0) {
        viewerReference.prevPanelOff.style.display = "none";
    }
    else {
        viewerReference.prevPanelOff.style.display = "inline";
    }
    if (viewerIndex == viewerReference.imageUrls.length - 1) {
        viewerReference.nextPanelOff.style.display = "none";
    }
    else {
        viewerReference.nextPanelOff.style.display = "inline";
    }
    if (document.body.offsetHeight > GetHeight()) {
        viewerReference.top = document.body.offsetHeight;
    }
    else {
        viewerReference.top = GetHeight();
    }
    viewerReference.modalPanel.style.height = viewerReference.top + "px";
    var imgWidth = parseInt(viewerReference.imageSize[viewerIndex].split("~~")[0]);
    var imgHeight = parseInt(viewerReference.imageSize[viewerIndex].split("~~")[1]);
    if (imgWidth == 0) {
        imgWidth = 400;
        imgHeight = 300;
    }
    viewerReference.nextHoverPanel.style.height = imgHeight + "px";
    viewerReference.prevHoverPanel.style.height = imgHeight + "px";
    $(viewerReference.mainPanel).animate({ top: "10px",
        width: (imgWidth + 60) + "px", height: (imgHeight + 120) + "px",
        left: ((document.body.offsetWidth - (imgWidth + 60)) / 2) + "px"
    }, 500, "linear");
    $(viewerReference.nextPanel).animate({ top: ((imgHeight - 45) / 2) + "px" }, 500, "linear");
    $(viewerReference.prevPanel).animate({ top: ((imgHeight - 45) / 2) + "px" }, 500, "linear");
    $(viewerReference.nextPanelOff).animate({ top: (((imgHeight - 45) / 2) + 30) + "px" }, 500, "linear");
    $(viewerReference.prevPanelOff).animate({ top: (((imgHeight - 45) / 2) + 30) + "px" }, 500, "linear");
    viewerReference.countPanel.innerHTML = "Image " + parseInt(viewerIndex + 1) + " of " + viewerReference.imageUrls.length;
    viewerReference.namePanel.innerHTML = viewerReference.imageName[viewerIndex];
    $(viewerReference.namePanel).animate({ width: imgWidth + "px" }, 500, "linear");
    viewerReference.descPanel.innerHTML = viewerReference.imageDesc[viewerIndex];
    viewerReference.imagePanel.style.display = 'none';
    viewerReference.imagePanel.src = viewerReference.imageUrls[viewerIndex];
    viewerReference.imagePanel.alt = viewerReference.imageDesc[viewerIndex];
    $(viewerReference.descPanel).animate({ width: imgWidth + "px" }, 500, "linear", function () {
        viewerReference.imagePanel.style.display = "block";
    });
}

function GetHeight() {
    var y = 0;
    if (self.innerHeight) {
        y = self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight) {
        y = document.documentElement.clientHeight;
    }
    else if (document.body) {
        y = document.body.clientHeight;
    }
    return y;
}

/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

Basic Scroller

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

var basicScrollerArray = new Array();

function BasicScroller(S1, S2, offset) {
    var newBasicScroller = new Object();
    if (S1.tagName != null) {
        newBasicScroller.container = S1;
        newBasicScroller.content = S2;
    }
    else {
        newBasicScroller.container = document.getElementById(S1);
        newBasicScroller.content = document.getElementById(S2);
    }
    newBasicScroller.contentOver = newBasicScroller.container.offsetHeight - newBasicScroller.content.offsetHeight;
    newBasicScroller.basicScrollOver = 0;
    newBasicScroller.overPercent = 0.0;
    newBasicScroller.mouseDown = false;
    newBasicScroller.mouseOver = false;
    newBasicScroller.scrolling = false;
    newBasicScroller.arrayIndex = basicScrollerArray.length;

    if (window.addEventListener) {
        /** DOMMouseScroll is for mozilla. */
        window.addEventListener('DOMMouseScroll', basicScrollerMouseWheel, false);
    }
    else {
        /** IE/Opera. */
        window.onmousewheel = document.onmousewheel = basicScrollerMouseWheel;
    }

    newBasicScroller.content.onmouseover = function () { setBasicScrollerMouseOver(newBasicScroller.arrayIndex, true); };
    newBasicScroller.content.onmouseout = function (e) { e = window.event || e; basicScrollerFixOnMouseOut(this, e, newBasicScroller.arrayIndex); };

    newBasicScroller.basicScrollPanel = document.createElement("div");
    newBasicScroller.basicScrollPanel.id = "basicScroller" + newBasicScroller.arrayIndex;
    newBasicScroller.basicScrollPanel.className = "lluBasicScrollPanel";

    newBasicScroller.basicScrollPanelTop = document.createElement("div");
    newBasicScroller.basicScrollPanelTop.className = "lluBasicScrollPanelTop";
    newBasicScroller.basicScrollPanelTop.onmousedown = function () { setBasicScrollerMouseDown(newBasicScroller.arrayIndex, true, 'up'); };
    newBasicScroller.basicScrollPanelTop.onmouseup = function () { setBasicScrollerMouseDown(newBasicScroller.arrayIndex, false, ''); };

    newBasicScroller.basicScrollPanelBot = document.createElement("div");
    newBasicScroller.basicScrollPanelBot.className = "lluBasicScrollPanelBot";
    newBasicScroller.basicScrollPanelBot.onmousedown = function () { setBasicScrollerMouseDown(newBasicScroller.arrayIndex, true, 'down'); };
    newBasicScroller.basicScrollPanelBot.onmouseup = function () { setBasicScrollerMouseDown(newBasicScroller.arrayIndex, false, ''); };

    newBasicScroller.basicScroller = document.createElement("div");
    newBasicScroller.basicScroller.className = "lluBasicScroller";
    newBasicScroller.basicScroller.onmousedown = function () { setBasicScrollerScrolling(newBasicScroller.arrayIndex, true, 'down'); };
    newBasicScroller.basicScroller.onmouseup = function () { setBasicScrollerScrolling(newBasicScroller.arrayIndex, false, ''); };
    newBasicScroller.basicScroller.style.top = "0px";

    newBasicScroller.basicScrollPanel.appendChild(newBasicScroller.basicScrollPanelTop);
    newBasicScroller.basicScrollPanel.appendChild(newBasicScroller.basicScrollPanelBot);
    newBasicScroller.basicScrollPanel.appendChild(newBasicScroller.basicScroller);

    newBasicScroller.container.appendChild(newBasicScroller.basicScrollPanel);
    newBasicScroller.setBasicScrollerDraggable = function () {
        var currBasicScroller = newBasicScroller;
        $(newBasicScroller.basicScroller).draggable({ containment: newBasicScroller.basicScrollPanel,
            drag: function () {
                if (this.offsetTop > 0) {
                    currBasicScroller.content.style.top = (currBasicScroller.contentOver * (this.offsetTop / currBasicScroller.basicScrollOver)) + "px";
                }
                else {
                    currBasicScroller.content.style.top = "0px";
                }
                if (this.offsetTop == (currBasicScroller.basicScrollPanel.offsetHeight - currBasicScroller.basicScroller.offsetHeight)) {
                    currBasicScroller.content.style.top = (currBasicScroller.container.offsetHeight - currBasicScroller.content.offsetHeight) + "px";
                }
            }
        });
    }
    newBasicScroller.basicScrollToElement = function (basicScrollBy, multi) {
        var top = parseInt(newBasicScroller.basicScroller.style.top.replace("px", ""));
        var difference = 0;
        if (basicScrollBy < 0) {
            difference = newBasicScroller.basicScrollPanel.offsetHeight - (newBasicScroller.basicScroller.offsetTop + newBasicScroller.basicScroller.offsetHeight);
        }
        else {
            difference = newBasicScroller.basicScroller.offsetTop;
        }
        if (difference != 0) {
            if (basicScrollBy < 0) {
                newBasicScroller.basicScroller.style.top = (top + parseInt(difference / multi)) + "px";
            }
            else {
                newBasicScroller.basicScroller.style.top = (top - parseInt(difference / multi)) + "px";
            }
        }
        newBasicScroller.content.style.top = (newBasicScroller.content.offsetTop + basicScrollBy) + "px";
    }
    newBasicScroller.setScrollVisible = function (hideShow) {
        newBasicScroller.basicScrollPanel.style.display = hideShow;
        newBasicScroller.mouseDown = false;
        newBasicScroller.mouseOver = false;
    }
    newBasicScroller.setScrollHeight = function () {
        newBasicScroller.basicScroller.style.top = "0px";
        if (newBasicScroller.container.offsetHeight > 24) {
            newBasicScroller.basicScrollPanel.style.left = ((newBasicScroller.content.offsetLeft + newBasicScroller.content.offsetWidth) + offset) + "px";
            newBasicScroller.basicScrollPanel.style.height = newBasicScroller.container.offsetHeight + "px";
            newBasicScroller.contentOver = newBasicScroller.container.offsetHeight - newBasicScroller.content.offsetHeight;
            if (newBasicScroller.contentOver < 0) {
                newBasicScroller.setScrollVisible("inline");
            }
            else {
                newBasicScroller.setScrollVisible("none");
            }
            newBasicScroller.overPercent = newBasicScroller.container.offsetHeight / newBasicScroller.content.offsetHeight;
            if (newBasicScroller.overPercent > 1) {
                newBasicScroller.overPercent = 1;
            }
            newBasicScroller.basicScroller.style.height = parseInt(newBasicScroller.basicScrollPanel.offsetHeight * newBasicScroller.overPercent) + "px";
            var tempHeight = (parseInt(newBasicScroller.basicScrollPanel.offsetHeight * newBasicScroller.overPercent) - 28);
            if (tempHeight < 1) {
                tempHeight = 1;
            }
            newBasicScroller.basicScrollOver = newBasicScroller.basicScrollPanel.offsetHeight - newBasicScroller.basicScroller.offsetHeight;
        }
    }
    basicScrollerArray[newBasicScroller.arrayIndex] = newBasicScroller;
    newBasicScroller.removeBasicScroller = function () {
        for (var iScroll = 0; iScroll < basicScrollerArray.length; iScroll++) {
            if (basicScrollerArray[iScroll] == newBasicScroller) {
                basicScrollerArray.splice(iScroll, 1);
                newBasicScroller.container.parentNode.removeChild(newBasicScroller.basicScrollPanel);
            }
        }
    }
    newBasicScroller.setBasicScrollerDraggable();
    return newBasicScroller;
}

function setBasicScrollerKeyUp(event, index) {
    var currBasicScroller = basicScrollerArray[index];
    if (event.keyCode == 40 || event.keyCode == 38) {
        currScroller.keyDown = 0;
    }
    if (event.preventDefault) event.preventDefault();
    if (event.stopPropagation) event.stopPropagation();
    if (event.returnValue) event.returnValue = false;
    return false;
}

function setBasicScrollerMouseDown(index, status, dir) {
    var currBasicScroller = basicScrollerArray[index];
    currBasicScroller.mouseDown = status;
    if (status) {
        manualBasicScroll1(index, dir);
    }
}

function setBasicScrollerScrolling(index, status, dir) {
    var currBasicScroller = basicScrollerArray[index];
    currBasicScroller.scrolling = status;
}

function setBasicScrollerMouseOver(index, status) {
    var currBasicScroller = basicScrollerArray[index];
    currBasicScroller.mouseOver = status;
}

function basicScrollerFixOnMouseOut(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 (!basicScrollerIsChildOf(element, current_mouse_target) && element != current_mouse_target) {
        setBasicScrollerMouseOver(index, false);
    }
}

function basicScrollerIsChildOf(parent, child) {
    if (child != null) {
        while (child.parentNode) {
            if ((child = child.parentNode) == parent) {
                return true;
            }
        }
    }
    return false;
}

function basicScrollerMouseWheel(event) {
    for (var iScroll = 0; iScroll < basicScrollerArray.length; iScroll++) {
        var currBasicScroller = basicScrollerArray[iScroll];
        if (currBasicScroller.basicScrollPanel.style.display == "inline") {
            if (currBasicScroller.mouseOver) {
                var delta = 0;
                if (!event) /* For IE. */
                    event = window.event;
                if (event.wheelDelta) { /* IE/Opera. */
                    delta = event.wheelDelta / 120;
                    if (window.opera)
                        delta = -delta;
                } else if (event.detail) { /** Mozilla case. */
                    delta = -event.detail / 3;
                }
                if (delta)
                    var top = parseInt(currBasicScroller.basicScroller.offsetTop);
                if (delta > 0) {
                    if (top > 0) {
                        currBasicScroller.basicScroller.style.top = (top - 11) + "px";
                        currBasicScroller.content.style.top = (currBasicScroller.contentOver * (top / currBasicScroller.basicScrollOver)) + "px";
                    }
                    else {
                        currBasicScroller.content.style.top = "0px";
                    }
                }
                else {
                    if (top < (currBasicScroller.basicScrollPanel.offsetHeight - currBasicScroller.basicScroller.offsetHeight)) {
                        currBasicScroller.basicScroller.style.top = (top + 11) + "px";
                        currBasicScroller.content.style.top = (currBasicScroller.contentOver * (top / currBasicScroller.basicScrollOver)) + "px";
                    }
                    else {
                        currBasicScroller.content.style.top = (currBasicScroller.container.offsetHeight - currBasicScroller.content.offsetHeight) + "px";
                    }
                }
                if (event.preventDefault) event.preventDefault();
                if (event.stopPropagation) event.stopPropagation();
                if (event.returnValue) event.returnValue = false;
                return false;
            }
        }
    }
}

function manualBasicScroll1(index, dir) {
    var currBasicScroller = basicScrollerArray[index];
    if (currBasicScroller.mouseDown) {
        var top = parseInt(currBasicScroller.basicScroller.offsetTop);
        if (dir == "up") {
            if (top > 0) {
                currBasicScroller.basicScroller.style.top = (top - 1) + "px";
                currBasicScroller.content.style.top = (currBasicScroller.contentOver * (top / currBasicScroller.basicScrollOver)) + "px";
                setTimeout("manualBasicScroll1('" + index + "', 'up')", 10);
            }
            else {
                currBasicScroller.content.style.top = "0px";
            }
        }
        if (dir == "down") {
            if (top < (currBasicScroller.basicScrollPanel.offsetHeight - currBasicScroller.basicScroller.offsetHeight)) {
                currBasicScroller.basicScroller.style.top = (top + 1) + "px";
                currBasicScroller.content.style.top = (currBasicScroller.contentOver * (top / currBasicScroller.basicScrollOver)) + "px";
                setTimeout("manualBasicScroll1('" + index + "', 'down')", 10);
            }
            else {
                currBasicScroller.content.style.top = (currBasicScroller.container.offsetHeight - currBasicScroller.content.offsetHeight) + "px";
            }
        }
    }
}

function manualBasicScroll2(index, dir) {
    var currBasicScroller = basicScrollerArray[index];
    if (currBasicScroller.mouseOver) {
        var top = parseInt(currBasicScroller.basicScroller.offsetTop);
        if (dir == "up") {
            if (top > 0) {
                currBasicScroller.basicScroller.style.top = (top - 1) + "px";
                currBasicScroller.content.style.top = (currBasicScroller.contentOver * (top / currBasicScroller.basicScrollOver)) + "px";
                setTimeout("manualBasicScroll1('" + index + "', 'up')", 10);
            }
            else {
                currBasicScroller.content.style.top = "0px";
            }
        }
        if (dir == "down") {
            if (top < (currBasicScroller.basicScrollPanel.offsetHeight - currBasicScroller.basicScroller.offsetHeight)) {
                currBasicScroller.basicScroller.style.top = (top + 1) + "px";
                currBasicScroller.content.style.top = (currBasicScroller.contentOver * (top / currBasicScroller.basicScrollOver)) + "px";
                setTimeout("manualBasicScroll1('" + index + "', 'down')", 10);
            }
            else {
                currBasicScroller.content.style.top = (currBasicScroller.container.offsetHeight - currBasicScroller.content.offsetHeight) + "px";
            }
        }
    }
}
