<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image.prod.js"></script>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image-aframe.prod.js"></script>
    <style>
      #instruction {
        position: absolute;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 10px 20px;
        border-radius: 20px;
        font-size: 12px;
        font-family: Arial, sans-serif;
        text-align: center;
      }
      #watermark {
        position: absolute;
        bottom: 10px;
        left: 10px;
        z-index: 1000;
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 8px;
        font-family: Arial, sans-serif;
      }
      #unmuteButton {
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        padding: 15px 30px;
        font-size: 18px;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      #unmuteButton:hover {
        background-color: #0056b3;
      }
    </style>
  </head>
  <body>
    <a-scene
      mindar-image="imageTargetSrc: ./assets/bb.mind; maxTrack: 18; filterMinCF: 0.0005; filterBeta: 0.3"
      color-space="sRGB"
      renderer="colorManagement: true, physicallyCorrectLights"
      vr-mode-ui="enabled: false"
      device-orientation-permission-ui="enabled: false"
    >
      <a-assets>
        <video id="video" src="./assets/0001.mp4" loop="true" muted="true" crossorigin="anonymous" playsinline="true"></video>
      </a-assets>

      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

      <!-- Dynamically Create Targets -->
      <script>
        const numberOfTargets = 18;
        for (let i = 0; i < numberOfTargets; i++) {
          document.write(`
            <a-entity mindar-image-target="targetIndex: ${i}">
              <a-video
                src="#video"
                position="0 0 0"
                height="1.8"
                width="1"
                rotation="0 0 0"
                webkit-playsinline
                playsinline
                crossorigin="anonymous"
              ></a-video>
            </a-entity>
          `);
        }
      </script>
    </a-scene>

    <div id="instruction">
      <img src="./assets/yuna.gif" alt="Instruction GIF" style="width: 150px;" />
    </div>
    <div id="watermark">Yuna's Baptismal | 12/15/2024</div>
    <button id="unmuteButton">Allow Audio</button>

    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const unmuteButton = document.querySelector("#unmuteButton");
        const instruction = document.querySelector("#instruction");
        const videoEl = document.querySelector("#video");
        let currentlyPlayingTarget = null;

        // Handle target events
        const scene = document.querySelector("a-scene");
        scene.addEventListener("targetFound", (event) => {
          const targetIndex = event.target.getAttribute("mindar-image-target");
          if (currentlyPlayingTarget !== targetIndex) {
            if (videoEl) {
              videoEl.pause();
              videoEl.currentTime = 0;
            }
            currentlyPlayingTarget = targetIndex;
            if (instruction) {
              instruction.style.display = "none";
            }
            videoEl.play().catch((error) => console.error("Autoplay failed:", error));
          }
        });

        scene.addEventListener("targetLost", () => {
          if (videoEl) {
            videoEl.pause();
            videoEl.currentTime = 0;
          }
          currentlyPlayingTarget = null;
        });

        // Unmute button
        unmuteButton.addEventListener("click", () => {
          if (videoEl) {
            videoEl.muted = false;
          }
          unmuteButton.style.display = "none";
        });
      });
    </script>
  </body>
</html>
