document.addEventListener("DOMContentLoaded", () => {


    const track = document.querySelector(".uline-track");
    const slides = Array.from(document.querySelectorAll(".uline-slide"));
    const prevBtn = document.querySelector(".uline-arrow.prev");
    const nextBtn = document.querySelector(".uline-arrow.next");


    let index = 2;   // óÀ½¿¡´Â 3¹ø°(Áß¾Ó) ½½¶óÀ̵尡 ¼¾ÅÍ
    let slideWidth = 340; // 300px + gap 40px


    /* ¹«ÇÑ·çÇÁ¿ë ¾ç ³¡ º¹Á¦ */
    function cloneSlides() {
        const prependSlides = slides.slice(-2).map(s => s.cloneNode(true));
        const appendSlides = slides.slice(0, 2).map(s => s.cloneNode(true));


        prependSlides.forEach(s => track.prepend(s));
        appendSlides.forEach(s => track.appendChild(s));
    }


    cloneSlides();


    let allSlides = document.querySelectorAll(".uline-slide");


    /* À§Ä¡ ÃʱâÈ­ */
    function setPosition() {
        track.style.transform = `translateX(${-index * slideWidth}px)`;
        updateClasses();
    }


    /* Ŭ·¡½º ¾÷µ¥ÀÌÆ® */
    function updateClasses() {
        allSlides.forEach(s => s.className = "uline-slide");


        allSlides[index].classList.add("center");
        allSlides[index - 1].classList.add("side");
        allSlides[index + 1].classList.add("side");
        allSlides[index - 2].classList.add("edge");
        allSlides[index + 2].classList.add("edge");
    }


    /* È­»ìÇ¥ À̵¿ */
    function moveNext() {
        index++;
        if (index >= allSlides.length - 2) {
            index = 2;
            track.style.transition = "none";
            setPosition();
            setTimeout(() => track.style.transition = "0.5s ease", 20);
        }
        setPosition();
    }


    function movePrev() {
        index--;
        if (index <= 1) {
            index = allSlides.length - 4;
            track.style.transition = "none";
            setPosition();
            setTimeout(() => track.style.transition = "0.5s ease", 20);
        }
        setPosition();
    }


    nextBtn.addEventListener("click", moveNext);
    prevBtn.addEventListener("click", movePrev);


    /* µå·¡±× ±â´É */
    let startX = 0;
    let isDown = false;


    track.addEventListener("mousedown", (e) => {
        isDown = true;
        startX = e.clientX;
    });


    window.addEventListener("mouseup", (e) => {
        if (!isDown) return;
        isDown = false;


        let diff = e.clientX - startX;
        if (diff < -50) moveNext();
        else if (diff > 50) movePrev();
    });


    /* Ãʱ⠽ÇÇà */
    setPosition();


});