/**
 * dropdown 下拉框插件
 * 使用方法: 
 * html - <div><input id="x" /></div>
 * js - $("#x").dropdown();
 * 参数: {
 *   data: Array // 下拉框选项数据
 *   btn: "测试" // 下拉框外部按钮, 默认在input中生成下拉图标的按钮
 *   onSelect: // 选择对应选项的回调 参数为当前选中项的元素
 * }
 */
define("dropdown", ['components/common'], function() {
    var tmpl = '\
<div class="ad-dropdown">\
    <ul class="ad-dropdown-menu"></ul>\
</div>';
    var alaways = function() { return true; }

    function DropDown(settings) {
        var $el = $(settings.el),
            $container = $(settings.container || "body"),
            $dropwdown = $el.siblings(".ad-dropdown"), 
            $btn = $("<span><i></i></span>"), width;

        if(!$el.length || $dropwdown.length) return;
        
        settings.onSelect = settings.onSelect || alaways;

        $el.parent().addClass("ad-dropdown-container");
        $el.addClass("form-control ad-dropdown-toggle");
        $dropwdown = $(tmpl);
        $dropwdown.find(".ad-dropdown-menu").html(this.getListTmp(settings.data));
        $dropwdown.insertAfter($el);

        if(settings.btn) {
            $btn = $("<div class='btn ad-dropdown-btn'>" + settings.btn + "</div>");
        } 

        $btn.insertAfter($el).on("click", function (e) {
            var $parent = $el.parent();

            $container.find(".ad-dropdown-container").each(function() {
                if(this != $parent[0]) {
                    $(this).removeClass("show");
                }
            });
            $parent.toggleClass("show");
            e.stopPropagation();
        });

        if(settings.btn) {
            width = $btn.outerWidth();
            $el.parent().css("padding-right", width).addClass("external-btn");
        }

        $dropwdown.on("click", ".ad-dropdown-menu-item", function(e) {
            var $item = $(this), v = $item.html();

            settings.onSelect(this, v);
            $el.val(v);
        });

        $container.off("click.dropdown").on("click.dropdown", function() {
            $container.find(".ad-dropdown-container").removeClass("show");
        });
    }

    DropDown.prototype = {
        getListTmp: function(list) {
            var tmp = "";

            list = list ||[];
            tmp = list.reduce(function (prev, text) {
                return prev + "<li class='ad-dropdown-menu-item'>" + text + "</li>";
            }, tmp);

            return tmp;
        }
    };

    $.fn.dropdown = function(settings) {
        settings = settings || {};

        settings.el = this;
        new DropDown(settings);
        return this;
    };

    return {
        init: function(settings) {
            new DropDown(settings);
        }
    };
});