;(function($, jQuery) {
	const appendWrap = $('#newArrivalWrapper')
    let ajaxLock = false;
    let scrollType = 'first';
    let scrollNow = 0;
    let prodMall = $('#mallID').val();
    let index = 0;
    const loadingBox = `
        <div class="loading-box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    `;

    var nowId = $('#newArricalNow').val();
    ajaxLoading(nowId);

    function ajaxLoading(id) {
        ajaxLock = true
        if(scrollType === 'next') {
            appendWrap.append(loadingBox)
        } else if(scrollType === 'prev') {
            appendWrap.prepend(loadingBox)
        }

        jQuery.ajax(
        {
            async: true,
            url: '/lookbook/ajax/ajax_get_lookbook.php',
            type: 'POST',
            dataType: 'json',
            data: {
                id: id,
                prodMall: prodMall,
                index:index
            },
        }).done(function(res) {
            appendWrap.children('.loading-box').remove()
            if(scrollType === 'next' || scrollType === 'first') {
                appendWrap.append(res.content)
            } else if(scrollType === 'prev') {
                appendWrap.prepend(res.content)
                $(window).scrollTop(appendWrap.offset().top + $(appendWrap.children()[0]).height())
            }

            if(scrollType === 'first'){
                appendWrap.attr('data-next', res['next']);
                appendWrap.attr('data-prev', res['prev']);
            }

            appendWrap.attr(`data-${scrollType}`, res[scrollType]);
            scrollType = 'next'

            if($("#appendBox" + index).find(".stickybtn-wrapper").length > 0){
                let lookbookBox = $("#appendBox" + index),
                    stickyBtn = lookbookBox.find(".stickybtn-btn"),
                    stickyBox = lookbookBox.find(".stickybtn-box")

                if(stickyBtn.length > 0){
                    //紀錄定位點
                    let btnBounding = stickyBtn[0].getBoundingClientRect()
                    stickyBtn.removeClass("theme-sticky theme-init")

                    $(window).on("scroll", function(){
                        let offsetTop = stickyBox.offset().top,
                            boxTop = stickyBox[0].getBoundingClientRect().top,
                            btnHeight = stickyBtn.height(),
                            lookbookBottom = lookbookBox[0].getBoundingClientRect().bottom
                        if(boxTop > btnBounding.top){
                            stickyBtn.removeClass("theme-sticky")
                        }else{
                            stickyBtn.addClass("theme-sticky")
                        }

                        if(btnBounding.bottom >= (lookbookBottom - 40)){
                            stickyBtn.css("top",lookbookBottom - btnHeight - 40)
                        }else if($(window).height() - btnBounding.bottom > 40){
                            stickyBtn.css("top","")
                        }
                    })
                }
            }

            if($(".rosetta-products.theme-carousel").length > 0){
                $(".rosetta-products.theme-carousel").owlCarousel({
                    nav : true,
                    responsive:{
                        0:{
                            items : 2,
                            margin:16,
                            stagePadding: 30
                        },
                        768:{
                            items : 4,
                            margin:16,
                        },
                    }
                })
            }
            //圖文模組 輪播
            let kolCarousel = $(".full-carousel-wrapper .swiper-container:not(.swiper-container-initialized)")
            if(kolCarousel.length > 0){
                kolCarousel.each(function(){
                    let _this = $(this)
                    if(_this.find('.swiper-slide').length > 1){
                        let swiperH = new Swiper(_this, {
                            spaceBetween: 0,
                            slidesPerView:1,
                            pagination: {
                                el: '.swiper-pagination',
                                clickable: true,
                            },
                            loop: true,
                            autoplay: false,
                        });
                    }
                })
            }
            index++
        }).fail(function(x, y, z) {
            console.log(x)
        }).always(function() {
            ajaxLock = false
        })
    }

    $(window).on('scroll', function(e) {
        if($(this).scrollTop() >= scrollNow) {
            if(scrollType != 'first'){
                scrollType = 'next'
            }
        } else {
            scrollType = 'prev'
        }
        scrollNow = $(this).scrollTop()

		const targetTop = appendWrap.offset().top
        const targetNext = appendWrap.attr('data-next');
        const targetPrev = appendWrap.attr('data-prev');

        if(!ajaxLock) {
            if(scrollType === 'prev' && scrollNow < targetTop && targetPrev) {
                ajaxLoading(targetPrev)
            } else if(scrollType === 'next' && scrollNow + $(window).height() >= targetTop + appendWrap.height() && targetNext){
                ajaxLoading(targetNext)
            }
        }
    }).trigger('scroll')

    //替換網址
	$(window).on('scroll', throttle(function(event) {
        let windowCenter = $(window).height() / 2
        $('.appendBox').each(function(){
            let _this = $(this),
                link = _this.data('link'),
                eleRect = _this[0].getBoundingClientRect()

            if(eleRect.top <= windowCenter && eleRect.bottom >= windowCenter){
                history.replaceState({},'', window.location.origin + link)
                gtag("event","page_view")
            }
        })
	},100));


})($, jQuery)