﻿DropDownList = function() {
    DropDownList.prototype.test = "Test";

    var level = "";

    var Browsers = { IE: 0, FireFox: 1, Other: 2 };

    var DetermineBrowser = function() {
        var agent = navigator.userAgent.toLowerCase();

        if (/msie/.test(agent)) return Browsers.IE;
        if (/firefox/.test(agent)) return Browsers.FireFox;
        return Browsers.Other;
    }

    var option = function(text, value) {
        this.text = text;
        this.value = value;
        this.options = new Array();

        var optionsRef = this.options;

        optionsRef.add = function(text, value) {
            optionsRef.push(new option(text, value));
        }

        optionsRef.addDivider = function() {
            optionsRef.push(new option("hr-divider", ""));
        }
    }

    DropDownList.prototype.SetLevel = function(value) {
        level = value;
    }

    DropDownList.prototype.CreateDDL = function(ID, width) {
        if (!ID) return;

        var MainTable = document.createElement("table");
        MainTable.border = "0";
        MainTable.cellSpacing = "0";
        MainTable.cellPadding = "0";
        MainTable.className = "DropDownList_MainTable";
        MainTable.id = ID;

        if (width) MainTable.style.width = parseInt(width) + "px";

        MainTable.options = new Array();
        MainTable.selectedIndex = 0;
        MainTable.activeSelect;
        MainTable.overTable = false;
        MainTable.noOpen = false;
        MainTable.lengthForScroll = 20;

        try {
            MainTable.textRuler = new TextRuler();
        }
        catch (e) {
        }

        MainTable.additionalOffsetLeft = 0;
        MainTable.additionalOffsetTop = 0;
        MainTable.scrollTopBufferTarget = null;

        var MainTR = document.createElement("tr");

        var InputTD = document.createElement("td");
        InputTD.className = "DropDownList_InputCell";

        var TypingInput = document.createElement("input");
        TypingInput.type = "text";
        TypingInput.className = "DropDownList_Input";
        TypingInput.readOnly = true;

        if (width) TypingInput.style.width = (parseInt(width) - 25) + "px";

        if (MainTable.options.length > 0) {
            if (MainTable.options[0].text != "hr-divider")
                TypingInput.value = MainTable.options[0].text;
        }

        TypingInput.TypingInput_onkeydown = function(evt) {
            if (!evt) evt = window.event;

            if ((evt.keyCode ? evt.keyCode : evt.which) == 38) //Up Arrow
            {
                if (MainTable.options.length > 0) {
                    if (!document.getElementById(ID + "_Options")) {
                        OpenOptions(evt);
                    }
                    else {
                        if (MainTable.activeSelect) {
                            if (document.getElementById(ID + "_Option" + MainTable.activeSelect)) {
                                var OldOption = document.getElementById(ID + "_Option" + MainTable.activeSelect);

                                OldOption.className = "DropDownList_Option";
                            }

                            MainTable.activeSelect--;

                            if (MainTable.activeSelect < 1) MainTable.activeSelect = MainTable.options.length;
                        }
                        else {
                            MainTable.activeSelect = MainTable.options.length;
                        }

                        var Option = document.getElementById(ID + "_Option" + MainTable.activeSelect);

                        if (Option)
                            Option.className = "DropDownList_Option-mouseover";
                    }

                    if (evt.preventDefault)
                        evt.preventDefault();

                    evt.returnValue = false;
                }
            }
            else if ((evt.keyCode ? evt.keyCode : evt.which) == 40) // || (evt.keyCode ? evt.keyCode : evt.which) == 9) // Down Arrow and Tab
            {
                if (MainTable.options.length > 0) {
                    if (!document.getElementById(ID + "_Options")) {
                        OpenOptions(evt);
                    }
                    else {
                        if (MainTable.activeSelect) {
                            if (document.getElementById(ID + "_Option" + MainTable.activeSelect)) {
                                var OldOption = document.getElementById(ID + "_Option" + MainTable.activeSelect);

                                OldOption.className = "DropDownList_Option";
                            }

                            MainTable.activeSelect++;

                            if (MainTable.activeSelect > MainTable.options.length) MainTable.activeSelect = 1;
                        }
                        else {
                            MainTable.activeSelect = 1;
                        }

                        var Option = document.getElementById(ID + "_Option" + MainTable.activeSelect);

                        if (Option)
                            Option.className = "DropDownList_Option-mouseover";
                    }

                    if (evt.preventDefault)
                        evt.preventDefault();

                    evt.returnValue = false;
                }
            }
            else if ((evt.keyCode ? evt.keyCode : evt.which) == 27) // ESC          
            {
                CloseOptions(evt);

                if (evt.preventDefault)
                    evt.preventDefault();

                evt.returnValue = false;
            }
            else if ((evt.keyCode ? evt.keyCode : evt.which) == 13) // Return
            {
                if (MainTable.options.length > 0) {
                    if (MainTable.activeSelect) {
                        var TD = document.getElementById(ID + "_Option" + MainTable.activeSelect);

                        if (TD) {
                            MainTable.selectedIndex = TD.index;

                            if (document.getElementById(ID + "_Options")) {
                                var OptionsDiv = document.getElementById(ID + "_Options");

                                if (!OptionsDiv.isFrontLoad) {
                                    MainTable.activeSelect = null;
                                }
                            }
                            else {
                                MainTable.activeSelect = null;
                            }

                            if (!TD.isDivider)
                                TypingInput.value = TD.innerHTML;
                            else
                                TypingInput.value = "";

                            CloseOptions(evt);

                            TypingInput.removeEventListener ? TypingInput.removeEventListener("blur", TypingInput.TypingInput_onblur, false) : TypingInput.onblur = null;
                            TypingInput.addEventListener ? TypingInput.addEventListener("blur", TypingInput.TypingInput_onblur, false) : TypingInput.onblur = new Function("this.TypingInput_onblur()");

                            MainTable.onchange();
                        }
                    }
                }

                if (evt.preventDefault)
                    evt.preventDefault();

                evt.returnValue = false;
            }
        }

        TypingInput.TypingInput_onkeyup = function(evt) {
            //SelectOption_Up(evt);
        }

        TypingInput.TypingInput_onkeypress = function(evt) {
            if (!evt) evt = window.event;

            if (((evt.keyCode ? evt.keyCode : evt.which) >= 65 && (evt.keyCode ? evt.keyCode : evt.which) <= 90) || ((evt.keyCode ? evt.keyCode : evt.which) >= 97 && (evt.keyCode ? evt.keyCode : evt.which) <= 122)) {
                var KeyCode = ((evt.keyCode ? evt.keyCode : evt.which) >= 97 ? (evt.keyCode ? evt.keyCode : evt.which) - 32 : (evt.keyCode ? evt.keyCode : evt.which))

                var SelectionOptions = new Array();
                var IsInSelect = false;

                for (var i = 0; i <= MainTable.options.length - 1; i++) {
                    var Opt = MainTable.options[i];
                    var OptKeyCode = Opt.text.charCodeAt(0);

                    if (OptKeyCode >= 97) OptKeyCode -= 32;

                    if (OptKeyCode == KeyCode) {
                        var SelectionOptionsItem = function(newCurrentIndex) {
                            this.currentIndex = newCurrentIndex;
                        }

                        var NewSelectionOptionsItem = new SelectionOptionsItem(i);

                        SelectionOptions.push(NewSelectionOptionsItem);

                        if (MainTable.activeSelect) {
                            if ((i + 1) == MainTable.activeSelect) {
                                IsInSelect = true;
                            }
                        }
                    }
                }

                if (SelectionOptions.length > 0) {
                    if (MainTable.activeSelect && IsInSelect) {
                        var NewOpt;

                        for (var i = 0; i <= SelectionOptions.length - 1; i++) {
                            var SelectionOption = SelectionOptions[i];

                            if (SelectionOption.currentIndex + 1 == MainTable.activeSelect) {
                                var OldOpt = document.getElementById(ID + "_Option" + MainTable.activeSelect);
                                OldOpt.className = "DropDownList_Option";

                                if ((i + 1) >= SelectionOptions.length) {
                                    NewOpt = document.getElementById(ID + "_Option" + (SelectionOptions[0].currentIndex + 1));
                                    MainTable.activeSelect = SelectionOptions[0].currentIndex + 1;
                                }
                                else {
                                    NewOpt = document.getElementById(ID + "_Option" + (SelectionOptions[i + 1].currentIndex + 1));
                                    MainTable.activeSelect = SelectionOptions[i + 1].currentIndex + 1;
                                }

                                break;
                            }
                        }

                        if (NewOpt) {
                            NewOpt.className = "DropDownList_Option-mouseover";

                            if (document.getElementById(ID + "_OptionsScrollbar")) {
                                var ScrollbarCell = document.getElementById(ID + "_OptionsScrollbarCell");

                                var offsetPointer = NewOpt;
                                var y = 0;

                                while (offsetPointer) {
                                    y += offsetPointer.offsetTop;

                                    if (offsetPointer.tagName) {
                                        if (offsetPointer.tagName.toLowerCase() == "div") {
                                            y += offsetPointer.scrollTop;
                                        }
                                    }

                                    offsetPointer = offsetPointer.offsetParent;
                                }

                                var OptionsDiv = document.getElementById(ID + "_Options");
                                var OptionsText = document.getElementById(ID + "_OptionsText");

                                var TargetScrollTop = y - parseInt(OptionsDiv.style.top) - OptionsText.scrollTop;

                                OptionsText.scrollTop = TargetScrollTop;
                            }
                        }
                    }
                    else {
                        if (MainTable.activeSelect) {
                            var OldOpt = document.getElementById(ID + "_Option" + MainTable.activeSelect);
                            OldOpt.className = "DropDownList_Option";
                        }

                        MainTable.activeSelect = SelectionOptions[0].currentIndex + 1;

                        var TD = document.getElementById(ID + "_Option" + MainTable.activeSelect);

                        if (TD) {
                            TD.className = "DropDownList_Option-mouseover";

                            if (document.getElementById(ID + "_OptionsScrollbar")) {
                                var ScrollbarCell = document.getElementById(ID + "_OptionsScrollbarCell");

                                var offsetPointer = TD;
                                var y = 0;

                                while (offsetPointer) {
                                    y += offsetPointer.offsetTop;

                                    if (offsetPointer.tagName) {
                                        if (offsetPointer.tagName.toLowerCase() == "div") {
                                            y += offsetPointer.scrollTop;
                                        }
                                    }

                                    offsetPointer = offsetPointer.offsetParent;
                                }

                                var OptionsDiv = document.getElementById(ID + "_Options");
                                var OptionsText = document.getElementById(ID + "_OptionsText");

                                var TargetScrollTop = y - parseInt(OptionsDiv.style.top) - OptionsText.scrollTop;

                                OptionsText.scrollTop = TargetScrollTop;
                            }
                        }
                    }
                }

                //                if (MainTable.activeSelect)
                //                {
                //                    if ((i + 1) == MainTable.activeSelect) continue;
                //                }
                //                
                //                var FirstLetterCode = MainTable.options[i].text.charCodeAt(0);
                //                
                //                if (FirstLetterCode >= 97) FirstLetterCode -= 32; 
                //                
                //                if (FirstLetterCode == KeyCode)
                //                {
                //                    if (MainTable.activeSelect)
                //                    {
                //                        var OldOption = document.getElementById(ID + "_Option" + MainTable.activeSelect);
                //                        
                //                        if (OldOption)
                //                            OldOption.className = "DropDownList_Option";
                //                    }
                //                    
                //                    MainTable.activeSelect = i + 1;
                //                    
                //                    var TD = document.getElementById(ID + "_Option" + (i + 1));
                //                    
                //                    if (TD)
                //                    {
                //                        TD.className = "DropDownList_Option-mouseover";
                //                        
                //                        if (document.getElementById(ID + "_OptionsScrollbar"))
                //                        {
                //                            var ScrollbarCell = document.getElementById(ID + "_OptionsScrollbarCell");
                //                            
                //                            var offsetPointer = TD;
                //                            var y = 0;
                //                            
                //                            while (offsetPointer)
                //                            {
                //                                y += offsetPointer.offsetTop;
                //                                
                //                                if (offsetPointer.tagName)
                //                                {
                //                                    if (offsetPointer.tagName.toLowerCase() == "div")
                //                                    {
                //                                        y += offsetPointer.scrollTop;
                //                                    }
                //                                }
                //                                
                //                                offsetPointer = offsetPointer.offsetParent;
                //                            }   
                //                            
                //                            var OptionsDiv = document.getElementById(ID + "_Options");
                //                            var OptionsText = document.getElementById(ID + "_OptionsText");
                //                            
                //                            var TargetScrollTop = y - parseInt(OptionsDiv.style.top) - OptionsText.scrollTop;
                //                            
                //                            OptionsText.scrollTop = TargetScrollTop;
                //                        }
                //                    }
                //                    
                //                    break;
                //                    }            

                SelectionOptions = null;

                if (evt.preventDefault)
                    evt.preventDefault();

                evt.returnValue = false;

                //alert(String.fromCharCode(evt.keyCode ? evt.keyCode : evt.which));
            }
        }

        MainTable.onchange = function() { }

        MainTable.MainTable_onclick = function(evt) {
            if (MainTable.noOpen) {
                MainTable.noOpen = false;
            }
            else {
                if (document.getElementById(ID + "_Options")) {
                    var OptionsDiv = document.getElementById(ID + "_Options")

                    if (OptionsDiv.isFrontLoad) {
                        if (OptionsDiv.style.display == "none") {
                            OpenOptions(evt);
                            TypingInput.focus();
                        }
                        else {
                            CloseOptions(evt);
                        }
                    }
                    else {
                        CloseOptions(evt);
                    }
                }
                else {
                    OpenOptions(evt);
                    TypingInput.focus();
                }
            }
        }

        TypingInput.TypingInput_onblur = function(evt) {
            if (MainTable.overTable)
                MainTable.noOpen = true;
            else
                MainTable.noOpen = false;

            CloseOptions(evt);
        }

        MainTable.ClearInput = function() {
            TypingInput.value = "";
        }

        MainTable.options.add = function(text, value) {
            //            var option = function(text, value) {
            //                this.text = text;
            //                this.value = value;
            //                this.options = new Array();
            //            }

            if (MainTable.options.length == 0) {
                MainTable.selectedIndex = 0;
                TypingInput.value = text;
            }

            MainTable.options.push(new option(text, value));
        }

        MainTable.options.addDivider = function() {
            //            var option = function(text, value) {
            //                this.text = "hr-divider";
            //                this.value = "";
            //                this.options = new Array();
            //            }        
            //if (MainTable.options.length == 0) TypingInput.value = text;

            MainTable.options.push(new option("hr-divider", ""));
        }

        MainTable.selectedValue = function(value) {
            for (var i = 0; i <= MainTable.options.length - 1; i++) {
                if (MainTable.options[i].value == value) {
                    MainTable.selectedIndex = i;
                    TypingInput.value = MainTable.options[i].text;
                    break;
                }
            }
        }

        MainTable.selectedText = function(text) {
            for (var i = 0; i <= MainTable.options.length - 1; i++) {
                if (MainTable.options[i].text == text) {
                    MainTable.selectedIndex = i;
                    TypingInput.value = MainTable.options[i].text;
                    break;
                }
            }
        }

        MainTable.loadFrom = function(obj) {
            if (obj) {
                if (obj.tagName) {
                    if (obj.tagName.toLowerCase() == "select") {
                        MainTable.options.length = 0;

                        if (obj.options.length > 0) {
                            for (var i = 0; i <= obj.options.length - 1; i++) {
                                var opt = obj.options[i];

                                MainTable.options.add(opt.text, opt.value);

                                if (opt.groupType)
                                    MainTable.options[i].groupType = opt.groupType;

                                if (opt.selected) MainTable.selectedValue(opt.value);
                            }
                        }
                    }
                }
            }
        }

        MainTable.frontLoadOptions = function() {
            if (document.getElementById(ID + "_Options")) {
                var OptionsDiv = document.getElementById(ID + "_Options");

                OptionsDiv.parentNode.removeChild(OptionsDiv);
            }

            var NoLoadOptions = false;

            if (MainTable.options.length > 25) NoLoadOptions = true;

            var OptionsDiv = CreateOptionsDiv(width, NoLoadOptions);

            if (OptionsDiv) {
                OptionsDiv.isFrontLoad = true;
                OptionsDiv.style.display = "none";

                document.body.appendChild(OptionsDiv);

                if (NoLoadOptions) {
                    MainTable.CascadeLoadOptions(0);
                }

                window.clearTimeout(OptionsDiv.expireId);

                OptionsDiv.expireId = window.setTimeout(function() { DropDownDetector(); }, 1000);
            }
        }

        MainTable.removeFrontLoadedOptions = function() {
            if (document.getElementById(ID + "_Options")) {
                var OptionsDiv = document.getElementById(ID + "_Options");

                OptionsDiv.parentNode.removeChild(OptionsDiv);
            }
        }

        MainTable.CascadeLoadOptions = function(index) {
            index = parseInt(index);

            if (document.getElementById(ID + "_OptionsTextTable") && index <= MainTable.options.length - 1) {
                var OptionsTextTable = document.getElementById(ID + "_OptionsTextTable");
                var OptionsScrollbarCell = document.getElementById(ID + "_OptionsScrollbarCell");

                if (DetermineBrowser() == Browsers.IE) {
                    if (!OptionsTextTable.hasChildNodes()) {
                        var OptionsTextTBody = document.createElement("tbody");

                        OptionsTextTable.appendChild(OptionsTextTBody);
                    }

                    OptionsTextTable = OptionsTextTable.firstChild;
                }

                var OptionTR = CreateOptionTR(index, width);

                if (OptionTR) OptionsTextTable.appendChild(OptionTR);

                if (OptionsScrollbarCell.customScrollbar) {
                    OptionsScrollbarCell.customScrollbar.SliderCheck();
                    OptionsScrollbarCell.customScrollbar.ReverseMoveSlider();
                }

                index++;

                window.setTimeout("try {document.getElementById('" + ID + "').CascadeLoadOptions('" + index + "')}catch(e){}", 10);
            }
        }

        InputTD.appendChild(TypingInput);

        var IconTD = document.createElement("td");
        IconTD.align = "right";
        IconTD.className = "DropDownList_IconCell";

        var IconIMG = document.createElement("img");
        IconIMG.className = "DropDownList_Icon";

        if (isHttps()) {
            IconIMG.subfolder = "shade";
            IconIMG.src = document.getElementById("websiteURL").value + "/images/" + MainColor + "/" + MainShade + "/DropDownArrow.png";
        } else {
            if (top.SI && top.SiteImagesType) {
                top.SI.src("DropDownArrow.png", IconIMG, top.SiteImagesType.BaseColorShade);
            }
            else {
                if (!top.MainShade) top.MainShade = "dark";
                if (top.MainShade == "") top.MainShade = "dark";

                IconIMG.src = level + "images/" + top.MainColor + "/" + top.MainShade + "/DropDownArrow.png";
                IconIMG.subfolder = "shade";
            }
        }

        MainTable.MainTable_onmouseover = function(evt) {
            MainTable.overTable = true;

            if (!/\-mouseover/.test(IconIMG.src)) {
                IconIMG.src = IconIMG.src.replace(/\.png/g, "-mouseover.png");
            }
        }

        MainTable.MainTable_onmouseout = function(evt) {
            MainTable.overTable = false;

            if (/\-mouseover/.test(IconIMG.src)) {
                IconIMG.src = IconIMG.src.replace(/\-mouseover/g, "");
            }
        }

        IconTD.appendChild(IconIMG);

        MainTR.appendChild(InputTD);
        MainTR.appendChild(IconTD);

        if (DetermineBrowser() == Browsers.IE) {
            var MainTBody = document.createElement("tbody");

            MainTBody.appendChild(MainTR);

            MainTable.appendChild(MainTBody);
        }
        else {
            MainTable.appendChild(MainTR);
        }

        var OpenOptions = function(evt) {
            if (!evt) evt = window.event;

            var EventTarget = evt.srcElement ? evt.srcElement : evt.target;

            var OptionsDiv;

            if (document.getElementById(ID + "_Options")) {
                OptionsDiv = document.getElementById(ID + "_Options");
            }
            else {
                OptionsDiv = CreateOptionsDiv(MainTable.offsetWidth);
            }

            if (OptionsDiv) {
                var x = 0;
                var y = 0;

                var offsetTarget = MainTable;

                while (offsetTarget) {
                    x += offsetTarget.offsetLeft;
                    y += offsetTarget.offsetTop;

                    if (DetermineBrowser() == Browsers.IE) {
                        if (offsetTarget.tagName) {
                            if (offsetTarget.tagName.toLowerCase() == "div") {
                                y -= offsetTarget.scrollTop;
                            }
                        }
                    }

                    offsetTarget = offsetTarget.offsetParent;
                }

                if (DetermineBrowser() != Browsers.IE) {
                    if (MainTable.scrollTopBufferTarget) {
                        if (MainTable.scrollTopBufferTarget.scrollTop)
                            y -= MainTable.scrollTopBufferTarget.scrollTop;
                    }
                }

                if (OptionsDiv.isFrontLoad) {
                    OptionsDiv.style.display = "";
                }
                else {
                    document.body.appendChild(OptionsDiv);
                }

                var OptionsTop = y + parseInt(MainTable.offsetHeight) - 1 + MainTable.additionalOffsetTop;
                var OptionsLeft = x + MainTable.additionalOffsetLeft;

                var winHeight = window.innerHeight ? window.innerHeight : document.documentElement ? document.documentElement.clientHeight : document.body.clientHeight;

                if (OptionsTop + OptionsDiv.offsetHeight > winHeight) {
                    OptionsTop = y - OptionsDiv.offsetHeight + 1 + MainTable.additionalOffsetTop;

                    if (OptionsTop < 0) OptionsTop = 0;
                }

                OptionsDiv.style.left = OptionsLeft + "px";
                OptionsDiv.style.top = OptionsTop + "px";

                var OptionsScrollbarCell = document.getElementById(ID + "_OptionsScrollbarCell");

                if (OptionsScrollbarCell) {
                    if (OptionsScrollbarCell.customScrollbar) {
                        OptionsScrollbarCell.customScrollbar.SliderCheck();

                        if (!OptionsScrollbarCell.wheelOK) {
                            OptionsScrollbarCell.wheelOK = true;
                            OptionsScrollbarCell.customScrollbar.ResetWheelEvent();
                        }
                    }
                }

                window.clearTimeout(OptionsDiv.expireId);

                OptionsDiv.expireId = window.setTimeout(function() { DropDownDetector(); }, 1000);
            }
        }

        var CreateOptionsDiv = function(width, NoLoadOptions) {
            var OptionsDiv = document.createElement("div");
            OptionsDiv.id = ID + "_Options";
            OptionsDiv.className = "DropDownList_Options";
            OptionsDiv.style.position = "absolute";
            OptionsDiv.style.left = "-500px";
            OptionsDiv.style.top = "-500px";
            OptionsDiv.style.zIndex = "200000";
            OptionsDiv.style.width = (parseInt(width) - 2) + "px";
            OptionsDiv.expireId = null;

            OptionsDiv.OptionsDiv_onmouseover = function(evt) {
                TypingInput.removeEventListener ? TypingInput.removeEventListener("blur", TypingInput.TypingInput_onblur, false) : TypingInput.onblur = null;
            }

            OptionsDiv.OptionsDiv_onmouseout = function(evt) {
                TypingInput.addEventListener ? TypingInput.addEventListener("blur", TypingInput.TypingInput_onblur, false) : TypingInput.onblur = new Function("this.TypingInput_onblur()");
            }

            OptionsDiv.addEventListener ? OptionsDiv.addEventListener("mouseover", OptionsDiv.OptionsDiv_onmouseover, false) : OptionsDiv.onmouseover = new Function("this.OptionsDiv_onmouseover()");
            OptionsDiv.addEventListener ? OptionsDiv.addEventListener("mouseout", OptionsDiv.OptionsDiv_onmouseout, false) : OptionsDiv.onmouseout = new Function("this.OptionsDiv_onmouseout()");

            var OptionsTable = document.createElement("table");
            OptionsTable.border = "0";
            OptionsTable.cellSpacing = "0";
            OptionsTable.cellPadding = "0";
            OptionsTable.style.width = (parseInt(width) - 2) + "px";

            var OptionsTR = document.createElement("tr");

            var OptionsDataTD = document.createElement("td");
            OptionsDataTD.align = "left";
            OptionsDataTD.vAlign = "top";

            var OptionsDataDiv = document.createElement("div");
            OptionsDataDiv.style.overflow = "hidden";
            OptionsDataDiv.id = ID + "_OptionsText";

            var OptionsTextTable = document.createElement("table");
            OptionsTextTable.id = ID + "_OptionsTextTable";
            OptionsTextTable.border = "0";
            OptionsTextTable.cellSpacing = "0";
            OptionsTextTable.cellPadding = "0";
            OptionsTextTable.style.width = (parseInt(width) - 2) + "px";

            OptionsDataDiv.appendChild(OptionsTextTable);

            OptionsDataTD.appendChild(OptionsDataDiv);

            var OptionsScrollbarTD = document.createElement("td");
            OptionsScrollbarTD.id = ID + "_OptionsScrollbarCell";
            OptionsScrollbarTD.align = "left";
            OptionsScrollbarTD.vAlign = "top";
            OptionsScrollbarTD.style.display = "none";

            if (MainTable.options.length > 25) {
                OptionsDataDiv.style.height = "160px";

                OptionsTextTable.style.width = (parseInt(width) - 15) + "px";
                OptionsTable.style.width = (parseInt(width) - 15) + "px";

                OptionsScrollbarTD.style.display = "";

                OptionsScrollbarTD.customScrollbar = new CustomScrollbar();
                OptionsScrollbarTD.customScrollbar.Level(level);

                OptionsScrollbarTD.appendChild(OptionsScrollbarTD.customScrollbar.CreateScrollbarDiv(ID + "_OptionsScrollbar", OptionsDataDiv.id, "148"));
            }

            OptionsTR.appendChild(OptionsDataTD);
            OptionsTR.appendChild(OptionsScrollbarTD);

            if (DetermineBrowser() == Browsers.IE) {
                var OptionsTBody = document.createElement("tbody");

                OptionsTBody.appendChild(OptionsTR);

                OptionsTable.appendChild(OptionsTBody);
            }
            else {
                OptionsTable.appendChild(OptionsTR);
            }

            if (!NoLoadOptions) {
                var TargetToAppend;

                if (DetermineBrowser() == Browsers.IE) {
                    TargetToAppend = document.createElement("tbody");

                    OptionsTextTable.appendChild(TargetToAppend);
                }
                else {
                    TargetToAppend = OptionsTextTable;
                }

                var EndIndex = MainTable.options.length - 1;

                //if (EndIndex > MainTable.lengthForScroll - 1) EndIndex = MainTable.lengthForScroll - 1;            

                for (var i = 0; i <= EndIndex; i++) {
                    var NewOption = CreateOptionTR(i, width);

                    if (NewOption) TargetToAppend.appendChild(NewOption);
                }
            }

            OptionsDiv.appendChild(OptionsTable);

            return OptionsDiv;
        }

        var DropDownDetector = function() {
            var Options = document.getElementById(ID + "_Options");
            var DDL = document.getElementById(ID);

            if (!DDL) {
                if (Options)
                    Options.parentNode.removeChild(Options);
            }
            else {
                if (Options) {
                    if (Options.style.display != "none") {
                        window.clearTimeout(Options.expireId);

                        Options.expireId = window.setTimeout(function() { DropDownDetector(); }, 1000);
                    }
                }
            }
        }

        var CreateOptionTR = function(index, width) {
            var TR = document.createElement("tr");

            var TD = document.createElement("td");
            TD.id = ID + "_Option" + (index + 1);
            TD.style.textAlign = "left";

            if (MainTable.options.length > 25)
                TD.style.width = (parseInt(width) - 23) + "px";
            else
                TD.style.width = (parseInt(width) - 10) + "px";

            if (index == MainTable.selectedIndex && !MainTable.activeSelect) {
                TD.className = "DropDownList_Option-mouseover";
                MainTable.activeSelect = MainTable.selectedIndex + 1;
            }
            else {
                TD.className = "DropDownList_Option";
            }

            if (MainTable.options[index].text == "hr-divider") {
                var HRDivider = document.createElement("hr");
                HRDivider.style.margin = "0px";

                TD.appendChild(HRDivider);
                TD.isDivider = true;
            }
            else {
                if (MainTable.textRuler) {
                    if (!isNaN(MainTable.options[index].text)) {
                        TD.innerHTML = MainTable.options[index].text;
                    }
                    else {
                        MainTable.textRuler.TestLength(MainTable.options[index].text, TD);
                    }
                }
                else {
                    TD.innerHTML = MainTable.options[index].text;
                }
            }

            TD.index = index;

            TD.Option_onclick = function(evt) {
                MainTable.selectedIndex = index;

                if (document.getElementById(ID + "_Options")) {
                    var OptionsDiv = document.getElementById(ID + "_Options");

                    if (!OptionsDiv.isFrontLoad) {
                        MainTable.activeSelect = null;
                    }
                }
                else {
                    MainTable.activeSelect = null;
                }

                if (!TD.isDivider)
                    TypingInput.value = TD.innerHTML;
                else
                    TypingInput.value = "";

                CloseOptions();
                TypingInput.addEventListener ? TypingInput.addEventListener("blur", TypingInput.TypingInput_onblur, false) : TypingInput.onblur = new Function("this.TypingInput_onblur()");

                MainTable.onchange();
            }

            TD.Option_onmouseover = function(evt) {
                if (MainTable.activeSelect) {
                    var OldOption = document.getElementById(ID + "_Option" + MainTable.activeSelect);

                    if (OldOption)
                        OldOption.className = "DropDownList_Option";
                }

                MainTable.activeSelect = TD.index + 1;
                TD.className = "DropDownList_Option-mouseover";
            }

            TD.addEventListener ? TD.addEventListener("click", TD.Option_onclick, false) : TD.onclick = new Function("this.Option_onclick()");
            TD.addEventListener ? TD.addEventListener("mouseover", TD.Option_onmouseover, false) : TD.onmouseover = new Function("this.Option_onmouseover()");

            TR.appendChild(TD);

            return TR;
        }

        var CloseOptions = function(evt) {
            if (document.getElementById(ID + "_Options")) {
                var OptionsDiv = document.getElementById(ID + "_Options");

                window.clearTimeout(OptionsDiv.expireId);

                if (OptionsDiv.isFrontLoad) {
                    OptionsDiv.style.display = "none";
                    OptionsDiv.style.left = "-500px";
                    OptionsDiv.style.top = "-500px";
                }
                else {
                    OptionsDiv.parentNode.removeChild(OptionsDiv);
                }
            }
        }

        TypingInput.addEventListener ? TypingInput.addEventListener("blur", TypingInput.TypingInput_onblur, false) : TypingInput.onblur = new Function("this.TypingInput_onblur()");
        TypingInput.addEventListener ? TypingInput.addEventListener("keydown", TypingInput.TypingInput_onkeydown, false) : TypingInput.onkeydown = new Function("this.TypingInput_onkeydown()");
        TypingInput.addEventListener ? TypingInput.addEventListener("keyup", TypingInput.TypingInput_onkeyup, false) : TypingInput.onkeyup = new Function("this.TypingInput_onkeyup()");
        TypingInput.addEventListener ? TypingInput.addEventListener("keyup", TypingInput.TypingInput_onkeypress, false) : TypingInput.onkeypress = new Function("this.TypingInput_onkeypress()");

        MainTable.addEventListener ? MainTable.addEventListener("click", MainTable.MainTable_onclick, false) : MainTable.onclick = new Function("this.MainTable_onclick()");
        MainTable.addEventListener ? MainTable.addEventListener("mouseover", MainTable.MainTable_onmouseover, false) : MainTable.onmouseover = new Function("this.MainTable_onmouseover()");
        MainTable.addEventListener ? MainTable.addEventListener("mouseout", MainTable.MainTable_onmouseout, false) : MainTable.onmouseout = new Function("this.MainTable_onmouseout()");

        return MainTable;
    }
}

function MultiDropDownList(id, width, level) {
    if (!id) return;
    if (!level) level = "";

    var Browsers = { IE: 0, FireFox: 1, Other: 2 };

    var DetermineBrowser = function() {
        var agent = navigator.userAgent.toLowerCase();

        if (/msie/.test(agent)) return Browsers.IE;
        if (/firefox/.test(agent)) return Browsers.FireFox;
        return Browsers.Other;
    }

    var MainTable = document.createElement("table");
    MainTable.border = "0";
    MainTable.cellSpacing = "0";
    MainTable.cellPadding = "0";
    MainTable.className = "DropDownList_MainTable";
    MainTable.id = id;
    MainTable.style.width = parseInt(width) + "px";

    var MainTR = document.createElement("tr");

    var InputTD = document.createElement("td");
    //InputTD.className = "DropDownList_InputCell";
    InputTD.align = "left";
    //InputTD.vAlign = "top";

    //    var TypingInput = document.createElement("input");
    //    TypingInput.type = "text";
    //    TypingInput.className = "DropDownList_Input";
    //    TypingInput.readOnly = true;

    //if (width) TypingInput.style.width = (parseInt(width) - 25) + "px";

    //    InputTD.appendChild(TypingInput);

    var InputDiv = document.createElement("div");
    InputDiv.className = "DropDownList_InputDiv";
    InputDiv.id = id + "_SelectedTextDiv";
    //InputDiv.className = "DropDownList_Option";

    if (width) InputDiv.style.width = (parseInt(width) - 29) + "px";

    InputTD.appendChild(InputDiv);

    var IconTD = document.createElement("td");
    IconTD.align = "right";
    IconTD.className = "DropDownList_IconCell";
    IconTD.style.width = "15px";

    var IconIMG = document.createElement("img");
    IconIMG.style.width = "15px";
    IconIMG.style.height = "15px";
    IconIMG.className = "DropDownList_Icon";

    if (top.SI && top.SiteImagesType) {
        top.SI.src("DropDownArrow.png", IconIMG, top.SiteImagesType.BaseColorShade);
    }
    else {
        if (!top.MainShade) top.MainShade = "dark";
        if (top.MainShade == "") top.MainShade = "dark";

        IconIMG.src = level + "images/" + top.MainColor + "/" + top.MainShade + "/DropDownArrow.png";
        IconIMG.subfolder = "shade";
    }

    IconTD.appendChild(IconIMG);

    MainTR.appendChild(InputTD);
    MainTR.appendChild(IconTD);

    if (DetermineBrowser() == Browsers.IE) {
        var MainTBody = document.createElement("tbody");

        MainTBody.appendChild(MainTR);

        MainTable.appendChild(MainTBody);
    }
    else {
        MainTable.appendChild(MainTR);
    }

    MainTable.options = new Array();
    MainTable.subOptionDivs = new Array();
    MainTable.selectedIndex = 0;

    ////////////// Objects /////////////////////

    function option(text, value, index, displayName) {
        this.index = index;
        this.text = text;
        this.value = value;
        this.displayName = "";

        if (displayName) {
            this.displayName = displayName;
        }

        this.parentIndexes = new Array();

        this.add = function(text, value, optRef, displayName) {
            var opt = new option(text, value, MainTable.options.length, displayName);

            if (optRef.parentIndexes.length > 0) {
                for (var i = 0; i <= optRef.parentIndexes.length - 1; i++) {
                    opt.parentIndexes.push(optRef.parentIndexes[i]);
                }
            }

            opt.parentIndexes.push(index);

            MainTable.options.push(opt);

            return opt;
        }
    }

    ////////////// End Objects /////////////////

    ////////////// Standard Functions //////////
    InputDiv.addText = function(text) {
        if (!text) text = "";

        if (text != "") {
            var NewTextRuler = new TextRuler();
            NewTextRuler.TestLength(text, InputDiv);
            NewTextRuler = null;

            InputTD.appendChild(InputDiv);
        }
        else {
            InputDiv.innerHTML = "&nbsp;";
        }

        if (InputDiv.title != text) InputDiv.title = "";

        MainTable.inputText = text;
    }

    MainTable.options.add = function(text, value, displayName) {
        if (MainTable.options.length == 0) {
            if (displayName) {
                if (displayName != "") {
                    InputDiv.addText(displayName);
                }
                else {
                    InputDiv.addText(text);
                }
            }
            else {
                InputDiv.addText(text);
            }
        }

        var opt = new option(text, value, MainTable.options.length, displayName);
        MainTable.options.push(opt);

        return opt;
    }

    MainTable.selectedValue = function(value) {
        if (MainTable.options.length > 0) {
            for (var i = 0; i <= MainTable.options.length - 1; i++) {
                var opt = MainTable.options[i];

                if (opt.value == value) {
                    SelectOption(i);
                    break;
                }
            }
        }
    }

    MainTable.selectedText = function(text) {
        if (MainTable.options.length > 0) {
            for (var i = 0; i <= MainTable.options.length - 1; i++) {
                var opt = MainTable.options[i];

                if (opt.text == text) {
                    SelectOption(i);
                    break;
                }
            }
        }
    }

    MainTable.selectedOption = function(opt) {
        SelectOption(opt.index);
    }

    MainTable.onchange = function() { }

    MainTable.GetSelectedValues = function() {
        var selectedValues = new Array();

        var selectedOpt = MainTable.options[MainTable.selectedIndex];

        if (selectedOpt.parentIndexes.length > 0) {
            for (var i = 0; i <= selectedOpt.parentIndexes.length - 1; i++) {
                var parentOpt = MainTable.options[selectedOpt.parentIndexes[i]];
                selectedValues.push(parentOpt.value);
            }
        }

        selectedValues.push(selectedOpt.value);

        selectedValues.toString = function(delimiter) {
            if (!delimiter) delimiter = ",";

            var selectedString = "";

            for (var i = 0; i <= selectedValues.length - 1; i++) {
                if (selectedString != "") selectedString += delimiter;

                selectedString += selectedValues[i];
            }

            return selectedString;
        }

        return selectedValues;
    }

    function SelectOption(optionIndex) {
        var opt = MainTable.options[optionIndex];

        MainTable.selectedIndex = optionIndex;

        if (opt.displayName != "") {
            InputDiv.addText(opt.displayName);
        }
        else {
            if (opt.parentIndexes.length > 0) {
                var inputText = "";

                for (var i = 0; i <= opt.parentIndexes.length - 1; i++) {
                    if (inputText != "") inputText += " ";

                    var parentOpt = MainTable.options[opt.parentIndexes[i]];
                    inputText += parentOpt.text;
                }

                inputText += " " + opt.text;

                InputDiv.addText(inputText);
            }
            else {
                InputDiv.addText(opt.text);
            }
        }

        MainTable.blurOk = true;

        MainTable.onchange();
        RemoveOptionsDiv();
        RemoveSubOptionsDiv();
    }

    function OptionsExist(parentIndexes) {
        if (!parentIndexes) parentIndexes = new Array();

        if (parentIndexes.length == 0) {
            for (var i = 0; i <= MainTable.options.length - 1; i++) {
                var opt = MainTable.options[i];

                if (opt.parentIndexes.length == 0) {
                    return true;
                }
            }
        }
        else {
            for (var i = 0; i <= MainTable.options.length - 1; i++) {
                var opt = MainTable.options[i];

                if (opt.parentIndexes.length == parentIndexes.length) {
                    var result = false;

                    for (j = 0; j <= parentIndexes.length - 1; j++) {
                        if (parentIndexes[j] == opt.parentIndexes[j]) {
                            result = true;
                        }
                        else {
                            result = false;
                            break;
                        }
                    }

                    if (result) return true;
                }
            }
        }

        return false;
    }

    function OptionsAmount(parentIndexes) {
        if (!parentIndexes) parentIndexes = new Array();

        var counter = 0;

        if (parentIndexes.length == 0) {
            for (var i = 0; i <= MainTable.options.length - 1; i++) {
                var opt = MainTable.options[i];

                if (opt.parentIndexes.length == 0) {
                    counter++;
                }
            }
        }
        else {
            for (var i = 0; i <= MainTable.options.length - 1; i++) {
                var opt = MainTable.options[i];

                if (opt.parentIndexes.length == parentIndexes.length) {
                    var result = false;

                    for (j = 0; j <= parentIndexes.length - 1; j++) {
                        if (parentIndexes[j] == opt.parentIndexes[j]) {
                            result = true;
                        }
                        else {
                            result = false;
                            break;
                        }
                    }

                    if (result) counter++;
                }
            }
        }

        return counter;
    }

    function GetOptions(parentIndexes) {
        if (!parentIndexes) parentIndexes = new Array();

        var options = new Array();

        if (parentIndexes.length == 0) {
            for (var i = 0; i <= MainTable.options.length - 1; i++) {
                var opt = MainTable.options[i];
                opt.index = i;

                if (opt.parentIndexes.length == 0) {
                    options.push(opt);
                }
            }
        }
        else {
            for (var i = 0; i <= MainTable.options.length - 1; i++) {
                var opt = MainTable.options[i];
                opt.index = i;

                if (opt.parentIndexes.length == parentIndexes.length) {
                    var result = false;

                    for (j = 0; j <= parentIndexes.length - 1; j++) {
                        if (parentIndexes[j] == opt.parentIndexes[j]) {
                            result = true;
                        }
                        else {
                            result = false;
                            break;
                        }
                    }

                    if (result) options.push(opt);
                }
            }
        }

        return options;
    }

    function PositionOptionsDiv(optionsDiv, target) {
        if (optionsDiv) {
            var winHeight = window.innerHeight ? window.innerHeight : document.documentElement ? document.documentElement.clientHeight : document.body.clientHeight;
            var winWidth = window.innerWidth ? window.innerWidth : document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;

            var offsetPointer;
            var x = 0;
            var y = 0;

            if (target) {
                offsetPointer = target;
            }
            else {
                offsetPointer = MainTable;
            }

            while (offsetPointer) {
                x += offsetPointer.offsetLeft;
                y += offsetPointer.offsetTop - offsetPointer.scrollTop;

                offsetPointer = offsetPointer.offsetParent;
            }

            if (target) {
                var left = x + parseInt(target.offsetWidth) + 1 + (target.isScroll ? 15 : 0);
                var top = y;

                if (left + optionsDiv.offsetWidth > winWidth) {
                    left = x - optionsDiv.offsetWidth + 1;
                }

                if (top + optionsDiv.offsetHeight > winHeight) {
                    top = winHeight - optionsDiv.offsetHeight;
                }

                optionsDiv.style.left = left + "px";
                optionsDiv.style.top = top + "px";
            }
            else {
                var left = x;
                var top = y + parseInt(MainTable.offsetHeight) - 1;

                if (top + optionsDiv.offsetHeight > winHeight) {
                    top = y - optionsDiv.offsetHeight + 1;
                }

                optionsDiv.style.left = left + "px";
                optionsDiv.style.top = top + "px";
            }
        }
    }

    function CreateOptionsDiv(parentIndexes) {
        if (!parentIndexes) parentIndexes = new Array();
        var suffix = (parentIndexes.length > 0 ? "_" + parentIndexes.length : "");

        var OptionsDiv = document.createElement("div");
        OptionsDiv.id = id + "_Options" + suffix;
        OptionsDiv.className = "DropDownList_Options";
        OptionsDiv.style.position = "absolute";
        OptionsDiv.style.left = "-500px";
        OptionsDiv.style.top = "-500px";
        OptionsDiv.style.zIndex = "200000";
        OptionsDiv.style.width = (parseInt(MainTable.offsetWidth) - 2) + "px";
        OptionsDiv.parentIndexes = parentIndexes;

        var OptionsTable = document.createElement("table");
        OptionsTable.border = "0";
        OptionsTable.cellSpacing = "0";
        OptionsTable.cellPadding = "0";
        OptionsTable.style.width = (parseInt(MainTable.offsetWidth) - 2) + "px";

        var OptionsTR = document.createElement("tr");

        var OptionsDataTD = document.createElement("td");
        OptionsDataTD.align = "left";
        OptionsDataTD.vAlign = "top";

        var OptionsDataDiv = document.createElement("div");
        OptionsDataDiv.style.overflow = "hidden";
        OptionsDataDiv.id = id + "_OptionsText" + suffix;

        var Options;

        if (parentIndexes.length > 0) {
            Options = GetOptions(parentIndexes);
        }
        else {
            Options = GetOptions();
        }

        var isScroll = (Options.length > 25);

        if (Options.length > 0) {
            for (var i = 0; i <= Options.length - 1; i++) {
                var opt = Options[i];

                var OptionTable = CreateOptionsTable(opt.index, isScroll);

                if (OptionTable) {
                    OptionsDataDiv.appendChild(OptionTable);
                }
            }
        }

        OptionsDataTD.appendChild(OptionsDataDiv);

        var OptionsScrollbarTD = document.createElement("td");
        OptionsScrollbarTD.id = id + "_OptionsScrollbarCell" + suffix;
        OptionsScrollbarTD.align = "center";
        OptionsScrollbarTD.vAlign = "top";
        OptionsScrollbarTD.style.width = "15px";
        OptionsScrollbarTD.style.display = "none";

        OptionsTR.appendChild(OptionsDataTD);
        OptionsTR.appendChild(OptionsScrollbarTD);

        if (DetermineBrowser() == Browsers.IE) {
            var OptionsTBody = document.createElement("tbody");

            OptionsTBody.appendChild(OptionsTR);

            OptionsTable.appendChild(OptionsTBody);
        }
        else {
            OptionsTable.appendChild(OptionsTR);
        }

        OptionsDiv.appendChild(OptionsTable);

        function OptionsDiv_onmouseover(evt) {
            if (!evt) evt = window.event;

            MainTable.blurOk = false;
            InputDiv.focus();
        }

        function OptionsDiv_onmouseout(evt) {
            if (!evt) evt = window.event;

            MainTable.blurOk = true;
            InputDiv.focus();
        }

        function OptionsDataDiv_onscroll() {
            RemoveSubOptionsDiv(parentIndexes.length);
        }

        OptionsDiv.addEventListener ? OptionsDiv.addEventListener("mouseover", OptionsDiv_onmouseover, false) : OptionsDiv.onmouseover = function() { OptionsDiv_onmouseover(); };
        OptionsDiv.addEventListener ? OptionsDiv.addEventListener("mouseout", OptionsDiv_onmouseout, false) : OptionsDiv.onmouseout = function() { OptionsDiv_onmouseout(); };
        OptionsDataDiv.addEventListener ? OptionsDataDiv.addEventListener("scroll", OptionsDataDiv_onscroll, false) : OptionsDataDiv.onscroll = function() { OptionsDataDiv_onscroll(); };

        if (isScroll) {
            document.body.appendChild(OptionsDiv);

            OptionsDataDiv.style.height = "160px";

            OptionsScrollbarTD.style.display = "";

            OptionsDiv.customScrollbar = new CustomScrollbar();
            OptionsDiv.customScrollbar.Level(level);

            OptionsScrollbarTD.appendChild(OptionsDiv.customScrollbar.CreateScrollbarDiv(id + "_OptionsScrollbar" + suffix, OptionsDataDiv.id, "148"));
        }

        return OptionsDiv;
    }

    function RemoveOptionsDiv() {
        var optionsDiv = document.getElementById(id + "_Options");

        if (optionsDiv) {
            optionsDiv.parentNode.removeChild(optionsDiv);
        }
    }

    function RemoveSubOptionsDiv(indexes) {
        if (!indexes) indexes = 0;

        if (MainTable.subOptionDivs.length > 0) {
            for (var i = MainTable.subOptionDivs.length - 1; i >= 0; i--) {
                var optionsDiv = document.getElementById(MainTable.subOptionDivs[i]);

                if (optionsDiv) {
                    if (optionsDiv.parentIndexes.length > indexes) {
                        optionsDiv.parentNode.removeChild(optionsDiv);
                        MainTable.subOptionDivs.splice(i, 1);
                    }
                }
            }
        }
    }

    function CreateOptionsTable(optionIndex, isScroll) {
        var opt = MainTable.options[optionIndex];

        var OptionsTable = document.createElement("table");
        OptionsTable.border = "0";
        OptionsTable.cellSpacing = "0";
        OptionsTable.cellPadding = "0";
        OptionsTable.style.cursor = "pointer";
        OptionsTable.style.width = (parseInt(MainTable.offsetWidth) - 2) + "px";
        OptionsTable.isScroll = isScroll;

        var OptionsTR = document.createElement("tr");

        var OptionsTD = document.createElement("td");
        OptionsTD.id = "OptionsTextCell" + optionIndex;

        if (isScroll) {
            OptionsTable.style.width = (parseInt(OptionsTable.style.width) - 15) + "px";
        }

        var selectedOption = MainTable.options[MainTable.selectedIndex];

        if (optionIndex == MainTable.selectedIndex) {
            OptionsTD.className = "DropDownList_Option-active";
        }
        else {
            if (selectedOption.parentIndexes.length > 0) {
                var isSelected = false;

                for (var i = 0; i <= selectedOption.parentIndexes.length - 1; i++) {
                    if (optionIndex == selectedOption.parentIndexes[i]) {
                        isSelected = true;
                        break;
                    }
                }

                if (isSelected) {
                    OptionsTD.className = "DropDownList_Option-active";
                }
                else {
                    OptionsTD.className = "DropDownList_Option";
                }
            }
            else {
                OptionsTD.className = "DropDownList_Option";
            }
        }

        if (opt.text != "") {
            OptionsTD.style.width = (parseInt(OptionsTable.style.width) - 8) + "px";

            var NewTextRuler = new TextRuler();
            NewTextRuler.TestLength(opt.text, OptionsTD);
            NewTextRuler = null;

            OptionsTD.style.width = "";
        }
        else {
            OptionsTD.innerHTML = "&nbsp;";
        }

        OptionsTR.appendChild(OptionsTD);

        if (DetermineBrowser() == Browsers.IE) {
            var OptionsTBody = document.createElement("tbody");

            OptionsTBody.appendChild(OptionsTR);

            OptionsTable.appendChild(OptionsTBody);
        }
        else {
            OptionsTable.appendChild(OptionsTR);
        }

        function OptionsTable_onmouseover(evt) {
            if (!evt) evt = window.event;

            if (!/\-active/.test(OptionsTD.className) && !/\-mouseover/.test(OptionsTD.className)) {
                OptionsTD.className = "DropDownList_Option-mouseover";
            }

            if (!isNaN(OptionsTable.parentNode.activeIndex)) {
                if (document.getElementById("OptionsTextCell" + OptionsTable.parentNode.activeIndex)) {
                    var oldOption = document.getElementById("OptionsTextCell" + OptionsTable.parentNode.activeIndex);

                    if (!/\-active/.test(oldOption.className) && /\-mouseover/.test(oldOption.className) && OptionsTable.parentNode.activeIndex != optionIndex) {
                        oldOption.className = "DropDownList_Option";
                    }
                }
            }

            OptionsTable.parentNode.activeIndex = optionIndex;

            RemoveSubOptionsDiv(opt.parentIndexes.length);

            var parentIndexes = new Array();

            if (opt.parentIndexes.length > 0) {
                for (var i = 0; i <= opt.parentIndexes.length - 1; i++) {
                    var parentIndex = opt.parentIndexes[i];
                    parentIndexes.push(parentIndex);
                }
            }

            parentIndexes.push(opt.index);

            var Options = GetOptions(parentIndexes);

            if (Options.length > 0) {
                var optionsDiv = CreateOptionsDiv(parentIndexes);
                document.body.appendChild(optionsDiv);

                if (optionsDiv.customScrollbar) {
                    optionsDiv.customScrollbar.SliderCheck();
                    optionsDiv.customScrollbar.ReverseMoveSlider();
                }

                MainTable.subOptionDivs.push(optionsDiv.id);

                PositionOptionsDiv(optionsDiv, OptionsTable);
            }
        }

        function OptionsTable_onmouseout(evt) {
            if (!evt) evt = window.event;

        }

        function OptionsTable_onclick(evt) {
            if (!evt) evt = window.event;

            SelectOption(optionIndex);
        }

        OptionsTable.addEventListener ? OptionsTable.addEventListener("mouseover", function(evt) { OptionsTable_onmouseover(evt); }, false) : OptionsTable.onmouseover = function() { OptionsTable_onmouseover(); };
        OptionsTable.addEventListener ? OptionsTable.addEventListener("mouseout", function(evt) { OptionsTable_onmouseout(evt); }, false) : OptionsTable.onmouseout = function() { OptionsTable_onmouseout(); };
        OptionsTable.addEventListener ? OptionsTable.addEventListener("click", function(evt) { OptionsTable_onclick(evt); }, false) : OptionsTable.onclick = function() { OptionsTable_onclick(); };

        return OptionsTable;
    }

    ////////////// End Standard Functions //////

    ////////////// Event Functions /////////////

    function MainTable_onmouseover(evt) {
        MainTable.blurOk = false;

        if (!/\-mouseover/.test(IconIMG.src)) {
            IconIMG.src = IconIMG.src.replace(/\.png/, "-mouseover.png");
        }
    }

    function MainTable_onmouseout(evt) {
        MainTable.blurOk = true;

        if (/\-mouseover/.test(IconIMG.src)) {
            IconIMG.src = IconIMG.src.replace(/\-mouseover/, "");
        }
    }

    function MainTable_onclick(evt) {
        if (!evt) evt = window.event;

        RemoveSubOptionsDiv();

        var optionsDiv;

        if (document.getElementById(id + "_Options")) {
            RemoveOptionsDiv();
        }
        else {
            optionsDiv = CreateOptionsDiv();
            document.body.appendChild(optionsDiv);

            if (optionsDiv.customScrollbar) {
                optionsDiv.customScrollbar.SliderCheck();
                optionsDiv.customScrollbar.ReverseMoveSlider();
            }

            PositionOptionsDiv(optionsDiv);

            InputDiv.focus();
        }
    }

    function TypingInput_onblur(evt) {
        if (!evt) evt = window.event;

        if (MainTable.blurOk) {
            RemoveOptionsDiv();
            RemoveSubOptionsDiv();
        }
    }

    function InputDiv_onblur(evt) {
        if (!evt) evt = window.event;

        if (MainTable.blurOk) {
            RemoveOptionsDiv();
            RemoveSubOptionsDiv();
        }
    }

    MainTable.addEventListener ? MainTable.addEventListener("click", function(evt) { MainTable_onclick(evt); }, false) : MainTable.onclick = function() { MainTable_onclick(); };
    MainTable.addEventListener ? MainTable.addEventListener("mouseover", function(evt) { MainTable_onmouseover(evt); }, false) : MainTable.onmouseover = function() { MainTable_onmouseover(); };
    MainTable.addEventListener ? MainTable.addEventListener("mouseout", function(evt) { MainTable_onmouseout(evt); }, false) : MainTable.onmouseout = function() { MainTable_onmouseout(); };

    InputDiv.addEventListener ? InputDiv.addEventListener("blur", InputDiv_onblur, false) : InputDiv.onblur = function() { InputDiv_onblur(); };

    ////////////// End Event Functions /////////

    return MainTable;
}

function OptionCreate(text, value) {
    return PartyOptionCreate(text, value);
}

function createMultiSelectDropDownList(id, width, maxVisibleItems) {
    width = parseInt(width);
    if (!maxVisibleItems)
        maxVisibleItems = 10;

    var container = document.createElement("div");
    container.defaultText = "";
    container.expanded = false;
    container.maxVisibleItems = maxVisibleItems;
    container.id = id;

    var head = createTable(width)
    head.id = id + "_head";
    head.className = "DropDownList_MainTable";
    head.createRows(1, 2);

    head.textHolder = head.rowArray[0].cellArray[0];
    head.text = document.createElement("div");
    head.text.style.marginLeft = "2px";
    //head.text.className = "ColoredText";
    head.text.className = "DropDownList_Input";
    head.text.id = id + "_head_text";
    head.textHolder.appendChild(head.text);
    head.text.style.width = (width - 20) + "px";

    head.text.onclick = function() {
        container.toggle();
    }

    head.text.onblur = function() {
        var pop = "fizz";

        if (container.blurOk) {
            container.collapse();
        }
    }

    head.arrowHolder = head.rowArray[0].cellArray[1];
    head.arrowHolder.style.verticalAlign = "middle";
    head.arrowHolder.style.width = "16px";
    head.arrow = document.createElement("img");
    head.arrow.onclick = function() {
        container.toggle();
    }


    container.collapse = function() {
        container.body.style.display = "none";
        container.expanded = false;

        head.setHead();
    }


    head.setHead = function() {
        if (container.hasSelected()) {
            var si = container.selectedItems();

            var text = "";

            for (var i = 0; i < si.length; i++) {
                if (text.length > 0)
                    text += ", ";

                text += si[i].text;
            }

            container.setText(text);
        }
        else {
            head.text.innerHTML = container.defaultText;
        }
    }




    container.toggle = function() {
        if (container.expanded)
            container.collapse();
        else {
            container.body.style.display = "";
            DockToObject(container.body, container.head, "left", "bottom", "se", 0, 0, true);
            if (body.items.length == 0) {


                var dummy = document.createElement("div");
                dummy.innerHTML = "PLACEHOLDER!";
                dummy.style.height = "14px";

                container.body.container.appendChild(dummy);
                container.body.container.style.height = "14px";
                container.body.customScrollbar.SliderCheck();
                destroyObject(dummy);

            }
            else {
                if (body.items.length < maxVisibleItems)
                    container.body.container.style.height = (body.items.length * 16) + "px";
                else
                    container.body.container.style.height = (container.maxVisibleItems * 16) + "px";


                body.setTrackHeight(container.body.container.style.height);



                var winHeight = window.innerHeight ? window.innerHeight : document.documentElement ? document.documentElement.clientHeight : document.body.clientHeight;

                if (parseInt(container.body.style.top) + container.body.offsetHeight > winHeight)
                    DockToObject(container.body, container.head.text, "left", "top", "ne", -1, 0);

                container.body.customScrollbar.SliderCheck();
            }
            container.blurOk = true;
            container.head.text.focus();
            container.expanded = true;
        }
    }

    //top.SI.src("DropDownArrow.png", head.arrow, top.SiteImagesType.Base);

    if (top.SI && top.SiteImagesType) {
        top.SI.src("DropDownArrow.png", head.arrow, top.SiteImagesType.BaseColorShade);
    }
    else {
        if (!top.MainShade) top.MainShade = "dark";
        if (top.MainShade == "") top.MainShade = "dark";

        head.arrow.src = level + "images/" + top.MainColor + "/" + top.MainShade + "/DropDownArrow.png";
        head.arrow.subfolder = "shade";
    }

    head.arrow.className = "DropDownList_Icon";
    head.arrowHolder.appendChild(head.arrow);

    container.head = head;
    container.appendChild(head);



    var body = createListbox(id + "_body", 1, true, false);
    body.style.position = "absolute";
    body.style.display = "none";
    body.style.zIndex = "100000";
    body.style.width = width + "px";


    body.setTrackHeight = function(height) {

        if (!body.scrollbarTrack)
            body.scrollbarTrack = document.getElementById(id + "_body_scrollbar_Track");

        var newHeight = parseInt(height) - 24;

        if (newHeight < 0)
            newHeight = 0;

        body.scrollbarTrack.style.height = newHeight + "px";

        //TrackTD.style.height = ((parseInt(maxHeight) - 12) < 0 ? 0 : (parseInt(maxHeight) - 12)) + "px";
    }

    container.body = body;
    document.body.appendChild(body);


    function item_onmouseover(e) {
        container.blurOk = false;
        head.text.focus();
    }

    function item_onmouseout(e) {
        container.blurOk = true;
        head.text.focus();
    }

    function item_onclick(e) {
        if (!e) e = window.event;

        if (e.ctrlKey || e.ctrlLeft || e.shiftKey || e.shiftLeft) {

        }
        else {
            container.collapse();
        }
    }

    container.addOption = function(text, value, selected) {
        var item = container.body.addItem(id + "_item_" + Math.random, text, value, selected);

        addEventTrigger(item, "mouseover", item_onmouseover, true);
        addEventTrigger(item, "mouseout", item_onmouseout, true);
        addEventTrigger(item, "click", item_onclick, true);

        head.setHead();

        return item;
    }

    container.addOptions = function(options) {

        for (var i = 0; i < options.length; i++) {
            container.addOption(options[i][0], options[i][1]);
        }
    }

    container.hasSelected = function() {
        return container.body.hasSelected();
    }

    container.selectedIndices = function() {
        return container.body.selectedIndices();
    }

    container.selectedItems = function() {
        return container.body.selectedItems();
    }

    container.clearSelected = function() {
        container.body.clearSelected();
        head.setHead();
    }


    container.items = container.body.items;

    container.remove = function(item) {
        container.body.remove(item);
    }

    container.removeAt = function(index) {
        container.body.removeAt(index);
    }

    container.clear = function() {
        container.body.clear();
    }

    makeUnselectable(container);

    container.blurOk = false;
    container.head.text.focus();

    container.onmouseover = function() {
        container.blurOk = false;
    }

    container.onmouseout = function() {
        container.blurOk = true;
    }

    container.setDefaultText = function(text) {
        container.defaultText = text;

        if (!container.hasSelected())
            container.setText(text);
    }

    container.setText = function(text) {
        var NewTextRuler = new TextRuler();
        NewTextRuler.TestLength(text.toString(), head.text);
        NewTextRuler = null;

        if (head.text.parentNode != head.textHolder)
            head.textHolder.appendChild(head.text);
    }


    return container;
}