app-simple.js

document.addEventListener("DOMContentLoaded", () => {
  console.log("Starting simple app initialization...");
  
  // Get required elements
  const layersContainer = document.getElementById("layers-container");
  const openOutputBtn = document.getElementById("open-output");
  
  console.log("layersContainer found:", !!layersContainer);
  console.log("openOutputBtn found:", !!openOutputBtn);
  
  if (!layersContainer) {
    console.error("CRITICAL: layers-container element not found!");
    return;
  }
  
  // Create 4 simple layers
  const numLayers = 4;
  for (let i = 0; i < numLayers; i++) {
    console.log(`Creating layer ${i + 1}...`);
    
    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>
    `;
    
    layersContainer.appendChild(layerEl);
    console.log(`Layer ${i + 1} added to DOM`);
  }
  
  console.log("All layers created successfully!");
  
  // Simple event delegation for testing
  layersContainer.addEventListener("click", (e) => {
    if (e.target.classList.contains("load-isf-btn")) {
      const layerId = e.target.dataset.layer;
      console.log(`ISF button clicked for layer ${layerId}`);
      alert(`ISF button clicked for layer ${parseInt(layerId) + 1}`);
    } else if (e.target.classList.contains("load-presets-btn")) {
      const layerId = e.target.dataset.layer;
      console.log(`Presets button clicked for layer ${layerId}`);
      alert(`Presets button clicked for layer ${parseInt(layerId) + 1}`);
    }
  });
  
  console.log("Simple app initialization complete!");
});