// Checks if the user enabled prefers-reduced-motion
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Dictionary to keep track of animation intervals
let animationIntervals = {};
// 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 = {};

const illustrationAccueil = document.getElementById('illustration-accueil');
const rennes = document.getElementById('rennes');
const orsay = document.getElementById('orsay');
const parterre = document.getElementById('parterre');

// Update ARIA live attributes based on prefers-reduced-motion
function updateARIALiveAttributes() {
  if (prefersReducedMotion) {
    illustrationAccueil.setAttribute('aria-live', 'off');
    rennes.setAttribute('aria-live', 'off');
    orsay.setAttribute('aria-live', 'off');
    parterre.setAttribute('aria-live', 'off');
  } else {
    illustrationAccueil.setAttribute('aria-live', 'polite');
    rennes.setAttribute('aria-live', 'polite');
    orsay.setAttribute('aria-live', 'polite');
    parterre.setAttribute('aria-live', 'polite');
  }
}


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;

  // Update ARIA live attributes
  updateARIALiveAttributes();

  // Start the animation if prefers-reduced-motion is not enabled
  if (!prefersReducedMotion) {
    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');
  // Play the animations
  if (toggleable.style.display === 'none') {
    illustrationAccueil.setAttribute('aria-live', 'polite');
    rennes.setAttribute('aria-live', 'polite');
    orsay.setAttribute('aria-live', 'polite');
    parterre.setAttribute('aria-live', 'polite');
    toggleable.style.display = 'block';
    imgTopToggleable.style.display = 'none';
    Object.keys(animationIntervals).forEach(id => {
      animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
    });
  } else {  // Pause the animations
    illustrationAccueil.setAttribute('aria-live', 'off');
    rennes.setAttribute('aria-live', 'off');
    orsay.setAttribute('aria-live', 'off');
    parterre.setAttribute('aria-live', 'off');
    toggleable.style.display = 'none';
    imgTopToggleable.style.display = 'block';
    Object.keys(animationIntervals).forEach(id => {
      clearInterval(animationIntervals[id]);
    });
  }
}