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

/**
 * 初始化$事件并默认选中列表第一项
 */
exports.init = function() {
    $(function() {
        var container = $('.article-type-three'),
            thumbContainer = container.find('.thumb-container'),
            prodList = container.find('.prod-list'),
            wH = $(window).height(),
            isInit = true,
            tContainerH,
            containerH,
            containerTop;

        /**
         * 计算小箭头位置函数
         * @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"});
        };

        //点击分类，显示分类下推荐商品列表
        thumbContainer.delegate('.thumb', 'click', function() {
            var curItem,
                index;
            curItem = $(this);

            index = curItem.index();
            thumbContainer.find('.thumb').removeClass('focus')
            curItem.addClass('focus');
            arrowPosition(thumbContainer,index + 1);

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

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

            //scroll to top
            if (!isInit) {
                $('body').animate({
                    scrollTop: container.offset().top - (thumbContainer.hasClass('static') ? 0 : thumbContainer.outerHeight())
                }, 400);
            } else {
                isInit = false;
            }
        });

        //默认选中第一个
        thumbContainer.find('.thumb:first-child').click();
        
        tContainerH = thumbContainer.outerHeight(); //thumber-container高度
        containerH = container.height(); //article-type-three高度
        containerTop = container.offset().top; //article-type-three offset top

        //scroll时控制列表的位置
        $(document).scroll(function() {
            var sTop = $(this).scrollTop();

            //Tip: removeClass只用移除相邻状态即可
            if (sTop <= containerTop - wH + tContainerH) {
                thumbContainer
                    .addClass('fixed-bottom')
                    .removeClass('static');
                prodList.css({
                    'margin-top': tContainerH
                });
            } else if (sTop <= containerTop) {
                thumbContainer
                    .addClass('static')
                    .removeClass('fixed-bottom fixed-top')
                    .css('top' , '');
                prodList.removeAttr('style')
            } else if (sTop <= containerTop + containerH - tContainerH) {
                thumbContainer
                    .addClass('fixed-top')
                    .removeClass('static absolute')
                    .css('top' , '');
                prodList.css({
                    'margin-top': tContainerH
                });
            } else if (sTop <= containerTop + containerH) {
                thumbContainer
                    .addClass('absolute')
                    .removeClass('static fixed-top')
                    .css({
                        top: containerTop + containerH - tContainerH
                    });
                prodList.css({
                    'margin-top': tContainerH
                });
            } else if (sTop > containerTop + containerH) {
                thumbContainer
                    .addClass('static')
                    .removeClass('absolute')
                    .css('top' , '');
                prodList.removeAttr('style');
            }
        });

        //初始执行scroll从而初始化分类信息的位置（非0时默认会执行scroll）
        if ($(document).scrollTop() === 0) {
            $(document).scroll();
        }

    });
};