function getElement(elementName) {
    return document.getElementById(elementName);
}

function CategoryJS(idParam, nameParam, rootParam) {
    this.id = idParam;
    this.name = nameParam;
    this.root = rootParam;
}

function MultipleOptions(idOfContainer, categoriesJSParam, htmlFieldName, defaultItem, requestCategoriesArg) {
    this.fieldName = htmlFieldName;
    this.concatenatedCategories = "";
    this.mainDiv;
    this.optionsDiv;
    this.defaultItem = defaultItem;
    this.requestCategories = requestCategoriesArg;

    this.collapse = function() {
        var divCont = getElement("optionsDiv");
        if (divCont.style.display == "block") {
            divCont.style.display = "none";
        } else {
            divCont.style.display = "block";
        }
    }

    this.checkClicked = function(event) {
        var elementJS = event.srcElement || event.target;
        var arr = elementJS.id.split("_");
        var id = arr[1];

        var category;

        for(var cat in self.categoriesJS) {
            if(self.categoriesJS[cat].id == id) {
                category = self.categoriesJS[cat];
                break;
            }
        }

        if (elementJS.checked) {
            self.addCategoryToListBox(category);
        } else {
            self.removeCategoryFromListBox(category);
        }
    }

    this.addCategoryToListBox = function(categoryJS) {
        var contains = false;

        for(var i in self.selectedCategories) {
            var categorySelected = self.selectedCategories[i];
            if(categorySelected.id == categoryJS.id) {
                contains = true;
                break;
            }
        }

        if(!contains) {
            self.concatenatedCategories += categoryJS.name + ", ";
            self.selectedCategories.push(categoryJS);
        }

        self.setBoxString();
    }

    this.removeCategoryFromListBox = function(categoryJS) {
        self.concatenatedCategories = "";
        var elementToRemoveIndex = -1;

        for(var catIndex in self.selectedCategories) {
            var categorySelected = self.selectedCategories[catIndex];
            if(categorySelected.id == categoryJS.id) {
                 elementToRemoveIndex = catIndex;
            }
        }

        if(elementToRemoveIndex > -1) {
            self.selectedCategories.splice(elementToRemoveIndex, 1);
        }

        for(var i in self.selectedCategories) {
            var categoryName = self.selectedCategories[i].name;
            self.concatenatedCategories += categoryName + ", ";
        }
        self.setBoxString();
    }

    this.setBoxString = function() {
        var boxValue = "";

        if(self.concatenatedCategories.length > 30) {
            boxValue = self.concatenatedCategories.substr(0, 30) + "...";
        } else {
            boxValue = self.concatenatedCategories;
        }

        if(boxValue.match(/^.+, $/i)) {
            boxValue = boxValue.substr(0, boxValue.length - 2);
        }

        if(self.concatenatedCategories.length == 0) {
            self.mainDiv.innerHTML = self.defaultItem;
        } else {
            self.mainDiv.innerHTML = boxValue;
        }
    }
    
    this.printOptions = function() {
        this.mainDiv = document.createElement("div");
        this.mainDiv.innerHTML = this.defaultItem;
        this.mainDiv.setAttribute("class", "fld");
        this.mainDiv.className = "fld";

        this.mainDiv.onclick = this.collapse;

        this.optionsDiv = document.createElement("div");

        this.optionsDiv.setAttribute("class", "optionsDiv");

        if(navigator.userAgent.indexOf("MSIE 6") != -1) {
            this.optionsDiv.className = "optionsDivIE";
        } else {
            this.optionsDiv.className = "optionsDiv";
        }

        this.optionsDiv.setAttribute("id", "optionsDiv");

        var MainContainer = getElement(divContainerid);
        MainContainer.innerHTML = "";
        MainContainer.appendChild(this.mainDiv);
        MainContainer.appendChild(this.optionsDiv);

        var optionsContainer = getElement("optionsDiv");

        for (var categoryKey in categoriesJSParam) {
            var optionItem = document.createElement("div");
            var categoryJS = categoriesJSParam[categoryKey];
            var itemHeader = '<b>' + categoryJS.name + '</b>';
            var textNodeItem = document.createElement('span');
            textNodeItem.setAttribute("class","selectItem");
            textNodeItem.className = "selectItem";

            if(!categoryJS.root) {
                var option1 = document.createElement("input");
                option1.setAttribute("id", "check_" + categoryJS.id);
                option1.setAttribute("type", "checkbox");
                option1.setAttribute("name", this.fieldName);
                option1.setAttribute("value", categoryJS.id);
                option1.className = "category_check_box";

                option1.onclick = function(event) {
                    if(window.event != null) {
                        event = window.event;
                    }
                    self.checkClicked(event);
                }
                optionItem.appendChild(option1);
                itemHeader = categoryJS.name;
            } else {
                optionItem.setAttribute("class", "rootcategoryHeader");
                optionItem.className = "rootcategoryHeader";
            }

            textNodeItem.innerHTML = itemHeader;
            optionItem.appendChild(textNodeItem);
            optionsContainer.appendChild(optionItem);

            if(!categoryJS.root) {
                for(var requestCategoryIndex in this.requestCategories) {
                    if(parseInt(this.requestCategories[requestCategoryIndex]) == categoryJS.id) {
                        option1.setAttribute("checked", "checked");
                        this.addCategoryToListBox(categoryJS);
                    }
                }
            }
        }
    }

    var divContainerid = idOfContainer;
    this.categoriesJS = categoriesJSParam;
    this.selectedCategories = [];
    var self = this;
    this.headers = new Array();


    this.hide = function(event) {
        if (this.optionsDiv.style.display == "none") {
            return;
        }

        var selectheader = getElement(divContainerid);

        var xyTop = this.getXY(selectheader);
        var leftTopX = xyTop[0];
        var leftTopY = xyTop[1];

        var xyBottom = this.getXY(this.optionsDiv);
        var rightBottomX = xyBottom[0];
        var rightBottomY = xyBottom[1];

        rightBottomX += this.optionsDiv.offsetWidth;
        rightBottomY += this.optionsDiv.offsetHeight;

        var windowOffsetX = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
        var windowOffsetY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;

        var mouseX = event.clientX + windowOffsetX;
        var mouseY = event.clientY + windowOffsetY;

        if(mouseX <= leftTopX ||
           mouseX >= rightBottomX ||
           mouseY <= leftTopY ||
           mouseY >= rightBottomY) {            
          /* var wnd = window.open("about:blank");
           wnd.document.write(mouseX + " ;" +
                   + mouseY + " ;" +
                   + leftTopX + " ;" +
                   + leftTopY + " ;" +
                   + rightBottomX + " ;" +
                   + rightBottomY);*/
           this.optionsDiv.style.display = "none";
        }
    };

    this.getXY = function (element) {
        var itElement = element;
        var X = 0, Y = 0;

        do {
           /* if (itElement) {
                if(itElement.tagName.toUpperCase() == 'BODY') break;
                var p = itElement.style.position;
                if (p == 'relative' || p == 'absolute') break;
            }*/

            X += itElement.offsetLeft;
            Y += itElement.offsetTop;

            itElement = itElement.offsetParent;
        } while (itElement);

        return new Array(X, Y);
    };

    document.body.onclick = function(event) {
        if(window.event != null) {
            event = window.event;
        }
        self.hide(event);
    }
}