const ANNOTATION_WIDTH = 108;

function createAnnotatedImages() {
    createAnnotatedImage('video-window-1.png', 594, 421, 800, 40, 0, annotations1, 'live1');
    createAnnotatedImage('video-window-2.png', 594, 421, 800, 0, 0, annotations2, 'live2');
}

function createAnnotatedImage(imageFilename, imageWidth, imageHeight, containerWidth, paddingTop, paddingBottom, annotations, parentElementId) {
    // Calculate container height
    const containerHeight = paddingTop + imageHeight + paddingBottom;
    
    // Clear parent element
    let parentElement = document.getElementById(parentElementId);
    parentElement.innerHTML = '';
    
    // Create main container
    const container = document.createElement('div');
    container.className = 'annotation-container';
    container.style.width = containerWidth + 'px';
    container.style.height = containerHeight + 'px';
    
    // Create and position base image
    const img = document.createElement('img');
    img.src = imageFilename;
    img.className = 'base-image';
    img.style.width = imageWidth + 'px';
    img.style.height = imageHeight + 'px';
    img.style.top = Math.round(paddingTop) + 'px';
    img.style.left = Math.round((containerWidth - imageWidth) / 2) + 'px';
    container.appendChild(img);
    
    // Create SVG for arrows
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.className = 'annotation-svg';
    svg.style.position = 'relative';
    svg.style.zIndex = 15;
    svg.style.width = containerWidth + 'px';
    svg.style.height = containerHeight + 'px';
    
    // Add each annotation
    annotations.forEach(annotation => {
        // Create text element
        const textEl = document.createElement('div');
        textEl.className = 'annotation-text';
        textEl.style.left = annotation.textX + 'px';
        textEl.style.top = annotation.textY + 'px';
        textEl.style.width = ANNOTATION_WIDTH + 'px';
        textEl.textContent = annotation.text;
        
        container.appendChild(textEl);
        
        // Create arrow
        const arrow = createArrow(
            annotation.arrowStart.x, 
            annotation.arrowStart.y,
            annotation.arrowEnd.x, 
            annotation.arrowEnd.y
        );
        svg.appendChild(arrow);
    });
    
    container.appendChild(svg);
    parentElement.appendChild(container);
}

function createArrow(startX, startY, endX, endY, colour = '#ff0000') {
    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    
    // Create arrow line
    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.setAttribute('x1', startX);
    line.setAttribute('y1', startY);
    line.setAttribute('x2', endX);
    line.setAttribute('y2', endY);
    line.setAttribute('stroke', colour);
    line.setAttribute('stroke-width', '2');
    
    // Calculate arrow head
    const angle = Math.atan2(endY - startY, endX - startX);
    const arrowLength = 8;
    const arrowAngle = Math.PI / 6; // 30 degrees
    
    const arrowX1 = endX - arrowLength * Math.cos(angle - arrowAngle);
    const arrowY1 = endY - arrowLength * Math.sin(angle - arrowAngle);
    const arrowX2 = endX - arrowLength * Math.cos(angle + arrowAngle);
    const arrowY2 = endY - arrowLength * Math.sin(angle + arrowAngle);
    
    // Create arrow head
    const arrowHead = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
    const points = `${endX},${endY} ${arrowX1},${arrowY1} ${arrowX2},${arrowY2}`;
    arrowHead.setAttribute('points', points);
    arrowHead.setAttribute('fill', colour);
    
    g.appendChild(line);
    g.appendChild(arrowHead);
    
    return g;
}