<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Supported 3D file types
    const fileTypes = ['3dm', '3ds', '3mf', 'amf', 'bim', 'brep', 'dae', 'fbx', 'fcstd', 'glb', 'gltf', 'ifc', 'igs', 'iges', 'stp', 'step', 'stl', 'obj', 'off', 'ply', 'wrl'];

    // Select matching link
    const links = Array.from(document.querySelectorAll('a.ui.mini.basic.button'));
    const link3D = links.find(link => {
      const href = link.href.toLowerCase();
      return href.includes('/raw/') && fileTypes.some(ext => href.endsWith(`.${ext}`));
    });

    if (link3D) {
      const script = document.createElement('script');
      script.onload = () => {
        const fileUrl = link3D.getAttribute('href');

        // Prepare the container for the viewer
        const fileView = document.querySelector('.file-view');
        if (fileView) {
          fileView.setAttribute('id', 'view-3d');
          fileView.style.padding = '0';
          fileView.style.margin = '0';
          fileView.style.height = '400px';
          fileView.style.width = '100%';
          fileView.style.background = 'var(--color-box-body)';
          fileView.innerHTML = '';
        }

        // Initialize viewer
        const parentDiv = document.getElementById('view-3d');
        if (parentDiv) {

          const viewer = new OV.EmbeddedViewer(parentDiv, {
            backgroundColor: new OV.RGBAColor(59, 68, 76, 0), // Transparent
            defaultColor: new OV.RGBColor(65,131, 196),
            edgeSettings: new OV.EdgeSettings(false, new OV.RGBColor(0, 0, 0), 1),
          });

          // fullscreen
          const fullScreenHandler = function() {

            if(document.fullscreenElement === fileView) {
              document.exitFullscreen();
            } else {
              fileView.requestFullscreen = fileView.requestFullscreen || 
                  fileView.mozRequestFullScreen || 
                  fileView.webkitRequestFullscreen || 
                  fileView.msRequestFullscreen;
              fileView.requestFullscreen();
            }
          }

          buttonFullScreen = document.createElement('button');
          buttonFullScreen.setAttribute('class', 'ui mini basic button');
          buttonFullScreen.setAttribute('id', 'modelFullScreen');
          buttonFullScreen.innerHTML = 'FullScreen'; // This replace icon
          buttonFullScreen.addEventListener('click', function() {
            fullScreenHandler();
          });

          const buttons = document.querySelector('.ui .buttons');
          buttons.after(buttonFullScreen);

          fileView.addEventListener('contextmenu', function() {
            fullScreenHandler();
          });

          // Load the model
          viewer.LoadModelFromUrlList([fileUrl]);
        }
      };

      script.src = window.config.appSubUrl + '/assets/o3dv/o3dv.min.js';
      document.head.appendChild(script);
    }
  });
</script>