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

var $tabs = $('.brands-tabs');
var $list = $('.brands-list');
var $gory = $('.brands-category');
var $brand = $list.find('li>a');
var $category = $gory.find('a');
var $tab = $tabs.find('li>a');
var $arr = $tabs.find('.hoverarr');

var categoryHeight = $category.height();
var categoryTop = $category.offset() ? $category.offset().top : 0;
var timeout;


//用于临时存储数据
var tempdata = {};

var templete = '<div class="brands-layer">';

templete += '    <div class="layer-content">';
templete += '        <div class="title">{{title}}</div>';
templete += '        <div class="clearfix desc">';
templete += '            <img src="{{icon}}">';
templete += '            <p class="right">{{content}}</p>';
templete += '        </div> ';
templete += '        <div class="featured">';
templete += '            <p>{{subtitle}}</p> ';
templete += '            <div class="clearfix"> ';
templete += '                {{#each imgs}}';
templete += '                <img src="{{src}}">';
templete += '                {{/each}}';
templete += '            </div>';
templete += '        </div>';
templete += '    </div>';
templete += '</div>';


$.easing.easeOutQuint = function(x, t, b, c, d) {
    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
};

//头部图片TAB切换展示
$tab.eq(0).parent('li').find('.brands-content').css('z-index', '1');
$tab.hover(function() {
    var $this = $(this);

    clearTimeout(timeout);
    timeout = setTimeout(function() {
        var targetLeft = parseFloat($this.offset().left) - parseFloat($tabs.offset().left);

        $arr.animate({
            left: targetLeft
        }, 200, 'easeOutQuint');
    }, 200);
    $tabs.find('.brands-content').removeAttr('style');
    $this.parent('li').find('.brands-content').css('z-index', '1');

}, function() {
    clearTimeout(timeout);
});

//品牌类别滚动事件
$(window).scroll(function() {
    if ($(this).scrollTop() > categoryTop) {
        $gory.addClass('category-fix');
    } else {
        $gory.removeClass('category-fix');
    }
});

//点击字母，页面滚动到相关区域
$category.click(function() {
    var name = $(this).attr('href').split('#')[1];
    var targetTop = $list.find('[name=' + name + ']').offset().top - categoryHeight;

    $('html,body').animate({
        scrollTop: targetTop
    }, 200);
    return false;
});


//浮层代码
function bindTemplete($select, data, templete) {
    var $this = $select;
    var offset = {
        width: $this.width(),
        left: $this.offset().left,
        right: parseFloat($(window).width()) - parseFloat($this.offset().left) - parseFloat($this.width())
    };
    var myTemplate;

    $list.find('.brands-layer').remove();
    myTemplate = Handlebars.compile(templete);

    $this.parent('li').find('.brands-dialog').html(myTemplate(data));

    if (offset.right - 350 < 0) {
        $this.parent('li').find('.brands-layer')
       .addClass('brands-layer-right').css('left', -330 - offset.width);
    }
}

//鼠标悬浮品牌,请求数据,并且展示
$brand.hover(function() {
    var $this = $(this);
    var key = $this.attr('data-key');

    var options = {
        url: '/brands/brandinfo',
        type: 'get',
        success: function(_data) {

            if (_data.code === 200 && _data.brand) {
                if (!tempdata.hasOwnProperty(_data.brand.key)) {
                    tempdata[_data.brand.key] = _data.brand;
                }
                bindTemplete($this, tempdata[_data.brand.key], templete);
            }
        }
    };

    clearTimeout(timeout);
    timeout = setTimeout(function() {
        if (!tempdata.hasOwnProperty(key)) {
            $.ajax(options);
        } else {
            bindTemplete($this, tempdata[key], templete);
        }
    }, 200);
}, function() {
    clearTimeout(timeout);
    $list.find('.brands-layer').remove();
});