/**
 * 逛详情页
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2015/10/13
 */
require("guang/info-index.page.css")

var $ = require('yoho-jquery'),
    ellipsis = require('yoho-mlellipsis'),
    lazyLoad = require('yoho-jquery-lazyload'),
    IScroll = require('yoho-iscroll/build/iscroll-probe');

var $authorIntro = $('.author .intro');

var pageInIscroll = false;

var hasCollocationBlock = $('.collocation-block').length > 0 ? true : false;

// collocation block variable
var thumbWidth = 0,
    $fixedThumbContainer = $(''),
    $coBlock, $thumbContainer, $thumbs, $prods,
    scrollToEl,
    myScroll,
    winW = $(window).width();

var $sideNav = $('.side-nav'),
    $guangPage = $('.guang-detail-page'),
    $overlay = $('.overlay'),
    $subNav = $('.sub-nav');


scrollToEl = document.querySelector('#wrapper .collocation-block');


require('../common');
require('../plugin/wx-share')();
require('./detail-dynamic');

/**
 * 计算搭配的箭头的位置
 * @param $curPos 当前focus的搭配项
 */
function posCollocationArrow($curCo) {
    var left = $curCo.offset().left,
        bgPos = -winW + left + (thumbWidth / 2) + 'px';

    $thumbContainer.css({
        backgroundPosition: bgPos + ' bottom'
    });

    if (pageInIscroll) {
        $fixedThumbContainer.css({
            backgroundPosition: bgPos + ' bottom'
        });
    }
}

// 搭配thumb的touch事件句柄
function thumbTouchEvt(e) {
    var $curCo = $(e.currentTarget),
        index = $curCo.index(),
        $brother, $brotherCo,
        $curProds;

    if ($curCo.hasClass('focus')) {
        return;
    }

    $thumbs.filter('.focus').removeClass('focus');

    if (pageInIscroll) {
        if ($curCo.closest('.fixed-thumb-container').length > 0) {
            $brother = $thumbContainer;
        } else {
            $brother = $fixedThumbContainer;
        }

        $brotherCo = $brother.find('.thumb').eq(index);
        $fixedThumbContainer.find('.thumb.focus').removeClass('focus');
        $brotherCo.addClass('focus');
    }

    $curCo.addClass('focus');

    // 定位arrow
    posCollocationArrow($curCo);

    $prods.not('.hide').addClass('hide');
    $curProds = $prods.eq(index);
    $curProds.removeClass('hide');

    //
    lazyLoad($curProds.find('.lazy'));

    if (pageInIscroll) {
        if (myScroll) {
            myScroll.scrollToElement(scrollToEl, 400);
        }
    } else {
        $('body').animate({
            scrollTop: $coBlock.offset().top
        }, 400);
    }

    myScroll && myScroll.refresh();
}

// 初始化iscroll
function initIscroll() {
    var $scroller = $('#scroller'),
        $yohoHeader = $('.yoho-header');

    var hH = 0,
        winH, tcH, cbH, cbTop, fixedThumbDom;

    // 考虑通用头部的影响：对offset().top以及winH做对应偏移
    if ($yohoHeader.length > 0) {
        hH = $yohoHeader.outerHeight();
    }

    myScroll = new IScroll('#wrapper', {
        probeType: 3,
        mouseWheel: true,
        click: true
    });

    document.addEventListener('touchmove', function(e) {
        e.preventDefault();
    }, false);

    if (!hasCollocationBlock) {
        myScroll.on('scroll', function() {
            $scroller.trigger('scroll');
        });
        return;
    }

    winH = $(window).height() - hH;
    fixedThumbDom = $fixedThumbContainer[0];

    tcH = $thumbContainer.outerHeight();
    cbH = $coBlock.outerHeight();
    cbTop = $coBlock.offset().top - hH;

    myScroll.on('scroll', function() {
        var sTop = -this.y;
        var classList = fixedThumbDom.className;

        if (sTop <= cbTop - winH + tcH) {
            if (classList.indexOf('fixed-bottom') === -1) {
                $fixedThumbContainer
                        .addClass('fixed-bottom')
                        .removeClass('hide');
            }
        } else if (sTop <= cbTop) {
            if (classList.indexOf('hide') === -1) {
                $fixedThumbContainer
                        .addClass('hide')
                        .removeClass('fixed-bottom fixed-top');
            }
        } else if (sTop <= cbTop + cbH - tcH) {
            if (classList.indexOf('fixed-top') === -1) {
                $fixedThumbContainer
                        .addClass('fixed-top')
                        .removeClass('hide absolute')
                        .css('top', '');
            }
        } else if (sTop <= cbTop + cbH) {
            if (classList.indexOf('absolute') === -1) {
                $fixedThumbContainer
                        .addClass('absolute')
                        .removeClass('fixed-top hide');
            }
            fixedThumbDom.style.top = cbTop + hH + cbH - tcH - sTop + 'px';
        } else if (sTop > cbTop + cbH) {
            if (classList.indexOf('hide') === -1) {
                $fixedThumbContainer
                        .addClass('hide')
                        .removeClass('absolute');
            }
        }
        $scroller.trigger('scroll');
    });
}

// window onload 后重新refresh iscroll
window.onload = function() {
    myScroll && myScroll.refresh();
};

// 图片加载完成之后重新 refresh iscroll
$('img').on('load', function() {
    myScroll && myScroll.refresh();
});

// 微信导航
$('.nav-btn').on('touchstart', function() {
    $sideNav.css('pointer-events', 'none');
    $guangPage.addClass('menu-open');
    $overlay.show().css({
        opacity: 0.3,
        height: $('#scroller').height()
    });

    $sideNav.addClass('on');

    setTimeout(function() {
        $sideNav.css('pointer-events', 'auto');
    }, 400);

    return false;
});

// 点击一级导航，弹出二级导航
$sideNav.on('touchend', 'li', function(e) {
    if ($(this).find('.sub-nav').size() > 0) {
        $('.sub-nav').removeClass('show');
        $(this).find('.sub-nav').addClass('show');
        $(this).find('.highlight').removeClass('highlight');
    }

    if (e.target.pathname === location.pathname) {
        hideSideBar();
        return false;
    }
});

// 返回一级导航，收起二级导航
$subNav.each(function() {
    $(this).find('li').eq(0).on('click', function() {
        $('.sub-nav').removeClass('show');
        return false;
    });
}).on('touchstart', function(e) {
    if (e.currentTarget !== e.target) {
        $subNav.find('li').removeClass('current');
    }
});

// 侧边栏点击背景色变化
function highlight($elem) {
    $elem.find('li').on('touchstart', function() {
        $elem.find('.highlight').removeClass('highlight');
        $(this).addClass('highlight');
    }).on('touchend touchcancel', function() {
        $(this).removeClass('highlight');
    });
}
highlight($sideNav);
highlight($subNav);

function hideSideBar() {
    if ($guangPage.hasClass('menu-open')) {
        $guangPage.removeClass('menu-open');
        $overlay.hide();
        $('.sub-nav').removeClass('show');
        $sideNav.removeClass('on');
    }
}

$overlay.on('touchstart', function() {
    hideSideBar();
    return false;
});

// 初始化页面,包括是否使用iscorll初始化页面
// 接口暴露在HTML中，使用压缩名
(function() {
    var useIscroll;
    var isIphone = navigator.userAgent.indexOf('iPhone') > 0 ? true : false;
    var isweixin = navigator.userAgent.indexOf('MicroMessenger') ? true : false;
    var $this, $title;

    // pagecache 前端判断是否显示头
    var param = location.search;
    var isHeader = navigator.userAgent.indexOf('MicroMessenger') > -1 || param.indexOf('app_version') > -1 || param.indexOf('appVersion') > -1;

    isHeader && $('#yoho-header').remove();

    if ($('.guang-detail-page').hasClass('guang-detail')) {
        useIscroll = true;
    } else if ($('.guang-detail-page').hasClass('guang-ezine')) {
        useIscroll = false;
    }
    $('.main-wrap').css({
        position: 'static'
    });

    pageInIscroll = isIphone && useIscroll;

    ellipsis.init();

    if ($('.good-detail-text .name').length > 0) {
        $('.good-detail-text .name').each(function() {
            $this = $(this);
            $title = $this.find('a');

            $title[0].mlellipsis(2);
        });
    }
    lazyLoad($('.lazy'));

    // title mlellipsis
    $('.info-list .title, .one-good .reco-name').each(function() {
        this.mlellipsis(2);
    });

    // offset.left约等于marginLeft的值则表示介绍被换行，则清除intro的paddingTop让其更靠近头像和作者名
    if ($authorIntro.offset() && (parseInt($authorIntro.offset().left, 10) ===
            parseInt($authorIntro.css('margin-left'), 10))) {
        $authorIntro.css('padding-top', 0);
    }

    if (pageInIscroll) {
        if ($('.yoho-header').length > 0) {
            $('#wrapper').addClass('ios has-head');
        } else {
            $('#wrapper').addClass('ios');
        }
    }

    if (isweixin) {
        if (isIphone) {
            $overlay.css('position', 'relative');
        } else {
            $overlay.css('position', 'absolute');
        }
    }

    // 有搭配模块，iphone使用iscroll初始化滚动并有固定的搭配栏，其他的没有
    if (hasCollocationBlock) {
        $coBlock = $('.collocation-block');
        $thumbContainer = $coBlock.children('.thumb-container');
        $thumbs = $thumbContainer.find('li');
        $prods = $coBlock.find('.prod');

        thumbWidth = $thumbs.width();

        if (pageInIscroll) {
            $fixedThumbContainer = $('#wrapper')
                .after($thumbContainer.clone().addClass('fixed-thumb-container fixed-bottom'))
                .next('.thumb-container');

            // load img of fixed thumb container
            lazyLoad($fixedThumbContainer.find('.lazy'), {
                event: 'sporty'
            });
        }

        // Init Arrow Position
        posCollocationArrow($thumbs.filter('.focus'));

        $thumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);

        if (pageInIscroll) {
            $fixedThumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);

        }
    }

    if (pageInIscroll) {
        initIscroll();
    }

    $('#float-layer-close').on('touchend', function(index) {
        var appClose = window.cookie('_float-layer-app-close') || '0';

        // window.setCookie('_float-layer-app-close', 1);

        if (parseInt(appClose) === 0) {
            window.setCookie('_float-layer-app-close', 1);
        } else if (parseInt(appClose) === 1) {
            window.setCookie('_float-layer-app-close', 2);
        }

        $('#float-layer-app').hide();

        return false;
    });

    if ($('#float-layer-btn') && $('#float-layer-btn')[0]) {
        var floatLayerBtnHammer = new Hammer($('#float-layer-btn')[0]);
        floatLayerBtnHammer.on('tap', function(e) {
            window.location = 'http://www.yohoshow.com/about/index/yohobuyqr';
            e.srcEvent.stopPropagation();
        });

        if (typeof window.cookie === 'function' && parseInt(window.cookie('_float-layer-app-close')) != 2) {
            $('#float-layer-app').show();
        } else {
            $('#float-layer-app').hide();
        }
    }
}());