/**
 * Клёвый выпадающий список
 */
(function ($) {

    var CLASS_WIDGET = "widget-combo",
        CLASS_COLLAPSED = "widget-combo-collapsed",
        CLASS_LIST = "widget-combo-list",
        CLASS_ACTIVE = "widget-combo-active",
        CLASS_BTN = "widget-combo-btn",
        CLASS_DISABLED = "widget-combo-disabled";

    $.widget("my.combo", {
        _init: function () {
            var me = this, ele = me.element;

            me.widgetBaseClass = "widget-combo";
            
            ele.addClass(CLASS_WIDGET).addClass(CLASS_COLLAPSED)
                .find("> div").addClass(CLASS_LIST).end()
                .find("> img").addClass(CLASS_BTN);
            
            $("." + CLASS_BTN, ele).bind("click.combo", function (e) {
                if (ele.hasClass(CLASS_DISABLED)) {
                    return;
                }
                if (ele.hasClass(CLASS_COLLAPSED)) {
                    me._showList();
                } else {
                    me._hideList();
                }
                e.stopPropagation();
                e.preventDefault();
            });

            $("li", ele).bind("click.combo", function (e) {
                if (ele.hasClass(CLASS_DISABLED)) {
                    return;
                }
                if (!$(this).hasClass(CLASS_ACTIVE)) {
                    $("." + CLASS_ACTIVE, ele).removeClass(CLASS_ACTIVE);
                    $(this).addClass(CLASS_ACTIVE);

                    // fire event
                    var selectedIndex = $(this).parent().children("li").index(this), uiHash;
                    if (selectedIndex >= 0 && selectedIndex !== me.options.selectedIndex) {
                        uiHash = {
                            previous: me.options.selectedIndex,
                            selected: selectedIndex
                        };
                        me.options.selectedIndex = selectedIndex;
                        me._trigger("change", e, uiHash);
                    }

                    me._fixSize();
                    me._hideList();
                } else {
                    $("." + CLASS_BTN, ele).trigger("click.combo");
                }
                e.stopPropagation();
                e.preventDefault();
            });

            $("." + CLASS_LIST, ele)
                    .prepend('<em class="cn tl"></em><em class="cn tr"></em><em class="cn bl"></em><em class="cn br"></em>');
            
            me._fixSize();
        },

        destroy: function () {
            var ele = this.element;
            $("em.cn", ele).remove();
            $("li", ele).unbind("click.combo");
            $("." + CLASS_BTN, ele).unbind("click.combo");
            $(document).unbind("click.combo");

            ele.removeClass(CLASS_WIDGET).removeClass(CLASS_COLLAPSED)
                .find("." + CLASS_LIST).removeClass(CLASS_LIST).end()
                .find("." + CLASS_BTN).removeClass(CLASS_BTN);

            $.widget.prototype.destroy.apply(this, arguments);
        },

        _setData: function(key, value) {
            if (key == "disabled") {
                this._hideList();
            }
            $.widget.prototype._setData.apply(this, arguments);
        },

        _fixSize: function () {
            var me = this, ele = me.element;
            var padding2 = me.options.padding * 2;
            var maxWidth = 0;
            var activeEle = $("." + CLASS_ACTIVE, ele);

            if (activeEle.length === 0) {
                activeEle = $("li:first", ele).addClass(CLASS_ACTIVE);
            }

            $("li", ele).each(function () {
                var content = $(":first-child", this);
                var w = content.width();
                $(this).width(w);
                // $(this).height(content.height());
                maxWidth = (w > maxWidth) ? w : maxWidth;
            });

            $("." + CLASS_BTN, ele).css("left", activeEle.width());
            $(ele).height(activeEle.height());
            $(ele).width(maxWidth + $("." + CLASS_BTN, ele).outerWidth(true) + padding2);

            $(ele).css({
                "display": "block",
                "position": "absolute",
                "top": $(ele).position().top,
                "left": $(ele).position().left
            });
            
            me.options.selectedIndex = activeEle.parent().children("li").index(activeEle);
        },

        _showList: function () {
            var me = this, ele = me.element;
            var pad = - me.options.padding, padding2 = me.options.padding * 2;
            var r = me.options.rounding;

            ele.removeClass(CLASS_COLLAPSED);
            me._fixSize();

            var activeOffset = $("." + CLASS_ACTIVE, ele).position();
            $("." + CLASS_LIST, ele).css("top", -activeOffset.top);

            var w = ele.width(), h = $("ul", ele).height() + padding2;
            $(".cn.tl", ele).css({"top": pad, "left": pad, "width": w - r, "height": h - r});
            $(".cn.tr", ele).css({"top": pad, "left": pad + w - r, "width": r, "height": h - r});
            $(".cn.bl", ele).css({"top": pad + h - r, "left": pad, "width": w - r, "height": r});
            $(".cn.br", ele).css({"top": pad + h - r, "left": pad + w - r, "width": r, "height": r});

            // hide list then  
            $(document).one("click.combo", function () {
                me._hideList();
            });

        },

        _hideList: function () {
            var me = this, ele = me.element;
            ele.addClass(CLASS_COLLAPSED);
            $("." + CLASS_LIST, ele).css("top", "auto");
        }

    });

    $.extend($.my.combo, {
        defaults: {
            selectedIndex: 0,
            padding: 16,
            rounding: 12
        }
    });

}(jQuery));