Untitled

document.addEventListener('DOMContentLoaded', function() {
    const nonFeaturedImageWidth = 200;
    const featuredImageWidth = 400;
    const imageSpacing = 20;

    const carouselImages = document.querySelectorAll('.carousel-images img');
    const carouselContainer = document.querySelector('.carousel-container');
    const rect = carouselContainer.getBoundingClientRect();
    const carouselCenter = rect.left + (rect.width / 2);

    let beforeFeatured = []
    let afterFeatured = []
    let toBeFeatured;
    let featuredImage;

    let autoCycle;

    function initializeCarousel() {
        let allImages = Array.from(carouselImages);

        if (allImages.length >= 7) {
            beforeFeatured = allImages.slice(0, 3);
            featuredImage = allImages[3];
            afterFeatured = allImages.slice(4);
        } else {
            alert("Not enough images in carousel! 7 needed current amount is: " + allImages.length);
            return;
        }
        
        document.querySelector('.carousel-next').addEventListener('click', next);
        document.querySelector('.carousel-prev').addEventListener('click', prev);
        featuredImage.add('middle');
    }

    function moveCarousel() {

        alert("update")
        images.forEach((img, index) => {
            img.classList.remove('middle');
            let offset = -(index * (nonFeaturedImageWidth + imageSpacing));
            img.style.transform = `translateX(${offset}px)`;
        });

        resetAutoCycle();
    }
    
    function next() {
        alert('next')
        //shift returns first element || push adds to end
        afterFeatured.push(beforeFeatured.shift());
        beforeFeatured.push(featuredImage);
        toBeFeatured = afterFeatured.shift();
        
        featuredImage.classList.remove('middle');
        toBeFeatured.classList.add('middle');
        featuredImage = toBeFeatured;

        moveCarousel();
    }

    function prev() {
        alert('prev')
        //pop returns last element || unshift adds to beginning
        beforeFeatured.unshift(afterFeatured.pop());
        afterFeatured.unshift(featuredImage);
        toBeFeatured = beforeFeatured.pop();
        
        featuredImage.classList.remove('middle');
        toBeFeatured.classList.add('middle');
        featuredImage = toBeFeatured;
        moveCarousel();
    }

    function resetAutoCycle() {
        clearInterval(autoCycle);
        autoCycle = setInterval(next, 3000); // Change image every 3 seconds
    }

    initializeCarousel();
});


/*document.addEventListener('DOMContentLoaded', function() {
    const images = document.querySelectorAll('.carousel-images img');
    const totalImages = images.length;

    let beforeFeatured = [];
    let afterFeatured = [];
    let featuredImage;

    function initializeCarousel() {
        updateCarousel();
        resetAutoCycle();
    }

    function updateCarousel() {
        carouselBefore.innerHTML = beforeList.map(img => `<img src="${img}" alt="Before Image">`).join('');
        carouselAfter.innerHTML = afterList.map(img => `<img src="${img}" alt="After Image">`).join('');
        carouselFeatured.src = featuredImage;
    }

    function resetAutoCycle() {
        clearInterval(autoCycle);
        autoCycle = setInterval(next, 3000); // Change image every 3 seconds
    }

    function next() {
        beforeList.push(featuredImage);
        afterList.push(beforeList.shift());
        featuredImage = afterList.shift();

        updateCarousel();
        resetAutoCycle();
    }

    function prev() {
        afterList.unshift(featuredImage);
        beforeList.unshift(afterList.pop());
        featuredImage = beforeList.pop();

        updateCarousel();
        resetAutoCycle();
    }

    document.querySelector('.carousel-next').addEventListener('click', next);
    document.querySelector('.carousel-prev').addEventListener('click', prev);

    initializeCarousel();
});*/