Nick Jr Image Finder

function processImage(originalImg, magnification = "2.5", radius = "80") {
    if (!originalImg || originalImg.width === 0 || originalImg.height === 0) {
        throw new Error("Invalid image provided.");
    }

    const mag = parseFloat(magnification) || 2.5;
    const rad = parseInt(radius) || 80;
    
    const maxDim = 800;
    let width = originalImg.width;
    let height = originalImg.height;
    
    // Scale down image to fit common screen dimensions while keeping quality
    if (width > maxDim || height > maxDim) {
        const ratio = Math.min(maxDim / width, maxDim / height);
        width = Math.floor(width * ratio);
        height = Math.floor(height * ratio);
    }

    // Main wrapper element
    const container = document.createElement('div');
    container.style.position = 'relative';
    container.style.display = 'inline-block';
    container.style.width = width + 'px';
    container.style.height = height + 'px';
    container.style.overflow = 'hidden';
    container.style.userSelect = 'none';
    container.style.touchAction = 'none';
    container.style.cursor = 'crosshair';
    container.style.border = '10px solid #FF8200'; // Nick Jr Orange
    container.style.borderRadius = '20px';
    container.style.boxSizing = 'content-box';
    container.style.boxShadow = '0 10px 20px rgba(0,0,0,0.2)';
    container.style.backgroundColor = '#FFFFFF';

    // Image display canvas
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    canvas.style.display = 'block';
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Dynamic Magnifying Glass Canvas
    const glassBorder = 8;
    const glass = document.createElement('canvas');
    glass.width = rad * 2;
    glass.height = rad * 2;
    glass.style.position = 'absolute';
    glass.style.border = `${glassBorder}px solid #0880CE`; // Nick Jr Blue
    glass.style.borderRadius = '50%';
    glass.style.cursor = 'none';
    glass.style.display = 'none';
    glass.style.pointerEvents = 'none';
    glass.style.boxShadow = '0 6px 12px rgba(0,0,0,0.4)';
    glass.style.zIndex = '10';
    glass.style.background = '#FFFFFF';

    container.appendChild(canvas);
    container.appendChild(glass);

    // Playful, themes branding badge
    const badge = document.createElement('div');
    badge.innerText = 'Nick Jr. Finder';
    badge.style.position = 'absolute';
    badge.style.bottom = '15px';
    badge.style.right = '15px';
    badge.style.background = '#FF8200';
    badge.style.color = '#FFFFFF';
    badge.style.padding = '8px 16px';
    badge.style.borderRadius = '30px';
    badge.style.fontFamily = '"Comic Sans MS", "Chalkboard SE", "Marker Felt", "Arial Rounded MT Bold", sans-serif'; 
    badge.style.fontSize = '18px';
    badge.style.fontWeight = 'bold';
    badge.style.border = '4px solid #0880CE';
    badge.style.pointerEvents = 'none';
    badge.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)';
    badge.style.textTransform = 'uppercase';
    badge.style.letterSpacing = '1px';
    
    container.appendChild(badge);

    const updateGlass = (x, y) => {
        glass.style.display = 'block';
        
        // Position glass under mouse
        glass.style.left = (x - rad - glassBorder) + 'px';
        glass.style.top = (y - rad - glassBorder) + 'px';

        const gCtx = glass.getContext('2d');
        gCtx.clearRect(0, 0, glass.width, glass.height);

        // Map original high-res image coordinate mapping
        gCtx.save();
        gCtx.beginPath();
        gCtx.arc(rad, rad, rad, 0, Math.PI * 2);
        gCtx.clip();

        gCtx.translate(rad, rad);
        const ratio = width / originalImg.width; 
        const drawScale = mag * ratio;
        gCtx.scale(drawScale, drawScale);
        
        const origX = x / ratio;
        const origY = y / ratio;
        gCtx.drawImage(originalImg, -origX, -origY);
        
        gCtx.restore();

        // Add a glossy lens shine effect overlay
        gCtx.save();
        gCtx.beginPath();
        gCtx.arc(rad, rad, rad, 0, Math.PI * 2);
        const gradient = gCtx.createRadialGradient(rad - rad/3, rad - rad/3, rad/10, rad, rad, rad);
        gradient.addColorStop(0, 'rgba(255,255,255,0.4)');
        gradient.addColorStop(0.7, 'rgba(0,0,0,0.0)');
        gradient.addColorStop(1, 'rgba(0,0,0,0.3)');
        gCtx.fillStyle = gradient;
        gCtx.fill();
        gCtx.restore();
    };

    // Event hooks for interactive "Finding"
    container.addEventListener('mousemove', (e) => {
        const rect = container.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        updateGlass(x, y);
    });

    container.addEventListener('mouseleave', () => {
        glass.style.display = 'none';
    });

    container.addEventListener('touchmove', (e) => {
        e.preventDefault();
        const rect = container.getBoundingClientRect();
        const touch = e.touches[0];
        const x = touch.clientX - rect.left;
        const y = touch.clientY - rect.top;
        updateGlass(x, y);
    }, { passive: false });

    container.addEventListener('touchend', () => {
        glass.style.display = 'none';
    });

    return container;
}