var selectEditable = {

    // Path to arrow images
    arrowImage: './images/select_arrow.gif', // Regular arrow
    arrowImageOver: './images/select_arrow_over.gif', // Mouse over
    arrowImageDown: './images/select_arrow_down.gif', // Mouse down


    selectBoxIds: 0,
    currentlyOpenedOptionBox: false,
    editableSelect_activeArrow: false,
    activeOption: undefined,

    selectBox_switchImageUrl: function() {
        if (this.src.indexOf(selectEditable.arrowImage) >= 0) {
            this.src = this.src.replace(selectEditable.arrowImage, selectEditable.arrowImageOver);
        } else {
            this.src = this.src.replace(selectEditable.arrowImageOver, selectEditable.arrowImage);
        }
    },

    selectBox_mouseout: function(event) {
        if (!event) event = window.event;

        if (Contains.checkMouseLeave(this, event)) {
            if (this.arrowSelectBox.src.match(/\w*.gif/g)[0] == selectEditable.arrowImageDown.match(/\w*.gif/g)[0]) {
                selectEditable.selectBox_showOptions.apply(this.arrowSelectBox);
            }
        }
    },

    selectBox_showOptions: function() {
        if (selectEditable.editableSelect_activeArrow && selectEditable.editableSelect_activeArrow != this) {
            selectEditable.editableSelect_activeArrow.src = selectEditable.arrowImage;
        }
        selectEditable.editableSelect_activeArrow = this;

        var numId = this.id.replace(/[^\d]/g, '');
        var optionDiv = $('selectBoxOptions' + numId);
        if (optionDiv.style.display == 'block') {
            optionDiv.style.display = 'none';
            if (navigator.userAgent.indexOf('MSIE') >= 0)
                $('selectBoxIframe' + numId).style.display = 'none';
            this.src = selectEditable.arrowImageOver;
        } else {
            optionDiv.style.display = 'block';
            if (navigator.userAgent.indexOf('MSIE') >= 0)
                $('selectBoxIframe' + numId).style.display = 'block';
            this.src = selectEditable.arrowImageDown;
            if (selectEditable.currentlyOpenedOptionBox && selectEditable.currentlyOpenedOptionBox != optionDiv) {
                selectEditable.currentlyOpenedOptionBox.style.display = 'none';
            }
            selectEditable.currentlyOpenedOptionBox = optionDiv;
        }
    },

    selectOptionValue: function() {
        var parentNode = this.parentNode.parentNode;
        var textInput = parentNode.getElementsByTagName('INPUT')[0];
        textInput.value = this.innerHTML;

        this.parentNode.style.display = 'none';
        $('arrowSelectBox' + parentNode.id.replace(/[^\d]/g, '')).src = selectEditable.arrowImageOver;

        if (navigator.userAgent.indexOf('MSIE') >= 0)
            $('selectBoxIframe' + parentNode.id.replace(/[^\d]/g, '')).style.display = 'none';
    },

    highlightSelectBoxOption: function() {
        if (this.style.backgroundColor == '#316AC5') {
            this.style.backgroundColor = '';
            this.style.color = '';
        } else {
            this.style.backgroundColor = '#316AC5';
            this.style.color = '#FFF';
        }

        if (selectEditable.activeOption) {
            selectEditable.activeOption.style.backgroundColor = '';
            selectEditable.activeOption.style.color = '';
        }
        selectEditable.activeOption = this;
    },

    _create: function(dest) {
        dest.className = 'selectBoxInput';
        var div = document.createElement('DIV');
        div.style.styleFloat = 'left';
        div.style.width = dest.offsetWidth + 16 + 'px';
        div.style.position = 'relative';
        div.id = 'selectBox' + selectEditable.selectBoxIds;
        div.onmouseout = this.selectBox_mouseout;
        var parent = dest.parentNode;
        parent.insertBefore(div, dest);
        div.appendChild(dest);
        div.className = 'selectBox';
        div.style.zIndex = 10000 - selectEditable.selectBoxIds;

        var img = document.createElement('IMG');
        img.src = selectEditable.arrowImage;
        img.className = 'selectBoxArrow';

        img.onmouseover = this.selectBox_switchImageUrl;
        img.onmouseout = this.selectBox_switchImageUrl;
        img.onclick = this.selectBox_showOptions;
        img.id = 'arrowSelectBox' + selectEditable.selectBoxIds;

        div.appendChild(img);
        div.arrowSelectBox = img;

        var optionDiv = document.createElement('DIV');
        optionDiv.id = 'selectBoxOptions' + selectEditable.selectBoxIds;
        optionDiv.className = 'selectBoxOptionContainer';
        optionDiv.style.width = div.offsetWidth - 2 + 'px';
        div.appendChild(optionDiv);

        if (navigator.userAgent.indexOf('MSIE') >= 0) {
            var iframe = document.createElement('<IFRAME src="about:blank" frameborder=0>');
            iframe.style.width = optionDiv.style.width;
            iframe.style.height = '0px'; //optionDiv.offsetHeight + 'px';
            iframe.style.display = 'none';
            iframe.id = 'selectBoxIframe' + selectEditable.selectBoxIds;
            div.appendChild(iframe);
        }

        if (dest.getAttribute('selectBoxOptions')) {
            var options = dest.getAttribute('selectBoxOptions').split(';');
            var optionsTotalHeight = 0;
            var optionArray = new Array();
            for (var no = 0; no < options.length; no += 2) {
                var anOption = document.createElement('DIV');
                anOption.innerHTML = options[no];
                anOption.value = options[no + 1];
                anOption.className = 'selectBoxAnOption';
                anOption.onclick = this.selectOptionValue;
                anOption.style.width = optionDiv.style.width.replace('px', '') - 2 + 'px';
                anOption.onmouseover = this.highlightSelectBoxOption;
                optionDiv.appendChild(anOption);
                optionsTotalHeight = optionsTotalHeight + anOption.offsetHeight;
                optionArray.push(anOption);
            }
            if (optionsTotalHeight > optionDiv.offsetHeight) {
                for (var no = 0; no < optionArray.length; no++) {
                    optionArray[no].style.width = optionDiv.style.width.replace('px', '') - 22 + 'px';
                }
            }
            optionDiv.style.display = 'none';
            optionDiv.style.visibility = 'visible';
        }

        selectEditable.selectBoxIds = selectEditable.selectBoxIds + 1;
    },

    create: function(elm) {
        var options = elm.options;
        var selectboxoptions = '';
        var value = '';

        for (var i = 0; i < options.length; i++) {
            var o = options[i];
            selectboxoptions += o.text + ';' + o.value + ';';
            if (o.selected) {
                value = o.text;
            }
        }
        selectboxoptions = selectboxoptions.substring(0, selectboxoptions.length - 1);

        var input = document.createElement('INPUT');
        input.type = 'text';
        input.setAttribute('selectboxoptions', selectboxoptions);
        input.id = elm.id;
        input.value = elm.getAttribute("text");
        input.name = elm.name;

        elm.parentNode.replaceChild(input, elm);

        this._create(input);

        return input;
    }
}