/**
 * 此文件的头部注释
 */

/*global jQuery: false */

(function ($) {
    'use strict';

    var emailbox = function (selector, setting) {
// UNDONE [2014-4-17] [] 可以var emailbox = pe.ui.EmailBox = function()，这样写直观些
            this.init(selector, setting);
        },
        defaultSetting = {
            address: [
                'gmail.com', 'hotmail.com', 'yahoo.com', 'qq.com', 'sina.com', '163.com', '126.com', 'sina.cn',
                'sohu.com'
            ],
            item: '<li class="emailbox-item"><a tabindex="-1" href="#"></a></li>',
            icon: '<i class="fa fa-envelope-alt"></i>',
            inputUserName: '<span class="emailbox-username"></span>'
        };

    emailbox.prototype = {
        setting: null,
        box: null,
        keyer: null,
        init: function (selector, setting) {
            var self = this,
                $box = this.box = $(selector),
                $keyer = this.keyer = $box.find('input[type=text]'),
                $menu = this.menu = $box.find('.dropdown-menu');

            this.setting = $.extend({}, defaultSetting, setting);

            $.each(this.setting.address,
                function (index, val) {
                    var $item = self.bulidItem(val);
                    $menu.append($item);
                });

            $keyer.on('input keydown ',
                    function (event) {
                        var curitem;
                        if (event.keyCode == 13) {
                            curitem = $menu.find("li[data-select='selected']").first();
                            $menu.find('li').attr('data-select', '').removeClass('selected');
                            $menu.hide();
                            self.select(curitem);
                            event.stopPropagation();
                            return false;
                        }

                        var key = $keyer.val();
                        if (key.indexOf('@') > -1) {
                            key = key.substr(0, key.indexOf('@'));
                        }
                        if (key) {
                            self.items()
                                .each(function () {
                                    self.replaceUserName(key, $(this));
                                });

                            $menu.show();

                        } else {
                            $menu.hide();
                        }

                        if (event.keyCode == 40) {
                            if ($menu.find("li[data-select='selected']").first().next("li").length == 0) {
                                curitem = $menu.find("li:first");
                            } else {
                                curitem = $menu.find("li[data-select='selected']").first().next("li");

                            }
                            self.selectItem(curitem);
                            event.stopPropagation();
                        }
                        if (event.keyCode == 38) {
                            if ($menu.find("li[data-select='selected']").first().prev("li").length == 0) {
                                curitem = $menu.find("li:last");
                            } else {
                                curitem = $menu.find("li[data-select='selected']").first().prev("li");
                            }
                            self.selectItem(curitem);
                            event.stopPropagation();
                        }

                    })
                .on('click',
                    function (e) {
                        e.stopPropagation();
                    });

            $('html')
                .on('click',
                    function () {
                        $menu.hide();

                    });

        },
        disable: function () {
            this.keyer.attr("disabled", "disabled");
        },
        enable: function () {
            this.keyer.removeAttr("disabled");
        },
        bulidItem: function (emailAddress) {
            var $item = $(this.setting.item).find('a').text('@' + emailAddress),
                $name = $(this.setting.inputUserName).prependTo($item),
                $icon = $(this.setting.icon).prependTo($item),
                self = this;

            $item.click(function () {
                var $item = $(this).parent();
                self.select($item);
                self.menu.hide();
                self.keyer.blur();
                return false;
            });
            return $item.parent();
        },
        items: function () {
            return this.box.find('.emailbox-item');
        },
        replaceUserName: function (val, item) {
            item.find('.emailbox-username').text(val);
        },
        select: function (item) {
            this.keyer.val(item.find('a').text());
        },
        selectItem: function (item) {
            this.menu.find('li').attr('data-select', '').removeClass('selected');
            item.attr('data-select', 'selected').addClass('selected');
        }

    };

    pe.ui.EmailBox = emailbox;

}(jQuery));