Warner Bros Discovery Animation Studio Divisions Image Viewer

function processImage(originalImg, overlayOpacity = 0.45, showLabels = "yes") {
    // Create a canvas to process the image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set dimensions to match original image
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;

    // Draw the underlying image first
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Half widths and heights for the 4 quadrants
    const hw = w / 2;
    const hh = h / 2;

    // Format opacity for usage (Number casting, clamp between 0 and 1)
    const maxAlpha = Math.max(0, Math.min(1, Number(overlayOpacity)));
    const hexAlpha = Math.floor(maxAlpha * 255).toString(16).padStart(2, '0');

    // -------------------------------------------------------------
    // Division 1: Warner Bros. Animation (Top-Left)
    // Style: Blue & Gold rings (Looney Tunes / Shield motif)
    // -------------------------------------------------------------
    ctx.save();
    ctx.beginPath();
    ctx.rect(0, 0, hw, hh);
    ctx.clip();
    const ringSpacing = Math.max(hw, hh) / 6;
    for (let r = Math.max(hw, hh); r > 0; r -= ringSpacing) {
        ctx.beginPath();
        ctx.arc(hw / 2, hh / 2, r, 0, Math.PI * 2);
        const isEven = Math.round(r / ringSpacing) % 2 === 0;
        ctx.fillStyle = isEven ? `rgba(0, 85, 184, ${maxAlpha})` : `rgba(255, 204, 0, ${maxAlpha})`;
        ctx.fill();
    }
    ctx.restore();

    // -------------------------------------------------------------
    // Division 2: Cartoon Network Studios (Top-Right)
    // Style: Black and White Checkerboard
    // -------------------------------------------------------------
    ctx.save();
    ctx.beginPath();
    ctx.rect(hw, 0, hw, hh);
    ctx.clip();
    const sq = hw / 8; // 8x8 checkerboard basis
    for (let i = 0; i < hw / sq + 1; i++) {
        for (let j = 0; j < hh / sq + 1; j++) {
            ctx.fillStyle = ((i + j) % 2 === 0) ? `rgba(255, 255, 255, ${maxAlpha})` : `rgba(0, 0, 0, ${maxAlpha})`;
            ctx.fillRect(hw + i * sq, j * sq, sq, sq);
        }
    }
    ctx.restore();

    // -------------------------------------------------------------
    // Division 3: Hanna-Barbera Studios Europe (Bottom-Left)
    // Style: Retro colourful vertical blocks
    // -------------------------------------------------------------
    ctx.save();
    ctx.beginPath();
    ctx.rect(0, hh, hw, hh);
    ctx.clip();
    const stripes = 8;
    const colors = ["#FF5733", "#FFC300", "#DAF7A6", "#33FFBD", "#3380FF", "#9033FF", "#FF33F5", "#FF3380"];
    for (let i = 0; i < stripes; i++) {
        ctx.fillStyle = colors[i % colors.length] + hexAlpha; 
        ctx.fillRect(i * (hw / stripes), hh, (hw / stripes) + 1, hh);
    }
    ctx.restore();

    // -------------------------------------------------------------
    // Division 4: Williams Street (Bottom-Right)
    // Style: Gritty dark scanlines
    // -------------------------------------------------------------
    ctx.save();
    ctx.beginPath();
    ctx.rect(hw, hh, hw, hh);
    ctx.clip();
    ctx.fillStyle = `rgba(15, 15, 15, ${maxAlpha})`;
    ctx.fillRect(hw, hh, hw, hh);
    for (let j = hh; j < h; j += 6) {
        ctx.fillStyle = `rgba(200, 255, 255, ${maxAlpha * 0.4})`;
        ctx.fillRect(hw, j, hw, 3);
    }
    ctx.restore();

    // -------------------------------------------------------------
    // Inner Grid Borders
    // -------------------------------------------------------------
    ctx.strokeStyle = "#FFFFFF";
    ctx.lineWidth = Math.max(3, w * 0.005);
    ctx.beginPath();
    ctx.moveTo(hw, 0);
    ctx.lineTo(hw, h);
    ctx.moveTo(0, hh);
    ctx.lineTo(w, hh);
    ctx.stroke();

    // -------------------------------------------------------------
    // Add Text Labels
    // -------------------------------------------------------------
    if (showLabels.toLowerCase() === "yes") {
        const divisionsData = [
            { name: "Warner Bros. Animation", x: hw / 2, y: hh / 2 },
            { name: "Cartoon Network Studios", x: hw + hw / 2, y: hh / 2 },
            { name: "Hanna-Barbera Europe", x: hw / 2, y: hh + hh / 2 },
            { name: "Williams Street", x: hw + hw / 2, y: hh + hh / 2 }
        ];

        // Draw quadrant labels
        divisionsData.forEach(div => {
            const fontSize = Math.max(16, h * 0.035);
            ctx.font = `bold ${fontSize}px "Arial Black", Arial, sans-serif`;
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillStyle = "#FFFFFF";
            
            // Drop shadow for readability
            ctx.shadowColor = "rgba(0, 0, 0, 0.9)";
            ctx.shadowBlur = 6;
            ctx.shadowOffsetX = 3;
            ctx.shadowOffsetY = 3;
            
            // Prevent text from blowing past the quadrant edge
            const maxTextWidth = hw - (w * 0.05);
            ctx.fillText(div.name, div.x, div.y, maxTextWidth);
        });

        // Reset shadow
        ctx.shadowColor = "transparent";
        ctx.shadowBlur = 0;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;

        // Draw central WBD badge
        const mainFontSize = Math.max(18, h * 0.05);
        ctx.font = `900 ${mainFontSize}px "Arial Black", Arial, sans-serif`;
        const titleText = "WBD ANIMATION DIVISIONS";
        
        const textWidth = ctx.measureText(titleText).width;
        // Check if text is too wide for screen, scale down background box if needed
        const bgWidth = Math.min(w * 0.9, textWidth + w * 0.04);
        const bgHeight = mainFontSize * 2.2;
        const bgX = (w - bgWidth) / 2;
        const bgY = (h - bgHeight) / 2;

        // Box backing
        ctx.fillStyle = "rgba(0, 0, 0, 0.85)";
        ctx.fillRect(bgX, bgY, bgWidth, bgHeight);
        ctx.strokeStyle = "#FFFFFF";
        ctx.lineWidth = Math.max(2, w * 0.003);
        ctx.strokeRect(bgX, bgY, bgWidth, bgHeight);

        // Center Text
        ctx.shadowColor = "rgba(0, 0, 0, 1)";
        ctx.shadowBlur = 5;
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;
        ctx.fillStyle = "#FFFFFF";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(titleText, w / 2, h / 2, bgWidth - 20);
    }

    return canvas;
}