Universal Pictures Fanfare Audio Comparison Tool

function processImage(originalImg, titleText = "Universal Pictures Fanfare Comparison Tool") {
    // Create main container
    const container = document.createElement('div');
    container.style.width = '100%';
    container.style.maxWidth = '800px';
    container.style.margin = '0 auto';
    container.style.backgroundColor = '#0b0f19';
    container.style.color = '#e2e8f0';
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.padding = '30px';
    container.style.borderRadius = '12px';
    container.style.boxShadow = '0 10px 25px rgba(0,0,0,0.5)';
    container.style.textAlign = 'center';

    // Create Title Component
    const header = document.createElement('h2');
    header.textContent = titleText;
    header.style.marginTop = '0';
    header.style.marginBottom = '20px';
    header.style.color = '#38bdf8';
    header.style.letterSpacing = '1px';
    container.appendChild(header);

    // Canvas to display original image with visualizer effects
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Size and draw image dynamically
    const drawImage = () => {
        const maxWidth = 700;
        const targetWidth = Math.min(originalImg.width || 700, maxWidth);
        const scale = targetWidth / (originalImg.width || targetWidth);
        const targetHeight = (originalImg.height || 400) * scale;
        
        canvas.width = targetWidth;
        canvas.height = targetHeight;
        
        if (originalImg.width > 0) {
            ctx.drawImage(originalImg, 0, 0, targetWidth, targetHeight);
        } else {
            // Fallback just in case image is not fully loaded
            ctx.fillStyle = '#1e293b';
            ctx.fillRect(0, 0, targetWidth, targetHeight);
            ctx.fillStyle = '#64748b';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('Original Image Loader', targetWidth / 2, targetHeight / 2);
        }
    };
    drawImage();
    
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.borderRadius = '8px';
    canvas.style.boxShadow = '0 4px 20px rgba(0,0,0,0.6)';
    canvas.style.transition = 'transform 0.05s linear, filter 0.2s';
    container.appendChild(canvas);

    // Context message
    const visualizerMsg = document.createElement('p');
    visualizerMsg.textContent = "Select a respective fanfare below to hear the Audio Simulation & view Image Visualizer.";
    visualizerMsg.style.fontSize = '15px';
    visualizerMsg.style.color = '#94a3b8';
    visualizerMsg.style.margin = '25px 0';
    container.appendChild(visualizerMsg);

    // Control buttons container
    const controls = document.createElement('div');
    controls.style.display = 'flex';
    controls.style.flexWrap = 'wrap';
    controls.style.justifyContent = 'center';
    controls.style.gap = '15px';
    container.appendChild(controls);

    let audioCtx;
    let activeInt;

    // Visualizer hook
    const startVisualizer = (durationMs) => {
        clearInterval(activeInt);
        let startTime = Date.now();
        activeInt = setInterval(() => {
            const elapsed = Date.now() - startTime;
            if (elapsed > durationMs) {
                clearInterval(activeInt);
                canvas.style.transform = 'scale(1)';
                canvas.style.filter = 'none';
                visualizerMsg.textContent = "Playback Ended. Ready for Comparison.";
                return;
            }
            
            // Generate visual pumping and glowing based on time
            const phase = elapsed / 120;
            const sizeMod = Math.sin(phase) * 0.015;
            const scaleAmount = 1 + sizeMod;
            const brightness = 1 + Math.abs(Math.sin(phase * 1.5) * 0.25);
            
            canvas.style.transform = `scale(${scaleAmount})`;
            canvas.style.filter = `brightness(${brightness}) drop-shadow(0 0 ${10 + (brightness*10)}px rgba(56, 189, 248, 0.5))`;
        }, 50);
    };

    // Synthesize Fanfare Chords dynamically based on Web Audio API
    // Prevents issues with external audio copyrights and broken links.
    const syntheticFanfare = (ctxAudio, notes, oscType = 'triangle') => {
        const now = ctxAudio.currentTime;
        let totalEnd = 0;

        // Dynamics compressor to ensure clean mix of multiple notes
        const compressor = ctxAudio.createDynamicsCompressor();
        compressor.threshold.setValueAtTime(-24, now);
        compressor.knee.setValueAtTime(30, now);
        compressor.ratio.setValueAtTime(12, now);
        compressor.attack.setValueAtTime(0.003, now);
        compressor.release.setValueAtTime(0.25, now);
        compressor.connect(ctxAudio.destination);

        notes.forEach(note => {
            const osc = ctxAudio.createOscillator();
            const gain = ctxAudio.createGain();
            
            osc.type = oscType;
            osc.frequency.setValueAtTime(note.freq, now + note.start);
            
            osc.connect(gain);
            gain.connect(compressor);
            
            osc.start(now + note.start);
            gain.gain.setValueAtTime(0, now + note.start);
            gain.gain.linearRampToValueAtTime(note.vol || 0.3, now + note.start + 0.1); 
            gain.gain.exponentialRampToValueAtTime(0.001, now + note.start + note.dur);
            osc.stop(now + note.start + note.dur);

            totalEnd = Math.max(totalEnd, note.start + note.dur);
        });
        
        startVisualizer(totalEnd * 1000);
    };

    // Button Generator Helper
    const createButton = (text, onClick, bgColor, hoverColor) => {
        const btn = document.createElement('button');
        btn.textContent = text;
        btn.style.padding = '12px 24px';
        btn.style.border = 'none';
        btn.style.borderRadius = '6px';
        btn.style.backgroundColor = bgColor;
        btn.style.color = '#ffffff';
        btn.style.fontSize = '16px';
        btn.style.cursor = 'pointer';
        btn.style.fontWeight = 'bold';
        btn.style.transition = 'all 0.2s ease-in-out';
        btn.style.boxShadow = '0 4px 6px rgba(0,0,0,0.3)';
        
        btn.onmouseenter = () => {
            btn.style.backgroundColor = hoverColor;
            btn.style.transform = 'translateY(-2px)';
        };
        btn.onmouseleave = () => {
            btn.style.backgroundColor = bgColor;
            btn.style.transform = 'translateY(0)';
        };
        
        btn.onclick = () => {
            if (!audioCtx) {
                audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            }
            if (audioCtx.state === 'suspended') audioCtx.resume();
            
            onClick(audioCtx);
        };
        return btn;
    };

    // Interactive Button 1: David Newman Simulation
    const newmanBtn = createButton('David Newman Fanfare', (context) => {
        // Broad, rich major orchestration structure simulating modern era orchestration
        const notes = [
            { freq: 440.00, start: 0.0, dur: 1.0, vol: 0.3 }, // A4
            { freq: 220.00, start: 0.0, dur: 1.0, vol: 0.3 }, // A3 (Bass)
            { freq: 587.33, start: 1.0, dur: 1.0, vol: 0.3 }, // D5
            { freq: 293.66, start: 1.0, dur: 1.0, vol: 0.4 }, // D4
            { freq: 880.00, start: 2.0, dur: 2.5, vol: 0.3 }, // A5
            { freq: 440.00, start: 2.0, dur: 2.5, vol: 0.4 }, // A4
            { freq: 554.37, start: 2.2, dur: 2.3, vol: 0.2 }  // C#5 (Grand Major third)
        ];
        syntheticFanfare(context, notes, 'sawtooth');
        visualizerMsg.textContent = "Playing Simulation: David Newman Fanfare...";
        visualizerMsg.style.color = '#34d399';
    }, '#059669', '#047857');

    // Interactive Button 2: Jerry Goldsmith Simulation
    const goldsmithBtn = createButton('Jerry Goldsmith Fanfare', (context) => {
        // Classic triumphant horn synth structure (1997 era)
        const notes = [
            { freq: 466.16, start: 0.0, dur: 1.2, vol: 0.4 }, // Bb4
            { freq: 698.46, start: 1.2, dur: 1.2, vol: 0.4 }, // F5
            { freq: 932.33, start: 2.4, dur: 2.5, vol: 0.5 }, // Bb5 (High Register)
            { freq: 466.16, start: 2.4, dur: 2.5, vol: 0.3 }  // Bb4 harmony support
        ];
        syntheticFanfare(context, notes, 'triangle');
        visualizerMsg.textContent = "Playing Simulation: Jerry Goldsmith Fanfare...";
        visualizerMsg.style.color = '#60a5fa';
    }, '#2563eb', '#1d4ed8');

    // Append controls to container
    controls.appendChild(newmanBtn);
    controls.appendChild(goldsmithBtn);

    return container;
}