const images = [
 "/img/img-example-1.jpg",
 "/img/img-example-2.jpg",
 "/img/img-example-3.jpg",
 "/img/img-example-4.jpg",
 "/img/img-example-5.jpg",
 "/img/img-example-6.jpg",
 "/img/img-example-7.jpg",
 "/img/img-example-8.jpg",
];


const animationDuration = 5000; //milesseconds
let intervalId;


// aguarda a página carregar para executar a função initLazyLoadBackground
document.addEventListener("DOMContentLoaded", () => initLazyLoadBackground());


// Função que inicia o lazy load de imagens de fundo
function initLazyLoadBackground() {
  // Seleciona todos os elementos com a classe "lazy-background"
  const elementLazyBackground = document.querySelector(".lazy-background");

  // Verifica se o IntersectionObserver está disponível no navegador
  if ("IntersectionObserver" in window) {
    // Cria um novo IntersectionObserver e passa como callback a função lazyLoadIntersectionObserver
    const lazyBackgroundObserver = new IntersectionObserver(
      lazyLoadIntersectionObserver
    );

    // Observa o elemento com a classe "lazy-background"
    lazyBackgroundObserver.observe(elementLazyBackground);
  }
}

// Função que é executada quando um elemento com a classe "lazy-background" é observado
function lazyLoadIntersectionObserver(entries, observer) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // Seleciona o elemento que será utilizado como fundo
      const elementToChangeBgImage = document.querySelector(".lazy-background");

      // Índice da imagem que será exibida
      let backgroundImageIndex = 0;

      // Função que altera o fundo do elemento selecionado a cada intervalo de tempo
      function changeBackgroundImage() {
        const newBackground = `url("${images[backgroundImageIndex]}")`;
        elementToChangeBgImage.style.backgroundImage = newBackground;

        // Incrementa o índice da imagem e reinicia caso chegue ao final do array
        backgroundImageIndex++;
        if (backgroundImageIndex >= images.length) backgroundImageIndex = 0;
      }

      // Inicia a animação e armazena o id do intervalo em uma variável
      intervalId = setInterval(changeBackgroundImage, animationDuration);

      // Remove o elemento observado do IntersectionObserver
      observer.unobserve(entry.target);
    } else if (intervalId) {
      // Encerra a animação caso o elemento deixe de ser observado
      clearInterval(intervalId);
      intervalId = null;
    }
  });
}