let iSlides = 1;
let slideOn = true;     //Indique si le slider est en marche (true) ou sur pause (false)
let sliderFunction = null;

function changeSlide(number) {
    const $slide1 = $("#slide1");
    const $slide2 = $("#slide2");
    const $slide3 = $("#slide3");
    const $slide4 = $("#slide4");
    switch (number) {
        case 1 :
            $slide1.css("display", "contents");
            $slide2.css("display", "none");
            $slide3.css("display", "none");
            $slide4.css("display", "none");
            break;
        case 2 :
            $slide1.css("display", "none");
            $slide2.css("display", "contents");
            $slide3.css("display", "none");
            $slide4.css("display", "none");
            break;
        case 3 :
            $slide1.css("display", "none");
            $slide2.css("display", "none");
            $slide3.css("display", "contents");
            $slide4.css("display", "none");
            break;
        case 4 :
            $slide1.css("display", "none");
            $slide2.css("display", "none");
            $slide3.css("display", "none");
            $slide4.css("display", "contents");
            break;
    }
}
sliderFunction = window.setInterval(function(){
    iSlides++;
    if(iSlides < 1) {
        iSlides = 4;
    }
    if(iSlides > 4){
        iSlides = 1;
    }
    changeSlide(iSlides);
},5000);

$(".fa-chevron-circle-left").on("click", function(){
    iSlides--;
    if(iSlides < 1){iSlides = 4;}
    if(iSlides > 4){iSlides = 1;}
    changeSlide(iSlides);
});

$(".fa-chevron-circle-right").on("click", function(){
    iSlides++;
    if(iSlides < 1) {
        iSlides = 4;
    }
    if(iSlides > 4){
        iSlides = 1;
    }
    changeSlide(iSlides);
});

$(document).on("keydown",function(event) {
    if(event.key === "ArrowLeft") {                // If the user press "arrow left"
        iSlides--;
        if(iSlides < 1){iSlides = 4;}
        if(iSlides > 4){iSlides = 1;}
        changeSlide(iSlides);
        console.log("left");
    }else if (event.key === "ArrowRight") {         // If the user press "arrow right"
        iSlides++;
        if(iSlides < 1){iSlides = 4;}
        if(iSlides > 4){iSlides = 1;}
        changeSlide(iSlides);
        console.log("right");
    }
});



$("#playPause").on("click",function() {
    if(slideOn) {
        clearInterval(sliderFunction);
        $(".fa-pause").css("opacity","0");
        $(".fa-play").css("opacity","1");
        $(".fa-play").css("z-index","1");
        slideOn = false;
    }else {
        sliderFunction = window.setInterval(function(){
            iSlides++;
            if(iSlides < 1) {iSlides = 4};
            if(iSlides > 4){iSlides = 1;}
            changeSlide(iSlides);
            console.log(iSlides);
        },5000);
        $(".fa-pause").css("opacity","1");
        $(".fa-play").css("opacity","0");
        $(".fa-play").css("z-index","0");
        slideOn = true;
    }
});


$("#diaporama").on("mouseover",function(){
    if(slideOn){
        $(".fa-pause").css("opacity","1");
    }
});

$("#diaporama").on("mouseout",function(){
    $(".fa-pause").css("opacity","0");
});