/**
 * 搭配区块
 *
 * @constructor
 */
function CollocationBlock() {
    this.elem = $('.collocation-block');
    this.container = this.elem.children('.thumb-container');
    this.elem.find('.prod');
    this.prods = this.elem.find('.prod');

    // this.fixedContainer = $('#wrapper')
    //    .after(this.container.clone().addClass('fixed-thumb-container fixed-bottom'))
    //    .next('.thumb-container');

    // lazyLoad(this.fixedContainer.find('.lazy'));

    this.container.delegate('.thumb', 'touchend', this._touchHandler.bind(this));

    // this.fixedContainer.delegate('.thumb', 'touchend', this._touchHandler.bind(this));

    this.thumbs = this.container.find('li');

    // this.fixedThumbs = this.fixedContainer.find('li');

    // 初始化箭头位置
    this._updateCollocationArrowPos(this.thumbs.filter('.focus'));

    // let scrollFn = () => {
    //     let pos = this.container.offset(),
    //         posFixed = this.fixedContainer.offset();
    //     let visible = false;


    //     if (posFixed.top >= pos.top) {
    //         visible = false;
    //     } else {
    //         visible = true;
    //     }

    //     if (posFixed.top + this.fixedContainer.height() > $('ul.brand-list').offset().top) {
    //         visible = false;
    //     } else if (pos.top < $(window).scrollTop()) {
    //         visible = true;
    //         this.fixedContainer.removeClass('fixed-bottom').addClass('fixed-top');
    //     } else {
    //         this.fixedContainer.removeClass('fixed-top').addClass('fixed-bottom');
    //     }

    //     this.fixedContainer.css({
    //         visibility: visible ? 'visible' : 'hidden'
    //     });
    // };

    // $(document).on('scroll', scrollFn);
    // $(document).on('touchmove', scrollFn);

}

CollocationBlock.exists = function() {
    return $('.collocation-block').size() > 0;
};

$.extend(CollocationBlock.prototype, {
    /**
     * 计算搭配的箭头的位置
     * @param current 当前focus的搭配项
     */
    _updateCollocationArrowPos: function(current) {
        let left = current.offset().left,
            bgPos = -$(window).width() + left + (this.thumbs.width() / 2) + 'px';

        this.container.css({
            backgroundPosition: bgPos + ' bottom'
        });

        /*
         this.fixedContainer.css({
         backgroundPosition: bgPos + ' bottom'
         });
         */
    },

    /**
     * 搭配thumb的touch事件句柄
     *
     * @param e
     * @private
     */
    _touchHandler: function(e) {
        let current = $(e.currentTarget),
            index = current.index();

        if (current.hasClass('focus')) {
            return;
        }

        this.thumbs.removeClass('focus');

        // this.fixedThumbs.removeClass('focus');

        current.addClass('focus');

        // 更新箭头位置
        this._updateCollocationArrowPos(current);

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

        $('body').animate({
            scrollTop: this.elem.offset().top
        }, 400);
    }
});


module.exports = CollocationBlock;