document.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM fully loaded and parsed");
});

/*Slider*/
var photowrapper = document.querySelector(".js-photos");

var position = 1

var timer = setInterval(decaleGauche, 3000);

var maxPosition = photowrapper.children.length -1;

var minPosition = 0

function decaleGauche() {
    position++
    if (position >= maxPosition) {
        retourDebut()
    } else {
        photowrapper.style.left = position * -700 + 'px'
    }
    
}

function retourDebut() {
    position = 0 
    photowrapper.style.transition = '0s'
    photowrapper.style.left = position * -700 + 'px'
    setTimeout(function(){
        photowrapper.style.transition = 'left 0.3s ease'
        decaleGauche()
    },20)
}

function decaleDroite() {
    position--
    if (position <= minPosition) {
        retourFin()
    } else{
        photowrapper.style.left = position * -700 + 'px'
    }

}

function retourFin() {
    position = maxPosition
    photowrapper.style.transition = '0s'
    photowrapper.style.left = position * -700 + 'px'
    setTimeout(function(){
        photowrapper.style.transition = 'left 0.3s ease'
        decaleDroite()
    },20)
}
//setTimeout()

document.querySelector('.js-btn-decale-gauche').addEventListener('click', function(){
    decaleGauche()
})

document.querySelector('.js-btn-decale-droite').addEventListener('click', function(){
    decaleDroite()
})

