console.log("SCRIPT CHARG2");
document.addEventListener("DOMContentLoaded", () => {

  const canvas = document.getElementById("scene");
  const ctx = canvas.getContext("2d");

  // tout l'écran
  function resize() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
  }
  resize();
  window.addEventListener("resize", resize);

  // img
  const imageSources = [
      "images/img1.jpg",
      "images/img2.jpg",
      "images/img3.jpg",
      "images/img4.jpg",
      "images/img5.jpg",
      "images/img6.jpg",
      "images/img7.jpg",
      "images/img8.jpg",
      "images/img9.jpg",
      "images/img10.jpg",
      "images/img11.jpg",
      "images/img12.jpg",
      "images/img13.jpg",
      "images/img14.jpg",
      "images/img15.jpg",
      "images/img16.jpg",
      "images/img17.jpg",
      "images/img18.jpg",
      "images/img19.jpg",
      "images/img21.jpg",
      "images/img22.jpg",
      "images/img24.jpg",
      "images/img25.jpg",
      "images/img26.jpg",
      "images/img27.jpg",
      "images/img28.jpg",
      "images/img29.jpg"
  ];

  const images = {};
  imageSources.forEach(src => {
      const img = new Image();
      img.src = src;
      images[src] = img;
  });

  // points
  const nodes = Array.from({ length: 100 }).map(() => ({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      r: 20 + Math.random() * 6, // taille aléatoire
      image: imageSources[Math.floor(Math.random() * imageSources.length)]
  }));

  // variabes globales
  let mouse = { x: -1000, y: -1000 };
  let activeNode = null;
  let lastActiveImage = null;
  let transition = 0;
  let movingImages = [];

  // pour détecter la souris
  canvas.addEventListener("mousemove", e => {
      mouse.x = e.clientX;
      mouse.y = e.clientY;
  });

  // quand on survole un point
  function detectHover() {
      activeNode = null;

      nodes.forEach(n => {
          const dx = mouse.x - n.x;
          const dy = mouse.y - n.y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < n.r + 20) activeNode = n;
      });

      if (activeNode) {
          // souris sur un point : réinitialiser images
          lastActiveImage = images[activeNode.image];
          if (movingImages.length === 0) {
              // création d'images flottantes
              movingImages = Array.from({ length: 5 }).map(() => ({
                  img: lastActiveImage,
                  x: Math.random() * canvas.width,
                  y: Math.random() * canvas.height,
                  dx: (Math.random() - 0.5) * 2,
                  dy: (Math.random() - 0.5) * 2,
                  scale: 0.1 + Math.random() * 0.2
              }));
          }
      } else {
          // souris pas sur point : tout disparaît
          lastActiveImage = null;
          movingImages = [];
          transition = 0;
      }
  }

  // points invisibles
  function drawNodes() {
      nodes.forEach(n => {
          ctx.beginPath();
          ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
          ctx.fillStyle = (n === activeNode) ? "black" : "rgba(0,0, 0, 0)";
          ctx.fill();
      });
  }

  // image cebtrale
  function drawTraversal() {
      if (!lastActiveImage) return;

      transition += 0.02;
      const img = lastActiveImage;
      if (!img.complete) return;

      const scale = 1 + transition * 2;
      ctx.globalAlpha = 1;
      ctx.drawImage(
          img,
          canvas.width / 2 - (img.width * scale) / 2,
          canvas.height / 2 - (img.height * scale) / 2,
          img.width * scale,
          img.height * scale
      );
  }

  // images flottantes
  function drawMovingImages() {
      movingImages.forEach(m => {
          m.x += m.dx;
          m.y += m.dy;

          if (m.x < 0 || m.x > canvas.width - m.img.width * m.scale) m.dx *= -1;
          if (m.y < 0 || m.y > canvas.height - m.img.height * m.scale) m.dy *= -1;

          ctx.drawImage(m.img, m.x, m.y, m.img.width * m.scale, m.img.height * m.scale);
      });
  }

  // boucle d'anim
  function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      detectHover();
      drawNodes();
      drawTraversal();
      drawMovingImages();
      requestAnimationFrame(animate);
  }

  animate();
});