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

var $ = require('yoho.zepto'),
    ellipsis = require('mlellipsis'),
    lazyLoad = require('yoho.zeptolazyload'),
    IScroll = require('iscroll/iscroll-probe');

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

var isIphone = navigator.userAgent.indexOf('iPhone') > 0 ? true : 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;

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

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

    if (isIphone) {
        $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 (isIphone) {
        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 (isIphone) {
        if (myScroll) {
            myScroll.scrollToElement(scrollToEl, 400);
        }
    } else {
        $('body').animate({
            scrollTop: $coBlock.offset().top
        }, 400);
    }
}

if (isIphone) {
    $('#wrapper').addClass('ios');
}

ellipsis.init();

lazyLoad($('.lazy'));

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

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

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

    thumbWidth = $thumbs.width();

    if (isIphone) {
        $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 (isIphone) {
        $fixedThumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);
    }
}

// 初始化iscroll
window.onload = function() {
    var $scroller = $('#scroller');

    var winH, tcH, cbH, cbTop, fixedThumbDom;

    if (!isIphone) {
        return;
    }

    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();
    fixedThumbDom = $fixedThumbContainer[0];

    tcH = $thumbContainer.height();
    cbH = $coBlock.height();
    cbTop = $coBlock.offset().top;

    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 + cbH - tcH - sTop + 'px';
        } else if (sTop > cbTop + cbH) {
            if (classList.indexOf('hide') === -1) {
                $fixedThumbContainer
                    .addClass('hide')
                    .removeClass('absolute');
            }
        }
        $scroller.trigger('scroll');
    });
};