/**
 * 逛详情页
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2015/10/13
 */

var $ = require('jquery'),
        ellipsis = require('mlellipsis'),
        lazyLoad = require('yoho.lazyload'),
        IScroll = require('iscroll/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;

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

var winW = $(window).width();

var myScroll;

require('../plugin/wx-share')();

/**
 * 计算搭配的箭头的位置
 * @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();
};

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

    pageInIscroll = isIphone && useIscroll;

    ellipsis.init();

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

    //有搭配模块，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();
    }
};