$.widget('ui.dropdown', {
    options: {
        title: '',
        hint: null,
        height: 0,
        editable: true,
        tagName: 'div',
        titleCss: 'ui-dropdown-title ui-frame ui-dropdown-arrow',
        resizeTitle: true,
        disabled: false
    },
    _focusTicks: 0,
    _create: function() {
        var self = this;

        this._title = null;

        if (this.options.editable) this._title = $('<' + this.options.tagName + ' class="ui-dropdown-arrow-collapsed"><input type="text" class="' + this.options.titleCss + '"/></' + this.options.tagName + '>');
        else this._title = $('<' + this.options.tagName + ' class="' + this.options.titleCss + ' ui-dropdown-arrow-collapsed"' + (this.options.tagName == 'a' ? ' href="javascript://"' : '') + '></' + this.options.tagName + '>');

        this._title.insertBefore(this.element);
        if (this.options.resizeTitle) this._title.css('width', this.element.width());

        if (this.options.editable) {
            var txt = $('input', this._title);
            txt.css('width', this.element.width() - 15);
            txt.css('padding-right', 15);
            txt.bind('mouseover', function(e) { $(this).removeClass('ui-dropdown-arrow'); $(this).addClass('ui-dropdown-arrow-hover'); });
            txt.bind('mouseout', function(e) { $(this).removeClass('ui-dropdown-arrow-hover'); $(this).addClass('ui-dropdown-arrow'); });
            txt.textbox({ hint: this.options.hint });
        }

        this.setTitle(this.options.title);



        this.element.css('position', 'absolute');
        this.element.addClass('ui-dropdown-body');
        this.element.addClass('ui-frame');

        if (this.options.height) this.element.css('height', this.options.height + 'px');

        this.element.hide();

        $(document).mousedown(function() {
            self._hideAllDropDowns();
        });

        this.element.bind('mousedown', function(e) { e.stopImmediatePropagation(); });
        this._title.bind('mousedown', function(e) { e.stopImmediatePropagation(); });

        var self = this;
        if (this.options.editable) {
            var edt = $('input', this._title);
            edt.bind('focus', this, function(e) { if (!self.isExpanded()) { e.data.expand(); self._focusTicks = (new Date()).getTime(); } });
            edt.bind('click', this, function(e) { var ticks = ((new Date()).getTime() - self._focusTicks); if (ticks > 500) e.data.toggle(); });
            edt.bind('keydown', this, function(e) { e.data.onkeydown(e); });
            edt.bind('keyup', this, function(e) { e.data.onkeyup(e); });
        } else {
            this._title.bind('click', this, function(e) { e.data.element.toggle(); });
        }

        if (this.options.disabled) this.setDisabled(this.options.disabled);
    },
    _hideAllDropDowns: function() {
        var dds = $('.ui-dropdown-body');
        $.each(dds, function(idx, val) {
            var dd = $(val).data('dropdown');
            if (dd) dd.collapse();
            else $(val).hide();
        });
    },
    onkeydown: function(e) {
        if (e.keyCode == 27) {
            $('input', this._title).blur();
            this.collapse();
        } else if (e.keyCode == 13) {
            this._trigger('endedit', e);
        } else {
            this.expand(true);
        }
    },
    onkeyup: function(e) {
        this._trigger('edit', e, $('input', this._title).data('textbox').text());
    },
    isExpanded: function() {
        return this._title.hasClass('ui-dropdown-arrow-expanded');
    },
    toggle: function() {
        if (!this.isExpanded()) this.expand();
        else this.collapse();
    },
    expand: function(noselect) {
        this._hideAllDropDowns();
        if (this.options.disabled) return;

        var pos = this._title.position();
        this.element.css('top', (pos.top + this._title.outerHeight()) + 'px');
        this.element.css('left', pos.left + 'px');
        this.element.show();
        if (this.options.editable && !noselect) $('input', this._title).select();
        this._title.removeClass('ui-dropdown-arrow-collapsed').addClass('ui-dropdown-arrow-expanded');
    },
    collapse: function() {
        this.element.hide();
        this._title.removeClass('ui-dropdown-arrow-expanded').addClass('ui-dropdown-arrow-collapsed');
    },
    setTitle: function(title) {
        if (this.options.editable) {
            var txt = $('input', this._title);
            txt.data('textbox').set(title);
            txt.blur();
        } else this._title.html(title);
    },
    getTitle: function() {
        if (this.options.editable) {
            var txt = $('input', this._title);
            return txt.data('textbox').text();
        } else return this._title.text();
    },
    setHint: function(hint) {
        var tb = $('input', this._title).data('textbox');
        tb.options.hint = hint;
        tb.set('');
    },
    setDisabled: function(disabled) {
        this.options.disabled = disabled;
        this.collapse();
        if (this.options.editable) {
            var txt = $('input', this._title);
            if (disabled) {
                txt.attr('disabled', 'disabled');
                this._title.removeClass('ui-dropdown-arrow-collapsed').addClass('ui-dropdown-arrow-disabled');
            } else {
                txt.removeAttr('disabled');
                this._title.removeClass('ui-dropdown-arrow-disabled').addClass('ui-dropdown-arrow-collapsed');
            }
        }

    },
    destroy: function() {
        $.Widget.prototype.destroy.apply(this, arguments);
    }
});