Untitled

document.addEventListener('DOMContentLoaded', function() {
    const carouselImages = document.querySelectorAll('.carousel-images img');
    const carouselContainer = document.querySelector('.carousel-container');
    const carouselRect = carouselContainer.getBoundingClientRect();
    const centerX = carouselRect.left + (carouselRect.width / 2);

    const nonFeaturedImageWidth = 200;
    const featuredImageWidth = 400;
    const imageSpacing = 20;


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

    let autoCycle;
    let direction = 0;

    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.classList.add('middle');
    }

    function moveCarousel() {
        //translate featured image
        let offset = direction * (imageSpacing + nonFeaturedImageWidth + (featuredImageWidth / 2));
        featuredImage.style.transform = `translateX(${offset}px)`;

        beforeFeatured.forEach((img, index) => {
            let offset = direction * (nonFeaturedImageWidth + imageSpacing);
            img.style.transform = `translateX(${offset}px)`;
        });

        afterFeatured.forEach((img, index) => {
            let offset = direction * (nonFeaturedImageWidth + imageSpacing);
            img.style.transform = `translateX(${offset}px)`;
        });
    }
    
    function 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;
        direction = -1;

        moveCarousel();
    }

    function 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;
        direction = 1;

        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();
});*/