// State of the animation
let animationPaused = false;
// Dictionary to keep track of animation intervals
let animationIntervals = {};

document.getElementById('toggleAnimation').addEventListener('click', function() {
  const button = document.getElementById('toggleAnimation');

  if (animationPaused) {
    button.textContent = 'Pause';
    animationPaused = false;
    // Play the animation
    Object.keys(animationIntervals).forEach(id => {
      animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
    });
  } else {
    button.textContent = 'Play';
    animationPaused = true;
    // Pause the animation
    Object.keys(animationIntervals).forEach(id => {
      clearInterval(animationIntervals[id]);
    });
  }
});

// Dictionary to keep track of delay count for each animation
let delays = {};
// Dictionary to keep track of frame for each animation
let frames = {};
// dictionary to keep track of frame count for each animation
let frameCounts = {};


function animate(id, delay) {

  // get the container and frames for the amination
  const container = document.getElementById(id);
  const framesList = container.children;

  // set up the frame counter
  frameCounts[id] = 0;

  // hide all frames except for the first
  framesList[0].style.display = "flex";
  for (let i = 1; i < framesList.length; i++) {
    framesList[i].style.display = "none";
  }

  // Stock frames and delay in dictionaries
  frames[id] = framesList;
  delays[id] = delay;

  // start the animation
  animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
}

function updateAnimation(id, framesList, totalFrames) {

  // increment the frame counter for the given id
  frameCounts[id] = (frameCounts[id] + 1) % totalFrames;

  // show the next frame
  framesList[frameCounts[id]].style.display = "flex";

  // hide the previous frame
  if (frameCounts[id] === 0) {
    framesList[totalFrames - 1].style.display = "none";
  } else {
    framesList[frameCounts[id] - 1].style.display = "none";
  }
}

animate("illustration-accueil", 500);
animate("rennes", 1000);
animate("orsay", 2000);
animate("parterre", 1500);

document.addEventListener('DOMContentLoaded', function() {
  const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
  toggleableElements.forEach(function(element) {
    element.addEventListener('click', function() {
      toggleAnimation();
    });
  });
});

function toggleAnimation() {
  const toggleable = document.querySelector('.toggleable');
  const imgTopToggleable = document.querySelector('.img_top_toggleable');

  if (toggleable.style.display === 'none') {
    toggleable.style.display = 'block';
    imgTopToggleable.style.display = 'none';
  } else {
    toggleable.style.display = 'none';
    imgTopToggleable.style.display = 'block';
  }
}