$(window).on("load", function () {
    initCarousel('.slider-wrapper', '.slider-track', '.slider-prev', '.slider-next');
    initCarousel('.slider-wrapper2', '.slider-track2', '.slider-prev2', '.slider-next2');


    // 📌 ¸ð¹ÙÀÏ(480px ÀÌÇÏ)¿¡¼­¸¸ ÅÍÄ¡ ½º¿ÍÀÌÇÁ ±â´É È°¼ºÈ­
    if (window.innerWidth <= 480) {
        addTouchSwipe('.slider-track');
        addTouchSwipe('.slider-track2');


        // ¹öÆ° ¼û±â±â (¸ð¹ÙÀÏ¿¡¼­´Â ÇÊ¿ä ¾øÀ¸¹Ç·Î)
        $('.slider-prev, .slider-next, .slider-prev2, .slider-next2').hide();
    }
});


function initCarousel(wrapper, track, prevBtn, nextBtn) {
    let $slider = $(track);
    let $slides = $(track + " img");
    let slideCount = $slides.length;
    let slideWidth = $slides.outerWidth(true);
    let speed = 500;
    let autoSlide;
    let isAnimating = false;


    // À̹ÌÁö º¹Á¦ (¹«ÇÑ ·çÇÁ È¿°ú)
    $slides.clone().appendTo($slider);
    $slides.clone().prependTo($slider);


    // Ãʱâ À§Ä¡ ¼³Á¤
    $slider.css('left', -slideWidth * slideCount + 'px');


    function moveNext() {
        if (isAnimating) return;
        isAnimating = true;


        $slider.animate({ left: `-=${slideWidth}px` }, speed, "swing", function () {
            let currentLeft = parseInt($slider.css("left"), 10);
            if (currentLeft <= -slideWidth * (slideCount * 2)) {
                $slider.css('left', -slideWidth * slideCount + 'px');
            }
            isAnimating = false;
        });
    }


    function movePrev() {
        if (isAnimating) return;
        isAnimating = true;


        $slider.animate({ left: `+=${slideWidth}px` }, speed, "swing", function () {
            let currentLeft = parseInt($slider.css("left"), 10);
            if (currentLeft >= -slideWidth) {
                $slider.css('left', -slideWidth * slideCount * 2 + 'px');
            }
            isAnimating = false;
        });
    }


    // **ÀÚ¿¬½º·¯¿î ¹«ÇÑ ·çÇÁ ¾Ö´Ï¸ÞÀÌ¼Ç Ãß°¡**
    function smoothLoop() {
        if (isAnimating) return;
        isAnimating = true;


        $slider.animate({ left: `-=${slideWidth}px` }, speed, "swing", function () {
            let currentLeft = parseInt($slider.css("left"), 10);
            if (currentLeft <= -slideWidth * (slideCount * 2)) {
                $slider.css({ left: -slideWidth * slideCount + 'px' });
            }
            isAnimating = false;
        });
    }


    function startAutoSlide() {
        autoSlide = setInterval(smoothLoop, 3000); // 3Ãʸ¶´Ù À̵¿ (ÀÚ¿¬½º·´°Ô)
    }


    function stopAutoSlide() {
        clearInterval(autoSlide);
    }


    $(nextBtn).click(moveNext);
    $(prevBtn).click(movePrev);


    startAutoSlide();
    $(wrapper).hover(stopAutoSlide, startAutoSlide);
}


// &#128204; ¸ð¹ÙÀÏ(È­¸é ³Êºñ 480px ÀÌÇÏ)¿¡¼­ ÅÍÄ¡ ½º¿ÍÀÌÇÁ ±â´É Ãß°¡
function addTouchSwipe(track) {
    let touchStartX = 0;
    let touchEndX = 0;
    let slideWidth = $(track + " img").outerWidth(true);
    let isSwiping = false;


    $(track).on("touchstart", function (e) {
        touchStartX = e.originalEvent.touches[0].clientX;
        isSwiping = false;
    });


    $(track).on("touchmove", function (e) {
        touchEndX = e.originalEvent.touches[0].clientX;
        isSwiping = true;
    });


    $(track).on("touchend", function () {
        if (!isSwiping) return;


        let swipeDistance = touchStartX - touchEndX;
        let $slider = $(track);
        let slideCount = $(track + " img").length / 2;


        if (swipeDistance > 50) {
            // ¿ÞÂÊ ½º¿ÍÀÌÇÁ (´ÙÀ½ À̹ÌÁö)
            $slider.animate({ left: `-=${slideWidth}px` }, 500, function () {
                let currentLeft = parseInt($slider.css("left"), 10);
                if (currentLeft <= -slideWidth * (slideCount * 2)) {
                    $slider.css('left', -slideWidth * slideCount + 'px');
                }
            });
        } else if (swipeDistance < -50) {
            // ¿À¸¥ÂÊ ½º¿ÍÀÌÇÁ (ÀÌÀü À̹ÌÁö)
            $slider.animate({ left: `+=${slideWidth}px` }, 500, function () {
                let currentLeft = parseInt($slider.css("left"), 10);
                if (currentLeft >= -slideWidth) {
                    $slider.css('left', -slideWidth * slideCount * 2 + 'px');
                }
            });
        }
    });
}