let toggle = document.querySelector('.toggle');
let body = document.querySelector('body');

toggle.addEventListener('click', function() {
  body.classList.toggle('open'); 
});

let img_slider = document.getElementsByClassName("img_slider");

let etape = 0; 

let nbr_img = img_slider.length; 

let precedent = document.querySelector(".precedent");
let suivant = document.querySelector(".suivant");

let points = document.querySelectorAll(".point");

function enleverActiveImages() {
  for(let i = 0; i < nbr_img; i++) {
    img_slider[i].classList.remove("active");
  }
  changePoint();
}

function changePoint() {
  for(let i = 0; i < points.length; i++) {
    points[i].classList.remove("active");
  }
  points[etape].classList.add("active");
}

suivant.addEventListener('click', function() {
  etape++; 
  if (etape >= nbr_img) {
    etape = 0; 
  }
  enleverActiveImages(); 
  img_slider[etape].classList.add("active"); 
});

precedent.addEventListener('click', function() {
  etape--; 
  if (etape < 0) {
    etape = nbr_img - 1; 
  }
  enleverActiveImages(); 
  img_slider[etape].classList.add('active'); 
});

// setInterval(function() {
//   etape++; 
//   if (etape >= nbr_img) {
//     etape = 0; 
//   }
//   enleverActiveImages(); 
//   img_slider[etape].classList.add("active"); 
// }, 10000);

// add event listener to each point
points.forEach(function(point, index) {
  point.addEventListener("click", function() {
    etape = index;
    enleverActiveImages();
    img_slider[etape].classList.add("active");
  });
});