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

var $tabs = $('.brands-tabs');
var $list = $('.brands-list');
var $gory = $('.brands-category');
var $news = $('.news-txt ul');
var $clearfix = $list.find('dl.clearfix');
var $brand = $list.find('li>a');
var $category = $gory.find('a');
var $tab = $tabs.find('li>a');
var $arr = $tabs.find('.hoverarr');
var $thisTab;

var categoryHeight = $category.height();
var categoryTop = $category.offset() ? $category.offset().top : 0;
var newsHeight = $news.height();
var newsTop = $news.offset() ? $news.offset().top : 0;
var timeout, _id;


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

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

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>';
templete += '</div>';

dot($('.brand-desc'));

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

function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
    var r = window.location.search.substr(1).match(reg);

    if (r != null) {
        return window.unescape(r[2]);
    }
    return null;
}

// 格式化资讯NEWS标题数量
if ($news.length) {
    $news.find('li').each(function() {
        var $dom = $(this);
        var domHeight = $dom.offset().top - newsTop + $dom.height();

        if (domHeight > newsHeight) {
            $dom.hide();
        }
    });
}

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

_id = getQueryString('id') ? getQueryString('id') : 0;

// 设置对应TAB选中
$thisTab = $tab.eq(_id);
$thisTab.find('.g-mask').addClass('g-mask-on');

if (_id && $thisTab.length) {
    $arr.css({
        left: parseFloat($thisTab.offset().left) - parseFloat($tabs.offset().left)
    });
}
$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');
    }, 50);
    $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;

    if (!$gory.hasClass('category-fix')) {
        targetTop -= 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 $parent = $this.parent('li');
    var myTemplate;

    $list.find('.brands-dialog').remove();
    myTemplate = Handlebars.compile(templete);
    $parent.append(myTemplate(data));
    dot($parent.find('.right'));

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

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

        var options = {
            url: '/brands/brandinfo',
            type: 'get',
            data: {
                brandId: key
            },
            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-dialog').remove();
    });
}

if ($clearfix.length < 26) {
    $.ajax({
        url: '/brands/brandList',
        type: 'POST',
        data: {
            start: $clearfix.length ? ($clearfix.length + 1) : 1
        },
        success: function(_data) {
            if (_data) {
                $list.append(_data);
                $brand = $list.find('li>a');
                bindHoverEvent();
            }
        }
    });
}

bindHoverEvent();