document.addEventListener('DOMContentLoaded', function () {
    let containers = document.querySelectorAll('.review-carousel');
    containers.forEach(function (slider) {
        let slides = slider.querySelectorAll('.review-carousel-slide');

        function show(target) {
            if (slider.current !== undefined) {
                slider.current.classList.remove('fade-in');
                slider.current.classList.add('fade-out');
            }
            target.classList.remove('fade-out');
            target.classList.add('fade-in');
            slider.current = target;
        }

        function nextSlide(slide) {
            let next = slide.querySelectorAll('.next')[0];
            if (! next) {
                return;
            }

            return document.getElementById(next.hash.substring(1));
        }

        function previousSlide(slide) {
            let prev = slide.querySelectorAll('.prev')[0];
            if (! prev) {
                return;
            }

            return document.getElementById(prev.hash.substring(1));
        }

        slides.forEach(function (slide) {
            let next = slide.querySelectorAll('.next')[0];
            let prev = slide.querySelectorAll('.prev')[0];
            next.addEventListener('click', function (e) {
                e.preventDefault();
                let target = document.getElementById(next.hash.substring(1));
                show(target);
            });
            prev.addEventListener('click', function (e) {
                e.preventDefault();
                let target = document.getElementById(prev.hash.substring(1));
                show(target);
            });
        });

        let touchStartX = 0;
        let touchEndX = 0;

        slider.addEventListener('touchstart', function (e) {
            touchStartX = e.changedTouches[0].screenX;
        });

        slider.addEventListener('touchend', function (e) {
            touchEndX = e.changedTouches[0].screenX;
            swipe();
        });

        function swipe() {
            let xThreshold = 50;

            if ((touchEndX + xThreshold) < touchStartX) {
                let next = nextSlide(slider.current);
                if (next) {
                    show(next);
                }

                return;
            }

            if ((touchEndX - xThreshold) > touchStartX) {
                let prev = previousSlide(slider.current);
                if (prev) {
                    show(prev);
                }

                return;
            }
        }


        show(slides[0]);
    });
});