/**
 *  品牌一览
 * @author: liangzhifeng<zhifeng.liang@yoho.cn>
 * @date: 2015/10/23
 */

var $ = require('jquery'),
    Hammer = require('yoho.hammer'),
    Swiper = require('yoho.iswiper'),
    loading = require('../plugin/loading'),
    lazyLoad = require('yoho.lazyload');

var swiper,
    $fixTitleBar,
    $brandList = $('.brand-list'),
    $icon = $('.search-icon'),
    $genderItem = $('.genderNav li'),
    $brandItem = $('.brandNav li'),
    $newBrandWall = $('.new-brand-wall'),
    $recommandBrandWall = $('.recommand-brand-wall'),
    $searchAction = $('.search-action'),
    hotBrandsSwiper;

var searchH = $('.newbrand-search').outerHeight(),
    headerH = $('.yoho-header').outerHeight(),
    brandSwipe = parseInt(searchH) + parseInt(headerH) - 1,
    minBrandListTop;

var brandsData,
    $keyword,
    clearTextHammer;

var $history = $('.history');
var $historySearch = $('.history-search');
var $hotSearch = $('.hot-search');

var $clearHistory = $('#clear-history');

var writeSearch = require('./write-search');

var ranToken = writeSearch.getRanToken();

var chHammer;


loading.showLoadingMask();

lazyLoad($('img.lazy'));
$('.yoho-header').css({
    'z-index': 2,
    position: 'fixed',
    top: 0
});

(function() {
    if ($('.banner-top').length > 0) {
        $('.hot-brands').css('padding-top', '0');
    }

    $('.hide-when-loading').show();
    loading.hideLoadingMask();

    //banner滑动
    swiper = new Swiper('.swiper-container', {
        lazyLoading: true,
        loop: true,
        autoplay: 3000,
        pagination: '.swiper-pagination .pagination-inner'
    });

    //热门品牌滑动
    hotBrandsSwiper = new Swiper('.brands-swiper', {
        grabCursor: true,
        slidesPerView: 'auto',
        wrapperClass: 'brands-list',
        slideElement: 'li'
    });
})();

$fixTitleBar = $('<div class="title-bar fixed-title-bar"><h2></h2></div>');
$fixTitleBar.css({
    position: 'fixed',
    top: brandSwipe
}).hide();
minBrandListTop = brandSwipe + $('.hot-brands').outerHeight() + $('.banner-top').outerHeight();
$brandList.last().append($fixTitleBar);

function scrollHandler() {
    var scrTop = $(window).scrollTop();

    if ($brandList.eq(0).offset().top < minBrandListTop) {
        $fixTitleBar.hide();
    }

    $brandList.each(function() {
        var offTop = $(this).offset().top - brandSwipe;

        if (scrTop >= offTop) {
            $fixTitleBar.css({
                display: 'block'
            }).find('h2').html($(this).find('.title-bar').text());
        }

    });
}

//srcoll to load more
$(window).scroll(function() {
    window.requestAnimationFrame(scrollHandler);
});


function changeBackground() {
    var $brandList = $('.brand-list').find('p');

    $brandList.on('touchstart', function() {
        $brandList.css('background', '#fff');
        $(this).css('background', '#eee');
    }).on('touchend touchcancel', function() {
        $(this).css('background', '#fff');
    });
}
changeBackground();

function searchResult() {
    var keyword = ($keyword.val() + '').toLowerCase();
    var result = {},
        i = 0,
        html = '';

    if (keyword !== '') {

        // 遍历首字母搜索
        $.each(brandsData, function(k, v) {
            if ($.isArray(v)) {

                // 遍历品牌，进行匹配
                $.each(v, function(i, brand) {
                    if (brand.searchName.toLowerCase().indexOf(keyword) > -1) {
                        result[k] = result[k] || [];
                        result[k].push(brand);
                    }
                });
            }
        });

        // 根据搜索结果生成 HTML
        $.each(result, function(k, v) {
            var brandHtml = ['<div class="brand-list bar-', i, '">'];

            i++;
            brandHtml.push('<div class="title-bar"><h2>');
            brandHtml.push(k);
            brandHtml.push('</h2></div>');
            $.each(v, function(i, brand) {

                brandHtml.push('<p><a href="' + brand.url + '" brandName = "' + brand.name +
                    '" brandId = "' + brand.brandId + '" brandDomain = "' + brand.brandDomain + '">' + brand.name);
                if (brand.isNew) {
                    brandHtml.push('<i class="icon-new">NEW</i>');
                }
                if (brand.isHot) {
                    brandHtml.push('<i class="icon-hot">HOT</i>');
                }
                brandHtml.push('</a></p>');
            });
            brandHtml.push('</div>');
            html += brandHtml.join('');

        });
    }

    //没填入关键词时显示最热搜索
    if (keyword.length > 0) {
        $('.search-brand-page').addClass('hide');
    } else {
        $('.search-brand-page').removeClass('hide');
    }

    // 插入 dom，绑定事件
    $('.search-result').html(html);
    changeBackground();
    writeSearch.bindWirteLocal($('.brand-list'));
}

if ($('.brand-search-page').length > 0) {
    brandsData = $.parseJSON($('#brands-data').html());
    $keyword = $('#keyword');

    $keyword.on('input', function() {
        if ($keyword.val().length) {
            $icon.css('color', '#444');

            // $(this).closest('.search-box').css('width', '11.25rem');
            $searchAction.show().find('.clear-text').show();
        } else {
            $icon.css('color', '#b2b2b2');

            // $(this).closest('.search-box').css('width', '12.5rem');
            $searchAction.find('.clear-text').hide();

        }
        searchResult();
    }).focus();

    // 2016.1.13 产品（高扬）要求进入页面默认显示取消按钮
    $icon.css('color', '#444');
    $keyword.closest('.search-box').css('width', '11.25rem');
    $searchAction.show().find('.clear-text').hide();

    clearTextHammer = new Hammer($('.clear-text')[0]);
    clearTextHammer.on('tap', function(e) {
        $('.search-result').html('');
        $('#keyword').val('').trigger('input');
        e.preventDefault();
        e.srcEvent.stopPropagation();
    });

    $('form.search-box').on('submit', function() {
        return false;
    });

}

if ($genderItem.length > 0) {
    $genderItem.on('touchstart', function() {
        var index = $(this).data('id') + 1;

        $('.genderNav ul .active').removeClass('active');
        $(this).addClass('active');
        $('.hide-when-loading').hide();
        loading.showLoadingMask();
        function reload() {
            window.location.search = 'channel=' + index;
        }
        setTimeout(reload.bind(this), 100);
    });
}

if ($brandItem.length > 0) {
    $brandItem.on('click', function() {
        var index = $(this).data('id');

        $('.brandNav ul .active').removeClass('active');
        $(this).addClass('active');


        if (index === 0) {

            $recommandBrandWall.not('.hide').addClass('hide');
            $newBrandWall.not('.hide').addClass('hide');
            $brandList.removeClass('hide');

        } else if (index === 1) {

            $newBrandWall.removeClass('hide');
            $brandList.not('.hide').addClass('hide');
            $recommandBrandWall.not('.hide').addClass('hide');

        } else {

            $recommandBrandWall.removeClass('hide');
            $brandList.not('.hide').addClass('hide');
            $newBrandWall.not('.hide').addClass('hide');

        }

    });
}

/**
 * 清除记录
 */
function removeHistory() {
    $.ajax({
        type: 'GET',
        url: '/brands/delBrandHistory',
        data: '',
        success: function(data) {
        },
        error: function() {
        }
    });
}

//初始化历史搜索的内容

if ($('.brand-search-page').length > 0) {

    chHammer = new Hammer($clearHistory[0]);
    chHammer.on('tap', function() {
        localStorage.removeItem('historys-brand');

        $history.html('');
        $historySearch.hide();
        $clearHistory.hide();

        if ($('.net-search').length > 0) {
            removeHistory();
        }

        window.rePosFooter();
    });

    //搜索页面

    (function() {
        var html = '',
            history,
            historys, i,
            brand, url, locate;

        if (localStorage) {
            historys = localStorage.getItem('historys-brand');

            if (historys && historys.length > 0) {
                historys = historys.split(ranToken);
                for (i = (historys.length >= 10) ? 10 : historys.length; i > 0; i--) {
                    history = historys[i - 1];

                    if (history === '') {
                        continue;
                    }
                    locate = history.indexOf('http://');
                    brand = history.substr(0, locate);
                    url = history.substr(locate, history.length - locate);

                    html += '<li><a href="' + url + '">' + brand + '</li>';
                    $historySearch.removeClass('hide');
                }

                $history.html(html);
                $clearHistory.removeClass('hide');

                $hotSearch.removeClass('hide');
                window.rePosFooter();
            }
        }
    }());

}