/**
 * 首页
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2015/11/23
 */

var $ = require('yoho-jquery'),
    lazyLoad = require('yoho-jquery-lazyload');

var Handlebars = require('yoho-handlebars');

var $tabs = $('.brands-tabs');
var $list = $('.brands-list');
var $gory = $('.brands-category');
var $news = $('.news-txt ul');
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">';

require('../common');
require('yoho-jquery-dotdotdot');

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>';

$('.brand-desc').dotdotdot({
    wrap: 'letter'
});


lazyLoad($('img.lazy'));

// $('.slide-container').slider({
//     orient: true
// });

$.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, tmp) {
    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(tmp);
    $parent.append(myTemplate(data));
    $parent.find('.right').dotdotdot({
        wrap: 'letter'
    });

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

// 鼠标悬浮品牌,请求数据,并且展示
function bindHoverEvent() {
    if (String($list.data('ishover')) === 'true') {
        return;
    }
    $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();
    });
}

bindHoverEvent();