window.balloonCanvas = {

    resizeToIframe: function () {
        const iframe = document.querySelector("iframe");
        const canvas = document.getElementById("balloonCanvas");
        if (!iframe || !canvas) return;

        const rect = iframe.getBoundingClientRect();

        canvas.width = rect.width;
        canvas.height = rect.height;
    },

    clear: function () {
        const canvas = document.getElementById("balloonCanvas");
        if (!canvas) return;

        const ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    },

    draw: function (balloons) {
        const canvas = document.getElementById("balloonCanvas");
        if (!canvas) return;

        const ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        balloons.forEach(b => {
            const x = b.x * canvas.width;
            const y = b.y * canvas.height;

            ctx.beginPath();
            ctx.arc(x, y, 12, 0, 2 * Math.PI);
            ctx.fillStyle = b.selected ? "#ffe5e5" : "#ffffff";
            ctx.strokeStyle = "#000000";
            ctx.lineWidth = 2;
            ctx.fill();
            ctx.stroke();

            ctx.fillStyle = "#000000";
            ctx.font = "12px Arial";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillText(b.number.toString(), x, y);
        });
    }
};