var detect = navigator.userAgent.toLowerCase();

Tikal.ComboBox = new function () {

    this.hideShowSelectOptionsDropDown = function (selectBoxId, newSize) {
        var selectOptionDropDownVisibility = (newSize == 1 ? 'hidden' : 'visible');
        $("#" + selectBoxId).attr('style', 'visibility: ' + selectOptionDropDownVisibility + '; margin: -20px 0 0 11px; z-index: 101;');
        $("#" + selectBoxId).attr('size', newSize);
    }

    this.setCombobox = function (selectBoxId) {
        var wrapperDiv = document.getElementById(selectBoxId + 'wrapper');

        if (!wrapperDiv) {
            wrapperDiv = document.createElement("div");
            // Set new wrapper div attributes
            wrapperDiv.setAttribute('id', selectBoxId + 'wrapper');
            wrapperDiv.setAttribute('class', 'wrapper');
            wrapperDiv.setAttribute('style', 'z-index: 101;');

            // Create and set an input control to replace the original select
            $(document.createElement("input"))
            .attr({ id: selectBoxId + '_input' })
            .addClass('inner')
            .appendTo(wrapperDiv)
            .keydown(function (evt) {
                var evt = (evt) ? evt : ((event) ? event : null);
                switch (evt.keyCode) {
                    case 40: // Key Arrow Down
                        $('#' + selectBoxId + '_select option:selected').next('option').attr('selected', 'selected');
                        $('#' + selectBoxId + '_select').change();
                        break;
                    case 38: // Key Arrow Up
                        $('#' + selectBoxId + '_select option:selected').prev('option').attr('selected', 'selected');
                        $('#' + selectBoxId + '_select').change();
                        break;
                }			    
            })

            // Create and set arrow image
            $(document.createElement("img"))
                .attr({ src: 'images/drop_down_default.gif', id: selectBoxId + '_dropdown_button' })
                .addClass('dropdown')
                .appendTo(wrapperDiv)
                .click(function () {
                    if ($("#" + selectBoxId + '_select').attr('size') == 1) {
                        Tikal.ComboBox.hideShowSelectOptionsDropDown(selectBoxId + '_select', 3);
                    } else {
                        Tikal.ComboBox.hideShowSelectOptionsDropDown(selectBoxId + '_select', 1);
                    }
                })
            .mouseenter(function () {
                $('#' + selectBoxId + '_dropdown_button').attr({ src: 'images/drop_down_arrow_hover.gif' })
            })
            .mouseleave(function () {
                $('#' + selectBoxId + '_dropdown_button').attr({ src: 'images/drop_down_default.gif' })
            })

            $("#" + selectBoxId).attr('style', 'visibility: hidden; margin: -20px 0 0 11px; z-index: 2');
            $("#" + selectBoxId).attr('size', 1);
            $("#" + selectBoxId).before(wrapperDiv);
            $("#" + selectBoxId).attr('id', selectBoxId + '_select');
            $("#" + selectBoxId + '_input').attr('id', selectBoxId);

            $('#' + selectBoxId + '_select').bind({
                'click': function () {
                    if ($("#" + selectBoxId).attr('size') == 1) {
                        Tikal.ComboBox.hideShowSelectOptionsDropDown(selectBoxId + '_select', 3);
                    } else {
                        Tikal.ComboBox.hideShowSelectOptionsDropDown(selectBoxId + '_select', 1);
                    }
                },
                'change': function () {
                    $('#' + selectBoxId).val($(this + 'option:selected').text());
                },
                'keydown': function (evt) {
                    var evt = (evt) ? evt : ((event) ? event : null);
                    switch (evt.keyCode) {
                        case 27: // esc			            
                            Tikal.ComboBox.hideShowSelectOptionsDropDown(selectBoxId + '_select', 1);
                            return (false);
                            break;
                    }
                }
            })


        } else {
            $(wrapperDiv).show();
        }
    };
}