Cacher is the code snippet organizer for pro developers

(function ($, _, util) {

    window.issue286 = {

        start: function (abType) {

            var that = this;
            var topImages = util.getviTopImages(window);

            // AB-2以外の場合で画像が少ない場合離脱（現状ママ）
            if (abType !== 2 && topImages.few_imgs_flag) {
                return false;
            }

            if (topImages && topImages.imgs) {
                // カルーセル用DOM生成
                that.buildCarouselDom(topImages, abType);

                // vw非対応端末の看板画像幅を100%に
                $('.top-carousel__item--wide').width(window.innerWidth);

                // AB-2以外の場合カルーセル化
                if (abType !== 2) {
                    var valAutoplay      = true;
                    var valAutoplaySpeed = 5000;
                    var valInfinite      = true;
                    var valSpeed         = 300;
                    var valDots          = true;
                    var valDotsClass     = 'top-carousel__indicators';
                    var valLazyLoad      = 'progressive';

                    if (abType === 1) {
                        // プラグインの設定
                        $(function() {
                            $('.js-top-carousel').slick({
                                autoplay: valAutoplay,
                                autoplaySpeed: valAutoplaySpeed,
                                infinite: valInfinite,
                                speed: valSpeed,
                                centerMode: true,
                                variableWidth: true,
                                dots: valDots,
                                dotsClass: valDotsClass,
                                lazyLoad: valLazyLoad,
                                prevArrow: '<span class="top-carousel__arrow top-carousel__arrow--prev js-top-carousel__arrow-prev"></span>',
                                nextArrow: '<span class="top-carousel__arrow top-carousel__arrow--next js-top-carousel__arrow-next"></span>',
                            });

                            $('.js-top-carousel').on('beforeChange', function(event, slick){
                                $('.top-carousel__item').removeClass('slick-current');
                            });
                        });
                    } else if (abType === 3) {
                        // プラグインの設定
                        $(function() {
                            $('.js-top-carousel').slick({
                                autoplay: valAutoplay,
                                autoplaySpeed: valAutoplaySpeed,
                                infinite: valInfinite,
                                speed: valSpeed,
                                dots: valDots,
                                dotsClass: valDotsClass,
                                lazyLoad: valLazyLoad,
                                arrows: false,
                            });
                        });

                        // slickのスワイプ可能エリアにDOMを移動
                        $('.js-top-carousel').on('init', function(event, slick){
                            $('.js-top-carousel__body').appendTo('.slick-list');
                        });
                    }
                }

                // バリエーション1以外は店名を移動
                if (abType !== 1) {
                    that.moveShopname();
                }
            }
        },

        moveShopname: function () {
            var $info = $('.topHeader__footer').children();

            $('.topHeader__body').find('h1').remove();
            $('.topHeader__body').append($info);
            $('.topHeader__footer').remove();
        },

        buildCarouselDom: function (topImages, abType) {

            var imgs = _.clone(topImages.imgs);

            // AB-1以外の場合既存のもっと見るボタンを除去
            if (abType !== 1) {
                $('#js-sptop-carousel').next().remove();
            }

            // list部分のHTML生成
            var listHtml = '';
            _.forEach(imgs, function (item, index) {
                var wideFlag = abType !== 1;

                if (!wideFlag && topImages.billboard_vol_type > 0 && !index) {
                    wideFlag = true;
                }

                listHtml += '<div class="top-carousel__item' + (wideFlag ? ' top-carousel__item--wide' : '') + '">' +
                    '<div class="top-carousel__img"><img src="' + item + '"></div>' +
                    '<div class="top-carousel__background" style="background-image: url(' + item + ')"></div>' +
                    '</div>';

                if (abType === 2) {
                    return false;
                }
            });

            // オーバーレイのHTML生成
            var OVERLAY_HTML = '' +
                '<div class="top-carousel__body js-top-carousel__body">' +
                '<p class="top-carousel__title">' + $('h1').text() + '</p>' +
                '<a href="./photo/?detail=0&cate=all" class="top-carousel__more-btn">写真を見る</a>' +
                '</div>'
            ;

            // 既存TOPをAB用DOMに置換
            $('#js-sptop-carousel').after(
                '<div class="top-carousel ' + (abType === 1 ? ' top-carousel--type-1' : '') + (abType === 2 ? ' top-carousel--type-2' : '') + (abType === 3 ? ' top-carousel--type-3' : '') + '">' +
                '<div class="js-top-carousel">' + listHtml + '</div>' +
                ((abType === 1) ? '' : OVERLAY_HTML) +
                '</div>'
            ).remove();
        }
    }

    // TODO: 納品前に削除
    var pattern = location.href.match(/pattern=(.)/)[1];
    issue286.start(parseInt(pattern, 10) || null);

})(jQuery, _, util);