var DropDown = new Class.create();

DropDown.prototype = {
    initialize: function(id) {
        this.control = $(id);
        this.onChange = this.control.readAttribute("onChange");
        this.control.addClassName("ulDropDown");

        var children = this.control.select('li');
        for (var j = 0; j < children.length; j++) {
            children[j].id = id + "_option_" + j;
            children[j].addClassName("liOption");
        }

        this.anchorControl = new Element('div', { 'id': id + '_anchor', 'class': 'ddAnchor' });
        this.control.insert({ before: this.anchorControl });

        var htmlString = "<table cellspacing='0' style='width: 100%;'><tr><td valign='top' id='" + id + "_anchorContent'></td><td valign='top' align='right' id='" + id + "_anchorButton'></td></tr></table>";
        this.anchorControl.insert(htmlString);

        this.anchorContent = $(id + "_anchorContent");
        this.anchorButton = $(id + "_anchorButton");

        this.anchorButton.update("<img src='/SavedFiles/bullet_arrow_down.png' border='0'>");

        this.hiddenValue = new Element("INPUT", { "id": id + "_hdn", "name": id + "_hdn", "type": "hidden" });
        this.control.insert({ after: this.hiddenValue });

        this.anchorClickListener = this.onAnchorClick.bindAsEventListener(this);
        Event.observe(this.anchorControl, "click", this.anchorClickListener);

        this.controlClickListener = this.onControlClick.bindAsEventListener(this);
        Event.observe(this.control, "click", this.controlClickListener);

        this.bodyClickListener = this.onBodyClick.bindAsEventListener(this);
        Event.observe(document.body, "click", this.bodyClickListener);

        this.control.hide();
    },

    updateItems: function(items) {
        this.control.update(items);
        var children = this.control.select('li');
        for (var j = 0; j < children.length; j++) {
            children[j].id = this.control.id + "_option_" + j;
            children[j].addClassName("liOption");
        }
    },

    onAnchorClick: function(event) {

        this.control.absolutize();
        this.control.style.display = 'block';
        this.control.clonePosition(this.anchorControl, { setHeight: false, offsetTop: 20 });
        this.control.style.display = 'none';
        this.control.setStyle({ height: '85px', backgroundColor: 'white', overflowY: 'auto', overflowX: 'hidden' });
        this.control.toggle();
    },

    onControlClick: function(event) {
        var oldValue = this.getSelectedValue();

        var el = Event.element(event);
        while (el.tagName.toUpperCase() != "LI") {
            el = el.up(0);
        }
        this.anchorContent.update(el.innerHTML);
        this.control.hide();
        this.selectedElement = el;
        this.hiddenValue.value = this.getSelectedValue();

        if (this.hiddenValue.value != oldValue) {
            if (this.onChange != null) {
                eval(this.onChange);
            }
        }
    },

    onBodyClick: function(event) {
        var el = Event.element(event);
        if (el == null || el.descendantOf(this.control) || el.descendantOf(this.anchorControl)
        || el == this.anchorControl || el == this.control) {
            return;
        }
        this.control.hide();
    },

    getSelectedIndex: function() {
        if (this.selectedElement != null) {
            var segsArray = this.selectedElement.id.split('_');
            return segsArray[segsArray.length - 1];
        }
        else {
            return -1;
        }
    },

    setSelectedIndex: function(newIndex) {
        var items = this.control.select('li');
        if (items.length > newIndex) {
            var el = items[newIndex];
            this.anchorContent.update(el.innerHTML);
            this.selectedElement = el;
            this.hiddenValue.value = this.getSelectedValue();

            if (this.onChange != null) {
                eval(this.onChange);
            }
        }
    },

    setSelectedValue: function(newValue) {
        var items = this.control.select('li');
        for (var j = 0; j < items.length; j++) {
            var el = items[j];
            var elVal = el.readAttribute("value");
            if (elVal == newValue) {
                this.anchorContent.update(el.innerHTML);
                this.selectedElement = el;
                this.hiddenValue.value = this.getSelectedValue();

                if (this.onChange != null) {
                    eval(this.onChange);
                }
                return;
            }
        }
    },

    getSelectedValue: function() {
        if (this.selectedElement != null) {
            return this.selectedElement.readAttribute("value");
        }
        else {
            return '';
        }
    },

    deInitailize: function() {
        Event.stopObserving(this.anchorControl, "click", this.anchorClickListener);
        Event.stopObserving(this.control, "click", this.controlClickListener);
        Event.stopObserving(document.body, "click", this.bodyClickListener);
    }
};