$(document).ready(function() {


  //SMOOTH SCROLL

  // Select all links with hashes
  $('a[href*="#"]')
    // Remove links that don't actually link to anything
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(event) {
      // On-page links
      if (
        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
        &&
        location.hostname == this.hostname
      ) {
        // Figure out element to scroll to
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        // Does a scroll target exist?
        if (target.length) {
          // Only prevent default if animation is actually gonna happen
          event.preventDefault();
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 500, function() {
            // Callback after animation
            // Must change focus!
            var $target = $(target);
            $target.focus();
            if ($target.is(":focus")) { // Checking if the target was focused
              return false;
            } else {
              $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
              $target.focus(); // Set focus again
            };
          });
        }
      }
    }) ;

  //MODAL AFFICHE FESTIVAL

  // Get the modal
  var modal = document.getElementById("affiche-modal-festival");

  // Get the image and insert it inside the modal - use its "alt" text as a caption
  var img = document.getElementById("affiche-festival");
  var modalImg = document.getElementById("affiche-festival-modal");
  img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
  }

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }

  window.addEventListener('keydown', function(event) {
    if (event.key=="Escape") {
      modal.style.display = "none";
    }
  })

  //MODAL AFFICHE PARRAIN

  // Get the modal
  var modal = document.getElementById("affiche-modal-parrain");

  // Get the image and insert it inside the modal - use its "alt" text as a caption
  var img = document.getElementById("affiche-parrain-2024");
  var modalImg = document.getElementById("affiche-parrain-modal");
  img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
  }

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }

  window.addEventListener('keydown', function(event) {
    if (event.key=="Escape") {
      modal.style.display = "none";
    }
  })

  // MODAL SELECTION

  // Get the modal
  var modalSelection = document.getElementById("myModal");

  // When the user clicks anywhere outside of the modal, close it
  // window.onclick = function(event) {
  //   if (event.target == modalSelection) {
  //     modalSelection.style.display = "none";
  //   }
  // }
  window.addEventListener('keydown', function(event) {
    if (event.key=="Escape") {
      modalSelection.style.display = "none";
    }
  })

  window.addEventListener('keydown', function(event) {
     if (event.key=="ArrowLeft") {
      showSlides(slideIndex-=1);
    }
  })
  window.addEventListener('keydown', function(event) {
    if (event.key=="ArrowRight") {
     showSlides(slideIndex+=1);
   }
  })



  });


  // MODAL SELECTION

  // Get the modal
  var modalSelection = document.getElementById("myModal");


  // Open the Modal
  function openModal() {
    document.getElementById("myModal").style.display = "block";
  }

  // Close modal when clicking on (x)
  var span = document.getElementsByClassName("modal-selection-close")[0];

  span.onclick = function() {
    modalSelection.style.display = "none";
  }

  // Close the Modal
  function closeModal() {
    document.getElementById("myModal").style.display = "none";
  }

  var slideIndex = 1;
  showSlides(slideIndex);

  // Next/previous controls
  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

  function currentSlide(n) {
    showSlides(slideIndex = n);
  }

  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }

    slides[slideIndex-1].style.display = "flex";
  }


  // MOBILE MENU

  var closemenu = document.getElementById("closemenu");

  var menulink1 = document.getElementById("menulink1");
  var menulink2 = document.getElementById("menulink2");
  var menulink3 = document.getElementById("menulink3");
  var menulink3 = document.getElementById("menulink4");





  menulink1.addEventListener("click", closem);
  menulink2.addEventListener("click", closem);
  menulink3.addEventListener("click", closem);
  menulink4.addEventListener("click", closem);






  function closem () {
    closemenu.checked=false;
  }


  // UNDERLINE MENU

  var sections = document.querySelectorAll("div.grid-item");
  console.log(sections)

  var navLi = document.querySelectorAll("#web-menu #menu ul li");
  console.log(navLi)

  window.onscroll = () => {
    var current = "";

    sections.forEach((section) => {
      const sectionTop = section.offsetTop;
      if (scrollY >= sectionTop - 400) {
        current = section.getAttribute("data-section"); }
    });
    console.log(current)

    navLi.forEach((li) => {
      li.classList.remove("active");
      if (li.classList.contains(current)) {
        li.classList.add("active");
      }
    });
  };