/**
 * 首页优选品牌js
 * @author: liuyue(yue.liu@yoho.cn)
 * @date: 2015/12/08
 */

var $ = require('yoho.jquery'),
    Handlebars = require('yoho.handlebars'),
    lazyLoad = require('yoho.lazyload');

(function($) {
    var LogoBrand = function(element, options) {
        this.$element = $(element);
        this.options = $.extend({}, $.fn.logoBrand.defaults, options);

        this.init();
    };

    LogoBrand.prototype = {
        init: function() {
            this.$element.addClass('logos-' + this.options.showNum);
            this._sendRequest();
        },
        _createHelper: function() {
            var showNum = this.options.showNum;

            Handlebars.registerHelper('brandList', function(items, options) {
                var out = '<ul>',
                    i = 0,
                    item = null,
                    fillNum = 0;

                //不是每页显示个数的倍数，填充数据
                if (items.length % showNum !== 0) {
                    fillNum = showNum - (items.length % showNum);
                    for (i = 0; i < fillNum; i++) {
                        items.push({
                            href: 'javascript:;',
                            img: ''
                        });
                    }
                }

                for (i = 0; i < items.length; i++) {
                    item = options.fn(items[i]);

                    if (i % showNum === 5 || i === 5) {

                        //插入切换按钮的位置
                        out = out + '<li class="logo-brand-switch" data-page="' + Math.floor(i / showNum) + '">' +
                                    '<a class="prev iconfont" href="javascript:;">&#xe60f;</a>' +
                                    '<a class="next iconfont" href="javascript:;">&#xe60e;</a></li>' +
                                    '<li data-page="' + Math.floor(i / showNum) + '">' + item + '</li>';
                    } else if (i !== 0 && i % showNum === 0) {

                        //插入more的位置，more占的是下一页第一个brand的位置，所以page是i/17
                        out = out + '<li class="brand-more" data-page="' + Math.floor(i / (showNum + 1)) + '">' +
                                    '<a href="javascript:;" target="_blank">MORE ></a></li>' +
                                    '<li data-page="' + Math.floor(i / showNum) + '">' + item + '</li>';
                    } else {
                        out = out + '<li data-page="' + Math.floor(i / showNum) + '">' + item + '</li>';
                    }
                }

                //加上最后一个more, more占的是下一页第一个brand的位置，这里已经循环不到brand，所以加在末尾
                return out + '<li class="brand-more" data-page="' + Math.floor(i / (showNum + 1)) + '">' +
                            '<a href="javascript:;" target="_blank">MORE ></a></li></ul>';

            });
        },
        _sendRequest: function() {
            var that = this;

            $.ajax({
                type: 'GET',
                url: that.options.url,
                dataType: 'json',
                success: function(data) {
                    var brandTpl,
                        brandHtml;

                    that._createHelper();
                    brandHtml = '\{{#brandList logoBrand}}' +
                        '<a href="\{{href}}" target="_blank"><img class="lazy" data-original="\{{img}}" alt=""></a>' +
                        '\{{/brandList}}';
                    brandTpl = Handlebars.compile(brandHtml);
                    that.$element.html(brandTpl(data));
                    that.$element.find('.brand-more a').attr('href', data.moreBrand);
                    lazyLoad(that.$element.find('img.lazy'));
                    that._bindEvent();
                }
            });
        },
        _brandShow: function(hidePage, showPage) {
            var that = this;

            lazyLoad($('li[data-page=' + showPage + ']').find('img.lazy').trigger('appear'));
            that.$element.find('li[data-page=' + hidePage + ']').find('img').fadeOut('normal', function() {
                that.$element.find('li').hide();
                that.$element.find('li[data-page=' + showPage + ']').show().find('img').fadeIn();
            });
        },
        _bindEvent: function() {
            var that = this;

            that.$element.on('click', '.next', function() {
                var page = $(this).parent().data('page'),
                    nextPage = 0,
                    totalPage = Math.ceil(that.$element.find('li').size() / (that.options.showNum + 2)) - 1;

                if (page === totalPage) {
                    nextPage = 0;
                } else {
                    nextPage = page + 1;
                }
                that._brandShow(page, nextPage);
            });

            that.$element.on('click', '.prev', function() {
                var page = $(this).parent().data('page'),
                    prevPage = 0,
                    totalPage = Math.ceil(that.$element.find('li').size() / (that.options.showNum + 2)) - 1;

                if (page === 0) {
                    prevPage = totalPage;
                } else {
                    prevPage = page - 1;
                }
                that._brandShow(page, prevPage);
            });
        }
    };
    $.fn.logoBrand = function(option) {
        return this.each(function() {
            var $this = $(this),
                data = $this.data('LogoBrand'),
                options = typeof option === 'object' && option;

            if (!data) {
                $this.data('LogoBrand', (data = new LogoBrand(this, options)));
            }
            if (typeof option === 'string') {
                data[option]();
            }
        });
    };
    $.fn.logoBrand.Constructor = LogoBrand;
    $.fn.logoBrand.defaults = {
        showNum: 16,
        url: '/boys/getBrand'
    };
})($);