var dropDownArray = new Array();

function DropDownBox(panelID, panelToAddTo, dropDownWidth, defaultText, listPanelWidth, listPanelHeight, listOffset) {
    this.parentPanel = document.getElementById(panelToAddTo);
    this.dropDownPanelHeight = listPanelHeight;
    this.selectedIndex = -1;
    this.itemCount = 0;
    this.inputDisplay = defaultText;
    this.arrayIndex = dropDownArray.length;

    this.lluDropDownMain = document.createElement("div");
    this.lluDropDownMain.className = "lluDropDownMain";
    this.lluDropDownMain.id = panelID;
    this.lluDropDownMain.style.width = dropDownWidth + "px";
    this.lluDropDownMain.setAttribute("onclick", "showLLUDropDown('" + this.arrayIndex + "')");
    this.parentPanel.appendChild(this.lluDropDownMain);

    this.lluDropDownLeftPanel = document.createElement("div");
    this.lluDropDownLeftPanel.className = "lluDropDownLeftPanel";
    this.lluDropDownMain.appendChild(this.lluDropDownLeftPanel);

    this.lluDropDownCentrePanel = document.createElement("div");
    this.lluDropDownCentrePanel.className = "lluDropDownCentrePanel";
    this.lluDropDownCentrePanel.style.width = (dropDownWidth - 6) + "px";
    this.lluDropDownCentrePanel.innerHTML = defaultText;
    this.lluDropDownMain.appendChild(this.lluDropDownCentrePanel);

    this.lluDropDownRightPanel = document.createElement("div");
    this.lluDropDownRightPanel.className = "lluDropDownRightPanel";
    this.lluDropDownMain.appendChild(this.lluDropDownRightPanel);

    this.lluDropDownArrow = document.createElement("div");
    this.lluDropDownArrow.className = "lluDropDownArrow";
    this.lluDropDownMain.appendChild(this.lluDropDownArrow);

    this.lluDropDownListAnimatePanel = document.createElement("div");
    this.lluDropDownListAnimatePanel.className = "lluDropDownListAnimatePanel";
    this.lluDropDownListAnimatePanel.style.top = (this.lluDropDownMain.offsetTop + this.lluDropDownMain.offsetHeight) + "px";
    this.lluDropDownListAnimatePanel.style.left = this.lluDropDownMain.offsetLeft + "px";
    this.lluDropDownListAnimatePanel.style.width = listPanelWidth + "px";
    this.lluDropDownListAnimatePanel.style.marginLeft = listOffset + "px";
    this.lluDropDownListAnimatePanel.style.height = "0px";
    this.lluDropDownMain.parentNode.appendChild(this.lluDropDownListAnimatePanel);

    this.lluDropDownListPanel = document.createElement("div");
    this.lluDropDownListPanel.className = "lluDropDownListPanel";
    this.lluDropDownListPanel.style.width = listPanelWidth + "px";
    this.lluDropDownListPanel.style.height = listPanelHeight + "px";
    this.lluDropDownListPanel.style.zIndex = "1";
    this.lluDropDownListAnimatePanel.appendChild(this.lluDropDownListPanel);

    this.lluDropDownList = document.createElement("div");
    this.lluDropDownList.className = "lluDropDownList";
    this.lluDropDownList.style.width = (listPanelWidth - 24) + "px";
    this.lluDropDownListPanel.appendChild(this.lluDropDownList);

    this.lluDropDownList.setAttribute("onkeydown", "setDropDownKeyDown(event, '" + this.arrayIndex + "')");

    this.lluScroller = new Scroller(this.lluDropDownListPanel, this.lluDropDownList, -20);
    this.lluScroller.setScrollVisible("none");
    this.lluScroller.scrollPanel.style.zIndex = "2";

    this.setScrollList = function (content, callBackFucnction) {
        var dataArray = content.split("^^");
        this.itemCount = dataArray.length;
        for (var iTemp = 0; iTemp < dataArray.length; iTemp++) {
            var loopArray = dataArray[iTemp];
            var dropDownFunctions = "";
            if (callBackFucnction != "none") {
                dropDownFunctions = callBackFucnction + "('" + loopArray.split("**")[0] + "," + loopArray.split("**")[2] + "');";
            }
            if (this.inputDisplay == "auto") {
                dropDownFunctions = "setDropDownText('" + loopArray.split("**")[2] + "', '" + this.arrayIndex + "');";
                if (iTemp == 0) {
                    this.lluDropDownCentrePanel.innerHTML = loopArray.split("**")[2];
                }
            }
            dropDownFunctions += " setDropDownSelectedindex('" + iTemp + "', '" + this.arrayIndex + "')";
            this.lluDropDownItem = document.createElement("div");
            this.lluDropDownItem.id = loopArray.split("**")[0];
            if (loopArray.split("**")[1] == "1") {
                this.lluDropDownItem.className = "lluDropDownItemRed";
            }
            else {
                this.lluDropDownItem.className = "lluDropDownItemGrey";
                this.lluDropDownItem.setAttribute("onclick", dropDownFunctions);
            }
            this.lluDropDownItem.style.width = (listPanelWidth - 24) + "px";
            this.lluDropDownItem.innerHTML = loopArray.split("**")[2];
            this.lluDropDownList.appendChild(this.lluDropDownItem);
        }
        if (this.lluDropDownList.offsetHeight > this.lluDropDownListPanel.offsetHeight) {
            this.lluScroller.setScrollVisible("inline");
            this.lluScroller.setScrollHeight();
        }
        else {
            this.lluScroller.setScrollVisible("none");
        }
    }
    this.hideLLUDropDown = function () {
        $(this.lluDropDownListAnimatePanel).animate({ height: "0px" }, 250);
    }
    dropDownArray[dropDownArray.length] = this;
}

function setDropDownText(selectedText, dropDownIndex) {
    var currDropDown = dropDownArray[dropDownIndex];
    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";
    if (currElement.className == "lluDropDownItemGrey") {
        currElement.className = "lluDropDownItemGreen";
    }
    else {
        currElement.className = "lluDropDownItemGrey";
    }
}

function setDropDownKeyDown(e, index) {
    var currDropDown = dropDownArray[index];
    if (currDropDown.selectedIndex > -1) {
        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++;
            }
        }
        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--;
            }
        }
    }
    if (event.preventDefault)
        event.preventDefault();
    event.returnValue = false;
}

function showLLUDropDown(index) {
    var currDropDown = dropDownArray[index];
    currDropDown.lluDropDownListAnimatePanel.style.top = (currDropDown.lluDropDownMain.offsetTop + currDropDown.lluDropDownMain.offsetHeight) + "px";
    currDropDown.lluDropDownListAnimatePanel.style.left = currDropDown.lluDropDownMain.offsetLeft + "px";
    if (currDropDown.lluDropDownListAnimatePanel.offsetHeight == 0) {
        var newDropDownListPos = dropDownArray[index].dropDownPanelHeight + "px";
        $(currDropDown.lluDropDownListAnimatePanel).animate({ height: newDropDownListPos }, 250);
    }
    else {
        $(currDropDown.lluDropDownListAnimatePanel).animate({ height: "0px" }, 250);
    }
}