<h1>Variables</h1>
<code>{{elementuuid}}</code>
<code>{{class_names}}</code>
<br>
{% for i, class_name in class_names %}
<input type="checkbox" id="mask{{i}}" value="mask{{i}}" onchange="renderAll();" checked>
<label for="mask{{i}}">{{class_name}}</label>
{% endfor %}
<input id="alphaslider" type="range" min="0.1" max="0.9" step="0.01" value="0.3">
<br />
<canvas id="{{elementuuid}}"></canvas>
<script>
    var canvas = document.getElementById("{{elementuuid}}");
    ctx = canvas.getContext("2d");

    // Load the image
    var img = new Image();
    img.src = "{{imagelink}}";

    // Load the masks
    var masks = [];
    var mask_urls = [
        {% for maskurl in mask_links %}
    "{{maskurl}}",
        {% endfor %}
    ];
    console.log(mask_urls)
    for (var i = 0; i < mask_urls.length; i++) {
        {
            var mask = new Image();
            mask.src = mask_urls[i];
            masks.push(mask);
        }
    }

    // Draw the masks
    function drawMasks() {
        console.log("Rendering masks");
        {
            for (var i = 0; i < masks.length; i++) {
                {
                    if (document.getElementById("mask" + i).checked) {
                        {
                            console.log("Drawing mask " + i);
                            ctx.drawImage(masks[i], 0, 0);
                        }
                    }
                }
            }
        }
    }

    function renderAll() {
        console.log("Rendering");
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        // Set alpha
        ctx.globalAlpha = document.getElementById("alphaslider").value;
        drawMasks();
    }
    renderAll();
    document.getElementById("alphaslider").addEventListener("input", renderAll);
    for (var i = 0; i < masks.length; i++) {
        {
            document.getElementById("mask" + i).change = renderAll;
        }
    }
</script>