Bus Cord

(function() {
    // --- SETUP AND INITIALIZATION ---
    var canvas = document.getElementById("cordcanvas"); // Use var for safer console testing
    
    if (!canvas) {
        console.error("Canvas element with ID 'cordcanvas' not found.");
        return;
    }

    // Ensure canvas has dimensions, or they will default to 300x150!
    canvas.width = canvas.clientWidth || 2000; // Use clientWidth for max size, default to 2000
    canvas.height = canvas.clientHeight || 200; // Default to 200 height
    
    var ctx = canvas.getContext("2d");
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;

    // Define INITIAL Control Point (These are the snap-back coordinates)
    const START_CPX = (50 / 100) * canvasWidth; 
    const START_CPY = (100 / 100) * canvasHeight; // Start at the bottom center of the canvas

    // Fixed End Point (Top right corner of the canvas)
    const EPX_px = (100 / 100) * canvasWidth;
    const EPY_px = (0 / 100) * canvasHeight;

    // Current Control Point (What is actually drawn)
    var CPX = START_CPX; 
    var CPY = START_CPY; 

    var isDragging = false; 
    var startX = 0; 
    var startY = 0; 
    var animationId = null;

    // --- DRAWING FUNCTION ---
    function drawcord(cpx, cpy) {
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        const cord = new Path2D();
        cord.moveTo(0, 0); // Start point (Top left)
        cord.quadraticCurveTo(cpx, cpy, EPX_px, EPY_px); // Control point, End point
        ctx.lineWidth = 15; 
        ctx.strokeStyle = "goldenrod";
        ctx.stroke(cord);
        return cord;
    }

    // --- ANIMATION LOOP (The "snap-back" function) ---
    function animateSnapBack() {
        if (animationId) { cancelAnimationFrame(animationId); }
        
        const lerpFactor = 0.1; 
        
        CPX = CPX + (START_CPX - CPX) * lerpFactor;
        CPY = CPY + (START_CPY - CPY) * lerpFactor;
        
        currentCord = drawcord(CPX, CPY);

        if (Math.abs(CPX - START_CPX) > 1 || Math.abs(CPY - START_CPY) > 1) {
            animationId = requestAnimationFrame(animateSnapBack);
        } else {
            CPX = START_CPX;
            CPY = START_CPY;
            currentCord = drawcord(CPX, CPY);
            animationId = null;
        }
    }

    var currentCord = drawcord(CPX, CPY);

    // --- INTERACTION HANDLERS ---
    
    // 1. Mouse Down: Start Dragging
    canvas.onmousedown = function(event) {
        if (animationId) { cancelAnimationFrame(animationId); animationId = null; }
        
        if (ctx.isPointInStroke(currentCord, event.offsetX, event.offsetY)) {
            isDragging = true;
            startX = event.offsetX; 
            startY = event.offsetY;
            canvas.style.cursor = 'grabbing';
        }
    };

    // 2. Mouse Move: Update Cord Shape
    canvas.onmousemove = function(event) {
        if (isDragging) {
            CPX = event.offsetX;
            CPY = event.offsetY;
            currentCord = drawcord(CPX, CPY);
        } else {
            // Hover logic
            if (ctx.isPointInStroke(currentCord, event.offsetX, event.offsetY)){
                canvas.style.cursor = "url('images/curlyQ.png'), grab";
            } else {
                canvas.style.cursor = "url('images/starfav.webp'), default";
            }
        }
    };

    // 3. Mouse Up/Mouse Leave: Stop Dragging, Check Click, and START Snap-Back
    function stopDrag(event) {
        if (isDragging) {
            isDragging = false;
            canvas.style.cursor = 'default';
            
            // Check if this was a click (not a drag)
            const dx = event.offsetX - startX;
            const dy = event.offsetY - startY;
            if (Math.sqrt(dx*dx + dy*dy) < 5) {
                // This was a click! Trigger the action.
                if (ctx.isPointInStroke(currentCord, event.offsetX, event.offsetY)) {
                    document.getElementById('cordDialogBox').style.display = "block";
                    document.getElementById("cordDialog").innerHTML = document.getElementById('OGdialog').innerHTML;
                    console.log('Clicked and dialog triggered!');
                }
            }
            
            animateSnapBack();
        }
    }
    canvas.onmouseup = stopDrag;
    canvas.onmouseleave = stopDrag;
    
    console.log('Full Cord Logic Initialized and Drawing with full canvas dimensions.');
})();