;(function($, jQuery) {
	const appendWrap = $('#newArrivalWrapper')
    let ajaxLock = false;
    let scrollType = 'first';
    let scrollNow = 0;
    let prodMall = $('#mallID').val();
    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
            },
        }).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'
        }).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')


})($, jQuery)