app.js

document.addEventListener("DOMContentLoaded", () => {
  // Initialize main app first, then handle ISF separately
  console.log("Initializing main app...");
  
  // Declare all variables first
  const layersContainer = document.getElementById("layers-container");
  const openOutputBtn = document.getElementById("open-output");
  const numLayers = 4;
  let outputWindow = null;
  let audioContext;
  let sourceNode;
  let delayedAudible;
  const layers = [];
  const presets = {};
  let isfManager = null;
  
  // Built-in ISF shaders
  const isfShaders = {
    "solid-red.fs": `/*{\n  "CREDIT": "Test",\n  "CATEGORIES": ["Generator"],\n  "DESCRIPTION": "A simple solid red color.",\n  "INPUTS": []\n}*/\n\nvoid main() {\n  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n}`,
    "simple-anim.fs": `/*{\n  "CREDIT": "Test",\n  "CATEGORIES": ["Generator"],\n  "DESCRIPTION": "A simple animated shader.",\n  "INPUTS": []\n}*/\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / RENDERSIZE.xy;\n  float t = TIME * 0.5;\n  vec3 color = 0.5 + 0.5 * cos(t + uv.xyx + vec3(0,2,4));\n  gl_FragColor = vec4(color, 1.0);\n}`,
    "test-green.fs": `/*{\n  "CREDIT": "Test",\n  "CATEGORIES": ["Generator"],\n  "DESCRIPTION": "Ultra simple green shader.",\n  "INPUTS": []\n}*/\n\nvoid main() {\n  gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);\n}`,
    "Load from file...": "LOAD_FROM_FILE",
    "manual-red.fs": `Manual Red Test`
  };
  
  // Utility functions
  function rgbaToHex(r, g, b) {
    const toHex = (c) => Math.round(c * 255).toString(16).padStart(2, '0');
    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
  }

  function hexToRgba(hex) {
    const r = parseInt(hex.slice(1, 3), 16) / 255;
    const g = parseInt(hex.slice(3, 5), 16) / 255;
    const b = parseInt(hex.slice(5, 7), 16) / 255;
    return [r, g, b, 1.0];
  }
  
  function initAudio() {
    if (!audioContext) {
      audioContext = new (window.AudioContext || window.webkitAudioContext)();
    }
  }

  function initPresets() {
    console.log("window.all:", window.all);
    if (window.all && window.all.default) {
      Object.assign(presets, window.all.default);
      console.log("presets:", presets);
    } else {
      setTimeout(initPresets, 100);
    }
  }
  
  function connectAudio(source) {
    if (delayedAudible) {
      delayedAudible.disconnect();
    }
    delayedAudible = audioContext.createDelay();
    delayedAudible.delayTime.value = 0.26;
    source.connect(delayedAudible);
    delayedAudible.connect(audioContext.destination);

    layers.forEach((layer) => {
      if (layer.visualizer) {
        layer.visualizer.connectAudio(delayedAudible);
      }
    });
  }
  
  // Async function to load shader files
  async function loadShaderFile(filename) {
    try {
      const response = await fetch(`shaders/${filename}`);
      if (!response.ok) {
        throw new Error(`Failed to load shader: ${response.status}`);
      }
      return await response.text();
    } catch (error) {
      console.error('Error loading shader file:', error);
      throw error;
    }
  }
  
  // === MAIN INITIALIZATION FUNCTIONS ===
  
  function initializeMainApp() {
    console.log("Setting up main app UI...");
    
    // Initialize core app functionality that doesn't depend on ISF
    initializeAudioControls();
    initializeLayers();
    initPresets();  // Initialize MilkDrop presets
    startAnimationLoop();
    
    console.log("Main app initialized successfully");
  }
  
  function initializeAudioControls() {
    console.log('Initializing audio controls...');
    // Global audio controls
    const audioControls = document.createElement("div");
    audioControls.innerHTML = `
          <label>Audio:</label>
          <input type="file" id="audio-file-input" accept="audio/*">
          <button id="mic-input-btn">Use Mic</button>
      `;
    document.getElementById("main-controls").appendChild(audioControls);
  
    const audioFileInput = document.getElementById("audio-file-input");
    audioFileInput.addEventListener("change", (e) => {
      const file = e.target.files[0];
      if (file) {
        initAudio();
        const audioUrl = URL.createObjectURL(file);
        const audio = new Audio(audioUrl);
        audio.crossOrigin = "anonymous";
        if (sourceNode) {
          sourceNode.disconnect();
        }
        sourceNode = audioContext.createMediaElementSource(audio);
        connectAudio(sourceNode);
        const playPromise = audio.play();
        if (playPromise !== undefined) {
          playPromise.catch((error) => {
            if (error.name === "AbortError") {
              console.log("Audio play() request was aborted.");
            } else {
              console.error("Audio play() failed:", error);
            }
          });
        }
      }
    });
  
    const micInputBtn = document.getElementById("mic-input-btn");
    micInputBtn.addEventListener("click", () => {
      initAudio();
      navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
        if (sourceNode) {
          sourceNode.disconnect();
        }
        sourceNode = audioContext.createMediaStreamSource(stream);
        connectAudio(sourceNode);
      });
    });
    console.log('Audio controls initialized');
  }
  
  function initializeLayers() {
    console.log('Initializing layers...');
    console.log('layersContainer element:', layersContainer);
    console.log('numLayers:', numLayers);
    
    for (let i = 0; i < numLayers; i++) {
      console.log(`Creating layer ${i + 1}...`);
      const layer = {
        id: i,
        opacity: 1,
        file: null,
        fileType: null,
        element: null,
        visualizer: null,
        outputVisualizer: null,
        renderer: null,
        renderFunc: null,
        presets: [],
        presetKeys: [],
        currentPresetIndex: -1,
      };
      layers.push(layer);
  
      const layerEl = document.createElement("div");
      layerEl.classList.add("layer");
      layerEl.setAttribute("data-layer", i);
      layerEl.innerHTML = `
              <h3>Layer ${i + 1}</h3>
              <div class="layer-controls">
                  <label>Opacity:</label>
                  <input type="range" min="0" max="1" value="1" step="0.01" class="opacity-slider" data-layer="${i}">
                  <input type="file" class="file-input" data-layer="${i}" accept=".gif,.isf,.fs,.frag,.mp4,.json">
                  <button class="load-presets-btn" data-layer="${i}">Load MilkDrop Presets</button>
                  <button class="load-isf-btn" data-layer="${i}">Load ISF</button>
              </div>
              <div class="layer-preview"></div>
              <div class="advanced-controls"></div>
          `;
      console.log(`Appending layer ${i + 1} element to container:`, layerEl);
      layersContainer.appendChild(layerEl);
      console.log(`Layer ${i + 1} appended successfully`);
    }
    
    console.log('All layers created successfully!');
    console.log('Total layers in array:', layers.length);
    
    // Set up layer event listeners
    setupLayerEventListeners();
  }
  
  function setupLayerEventListeners() {
    console.log('Setting up layer event listeners...');
    
    layersContainer.addEventListener("input", (e) => {
      if (e.target.classList.contains("opacity-slider")) {
        const layerId = parseInt(e.target.dataset.layer, 10);
        layers[layerId].opacity = parseFloat(e.target.value);
        // renderOutput(); // Will implement later
      }
    });
  
    layersContainer.addEventListener("change", (e) => {
      if (e.target.classList.contains("file-input")) {
        const layerId = parseInt(e.target.dataset.layer, 10);
        const file = e.target.files[0];
        if (file) {
          console.log(`File selected for layer ${layerId}:`, file.name);
          // handleFile(layerId, file); // Will implement later
        }
      }
    });
  
    layersContainer.addEventListener("click", (e) => {
      if (e.target.classList.contains("load-presets-btn")) {
        const layerId = parseInt(e.target.dataset.layer, 10);
        console.log(`MilkDrop button clicked for layer ${layerId}`);
        // handleMilk(layers[layerId]); // Will implement later
      } else if (e.target.classList.contains("load-isf-btn")) {
        const layerId = parseInt(e.target.dataset.layer, 10);
        const layer = layers[layerId];
        console.log(`ISF button clicked for layer ${layerId}`);
        
        const advancedControls = document.querySelector(
          `.layer[data-layer='${layer.id}'] .advanced-controls`
        );
        advancedControls.innerHTML = "";
  
        const select = document.createElement("select");
        select.innerHTML = `<option>Select ISF Shader</option>`;
        
        // Add built-in shaders
        Object.keys(isfShaders).forEach(file => {
          select.innerHTML += `<option value="${file}">${file}</option>`;
        });
        
        // Add file-based shaders
        const fileShaders = ['test-simple.fs', 'rainbow.fs', 'tapestryfract.fs', 'badtv.fs'];
        fileShaders.forEach(file => {
          select.innerHTML += `<option value="file:${file}">${file} (from file)</option>`;
        });
        
        select.addEventListener("change", async (e) => {
          const value = e.target.value;
          if (value) {
            if (value.startsWith('file:')) {
              // Load from file
              const filename = value.replace('file:', '');
              try {
                const source = await loadShaderFile(filename);
                await handleIsfFromSource(layer, source);
              } catch (error) {
                console.error('Error loading shader file:', error);
                alert('Failed to load shader file: ' + error.message);
              }
            } else {
              // Load built-in shader
              const source = isfShaders[value];
              await handleIsfFromSource(layer, source);
            }
          }
        });
        advancedControls.appendChild(select);
      }
    });
    
    openOutputBtn.addEventListener("click", () => {
      console.log('Output button clicked');
      // Output window logic will go here
    });
    
    console.log('Layer event listeners set up successfully');
  }
  
  function startAnimationLoop() {
    console.log('Starting animation loop...');
    
    let frameCount = 0;
    function animationLoop() {
      frameCount++;
      layers.forEach((layer) => {
        if (layer.renderFunc) {
          // Only log every 60 frames to avoid spam
          if (frameCount % 60 === 0) {
            console.log("Rendering layer in animationLoop:", layer.id, "Type:", layer.fileType);
          }
          layer.renderFunc();
        }
        if (layer.outputRenderer) {
          // Handle different types of output renderers
          if (typeof layer.outputRenderer === 'function') {
            // Direct rendering function (fallback approach)
            layer.outputRenderer();
          } else if (layer.outputRenderer && layer.outputRenderer.type === 'isfManager') {
            // ISF Manager handles this automatically, no action needed
          }
        }
      });
      requestAnimationFrame(animationLoop);
    }
    requestAnimationFrame(animationLoop);
    
    console.log('Animation loop started');
  }
  
  // === ISF HANDLING FUNCTIONS ===
  
  async function handleIsfFromSource(layer, source) {
    console.log("handleIsfFromSource called for layer:", layer.id, "with source:", source.substring(0, 100));
    
    // Check for manual test mode
    if (source === "Manual Red Test") {
      console.log("Using manual WebGL rendering fallback...");
      handleManualShader(layer);
      return;
    }
    
    // Check for special file loading option
    if (source === "LOAD_FROM_FILE") {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.fs,.isf,.frag';
      input.onchange = async (e) => {
        const file = e.target.files[0];
        if (file) {
          try {
            const fileContent = await file.text();
            await handleIsfFromSource(layer, fileContent);
          } catch (error) {
            console.error('Error loading file:', error);
            alert('Error loading shader file: ' + error.message);
          }
        }
      };
      input.click();
      return;
    }
    
    // Check if ISF Manager is available
    if (!isfManager) {
      console.error("ISF Manager not initialized! Trying fallback...");
      
      // Try simple WebGL fallback for built-in shaders
      if (source.includes('gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0)')) {
        handleSimpleRedShader(layer);
        return;
      } else if (source.includes('gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0)')) {
        handleSimpleGreenShader(layer);
        return;
      }
      
      alert("ISF Manager not available. Please wait for initialization.");
      return;
    }
    
    const canvas = document.createElement("canvas");
    canvas.width = 200;
    canvas.height = 150;
    canvas.style.border = "2px solid #00ff00";
    canvas.style.display = "block";
    canvas.style.width = "200px";
    canvas.style.height = "150px";
    layer.element = canvas;
    layer.fileType = "isf";
    
    console.log("Canvas created with dimensions:", canvas.width, "x", canvas.height);
    
    try {
      console.log("Creating ISF renderer using ISF Manager...");
      
      // Use the ISF Manager to create the renderer
      const renderer = isfManager.createISFRenderer(layer, source, canvas);
      
      console.log("ISF Renderer created successfully");
      
      layer.renderer = renderer;
      layer.shader = source;
      layer.startTime = Date.now(); // For TIME uniform in output rendering
      
      // The ISF Manager handles all rendering automatically,
      // so we don't need a renderFunc for individual layers anymore
      // The animation loop in ISF Manager will handle this
      
      console.log("ISF rendering is now handled by ISF Manager");
      
      // Parse ISF metadata and create controls
      const metadata = parseISFMetadata(source);
      if (metadata) {
        const advancedControls = document.querySelector(
          `.layer[data-layer='${layer.id}'] .advanced-controls`
        );
        createISFControls(layer, renderer, metadata, advancedControls);
      }
      
      renderLayer(layer);
      console.log("ISF shader loaded successfully for layer", layer.id);
    } catch (error) {
      console.error("Error initializing ISF:", error);
      console.error("Error stack:", error.stack);
      alert("Failed to initialize ISF shader: " + error.message);
    }
  }
  
  function handleSimpleRedShader(layer) {
    console.log("Creating simple red shader fallback...");
    const canvas = document.createElement("canvas");
    canvas.width = 200;
    canvas.height = 150;
    canvas.style.border = "2px solid red";
    canvas.style.display = "block";
    canvas.style.width = "200px";
    canvas.style.height = "150px";
    layer.element = canvas;
    layer.fileType = "simple";
    
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    renderLayer(layer);
    console.log("Simple red shader created successfully!");
  }
  
  function handleSimpleGreenShader(layer) {
    console.log("Creating simple green shader fallback...");
    const canvas = document.createElement("canvas");
    canvas.width = 200;
    canvas.height = 150;
    canvas.style.border = "2px solid green";
    canvas.style.display = "block";
    canvas.style.width = "200px";
    canvas.style.height = "150px";
    layer.element = canvas;
    layer.fileType = "simple";
    
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'green';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    renderLayer(layer);
    console.log("Simple green shader created successfully!");
  }
  
  function renderLayer(layer) {
    console.log("Rendering layer:", layer.id, "with element:", layer.element);
    const previewEl = document.querySelector(
      `.layer[data-layer='${layer.id}'] .layer-preview`
    );
    console.log("Preview element found:", previewEl);
    
    if (!previewEl) {
      console.error("Preview element not found for layer", layer.id);
      return;
    }
    
    previewEl.innerHTML = "";
    if (layer.element) {
      console.log("Adding element to preview:", layer.element.tagName, layer.element.width + "x" + layer.element.height);
      previewEl.appendChild(layer.element);
      console.log("Element added to DOM, preview container size:", previewEl.clientWidth + "x" + previewEl.clientHeight);
    } else {
      console.log("No element to render for layer", layer.id);
    }
  }
  
  // Helper functions for ISF metadata parsing and controls
  function parseISFMetadata(source) {
    try {
      // Extract JSON metadata from ISF source
      const jsonMatch = source.match(/\/\*(\{[\s\S]*?\})\*\//);
      if (jsonMatch) {
        return JSON.parse(jsonMatch[1]);
      }
      return null;
    } catch (error) {
      console.error('Error parsing ISF metadata:', error);
      return null;
    }
  }
  
  function createISFControls(layer, renderer, metadata, container) {
    console.log('createISFControls called for layer:', layer.id);
    console.log('Metadata:', metadata);
    console.log('Container:', container);
    
    if (!metadata || !metadata.INPUTS) {
      console.log('No metadata or inputs found');
      return;
    }
    
    console.log('Found', metadata.INPUTS.length, 'inputs to create controls for');
    
    const controlsDiv = document.createElement('div');
    controlsDiv.innerHTML = '<h4>ISF Controls</h4>';
    
    // Function to update both preview and output renderers
    function updateParameter(paramName, value) {
      console.log(`Updating parameter ${paramName} = ${value} for layer ${layer.id}`);
      
      // Try using ISF Manager's centralized parameter setting first
      if (isfManager && isfManager.setParameterForLayer) {
        const success = isfManager.setParameterForLayer(layer.id, paramName, value);
        if (success) {
          console.log('Updated via ISF Manager setParameterForLayer');
        } else {
          console.log('ISF Manager setParameterForLayer found no renderers');
        }
      }
      
      // Fallback: Update preview renderer directly (in case ISF Manager doesn't handle it)
      if (renderer && renderer.setValue) {
        renderer.setValue(paramName, value);
        console.log('Updated preview renderer directly');
      }
      
      // Fallback: Update output renderer if it exists and wasn't handled by ISF Manager
      if (layer.outputRenderer) {
        console.log('Output renderer exists:', {
          type: typeof layer.outputRenderer,
          hasRenderer: !!layer.outputRenderer.renderer,
          rendererType: layer.outputRenderer.type,
          hasSetValue: !!(layer.outputRenderer.renderer && layer.outputRenderer.renderer.setValue)
        });
        
        if (typeof layer.outputRenderer === 'function' && layer.outputRenderer.renderer && layer.outputRenderer.renderer.setValue) {
          // Direct rendering approach
          layer.outputRenderer.renderer.setValue(paramName, value);
          console.log('Updated output renderer (direct)');
        } else if (layer.outputRenderer.renderer && layer.outputRenderer.renderer.setValue) {
          // ISF Manager approach - but this should be handled by setParameterForLayer now
          layer.outputRenderer.renderer.setValue(paramName, value);
          console.log('Updated output renderer (ISF Manager fallback)');
        } else {
          console.log('Output renderer exists but cannot set parameters');
        }
      } else {
        console.log('No output renderer available yet');
      }
      
      // Store parameter value on layer for when output window is created/recreated
      if (!layer.parameters) {
        layer.parameters = {};
      }
      layer.parameters[paramName] = value;
      console.log('Stored parameter on layer');
    }
    
    metadata.INPUTS.forEach(input => {
      const controlDiv = document.createElement('div');
      controlDiv.className = 'isf-control';
      
      const label = document.createElement('label');
      label.textContent = input.NAME + ': ';
      controlDiv.appendChild(label);
      
      let control;
      
      switch (input.TYPE) {
        case 'float':
          control = document.createElement('input');
          control.type = 'range';
          control.min = input.MIN || 0;
          control.max = input.MAX || 1;
          control.step = 0.01;
          control.value = input.DEFAULT || 0.5;
          
          // Initialize the parameter value
          console.log('Initializing parameter control for:', input.NAME, 'with value:', parseFloat(control.value));
          updateParameter(input.NAME, parseFloat(control.value));
          
          const valueDisplay = document.createElement('span');
          valueDisplay.textContent = control.value;
          
          control.addEventListener('input', (e) => {
            const value = parseFloat(e.target.value);
            valueDisplay.textContent = value.toFixed(2);
            console.log('Parameter control moved:', input.NAME, '=', value);
            updateParameter(input.NAME, value);
          });
          
          console.log('Added event listener for parameter:', input.NAME);
          
          controlDiv.appendChild(control);
          controlDiv.appendChild(valueDisplay);
          break;
          
        case 'bool':
          control = document.createElement('input');
          control.type = 'checkbox';
          control.checked = input.DEFAULT || false;
          
          // Initialize the parameter value
          updateParameter(input.NAME, control.checked);
          
          control.addEventListener('change', (e) => {
            updateParameter(input.NAME, e.target.checked);
          });
          
          controlDiv.appendChild(control);
          break;
          
        case 'color':
          control = document.createElement('input');
          control.type = 'color';
          control.value = input.DEFAULT || '#ffffff';
          
          // Initialize the parameter value
          const hex = control.value;
          const r = parseInt(hex.slice(1, 3), 16) / 255;
          const g = parseInt(hex.slice(3, 5), 16) / 255;
          const b = parseInt(hex.slice(5, 7), 16) / 255;
          updateParameter(input.NAME, [r, g, b, 1.0]);
          
          control.addEventListener('input', (e) => {
            // Convert hex to RGB array
            const hex = e.target.value;
            const r = parseInt(hex.slice(1, 3), 16) / 255;
            const g = parseInt(hex.slice(3, 5), 16) / 255;
            const b = parseInt(hex.slice(5, 7), 16) / 255;
            
            updateParameter(input.NAME, [r, g, b, 1.0]);
          });
          
          controlDiv.appendChild(control);
          break;
      }
      
      controlsDiv.appendChild(controlDiv);
    });
    
    container.appendChild(controlsDiv);
  }
  
  function handleManualShader(layer) {
    console.log("Creating manual WebGL shader...");
    const canvas = document.createElement("canvas");
    canvas.width = 200;
    canvas.height = 150;
    canvas.style.border = "3px solid lime";
    canvas.style.display = "block";
    canvas.style.width = "200px";
    canvas.style.height = "150px";
    layer.element = canvas;
    layer.fileType = "manual";
    
    const gl = canvas.getContext("webgl");
    if (!gl) {
      console.error("WebGL not supported.");
      return;
    }
    
    // Create simple vertex shader
    const vertexShaderSource = `
      attribute vec2 a_position;
      void main() {
        gl_Position = vec4(a_position, 0.0, 1.0);
      }
    `;
    
    // Create simple fragment shader that just outputs red
    const fragmentShaderSource = `
      precision mediump float;
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `;
    
    // Compile shaders
    function createShader(gl, type, source) {
      const shader = gl.createShader(type);
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error('Shader compile error:', gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    }
    
    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
    
    // Create program
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.error('Program link error:', gl.getProgramInfoLog(program));
      return;
    }
    
    // Create vertex buffer for full screen quad
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    const positions = [
      -1, -1,
       1, -1,
      -1,  1,
       1,  1,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
    
    // Create render function
    layer.renderFunc = () => {
      gl.viewport(0, 0, canvas.width, canvas.height);
      gl.clearColor(0, 0, 0, 1);
      gl.clear(gl.COLOR_BUFFER_BIT);
      
      gl.useProgram(program);
      
      const positionLocation = gl.getAttribLocation(program, "a_position");
      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
      gl.enableVertexAttribArray(positionLocation);
      gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
      
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    };
    
    renderLayer(layer);
    console.log("Manual WebGL shader created successfully!");
  }
  
  // Initialize main app components immediately
  initializeMainApp();
  
  // Then try to initialize ISF (non-blocking)
  setTimeout(() => {
    console.log("Checking ISF library availability...");
    initializeISF();
  }, 100);
  
  function initializeISF() {
    // Check for different possible ISF library exports
    const isfAvailable = (
      typeof ISFRenderer !== 'undefined' || 
      typeof window.ISFRenderer !== 'undefined' ||
      typeof window.interactiveShaderFormat !== 'undefined' ||
      (window.InteractiveShaderFormat && window.InteractiveShaderFormat.Renderer)
    );
    
    if (isfAvailable) {
      // Determine which ISF API is available
      if (typeof ISFRenderer !== 'undefined') {
        window.ISFRenderer = ISFRenderer;
      } else if (typeof window.ISFRenderer !== 'undefined') {
        // Already available
      } else if (typeof window.interactiveShaderFormat !== 'undefined') {
        window.ISFRenderer = window.interactiveShaderFormat.Renderer;
      } else if (window.InteractiveShaderFormat && window.InteractiveShaderFormat.Renderer) {
        window.ISFRenderer = window.InteractiveShaderFormat.Renderer;
      }
      
      console.log("ISFRenderer loaded successfully:", window.ISFRenderer);
      // Use EnhancedISFManager if available, otherwise regular ISFManager
      const ManagerClass = window.EnhancedISFManager || window.ISFManager || ISFManager;
      isfManager = new ManagerClass();
      isfManager.startAnimationLoop();
      console.log("ISF Manager initialized with:", ManagerClass.name);
    } else {
      console.error("ISFRenderer not available. Trying fallback...");
      console.log("Available globals:", {
        ISFRenderer: typeof ISFRenderer,
        'window.ISFRenderer': typeof window.ISFRenderer,
        'window.interactiveShaderFormat': typeof window.interactiveShaderFormat,
        'window.InteractiveShaderFormat': typeof window.InteractiveShaderFormat,
        'window.ISFManager': typeof window.ISFManager,
        'window.EnhancedISFManager': typeof window.EnhancedISFManager
      });
      
      // Try to initialize with fallback anyway
      if (typeof window.EnhancedISFManager !== 'undefined') {
        console.log('Initializing with EnhancedISFManager (includes fallback)');
        isfManager = new window.EnhancedISFManager();
        isfManager.startAnimationLoop();
        console.log('Fallback ISF Manager initialized');
      }
    }
  }
  
  // Try multiple times to initialize ISF
  let isfInitAttempts = 0;
  const maxISFAttempts = 10;
  
  function tryInitializeISF() {
    isfInitAttempts++;
    console.log(`ISF initialization attempt ${isfInitAttempts}/${maxISFAttempts}`);
    
    if (isfManager) {
      console.log("ISF already initialized");
      return;
    }
    
    initializeISF();
    
    if (!isfManager && isfInitAttempts < maxISFAttempts) {
      setTimeout(tryInitializeISF, 1000);
    }
  }
  
  // Start trying to initialize
  tryInitializeISF();
  
  function initializeMainApp() {
    console.log("Setting up main app UI...");
    
    // Initialize core app functionality that doesn't depend on ISF
    initializeAudioControls();
    initializeLayers();
    initPresets();  // Initialize MilkDrop presets
    startAnimationLoop();
    
    console.log("Main app initialized successfully");
  }
  
  function initializeAudioControls() {
    // Global audio controls
    const audioControls = document.createElement("div");
    audioControls.innerHTML = `
          <label>Audio:</label>
          <input type="file" id="audio-file-input" accept="audio/*">
          <button id="mic-input-btn">Use Mic</button>
      `;
    document.getElementById("main-controls").appendChild(audioControls);
  
    const audioFileInput = document.getElementById("audio-file-input");
    audioFileInput.addEventListener("change", (e) => {
      const file = e.target.files[0];
      if (file) {
        initAudio();
        const audioUrl = URL.createObjectURL(file);
        const audio = new Audio(audioUrl);
        audio.crossOrigin = "anonymous";
        if (sourceNode) {
          sourceNode.disconnect();
        }
        sourceNode = audioContext.createMediaElementSource(audio);
        connectAudio(sourceNode);
        const playPromise = audio.play();
        if (playPromise !== undefined) {
          playPromise.catch((error) => {
            if (error.name === "AbortError") {
              console.log("Audio play() request was aborted.");
            } else {
              console.error("Audio play() failed:", error);
            }
          });
        }
      }
    });
  
    const micInputBtn = document.getElementById("mic-input-btn");
    micInputBtn.addEventListener("click", () => {
      initAudio();
      navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
        if (sourceNode) {
          sourceNode.disconnect();
        }
        sourceNode = audioContext.createMediaStreamSource(stream);
        connectAudio(sourceNode);
      });
    });
  }
  
  function initializeLayers() {
    console.log('Initializing layers...');
    console.log('layersContainer element:', layersContainer);
    console.log('numLayers:', numLayers);
    
    for (let i = 0; i < numLayers; i++) {
      console.log(`Creating layer ${i + 1}...`);
      const layer = {
        id: i,
        opacity: 1,
        file: null,
        fileType: null,
        element: null,
        visualizer: null,
        outputVisualizer: null,
        renderer: null,
        renderFunc: null,
        presets: [],
        presetKeys: [],
        currentPresetIndex: -1,
      };
      layers.push(layer);
  
      const layerEl = document.createElement("div");
      layerEl.classList.add("layer");
      layerEl.setAttribute("data-layer", i);
      layerEl.innerHTML = `
              <h3>Layer ${i + 1}</h3>
              <div class="layer-controls">
                  <label>Opacity:</label>
                  <input type="range" min="0" max="1" value="1" step="0.01" class="opacity-slider" data-layer="${i}">
                  <input type="file" class="file-input" data-layer="${i}" accept=".gif,.isf,.fs,.frag,.mp4,.json">
                  <button class="load-presets-btn" data-layer="${i}">Load MilkDrop Presets</button>
                  <button class="load-isf-btn" data-layer="${i}">Load ISF</button>
              </div>
              <div class="layer-preview"></div>
              <div class="advanced-controls"></div>
          `;
      console.log(`Appending layer ${i + 1} element to container:`, layerEl);
      layersContainer.appendChild(layerEl);
      console.log(`Layer ${i + 1} appended successfully`);
    }
    
    console.log('All layers created successfully!');
    console.log('Total layers in array:', layers.length);
    
    // Set up layer event listeners
    setupLayerEventListeners();
  }
  
  function setupLayerEventListeners() {
    layersContainer.addEventListener("input", (e) => {
      if (e.target.classList.contains("opacity-slider")) {
        const layerId = parseInt(e.target.dataset.layer, 10);
        layers[layerId].opacity = parseFloat(e.target.value);
        renderOutput();
      }
    });
  
    layersContainer.addEventListener("change", (e) => {
      if (e.target.classList.contains("file-input")) {
        const layerId = parseInt(e.target.dataset.layer, 10);
        const file = e.target.files[0];
        if (file) {
          handleFile(layerId, file);
        }
      }
    });
  
    layersContainer.addEventListener("click", (e) => {
      if (e.target.classList.contains("load-presets-btn")) {
        const layerId = parseInt(e.target.dataset.layer, 10);
        handleMilk(layers[layerId]);
      } else if (e.target.classList.contains("load-isf-btn")) {
        const layerId = parseInt(e.target.dataset.layer, 10);
        const layer = layers[layerId];
        
        const advancedControls = document.querySelector(
          `.layer[data-layer='${layer.id}'] .advanced-controls`
        );
        advancedControls.innerHTML = "";
  
        const select = document.createElement("select");
        select.innerHTML = `<option>Select ISF Shader</option>`;
        
        // Add built-in shaders
        Object.keys(isfShaders).forEach(file => {
          select.innerHTML += `<option value="${file}">${file}</option>`;
        });
        
        // Add file-based shaders
        const fileShaders = ['test-simple.fs', 'rainbow.fs', 'tapestryfract.fs', 'badtv.fs'];
        fileShaders.forEach(file => {
          select.innerHTML += `<option value="file:${file}">${file} (from file)</option>`;
        });
        
        select.addEventListener("change", async (e) => {
          const value = e.target.value;
          if (value) {
            if (value.startsWith('file:')) {
              // Load from file
              const filename = value.replace('file:', '');
              try {
                const source = await loadShaderFile(filename);
                await handleIsfFromSource(layer, source);
              } catch (error) {
                console.error('Error loading shader file:', error);
                alert('Failed to load shader file: ' + error.message);
              }
            } else {
              // Load built-in shader
              const source = isfShaders[value];
              await handleIsfFromSource(layer, source);
            }
          }
        });
        advancedControls.appendChild(select);
      }
    });
    
    openOutputBtn.addEventListener("click", () => {
      if (outputWindow && !outputWindow.closed) {
        outputWindow.focus();
        return;
      }
  
      outputWindow = window.open("", "PerformanceOutput", "width=800,height=600");
      outputWindow.document.title = "Output";
      outputWindow.document.body.style.backgroundColor = "black";
      outputWindow.document.body.style.margin = "0";
      outputWindow.document.body.style.overflow = "hidden";
  
      outputWindow.document.body.addEventListener("dblclick", () => {
        if (outputWindow.document.fullscreenElement) {
          outputWindow.document.exitFullscreen();
        } else {
          outputWindow.document.body.requestFullscreen();
        }
      });
  
      renderOutput();
    });
  }
  // Functions and variables are now declared at the beginning

  // Layers are now initialized in initializeLayers()
  
  function startAnimationLoop() {
    let frameCount = 0;
    function animationLoop() {
      frameCount++;
      layers.forEach((layer) => {
        if (layer.renderFunc) {
          // Only log every 60 frames to avoid spam
          if (frameCount % 60 === 0) {
            console.log("Rendering layer in animationLoop:", layer.id, "Type:", layer.fileType);
          }
          layer.renderFunc();
        }
        if (layer.outputRenderer) {
          // Handle different types of output renderers
          if (typeof layer.outputRenderer === 'function') {
            // Direct rendering function (fallback approach)
            layer.outputRenderer();
          } else if (layer.outputRenderer && layer.outputRenderer.type === 'isfManager') {
            // ISF Manager handles this automatically, no action needed
          }
        }
      });
      requestAnimationFrame(animationLoop);
    }
    requestAnimationFrame(animationLoop);
  }

  function renderLayer(layer) {
    console.log("Rendering layer:", layer.id, "with element:", layer.element);
    const previewEl = document.querySelector(
      `.layer[data-layer='${layer.id}'] .layer-preview`,
    );
    console.log("Preview element found:", previewEl);
    previewEl.innerHTML = "";
    if (layer.element) {
      console.log("Adding element to preview:", layer.element.tagName, layer.element.width + "x" + layer.element.height);
      previewEl.appendChild(layer.element);
      console.log("Element added to DOM, preview container size:", previewEl.clientWidth + "x" + previewEl.clientHeight);
      
      if (layer.element.tagName === "VIDEO") {
        const playPromise = layer.element.play();
        if (playPromise !== undefined) {
          playPromise.catch(error => {
            if (error.name === 'AbortError') {
              console.log('Video play() request was aborted.');
            } else {
              console.error('Video play() failed:', error);
            }
          });
        }
      } else if (layer.element.tagName === "CANVAS") {
        console.log("Canvas element added, checking if visible...");
        setTimeout(() => {
          const rect = layer.element.getBoundingClientRect();
          console.log("Canvas bounding rect:", rect);
          console.log("Canvas computed style:", window.getComputedStyle(layer.element).display);
        }, 100);
      }
    } else {
      console.log("No element to render for layer", layer.id);
    }
    renderOutput(); // Re-enabled for output window
  }

  function renderOutput() {
    if (!outputWindow || outputWindow.closed) {
      return;
    }

    outputWindow.document.body.innerHTML = "";

    layers.forEach((layer) => {
      if (layer.element) {
        let outputEl;
        if (layer.element.tagName === "CANVAS") {
          outputEl = document.createElement("canvas");
          outputEl.width = outputWindow.innerWidth;
          outputEl.height = outputWindow.innerHeight;
          if (layer.fileType === "milk") {
            const newVisualizer = butterchurn.createVisualizer(
              audioContext,
              outputEl,
              {
                width: outputWindow.innerWidth,
                height: outputWindow.innerHeight,
              },
            );
            layer.outputVisualizer = newVisualizer;
            if (delayedAudible) {
              newVisualizer.connectAudio(delayedAudible);
            }
            if (layer.currentPreset) {
              newVisualizer.loadPreset(layer.currentPreset, 0);
            }
            layer.outputRenderer = () => newVisualizer.render();
          } else if (["isf", "fs", "frag"].includes(layer.fileType)) {
            // Only create output renderer if it doesn't exist or has wrong type
            if (!layer.outputRenderer || layer.outputRenderer.type !== 'isfManager') {
              console.log('Creating new output renderer for layer', layer.id);
              
              // Try to use ISF Manager first, then fallback to direct rendering
              if (isfManager && layer.renderer) {
                try {
                  console.log("Creating ISF renderer for output window using ISF Manager, layer", layer.id);
                  
                  // Create a new renderer instance for the output canvas
                  const outputLayer = {
                    id: 'output_' + layer.id,
                    element: outputEl
                  };
                  
                  console.log('Creating output renderer with ID:', outputLayer.id, 'for base layer:', layer.id);
                  const outputRenderer = isfManager.createISFRenderer(outputLayer, layer.shader, outputEl);
                  console.log("ISF renderer created for output window using ISF Manager");
                  
                  // Store output renderer reference for parameter updates
                  layer.outputRenderer = {
                    renderer: outputRenderer,
                    type: 'isfManager'
                  };
                  
                  // Apply stored parameters if they exist
                  if (layer.parameters) {
                    console.log('Applying stored parameters to new output renderer:', layer.parameters);
                    Object.keys(layer.parameters).forEach(paramName => {
                      if (outputRenderer && outputRenderer.setValue) {
                        outputRenderer.setValue(paramName, layer.parameters[paramName]);
                        console.log('Applied parameter:', paramName, '=', layer.parameters[paramName]);
                      }
                    });
                  }
                  
                } catch (error) {
                  console.error("Error creating ISF output renderer with ISF Manager:", error);
                  // Fall through to direct approach
                }
              }
              
              // Fallback: try direct ISF rendering if ISF Manager failed
              if (!layer.outputRenderer) {
                const gl = outputEl.getContext("webgl2") || outputEl.getContext("webgl");
                if (!gl) {
                  console.error("WebGL not supported in output window.");
                  return;
                }
                
                try {
                  console.log("Creating ISF renderer for output window (direct), layer", layer.id);
                  
                  let renderer;
                  if (typeof window.ISFRenderer !== 'undefined') {
                    renderer = new window.ISFRenderer(gl);
                  } else if (typeof interactiveShaderFormat !== 'undefined' && interactiveShaderFormat.Renderer) {
                    renderer = new interactiveShaderFormat.Renderer(gl);
                  } else {
                    throw new Error("No ISF renderer available");
                  }
                  
                  renderer.loadSource(layer.shader);
                  console.log("ISF renderer created for output window (direct)");
                  
                  // Apply stored parameters if they exist
                  if (layer.parameters) {
                    Object.keys(layer.parameters).forEach(paramName => {
                      if (renderer && renderer.setValue) {
                        renderer.setValue(paramName, layer.parameters[paramName]);
                      }
                    });
                  }
                  
                  // Store renderer reference and create render function
                  const outputRendererFunc = () => {
                    try {
                      gl.viewport(0, 0, outputEl.width, outputEl.height);
                      
                      // Update TIME uniform if available
                      if (renderer.uniforms && renderer.uniforms.TIME) {
                        const timeValue = (Date.now() - layer.startTime || Date.now()) / 1000.0;
                        renderer.setValue('TIME', timeValue);
                      }
                      
                      // Update RENDERSIZE uniform if available
                      if (renderer.uniforms && renderer.uniforms.RENDERSIZE) {
                        renderer.setValue('RENDERSIZE', [outputEl.width, outputEl.height]);
                      }
                      
                      renderer.draw(outputEl);
                    } catch (renderError) {
                      console.error("Output render error:", renderError);
                    }
                  };
                  
                  // Store both the renderer and render function
                  layer.outputRenderer = outputRendererFunc;
                  layer.outputRenderer.renderer = renderer;
                  layer.outputRenderer.type = 'direct';
                } catch (error) {
                  console.error("Error initializing ISF in output window:", error);
                  console.error("Error stack:", error.stack);
                }
              }
            } else {
              console.log('Output renderer already exists for layer', layer.id, 'type:', layer.outputRenderer.type);
            }
          }
        } else {
          if (layer.element.tagName === "VIDEO") {
            outputEl = document.createElement('video');
            outputEl.src = layer.element.src;
            outputEl.loop = true;
            outputEl.muted = true;
            outputEl.autoplay = true;
          } else {
            outputEl = layer.element.cloneNode(true);
          }
        }

        outputEl.style.position = "absolute";
        outputEl.style.top = "0";
        outputEl.style.left = "0";
        outputEl.style.width = "100%";
        outputEl.style.height = "100%";
        outputEl.style.objectFit = "contain";
        outputEl.style.opacity = layer.opacity;
        outputWindow.document.body.appendChild(outputEl);
      }
    });
  }

  // Event listeners are now handled in setupLayerEventListeners()

  function handleFile(layerId, file) {
    const layer = layers[layerId];
    const fileURL = URL.createObjectURL(file);
    const fileExtension = file.name.split(".").pop().toLowerCase();

    // Cleanup old stuff
    if (layer.element && layer.element.tagName === "VIDEO") {
      layer.element.pause();
    }
    layer.renderFunc = null;
    layer.outputRenderer = null;
    const advancedControls = document.querySelector(
      `.layer[data-layer='${layer.id}'] .advanced-controls`,
    );
    advancedControls.innerHTML = "";

    layer.file = file;
    layer.fileType = fileExtension;

    switch (fileExtension) {
      case "gif":
        handleGif(layer, fileURL);
        break;
      case "mp4":
        handleVideo(layer, fileURL);
        break;
      case "isf":
      case "fs":
      case "frag":
        handleIsf(layer, file);
        break;
      case "json":
        handleJsonPreset(layer, file);
        break;
    }
  }

  function handleGif(layer, fileURL) {
    layer.element = document.createElement("img");
    layer.element.src = fileURL;
    layer.element.style.width = "100%";
    layer.element.style.height = "100%";
    layer.element.style.objectFit = "contain";
    renderLayer(layer);
  }

  function handleVideo(layer, fileURL) {
    layer.element = document.createElement("video");
    layer.element.src = fileURL;
    layer.element.loop = true;
    layer.element.muted = true;
    layer.element.style.width = "100%";
    layer.element.style.height = "100%";
    layer.element.style.objectFit = "contain";
    renderLayer(layer);
  }

  function handleIsf(layer, file) {
    console.log("handleIsf called with file:", file.name);
    
    // Check if ISF library is loaded
    if (typeof interactiveShaderFormat === 'undefined') {
      console.error("ISF library not loaded!");
      alert("ISF library not loaded. Please check the script tag in HTML.");
      return;
    }
    
    const canvas = document.createElement("canvas");
    canvas.width = 200;
    canvas.height = 150;
    layer.element = canvas;
    const gl = canvas.getContext("webgl");
    if (!gl) {
      console.error("WebGL not supported.");
      return;
    }
    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const source = e.target.result;
        console.log("File loaded, creating renderer for:", file.name);
        const renderer = new interactiveShaderFormat.Renderer(gl);
        renderer.loadSource(source);
        layer.renderer = renderer;
        layer.shader = source;
        layer.renderFunc = () => {
          try {
            gl.viewport(0, 0, canvas.width, canvas.height);
            renderer.draw(canvas.width, canvas.height);
          } catch (renderError) {
            console.error("Render error:", renderError);
          }
        };
        createIsfControls(layer, renderer);
        renderLayer(layer);
        console.log("ISF file loaded successfully:", file.name);
      } catch (error) {
        console.error("Error initializing ISF:", error);
        console.error("Error stack:", error.stack);
        alert("Failed to initialize ISF shader: " + error.message);
      }
    };
    reader.readAsText(file);
  }

  function handleManualShader(layer) {
    console.log("Creating manual WebGL shader...");
    const canvas = document.createElement("canvas");
    canvas.width = 200;
    canvas.height = 150;
    canvas.style.border = "3px solid lime"; // Different color to distinguish
    canvas.style.display = "block";
    canvas.style.width = "200px";
    canvas.style.height = "150px";
    layer.element = canvas;
    layer.fileType = "manual";
    
    const gl = canvas.getContext("webgl");
    if (!gl) {
      console.error("WebGL not supported.");
      return;
    }
    
    // Create simple vertex shader
    const vertexShaderSource = `
      attribute vec4 a_position;
      void main() {
        gl_Position = a_position;
      }
    `;
    
    // Create simple fragment shader that just outputs red
    const fragmentShaderSource = `
      precision mediump float;
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `;
    
    // Compile shaders
    function createShader(gl, type, source) {
      const shader = gl.createShader(type);
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error('Shader compile error:', gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    }
    
    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
    
    // Create program
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      console.error('Program link error:', gl.getProgramInfoLog(program));
      return;
    }
    
    // Create vertex buffer for full screen quad
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    const positions = [
      -1, -1,
       1, -1,
      -1,  1,
       1,  1,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
    
    // Create render function
    layer.renderFunc = () => {
      gl.viewport(0, 0, canvas.width, canvas.height);
      gl.clearColor(0, 0, 0, 1);
      gl.clear(gl.COLOR_BUFFER_BIT);
      
      gl.useProgram(program);
      
      const positionLocation = gl.getAttribLocation(program, "a_position");
      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
      gl.enableVertexAttribArray(positionLocation);
      gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
      
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    };
    
    renderLayer(layer);
    console.log("Manual WebGL shader created successfully!");
  }

  async function handleIsfFromSource(layer, source) {
    console.log("handleIsfFromSource called with source:", source.substring(0, 200));
    
    // Check for manual test mode
    if (source === "Manual Red Test") {
      console.log("Using manual WebGL rendering fallback...");
      handleManualShader(layer);
      return;
    }
    
    // Check for special file loading option
    if (source === "LOAD_FROM_FILE") {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.fs,.isf,.frag';
      input.onchange = async (e) => {
        const file = e.target.files[0];
        if (file) {
          try {
            const fileContent = await file.text();
            await handleIsfFromSource(layer, fileContent);
          } catch (error) {
            console.error('Error loading file:', error);
            alert('Error loading shader file: ' + error.message);
          }
        }
      };
      input.click();
      return;
    }
    
    // Check if ISF Manager is available
    if (!isfManager) {
      console.error("ISF Manager not initialized!");
      alert("ISF Manager not available. Please wait for initialization.");
      return;
    }
    
    const canvas = document.createElement("canvas");
    canvas.width = 200;
    canvas.height = 150;
    canvas.style.border = "2px solid #00ff00";
    canvas.style.display = "block";
    canvas.style.width = "200px";
    canvas.style.height = "150px";
    layer.element = canvas;
    layer.fileType = "isf";
    
    console.log("Canvas created with dimensions:", canvas.width, "x", canvas.height);
    
    try {
      console.log("Creating ISF renderer using ISF Manager...");
      
      // Use the ISF Manager to create the renderer
      const renderer = isfManager.createISFRenderer(layer, source, canvas);
      
      console.log("ISF Renderer created successfully");
      
      layer.renderer = renderer;
      layer.shader = source;
      
      // The ISF Manager handles all rendering automatically,
      // so we don't need a renderFunc for individual layers anymore
      // The animation loop in ISF Manager will handle this
      
      console.log("ISF rendering is now handled by ISF Manager");
      
      // Parse ISF metadata and create controls
      const metadata = parseISFMetadata(source);
      if (metadata) {
        const advancedControls = document.querySelector(
          `.layer[data-layer='${layer.id}'] .advanced-controls`
        );
        createISFControls(layer, renderer, metadata, advancedControls);
      }
      
      renderLayer(layer);
      console.log("ISF shader loaded successfully for layer", layer.id);
    } catch (error) {
      console.error("Error initializing ISF:", error);
      console.error("Error stack:", error.stack);
      alert("Failed to initialize ISF shader: " + error.message);
    }
  }

  function handleMilk(layer) {
    console.log("handleMilk called");
    if (Object.keys(presets).length === 0) {
      alert("Presets are still loading. Please try again in a moment.");
      return;
    }

    initAudio();
    const canvas = document.createElement("canvas");
    canvas.width = 200;
    canvas.height = 150;
    layer.element = canvas;
    layer.fileType = "milk";

    layer.presets = presets;
    layer.presetKeys = Object.keys(presets);
    layer.currentPresetIndex = Math.floor(
      Math.random() * layer.presetKeys.length,
    );

    const preset = layer.presets[layer.presetKeys[layer.currentPresetIndex]];
    layer.currentPreset = preset;

    const visualizer = butterchurn.createVisualizer(audioContext, canvas, {
      width: 200,
      height: 150,
    });
    layer.visualizer = visualizer;
    if (delayedAudible) {
      visualizer.connectAudio(delayedAudible);
    }

    visualizer.loadPreset(preset, 0.0);
    layer.renderFunc = () => layer.visualizer.render();
    createMilkControls(layer);
    renderLayer(layer);
  }

  function createMilkControls(layer) {
    const advancedControls = document.querySelector(
      `.layer[data-layer='${layer.id}'] .advanced-controls`,
    );
    advancedControls.innerHTML = "";

    const presetSelect = document.createElement("select");
    for (let i = 0; i < layer.presetKeys.length; i++) {
      const opt = document.createElement("option");
      opt.innerHTML =
        layer.presetKeys[i].substring(0, 60) +
        (layer.presetKeys[i].length > 60 ? "..." : "");
      opt.value = i;
      presetSelect.appendChild(opt);
    }
    presetSelect.value = layer.currentPresetIndex;
    presetSelect.addEventListener("change", (e) => {
      layer.currentPresetIndex = parseInt(e.target.value, 10);
      const newPreset = layer.presets[layer.presetKeys[layer.currentPresetIndex]];
      layer.currentPreset = newPreset;
      layer.visualizer.loadPreset(newPreset, 2.0);
      if (layer.outputVisualizer) {
        layer.outputVisualizer.loadPreset(newPreset, 2.0);
      }
    });
    advancedControls.appendChild(presetSelect);

    const nextBtn = document.createElement("button");
    nextBtn.innerText = "Next Preset";
    nextBtn.addEventListener("click", () => {
      if (layer.presetKeys.length > 1) {
        layer.currentPresetIndex =
          (layer.currentPresetIndex + 1) % layer.presetKeys.length;
        const newPreset = layer.presets[layer.presetKeys[layer.currentPresetIndex]];
        layer.currentPreset = newPreset;
        layer.visualizer.loadPreset(newPreset, 2.0);
        if (layer.outputVisualizer) {
          layer.outputVisualizer.loadPreset(newPreset, 2.0);
        }
        presetSelect.value = layer.currentPresetIndex;
      }
    });
    advancedControls.appendChild(nextBtn);

    const prevBtn = document.createElement("button");
    prevBtn.innerText = "Prev Preset";
    prevBtn.addEventListener("click", () => {
      if (layer.presetKeys.length > 1) {
        layer.currentPresetIndex =
          (layer.currentPresetIndex - 1 + layer.presetKeys.length) %
          layer.presetKeys.length;
        const newPreset = layer.presets[layer.presetKeys[layer.currentPresetIndex]];
        layer.currentPreset = newPreset;
        layer.visualizer.loadPreset(newPreset, 2.0);
        if (layer.outputVisualizer) {
          layer.outputVisualizer.loadPreset(newPreset, 2.0);
        }
        presetSelect.value = layer.currentPresetIndex;
      }
    });
    advancedControls.appendChild(prevBtn);
  }

  function handleJsonPreset(layer, file) {
    initAudio();
    const canvas = document.createElement("canvas");
    canvas.width = 200;
    canvas.height = 150;
    layer.element = canvas;
    layer.fileType = "milk";

    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const preset = JSON.parse(e.target.result);
        layer.currentPreset = preset;

        const visualizer = butterchurn.createVisualizer(audioContext, canvas, {
          width: 200,
          height: 150,
        });
        layer.visualizer = visualizer;
        if (delayedAudible) {
          visualizer.connectAudio(delayedAudible);
        }

        visualizer.loadPreset(preset, 0.0);
        layer.renderFunc = () => layer.visualizer.render();
        renderLayer(layer);
      } catch (error) {
        console.error("Error loading preset:", error);
        alert("Error loading preset: " + error.message);
      }
    };
    reader.readAsText(file);
  }
});