/**
 * 类型3文章(Note: article-type-three在一个页面中只能出现一次（业务注意点），代码实现按照只有一个类型3实现)
 * @author: xuqi(qi.xu@yoho.cn)
 * @date；2015/3/30
 */
var $ = require('jquery'),
    IScroll = require('iscroll/iscroll-probe');
require('lazyload');

/**
 * 初始化$事件并默认选中列表第一项
 */
exports.init = function() {
    var container,
        thumbContainer,
        fixedThumbContainer,
        prodList,
        myscroll;

    $(function() {
        var isInit = true,
            scrollToEl = document.querySelector('#wrapper .article-type-three'),
            thumbs;

        container = $('.article-type-three');
        thumbContainer = container.find('.thumb-container');
        prodList = container.find('.prod-list');

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

        thumbs = $('.thumb');
        /**
         * 计算小箭头位置函数
         * @param index(类型为number,调用函数li的index)
         */
         arrowPosition = function (element,index) {
            //640为设计图尺寸，也就是font-size为40下的1rem，所以数值都参照640定
            var container = element,
                item = container.find('li'),
                len = item.size(), //获取一共多少li
                midNum = Math.ceil(len / 2),  //获取中间li的index+1
                documentFont = parseInt($("html").css("fontSize")),  //获取html的font-size
                itemMarginRight = parseInt(item.css('marginRight'))/ documentFont * 40,  //获取li的margin-right在640下数值
                itemWidth = item.width() / documentFont * 40, //获取li的widtht在640下数值
                surPlusValue = (parseInt(container.css('padding-left'))/ documentFont * 40 - itemMarginRight)/2, //获取container的padding-left与itemMarginRight相减后除以2在640下数值
                backgroundLeft;  //container背景图片左偏移的位置

                /**
                 * 320为640分辨率下中间值
                 * index-midNum为偏移中间li的数值
                 * (index - midNum) * (itemWidth + itemMarginRight)当前li偏移中间li的距离
                 * - surPlusValue 减去container的padding与li的margin-right差值的一半
                 *  除以40，由640下的px变为rem
                 */
                backgroundLeft = -(320 - (index - midNum) * (itemWidth + itemMarginRight) - surPlusValue)/40 + 'rem'; 
                container.css({"backgroundPosition":backgroundLeft + " bottom"});
        };

        /**
         * 分类的点击事件句柄
         */
        function thumbClickEvt(e) {
            var that = $(e.currentTarget),
                index = that.index(),
                other;

            if (that.closest('.fixed-thumb-container').length > 0) {
                other = thumbContainer.find('.thumb:eq(' + index + ')');
            } else {
                other = fixedThumbContainer.find('.thumb:eq(' + index + ')');
            }

            //set status of that & other synchronous
            thumbs.find('.thumb').removeClass('focus');

            that.addClass('focus');
            other.addClass('focus');

            arrowPosition(thumbContainer, index + 1);
            arrowPosition(fixedThumbContainer, index + 1);

            prodList.find('.prod')
                .addClass('hide')
                .eq(index)
                .removeClass('hide');

            //图片懒加载
            $("img.lazy").lazyload({
                placeholder     : "data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="
            });

            if (!isInit) {
                if (myscroll) {
                    myscroll.scrollToElement(scrollToEl, 400);
                }
            } else {
                isInit = false;
            }
        }
        //点击分类，显示分类下推荐商品列表
        thumbs.click(thumbClickEvt);
        //默认选中第一个
        thumbContainer.find('.thumb:first-child').click();
    });

    window.onload = function() {
        var tContainerH = thumbContainer.outerHeight(), //thumber-container高度
            containerH = container.height(), //article-type-three高度
            containerTop = container.offset().top, //article-type-three offset top
            wH = $(window).height();

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

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

        /**
         * scroll前重置container状态
         */
        function resetStatus() {
            fixedThumbContainer.removeClass('fixed-top fixed-bottom absolute hide').css('top', '');
        }

        myscroll.on('scroll', function() {
            var sTop = -this.y;

            resetStatus();

            if (sTop <= containerTop - wH + tContainerH) {
                fixedThumbContainer
                    .addClass('fixed-bottom');
            } else if (sTop <= containerTop) {
                fixedThumbContainer
                    .addClass('hide');
            } else if (sTop <= containerTop + containerH - tContainerH) {
                fixedThumbContainer
                    .addClass('fixed-top');
            } else if (sTop <= containerTop + containerH) {
                fixedThumbContainer
                    .addClass('absolute')
                    .css({
                        top: containerTop + containerH - tContainerH - sTop
                    });
            } else if (sTop > containerTop + containerH) {
                fixedThumbContainer
                    .addClass('hide');
            }
        });
    };
};