var $el = function(id) {
    return document.getElementById(id);
}

var $$ = function(tag) {
    return document.getElementsByTagName(tag);
}

var cls = function(className, expected) {
    if (typeof (className) == "undefined") {
        return false;
    }

    var a = className.split(" ");
    var i = 0;

    for (i = 0; i < a.length; i++) {
        if (expected == a[i]) {
            return true;
        }
    }
    return false;

}

StyledSelects = function() {

    var fnClick;
    var selectItems = [];
    var activePicker = null;
    var hideEnabled = false;

    var m_fnSetStateOfOthers = function(pos, show) {
        var i;
        var elActivePicker;

        for (i = 0; i < selectItems.length; i++) {
            elActivePicker = selectItems[i].root;

            if (show) {
                if (pos != i) {
                    elActivePicker.className = StyledSelects.className + "Active";
                }
            }
            else {
                if (pos != i) {
                    elActivePicker.className = StyledSelects.className;
                }
            }

        }

    };

    var insertOption = function(container, select, selectPos, optionPos, option, isGrouped) {
        var li;
        var cls = option.className;

        if (cls != "") {
            cls = " " + cls;
        }

        li = document.createElement("li");
        if (isGrouped) {
            li.className = (li.className ? li.className + " " : "") + "grouped";
        }
        if (option.selected) {
            li.className = (li.className ? li.className + " " : "") + "active";
        }
        li.className += cls;
        li.appendChild(document.createTextNode(option.text));
        li.selectPos = selectPos;
        li.pos = optionPos;
        li.onclick = function() {
            StyledSelects.select(this.selectPos, this.pos);
        }
        li.onmouseover = function() {
            StyledSelects.mouseOver(select, this);
        }
        li.onmouseout = function() {
            StyledSelects.mouseOut(select, this);
        }
        container.appendChild(li);
    };

    return {
        init: function(el) {
            var selects;
            var select;
            var root;
            var i;
            var m_elContainer;

            if (typeof el == "undefined") {
                el = document;
            }

            selects = el.getElementsByTagName("select");
            m_elContainer = document.createElement("div");


            for (i = 0; i < selects.length; i++) {
                select = selects[i];

                var add = true;
                var p = select.parentNode;

                while (p != null) {
                    add = !cls(p.className, "no-styling");
                    if (!add) {
                        break;
                    }
                    p = p.parentNode;
                }

                if (add) {
                    selectItems[selectItems.length] = this.insert(select, selectItems.length);
                }
            }

        },
        insert: function(select, pos) {
            var obj;
            var div;
            var over;
            var span;
            var ul, li;
            var i, iActive;

            over = document.createElement("div");
            div = document.createElement("div");
            span = document.createElement("span");
            ul = document.createElement("ul");
            div.className = this.className;
            iActive = 0;
            for (i = 0; i < select.options.length; i++) {
                if (select.options[i].selected) {
                    iActive = i;
                    break;
                }
            }
            if (select.options[iActive]) {
                span.appendChild(document.createTextNode(select.options[iActive].text));
            }
            span.StyledSelects = StyledSelects;
            span.position = pos;
            div.appendChild(span);
            over.appendChild(ul);
            div.appendChild(over);
            div.position = pos;
            div.StyledSelects = StyledSelects;
            div.id = StyledSelects.className + select.id;
            div.onclick = function() {
                this.StyledSelects.toggle(this.position);
            }

            if (select.nextSibling) {
                select.parentNode.insertBefore(div, select.nextSibling);
            }
            else {
                select.parentNode.appendChild(div);
            }

            select.style.visibility = "hidden";
            select.style.position = "absolute";
            select.style.top = "0px";
            select.style.left = "0px";

            obj = { select: select, root: div, span: span, ul: ul, pos: iActive };

            return obj;

        },
        insertOptions: function(selectPos) {
            var select;
            var ul;
            var i;
            var node;
            var nodeOption;

            select = selectItems[selectPos].select;
            ul = selectItems[selectPos].ul;

            while (ul.firstChild) {
                ul.removeChild(ul.firstChild);
            }

            i = 0;
            for (node = select.firstChild; node != null; node = node.nextSibling) {
                if (node.nodeType !== 1) {
                    continue;
                }

                switch (node.nodeName.toLowerCase()) {
                    case "optgroup":
                        li = document.createElement("li");
                        li.className = "optgroup";
                        li.appendChild(document.createTextNode(node.getAttribute("label")));
                        ul.appendChild(li);

                        for (nodeOption = node.firstChild; nodeOption != null; nodeOption = nodeOption.nextSibling) {
                            if (nodeOption.nodeType !== 1) {
                                continue;
                            }

                            if (nodeOption.nodeName.toLowerCase() === "option") {
                                insertOption(ul, select, selectPos, i, nodeOption, true);
                                i++;
                            }
                        }
                        break;

                    case "option":
                        insertOption(ul, select, selectPos, i, node, false);
                        i++;
                        break;
                }
            }
        },
        draw: function(pos) {
            var h;
            var el;
            var root;

            if (selectItems[pos]) {
                root = selectItems[pos].root;
                selectItems[pos].root.onmouseover = function() {
                    StyledSelects.disableHide();
                }
                selectItems[pos].root.onmouseout = function() {
                    StyledSelects.enableHide();
                }
                selectItems[pos].span.onclick = function() {
                    StyledSelects.enableHide();
                }
                el = selectItems[pos].root.getElementsByTagName("div")[0];
                el.style.top = "";

                // show the select
                selectItems[pos].root.className = this.className + "Active";

                var elPos = findPos(el);

                if (elPos != null) {

                    var elBottom = elPos.y + el.scrollHeight;

                    // may indicate the expanded area is off the bottom of the screen
                    if (elBottom > getBodyDimensions().h + getScrollXY().y) {

                    }
                    el = selectItems[pos].root.getElementsByTagName("div")[0];
                    el.style.top = (-1 * (el.offsetHeight - 2)) + "px";

                    // final check to see if the item is above the top of the page. better down and off than up and off
                    var elPos = findPos(el);
                    if (elPos.y < getScrollXY().y) {
                        el.style.top = "";
                    }
                }

                StyledSelects.disableHide();

            }
        },
        reload: function() {
            var i;
            var objStyledSelect;

            for (i = 0; i < selectItems.length; i++) {
                objStyledSelect = selectItems[i];
                objStyledSelect.root.parentNode.removeChild(objStyledSelect.root);
                selectItems[i] = this.insert(objStyledSelect.select, i)
            }

        },
        toggle: function(pos) {
            if (!selectItems[pos]) {
                return;
            }
            if (selectItems[pos].root.className == this.className + "Active") {
                this.hide(true);
            } else {
                this.insertOptions(pos);
                this.show(pos);
                if (typeof EventDispatcher != "undefined") {
                    EventDispatcher.dispatch("StyledSelects.Expand", selectItems[pos]);
                }
            }
        },
        show: function(pos) {
            m_fnSetStateOfOthers(pos, false);
            fnClick = document.onclick;
            document.onclick = function() {
                StyledSelects.hide(false);
            }
            this.draw(pos);
            activePicker = pos;

        },
        enableHide: function() {
            hideEnabled = true;
        },
        disableHide: function() {
            hideEnabled = false;
        },
        hide: function(force) {
            var elActivePicker;
            if (hideEnabled || force) {
                if (!selectItems[activePicker]) {
                    return;
                }

                elActivePicker = selectItems[activePicker].root;
                elActivePicker.className = StyledSelects.className;
                document.onclick = fnClick;
                activePicker = null;

            }

        },
        select: function(selectPos, pos) {
            var select;
            var root;
            var span;
            var posLast;
            var fnClick;
            var elExt;

            if (!selectItems[selectPos]) {
                return;
            }

            select = selectItems[selectPos].select;
            root = selectItems[selectPos].root;
            span = selectItems[selectPos].span;
            posLast = selectItems[selectPos].pos;

            selectItems[selectPos].select.value = selectItems[selectPos].select.options[pos].value;

            while (span.firstChild) {
                span.removeChild(span.firstChild);
            }
            span.appendChild(document.createTextNode(selectItems[selectPos].select.options[pos].text));
            selectItems[selectPos].root.style.display = "none";
            this.show(selectPos);
            selectItems[selectPos].root.style.display = "";
            this.enableHide();

            selectItems[selectPos].pos = pos;

            if (posLast != pos) {
                if (select.onchange) {
                    if (typeof select.onchange == "function") {
                        select.onchange();
                    }
                }
            }

        },
        mouseOver: function(select, callee) {
            if (callee.className != "") {
                callee.className += " over";
            }
            else {
                callee.className = "over";
            }
        },
        mouseOut: function(select, callee) {
            var attClass;

            callee.className = callee.className.replace("over", "");
            if (callee.className == "") {
                // todo: remove class attribute when empty
            }
        }
    }
} ();

StyledSelects.maxHeight = 100;

//
// Default localisation settings for en-GB.
// Other locales should overwrite these settings in a separate file.
//

StyledSelects.className = "styledSelect";

function getScrollXY() {
    var scrOfX = 0, scrOfY = 0;

    if (typeof (window.pageYOffset) == 'number') {
        //Netscape compliant
        scrOfY = window.pageYOffset;
        scrOfX = window.pageXOffset;
    }
    else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
        //DOM compliant
        scrOfY = document.body.scrollTop;
        scrOfX = document.body.scrollLeft;
    }
    else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
        //IE6 standards compliant mode
        scrOfY = document.documentElement.scrollTop;
        scrOfX = document.documentElement.scrollLeft;
    }
    return { x: scrOfX, y: scrOfY };
}

function findPos(obj) {
    var curleft = curtop = 0;

    if (!obj.offsetParent) {
        return null;
    }

    do {
        curleft += obj.offsetLeft;
        curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);

    return { x: curleft, y: curtop };

}

function getBodyDimensions() {
    var myWidth = 0, myHeight = 0;

    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    }
    else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    }
    else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }

    return { w: myWidth, h: myHeight };

}