document.addEventListener('DOMContentLoaded', function() {
    const svg = document.getElementById('graph');
    const scale = 100; // 1 unit = 100px (1 inch gap)
    
    // Define the points (convert 1 unit = 100px)
    const points = [
        {x: 0, y: 0, label: 'A'},
        {x: 4, y: 4, label: 'B'},
        {x: 0, y: 4, label: 'C'},
        {x: 4, y: 0, label: 'D'},
        {x: 0, y: 2, label: 'E'},
        {x: 2, y: 0, label: 'F'},
        {x: 4, y: 2, label: 'G'},
        {x: 2, y: 4, label: 'H'}
    ];

    // Define the connections
    const connections = [
        [0, 1],  // A-B (0,0)-(4,4)
        [2, 3],  // C-D (0,4)-(4,0)
        [4, 5],  // E-F (0,2)-(2,0)
        [5, 6],  // F-G (2,0)-(4,2)
        [6, 7],  // G-H (4,2)-(2,4)
        [7, 4],  // H-E (2,4)-(0,2)
        [0, 3],  // A-D (0,0)-(4,0)
        [3, 1],  // D-B (4,0)-(4,4)
        [1, 2],  // B-C (4,4)-(0,4)
        [2, 0]   // C-A (0,4)-(0,0)
    ];

    // Draw dots
    points.forEach(point => {
        // Create circle
        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', point.x * scale);
        circle.setAttribute('cy', point.y * scale);
        circle.setAttribute('r', 8);
        circle.setAttribute('class', 'dot');
        svg.appendChild(circle);
        
        // Create label
        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', point.x * scale);
        text.setAttribute('y', point.y * scale);
        text.setAttribute('dy', '1.5em');
        text.setAttribute('class', 'dot-label');
        text.textContent = point.label;
        svg.appendChild(text);
    });

    // Draw lines
    connections.forEach(conn => {
        const [start, end] = conn;
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', points[start].x * scale);
        line.setAttribute('y1', points[start].y * scale);
        line.setAttribute('x2', points[end].x * scale);
        line.setAttribute('y2', points[end].y * scale);
        line.setAttribute('class', 'line');
        svg.appendChild(line);
    });

    // Animation button
    document.getElementById('animateBtn').addEventListener('click', function() {
        document.querySelectorAll('.line').forEach(line => {
            line.style.strokeDashoffset = '1000';
            line.style.animation = 'dash 2s linear forwards';
        });
    });
});