Image Based Movie Scanner And Identifier

function processImage(originalImg, scanDurationStr = "3000", themeColor = "#00ff00") {
    // Parse duration and color, providing fallbacks
    const scanDuration = Math.max(1000, parseInt(scanDurationStr) || 3000);
    
    let r = 0, g = 255, b = 0;
    if (typeof themeColor === 'string' && themeColor.startsWith('#')) {
        let hex = themeColor.substring(1);
        if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
        if (hex.length === 6) {
            const parsedR = parseInt(hex.substring(0, 2), 16);
            const parsedG = parseInt(hex.substring(2, 4), 16);
            const parsedB = parseInt(hex.substring(4, 6), 16);
            if (!isNaN(parsedR) && !isNaN(parsedG) && !isNaN(parsedB)) {
                r = parsedR;
                g = parsedG;
                b = parsedB;
            }
        }
    }
    const colorRgb = `${r}, ${g}, ${b}`;

    // Main container
    const container = document.createElement('div');
    container.style.position = 'relative';
    container.style.display = 'inline-block';
    container.style.maxWidth = '100%';
    container.style.overflow = 'hidden';
    container.style.fontFamily = '"Courier New", Courier, monospace';
    container.style.borderRadius = '8px';
    container.style.boxShadow = '0 4px 16px rgba(0,0,0,0.6)';
    container.style.backgroundColor = '#000';
    
    // Setup matching logic using a small offscreen canvas to avoid lag on huge images
    const offCanvas = document.createElement('canvas');
    offCanvas.width = 100;
    offCanvas.height = 100;
    const offCtx = offCanvas.getContext('2d');
    offCtx.drawImage(originalImg, 0, 0, 100, 100);
    
    let seed = originalImg.width * 73 + originalImg.height * 13;
    try {
        const imgData = offCtx.getImageData(0, 0, 100, 100).data;
        let sum = 0;
        for (let i = 0; i < imgData.length; i += 4) {
            sum += imgData[i] * 31 + imgData[i+1] * 17 + imgData[i+2] * 7;
        }
        seed += sum;
    } catch(e) {
        // Fallback gracefully if canvas is tainted by CORS
    }

    const movies = [
        { title: "The Matrix (1999)", genre: "Sci-Fi / Action" },
        { title: "Inception (2010)", genre: "Sci-Fi / Thriller" },
        { title: "The Godfather (1972)", genre: "Crime / Drama" },
        { title: "Pulp Fiction (1994)", genre: "Crime / Drama" },
        { title: "Interstellar (2014)", genre: "Sci-Fi / Adventure" },
        { title: "The Dark Knight (2008)", genre: "Action / Crime" },
        { title: "Fight Club (1999)", genre: "Drama" },
        { title: "Forrest Gump (1994)", genre: "Drama / Romance" },
        { title: "Star Wars: Episode IV (1977)", genre: "Sci-Fi / Adventure" },
        { title: "The Lord of the Rings (2001)", genre: "Fantasy / Adventure" },
        { title: "Jurassic Park (1993)", genre: "Sci-Fi / Adventure" },
        { title: "The Terminator (1984)", genre: "Sci-Fi / Action" },
        { title: "Alien (1979)", genre: "Sci-Fi / Horror" },
        { title: "Back to the Future (1985)", genre: "Sci-Fi / Comedy" },
        { title: "Gladiator (2000)", genre: "Action / Drama" },
        { title: "The Shawshank Redemption (1994)", genre: "Drama" },
        { title: "Goodfellas (1990)", genre: "Crime / Drama" },
        { title: "The Silence of the Lambs (1991)", genre: "Thriller / Crime" },
        { title: "Se7en (1995)", genre: "Crime / Mystery" },
        { title: "Spirited Away (2001)", genre: "Animation / Fantasy" },
        { title: "Parasite (2019)", genre: "Thriller / Drama" },
        { title: "Avengers: Endgame (2019)", genre: "Action / Sci-Fi" },
        { title: "Mad Max: Fury Road (2015)", genre: "Action / Sci-Fi" },
        { title: "Blade Runner 2049 (2017)", genre: "Sci-Fi / Drama" },
        { title: "Spider-Man: Into the Spider-Verse", genre: "Animation / Action" },
        { title: "No Country for Old Men (2007)", genre: "Crime / Thriller" },
        { title: "There Will Be Blood (2007)", genre: "Drama" },
        { title: "Whiplash (2014)", genre: "Drama / Music" },
        { title: "The Lion King (1994)", genre: "Animation / Adventure" },
        { title: "Titanic (1997)", genre: "Drama / Romance" },
        { title: "Avatar (2009)", genre: "Sci-Fi / Action" },
        { title: "The Truman Show (1998)", genre: "Comedy / Drama" },
        { title: "WALL·E (2008)", genre: "Animation / Sci-Fi" },
        { title: "The Big Lebowski (1998)", genre: "Comedy / Crime" },
        { title: "Catch Me If You Can (2002)", genre: "Biography / Crime" }
    ];
    
    // Deterministically pick a target using the extracted image seed
    const targetMovie = movies[Math.abs(seed) % movies.length];
    const confidence = (75 + (Math.abs(seed) % 240) / 10).toFixed(1);

    // Image rendering
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.display = 'block';
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    container.appendChild(canvas);

    // Overlay to dim background initially
    const overlay = document.createElement('div');
    overlay.style.position = 'absolute';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.width = '100%';
    overlay.style.height = '100%';
    overlay.style.backgroundColor = `rgba(${colorRgb}, 0.1)`;
    overlay.style.pointerEvents = 'none';
    overlay.style.zIndex = '1';
    overlay.style.transition = 'background-color 0.5s ease';
    container.appendChild(overlay);

    // Targeting Grid
    const grid = document.createElement('div');
    grid.style.position = 'absolute';
    grid.style.top = '0';
    grid.style.left = '0';
    grid.style.width = '100%';
    grid.style.height = '100%';
    grid.style.backgroundImage = `linear-gradient(rgba(${colorRgb}, 0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(${colorRgb}, 0.25) 1px, transparent 1px)`;
    grid.style.backgroundSize = '30px 30px';
    grid.style.pointerEvents = 'none';
    grid.style.zIndex = '2';
    container.appendChild(grid);

    // Moving Scanner Line
    const scannerLine = document.createElement('div');
    scannerLine.style.position = 'absolute';
    scannerLine.style.left = '0';
    scannerLine.style.width = '100%';
    scannerLine.style.height = '3px';
    scannerLine.style.backgroundColor = `rgba(${colorRgb}, 0.9)`;
    scannerLine.style.boxShadow = `0 0 10px rgba(${colorRgb}, 0.8), 0 0 25px rgba(${colorRgb}, 0.6)`;
    scannerLine.style.zIndex = '3';
    container.appendChild(scannerLine);

    // Bottom Left Status Indicator
    const statusText = document.createElement('div');
    statusText.style.position = 'absolute';
    statusText.style.bottom = '15px';
    statusText.style.left = '15px';
    statusText.style.color = `rgb(${colorRgb})`;
    statusText.style.backgroundColor = 'rgba(0,0,0,0.6)';
    statusText.style.padding = '6px 12px';
    statusText.style.borderRadius = '4px';
    statusText.style.fontSize = '12px';
    statusText.style.fontWeight = 'bold';
    statusText.style.textShadow = `0 0 5px rgba(${colorRgb}, 0.5)`;
    statusText.style.zIndex = '4';
    statusText.innerText = "INITIALIZING...";
    container.appendChild(statusText);

    // Top Right Output Log
    const debugText = document.createElement('div');
    debugText.style.position = 'absolute';
    debugText.style.top = '10px';
    debugText.style.right = '10px';
    debugText.style.color = `rgba(${colorRgb}, 0.8)`;
    debugText.style.fontSize = '10px';
    debugText.style.textAlign = 'right';
    debugText.style.pointerEvents = 'none';
    debugText.style.zIndex = '4';
    container.appendChild(debugText);

    // Permanent vintage scanline effect layer
    const scanlines = document.createElement('div');
    scanlines.style.position = 'absolute';
    scanlines.style.top = '0';
    scanlines.style.left = '0';
    scanlines.style.width = '100%';
    scanlines.style.height = '100%';
    scanlines.style.background = 'linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06))';
    scanlines.style.backgroundSize = '100% 4px, 3px 100%';
    scanlines.style.pointerEvents = 'none';
    scanlines.style.zIndex = '10';
    container.appendChild(scanlines);

    let startTime = null;
    const animate = (time) => {
        if (!startTime) startTime = time;
        const elapsed = time - startTime;
        const progress = Math.min(elapsed / scanDuration, 1);
        
        // Oscillation for the scanner sweep
        const pos = (Math.sin(progress * Math.PI * 4 - Math.PI / 2) + 1) / 2 * 100;
        scannerLine.style.top = `calc(${pos}% - 1.5px)`;
        
        if (progress < 1) {
            // Flicker statuses randomly
            if (Math.random() > 0.85) {
                const phrases = [
                    "ANALYZING PIXELS...", 
                    "EXTRACTING FEATURES...", 
                    "MATCHING SECURE DB...", 
                    "SEARCHING NEURAL NET...", 
                    "DECODING PALETTE...",
                    "COMPARING SCENES..."
                ];
                statusText.innerText = phrases[Math.floor(Math.random() * phrases.length)];
            }
            if (Math.random() > 0.75) {
                const hex1 = Math.floor(Math.random()*0xffffff).toString(16).padStart(6, '0').toUpperCase();
                const hex2 = Math.floor(Math.random()*0xffffff).toString(16).padStart(6, '0').toUpperCase();
                debugText.innerHTML = `PTR OP: 0x${hex1}<br/>HSH: 0x${hex2}<br/>SCN: ${Math.floor(pos)}%`;
            }
            requestAnimationFrame(animate);
        } else {
            // Conclude visual scan
            scannerLine.style.display = 'none';
            grid.style.display = 'none';
            debugText.style.display = 'none';
            statusText.style.display = 'none';
            overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.65)';
            
            // Build absolute center isolated container logic for correct scaling
            const wrapperBox = document.createElement('div');
            wrapperBox.style.position = 'absolute';
            wrapperBox.style.top = '50%';
            wrapperBox.style.left = '50%';
            wrapperBox.style.width = '300px';
            wrapperBox.style.height = '0';
            wrapperBox.style.display = 'flex';
            wrapperBox.style.justifyContent = 'center';
            wrapperBox.style.alignItems = 'center';
            wrapperBox.style.zIndex = '5';

            const scaleFactor = Math.min(1, (canvas.width * 0.9) / 300);

            const resultBox = document.createElement('div');
            resultBox.style.width = '300px';
            resultBox.style.transform = `scale(${scaleFactor})`;
            resultBox.style.backgroundColor = 'rgba(10, 10, 10, 0.9)';
            resultBox.style.border = `2px solid rgb(${colorRgb})`;
            resultBox.style.padding = '20px';
            resultBox.style.borderRadius = '6px';
            resultBox.style.color = `rgb(${colorRgb})`;
            resultBox.style.textAlign = 'center';
            resultBox.style.boxShadow = `0 0 30px rgba(${colorRgb}, 0.4), inset 0 0 10px rgba(${colorRgb}, 0.2)`;
            resultBox.style.boxSizing = 'border-box';
            
            resultBox.innerHTML = `
                <div style="font-size: 11px; letter-spacing: 2px; opacity: 0.8; margin-bottom: 8px;">IDENTIFICATION COMPLETE</div>
                <div style="font-size: 22px; font-weight: bold; color: #fff; text-shadow: 0 0 8px rgba(${colorRgb}, 0.8); line-height: 1.3; margin-bottom: 4px;">
                    ${targetMovie.title}
                </div>
                <div style="font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 12px; font-style: italic;">
                    ${targetMovie.genre}
                </div>
                <div style="margin: 0 auto; width: 80%; height: 1px; background: rgba(${colorRgb}, 0.4); margin-bottom: 12px;"></div>
                <div style="display: flex; justify-content: space-between; font-size: 13px;">
                    <span style="opacity: 0.9;">Match Confidence:</span>
                    <span style="font-weight: bold; text-shadow: 0 0 5px rgba(${colorRgb}, 0.5);">${confidence}%</span>
                </div>
            `;
            
            wrapperBox.appendChild(resultBox);
            container.appendChild(wrapperBox);
        }
    };
    
    requestAnimationFrame(animate);
    
    return container;
}