class carousel {
    
    // PARAMETRES

    /* Slide de départ */ currentSlide = 1;
    /* Intervale de temps entre chaque slide (ms) */ interval = 2000;
    /* Amplitude du swipe (px) */ swipeRange = 150;
    /* Lecture automatique au chargement (on / *) */ autoPlay = "on";
    
    constructor() {
        this.initialization(); this.autoplay(); this.playPause(); this.clic_arrows(); this.clic_dots(); this.swipe();
    }

    // INITIALISATION
    slides = document.querySelectorAll('#carousel #slides_wrapper .slide'); // liste des slides
    dots = document.querySelectorAll('#carousel #carousel_bottom .dot_slide');  // liste des boutons
    slideInterval = setInterval(this.nextSlide.bind(this), this.interval);

    initialization() {
        this.currentSlide --;
        this.slides[this.currentSlide].className = 'slide showing';
        this.dots[this.currentSlide].className = 'dot_slide dot_showing';
    }
    
    autoplay() {
        if(this.autoPlay != "on") {
            window.addEventListener('load', event => {
            this.pauseSlideshow();
            });
        } else {
            this.playImg.style.display = "none";
        }
    }

    // METHODE POUR LES FLECHES DE DEFILEMENT ET DOTS

    goToSlide(n) {
        this.slides[this.currentSlide].className = 'slide';
        this.dots[this.currentSlide].className = 'dot_slide';
        this.currentSlide = (n + this.slides.length) % this.slides.length;
        this.slides[this.currentSlide].className = 'slide showing';
        this.dots[this.currentSlide].className = 'dot_slide dot_showing';
    }
    
    // FLECHES DE DEFILEMENT

    next = document.querySelector('#carousel #next');
    previous = document.querySelector('#carousel #previous');

    nextSlide() { // Clic flèche droite : slide suivante
    this.goToSlide(this.currentSlide + 1);
    }

    previousSlide() { // Clic flèche gauche : slide précédente
    this.goToSlide(this.currentSlide - 1);
    }

    clic_arrows() {
        this.next.addEventListener('click', event => {
            this.pauseSlideshow();
            this.nextSlide();
        });
        this.previous.addEventListener('click', event => {
            this.pauseSlideshow();
            this.previousSlide();
        });
    }

    // BOUTON PAUSE

    playing = true;
    pauseImg = document.querySelector('#carousel img#play_pause_pause');
    playImg = document.querySelector('#carousel img#play_pause_play');

    pauseSlideshow() {
        this.pauseImg.style.display = "none"; this.playImg.style.display = "block";
        this.playing = false;
        clearInterval(this.slideInterval);
    }

    playSlideshow() {
        this.playImg.style.display = "none"; this.pauseImg.style.display = "block";
        this.playing = true;
        this.slideInterval = setInterval(this.nextSlide.bind(this), this.interval);
    }

    playPause() {
        let play_pause = [this.pauseImg, this.playImg];
        play_pause.forEach( button => {
            button.addEventListener('click', event => {
                if (this.playing) { this.pauseSlideshow(); }
                else { this.playSlideshow(); }
            });
        });
    }

    // DOT <-> SLIDE CORRESPONDANTE
    
    clic_dots() {
        this.dots.forEach( (dot, index) => { // Clic bouton : slide correspondante
            dot.addEventListener('click', event => {
                this.goToSlide(index);
                this.pauseSlideshow();
            });
        })
    }

    // SWIPE (DRAG SOURIS ET SWIPE TACTILE)

    swipe() {
        let wrapper = document.querySelector("#carousel #slides_wrapper");
        let x_origin = NaN;
        let x_actual = NaN;
        wrapper.style.touchAction="none"; // bloque le touch terminal natif qui entrave le pointermove (non prioritaire).

        // démarrage
        wrapper.addEventListener('pointerdown', function (e) {
            x_origin = e.clientX;
            e.preventDefault(); // évite une sélection si on swipe sur du texte (casse le swipe)
        });
        // annulation
        let events = ['pointerup','pointerleave'];
        events.forEach( function(e) {
            wrapper.addEventListener(e, function() {
                x_origin = NaN;
            });
        });
        // mouvement
        wrapper.addEventListener('pointermove', e => {
            x_actual = e.clientX;
            if ((x_origin - x_actual) > this.swipeRange) {
                this.pauseSlideshow();
                this.nextSlide();
                x_origin = NaN;
                x_actual = NaN;
            }
            if ((x_origin - x_actual) < -this.swipeRange) {
                this.pauseSlideshow();
                this.previousSlide();
                x_origin = NaN;
                x_actual = NaN;
            }
        });
    }
}
const carouselLauching = new carousel;