{{ define "salvoMatrix" }}
    <script src="/static/js/easel-js/lib/easeljs-0.7.1.min.js"></script>
    <script src="/static/js/buckets/buckets-minified.js"></script>

    <link href="/static/css/pages/salvo.css" rel="stylesheet">

    <script type="text/javascript" charset="utf-8">

        // control configuration vars
        var mMaxDisplayDests = 16;
        var mMaxDisplaySrcs = 16;
        var mMaxSupportedLevels = 17;
        var mMaxDisplayLevels = 17;

        var mAssignedDests = 16;
        var mAssignedSrcs = 16;

        var stageColor = "rgba(0,0,0,1)";
        var transparentColor = "rgba(0,0,0,0)";
        var gridLineColor = "rgba(255,255,255,1)";
        var targetIndicatorColor = "rgba(255,255,255,0.24)";

        var colorStr = [];
        
        // UI control data and storage
        var stage;
        var xInc;
        var yInc;

        var mDestBlocks = [];
        var mSrcBlocks = [];

        var presetIndicators = [];
        var nPresetList = new buckets.Dictionary();

        var statusIndicators = [];
        var nStatusList = new buckets.Dictionary();

        var updatePending = false;
        let presetAllowed = true;

        function isLevelSet(level) {
            const selLevels = JSON.parse(sessionStorage.getItem(sessionKeys.SEL_LEVELS));
            return selLevels.includes(level);
        } 

        function updateStage() {
            if (typeof(stage) != 'undefined') {
                stage.update();
            }
        }

        function SetLevelColors(colorList) {
            for (var i = 0; i < colorList.length; i++){
                colorStr[i] = colorList[i];
            }
            resizeStage();
        }

        function clearPresets() {
            nPresetList.clear();
            updatePresetDisplay();
            updateStage();
        }

        function setPreset(d, s) {
            let salvoId = sessionStorage.getItem(sessionKeys.SELECTED_SALVO_ID);
            let visibleLevels = JSON.parse(sessionStorage.getItem(sessionKeys.VISIBLE_LEVELS));
            if (salvoId) {
                if ((s != -1) && (s < mAssignedSrcs) && (d != -1) && (d < mAssignedDests)) {
                    for (var l = 0; l < mMaxDisplayLevels; l++) {
                        if (isLevelSet(visibleLevels[l])) {
                            handlePresetRequest(l, d, s);
                            updateDestPreset(l, d);
                        }
                    }
                }
                updateStage();
            }
        }

        function setDiagView(view, reverse) {
            let salvoId = sessionStorage.getItem(sessionKeys.SELECTED_SALVO_ID);
            if (dbMode == DBMode_Protect) {
                displayErrorDialog("The salvos cannot be edited while the database is in protect mode.");
                onSalvoSelectionChanged();
                return;
            }
            const destOffset = view ? Number(document.getElementById("dstScrollBar").value) : 0;
            const srcOffset = view ? Number(document.getElementById("srcScrollBar").value) : 0;
            const tmpdests = view ? mFilteredDests.slice(destOffset, destOffset + mMaxDisplayDests) : mFilteredDests;
            const srcs = view ? mFilteredSrcs.slice(srcOffset, srcOffset + mMaxDisplaySrcs): mFilteredSrcs;
            let dests = reverse ? [...tmpdests].reverse() : tmpdests;
            if (salvoId && dests !== undefined && dests.length > 0 && srcs !== undefined && srcs.length > 0) {
                let levels = JSON.parse(sessionStorage.getItem(sessionKeys.LEVEL_LIST));
                let deleteIds = [];
                let updateMappings = [];
                let addMappings = [];
                for (var i = 0; i < dests.length; i++) {
                    if (dests[i] === undefined || srcs[i] === undefined) {continue;}
                    var d = Number(mFilteredDests.findIndex(x => x.id == dests[i]));
                    var s = Number(mFilteredSrcs.findIndex(x => x.id == srcs[i]));
                    if (d != -1 && s != -1) {
                        setPreset(d, s);
                    }
                    let dId = Number(dests[i].id);
                    let srcId = Number(srcs[i].id);
                    let destMap = mSalvoCache.get(Number(dId));
                    if (destMap) {
                        levels.forEach((level, i) => {
                            let levelId = level.id;
                            if (isLevelSet(levelId)) {
                                let mapping = destMap.get(Number(levelId));
                                if (mapping) {
                                    if (mapping.srcId !== srcId) {
                                        updateMappings.push({"i": mapping.id, "s": srcId, "d": dId, "l": levelId});
                                    }
                                } else {
                                    addMappings.push({"s": srcId, "d": dId, "l": levelId});
                                }
                            }
                        });
                    } else {
                        levels.forEach((level, i) => {
                            let levelId = level.id;
                            if (isLevelSet(levelId)) {
                                addMappings.push({"s": srcId, "d": dId, "l": levelId});
                            }
                        });
                    }
                }
                OnPresets(addMappings, updateMappings, deleteIds);
            }
        }

        function setSourcePresets(srcId) {
            let salvoId = sessionStorage.getItem(sessionKeys.SELECTED_SALVO_ID);
            if (dbMode == DBMode_Protect) {
                displayErrorDialog("The salvos cannot be edited while the database is in protect mode.");
                onSalvoSelectionChanged();
                return;
            }
            let selectedDests = mSelDests;
            if (salvoId && selectedDests !== undefined && selectedDests.length > 0) {
                let srcOffset = Number(document.getElementById("srcScrollBar").value);
                let destOffset = Number(document.getElementById("dstScrollBar").value);
                let levels = JSON.parse(sessionStorage.getItem(sessionKeys.LEVEL_LIST));

                let minSrc = srcOffset + 1
                let minDst = destOffset + 1
                let maxDst = destOffset + mMaxDisplayDests + 1
                var l, d;
                var s = srcId - minSrc;
                let deleteIds = [];
                let updateMappings = [];
                let addMappings = [];
                for (var i = 0; i < selectedDests.length; i++) {
                    d = Number(mFilteredDests.findIndex(x => x.id == selectedDests[i]));
                    if (d != -1 && selectedDests[i] >= minDst && selectedDests[i] <= maxDst) {
                        setPreset(d, s);
                    }
                    let dId = Number(selectedDests[i]);
                    let destMap = mSalvoCache.get(Number(dId));
                    if (destMap) {
                        levels.forEach((level, i) => {
                            let levelId = level.id;
                            if (isLevelSet(levelId)) {
                                let mapping = destMap.get(Number(levelId));
                                if (mapping) {
                                    if (mapping.srcId === srcId) {
                                        deleteIds.push(mapping.id);
                                    } else {
                                        updateMappings.push({"i": mapping.id, "s": srcId, "d": dId, "l": levelId});
                                    }
                                } else {
                                    addMappings.push({"s": srcId, "d": dId, "l": levelId});
                                }
                            }
                        });
                    } else {
                        levels.forEach((level, i) => {
                            if (isLevelSet(level.id)) {
                                addMappings.push({"s": srcId, "d": dId, "l": level.id});
                            }
                        });
                    }
                }
                OnPresets(addMappings, updateMappings, deleteIds);
            }
        }

        function clearDestPresets(destIds) {
            let salvoId = sessionStorage.getItem(sessionKeys.SELECTED_SALVO_ID);
            if (dbMode == DBMode_Protect) {
                displayErrorDialog("The salvos cannot be edited while the database is in protect mode.");
                onSalvoSelectionChanged();
                return;
            }
            if (salvoId && destIds !== undefined && destIds.length > 0) {
                let levels = JSON.parse(sessionStorage.getItem(sessionKeys.LEVEL_LIST));
                let deleteIds = [];
                for (let i = 0; i < destIds.length; i++) {
                    let dId = Number(destIds[i]);
                    let destMap = mSalvoCache.get(Number(dId));
                    if (destMap) {
                        levels.forEach((level, i) => {
                            let levelId = level.id;
                            if (isLevelSet(levelId)) {
                                let mapping = destMap.get(Number(levelId));
                                if (mapping) {
                                    deleteIds.push(mapping.id);
                                }
                            }
                        });
                    }
                }
                OnPresets([], [], deleteIds);
            }
        }

        function getDisplayedIds(logicalList){
            let idList = [];
            for (let i=0; i<logicalList.length; i++){
                idList.push(logicalList[i].id);
            }
            return idList;
        }
        
        /**
        * Refreshes the salvo presets with the updatedPresetsMap if provided. Otherwise refreshes from mSalvoCache.
        * 
        * @param updatedPresetsMap(optional) subset of mSalvoCache with only the updated/deleted entries
        * @param update(optional) provided with updatePresetsMap to indicate if the change is an update (true) or deletion (false)
        */
        function setPresetsEx(updatedPresetsMap, update) {
            const presetMap = updatedPresetsMap || mSalvoCache;
            const minSrc = Number(document.getElementById("srcScrollBar").value);
            const minDst = Number(document.getElementById("dstScrollBar").value);
            const visibleLevels = JSON.parse(sessionStorage.getItem(sessionKeys.VISIBLE_LEVELS));
            const sourceList = getDisplayedIds(mFilteredSrcs);
            const destList = getDisplayedIds(mFilteredDests);
            const maxSrc = minSrc + mMaxDisplaySrcs;
            const maxDst = minDst + mMaxDisplayDests;
            const visibleSources = sourceList.slice(minSrc, maxSrc);
            const visibleDests = destList.slice(minDst, maxDst);
            if (!updatedPresetsMap) {
                nPresetList.clear();
            }
            updatePresetDisplay();
            visibleDests.forEach(destId => {
                const destMap = presetMap.get(Number(destId))
                if (destMap) {
                    visibleLevels.forEach((levelId) => {
                        const mapping = destMap.get(Number(levelId));
                        if (mapping && mapping.srcId) {
                            if (visibleSources.includes(mapping.srcId)) {
                                if (visibleLevels.includes(levelId)) {
                                    const l = visibleLevels.indexOf(levelId);
                                    const d = destList.indexOf(destId) - minDst;
                                    const s = sourceList.indexOf(mapping.srcId) - minSrc;
                                    if (updatedPresetsMap) {
                                        clearPreset(l, d, s);
                                    }
                                    if (!updatedPresetsMap || update) {
                                        handlePresetRequest(l, d, s);
                                    }
                                    updateDestPreset(l, d);
                                }
                            }
                        }
                    });
                }
            })
            updateStage();
        }

        function clearPreset(l, d, s) {
            let key = "D" + d + "L" + l;
            let v = nPresetList.get(key);
            if (v && v.s == s){
                nPresetList.remove(key);
            }
        }

        function handlePresetRequest(l,d,s) {
            var itemRemoved = false;
            var key = "D" + d + "L" + l;
            var v = nPresetList.get(key);

            if (typeof v != 'undefined') {
                if (v.s == s){
                    nPresetList.remove(key);
                    itemRemoved = true;
                } else {
                    nPresetList.set(key,{l:l, d:d, s:s});
                }
            } else {
                nPresetList.set(key,{l:l, d:d, s:s});
            }
            return itemRemoved;
        }

        function updateDestPreset(level, dest) {
            var item, key, s_index;
            if (dest < mMaxDisplayDests) {
                item = presetIndicators[dest][level];
                key = "D" + dest + "L" + level;
                if (nPresetList.containsKey(key)) {
                    s_index = nPresetList.get(key).s;

                    if (s_index < mMaxDisplaySrcs) {
                        item.visible = true;
                        item.x = (xInc / 2) + (xInc * s_index);
                    } else {
                        item.visible = false;
                    }
                } else {
                    item.visible = false;
                }
            }
        }

        function updatePresetDisplay() {
            var item, key, s_index;

            for (var i = 0; i < mMaxDisplayDests; i++) {
                for (var j = 0; j < mMaxDisplayLevels; j++) {
                    item = presetIndicators[i][j];
                    key = "D" + i + "L" + j;

                    if (nPresetList.containsKey(key)) {
                        s_index = nPresetList.get(key).s;
                        // NOTE: may not require this check at all because preset data has been validated before passing to this call
                        if (s_index < mMaxDisplaySrcs) {
                            item.visible = true;
                            item.x = (xInc / 2) + (xInc * s_index);
                        } else {
                            item.visible = false;
                        }
                    } else {
                        item.visible = false;
                    }
                }
            }
        }

        function reallyUpdate() {
            updatePending = false;
            updateStage();
        }

        function updateStatusDisplay() {
            var item, key, s_index;

            for (var i = 0; i < mMaxDisplayDests; i++) {
                for (var j = 0; j < mMaxDisplayLevels; j++) {
                    item = statusIndicators[i][j];
                    key = "D" + i + "L" + j;

                    if (nStatusList.containsKey(key)) {
                        s_index = nStatusList.get(key).s;

                        // NOTE: may not require this check at all because preset data has been validated before passing to this call
                        if (s_index < mMaxDisplaySrcs) {
                            item.visible = true;
                            item.x = (xInc / 2) + (xInc * s_index);
                        } else {
                            item.visible = false;
                        }
                    } else {
                        item.visible = false;
                    }
                }
            }
        }

        function pie(pie_x, pie_y, startAngle, endAngle, radius1, radius2, fillColor, lineColor, lineThickness) {
            /* based on http://jsdo.it/djankey/jCaI (MIT License) */
            var g = new createjs.Graphics();
            g.setStrokeStyle(lineThickness);
            g.beginFill(fillColor);
            g.beginStroke(lineColor);
            g.arc(pie_x, pie_y, radius1, toRad(startAngle), toRad(endAngle));
            g.lineTo(pie_x + Math.cos(toRad(endAngle)) * radius2, pie_y + Math.sin(toRad(endAngle)) * radius2);
            g.arc(pie_x, pie_y, radius2, toRad(endAngle), toRad(startAngle), true);
            g.closePath();
            g.endFill();

            return g;
        }

        function pieCircle(pie_x, pie_y, startAngle, endAngle, radius1, fillColor, lineColor, lineThickness) {
            var g = new createjs.Graphics();
            g.setStrokeStyle(lineThickness);
            g.beginFill(fillColor);
            g.beginStroke(lineColor);
            g.arc(pie_x, pie_y, radius1, toRad(startAngle), toRad(endAngle));
            g.closePath();
            g.endFill();

            return g;
        }

        function toRad(angle) {
            return  (angle) * Math.PI/180; // WebFx renderer doesnt handle crossing 0 well
        }

        function setupBlockRanges() {
            var start = 0;
            var end = xInc;

            mSrcBlocks = [];
            mSrcBlocks.push( {"start": start, "end": Math.floor(end)} );

            for (var i = 1; i < mMaxDisplaySrcs; i++) {
                start = Math.floor(end) + 1;
                end = (i + 1) * xInc;
                mSrcBlocks.push( {"start": start, "end": Math.floor(end)} );
            }

            start = 0;
            end = yInc;

            mDestBlocks = [];
            mDestBlocks.push( {"start": start, "end": Math.floor(end)} );

            for (var i = 1; i < mMaxDisplayDests; i++) {
                start = Math.floor(end) + 1;
                end = (i + 1) * yInc;
                mDestBlocks.push( {"start": start, "end": Math.floor(end)} );
            }
        }

        function getDestBlock(targetY) {
            for (var i = 0; i < mDestBlocks.length; i++) {
                if ((targetY >= mDestBlocks[i].start) && (targetY <= mDestBlocks[i].end)) {
                    return i;
                }
            }
            return -1;
        }

        function getSrcBlock(targetX) {
            for (var i = 0; i < mSrcBlocks.length; i++) {
                if ((targetX >= mSrcBlocks[i].start) && (targetX <= mSrcBlocks[i].end)) {
                    return i;
                }
            }
            return -1;
        }

        function OnPresets(createMappings, updateMappings, deleteMappings) {
            let salvoId = Number(sessionStorage.getItem(sessionKeys.SELECTED_SALVO_ID));
            if (dbMode == DBMode_Protect) {
                displayErrorDialog("The salvos cannot be edited while the database is in protect mode.");
                onSalvoSelectionChanged();
                return;
            }
            const totalMappings = deleteMappings.length + updateMappings.length + createMappings.length;
            if (totalMappings == 0) {
                return;
            }
            if (totalMappings > 100) {
                displayProgressBar("Updating Salvo", "Updating salvo", function(guid) {
                        $.post("/salvo/mappings/update?" + getProgressBarURLParameter(guid),
                            {
                                salvoId: salvoId,
                                deleteData: deleteMappings.join(","),
                                updateData: JSON.stringify(groupBySourceAndDest(updateMappings, "m")),
                                createData: JSON.stringify(groupBySourceAndDest(createMappings, "l"))
                            })
                })
            } else {
                    $.post("/salvo/mappings/update",
                        {
                            salvoId: salvoId,
                            deleteData: deleteMappings.join(","),
                            updateData: JSON.stringify(groupBySourceAndDest(updateMappings, "m")),
                            createData: JSON.stringify(groupBySourceAndDest(createMappings, "l"))
                        })
            }
        }

        function groupBySourceAndDest(mappings, arrayKey) {
            const map = new Map();
            for (const { s, d, l, i } of mappings) {
                const key = `${s},${d}`;
                if (!map.has(key)) {
                    map.set(key, { s, d, [arrayKey]: [] });
                }
                map.get(key)[arrayKey].push(i !== undefined ? { l, i } : l);
            }
            return Array.from(map.values());
        }

        function resizeStage(update) {
            var pieSlice = 360 / mMaxDisplayLevels;
            var rect;

            yInc = document.getElementById("myCanvas").height/mMaxDisplayDests;
            xInc = document.getElementById("myCanvas").width/mMaxDisplaySrcs;

            if (typeof(stage) != 'undefined') {
                stage.removeAllChildren();
                stage.removeAllEventListeners();
                stage.MouseChildren = false;

                setupBlockRanges();

                stageRect = new createjs.Shape();
                stageRect.graphics.beginFill(stageColor).rect(0,0,xInc*mMaxDisplaySrcs,yInc*mMaxDisplayDests);
                stage.addChild(stageRect);

                /* target indicator circle */
                var circle;
                var t_radius = (Math.min(yInc,xInc)/2.0); // NEW bigger
                circle = new createjs.Shape();
                circle.graphics.beginStroke(targetIndicatorColor).drawCircle(0, 0, t_radius);
                circle.x = xInc;
                circle.y = yInc;
                circle.name = "Target";
                circle.visible = false;
                stage.addChild(circle);

                // target indicator lines - Vertical
                var line;
                line = new createjs.Shape();
                line.graphics.setStrokeStyle(8).beginStroke(gridLineColor).moveTo(0, 0).lineTo(0, yInc*mMaxDisplayDests).endStroke();
                line.alpha = 0.24;
                line.name = "VLine";
                line.visible = false;
                stage.addChild(line);

                // target indicator lines - Horizontal
                line = new createjs.Shape();
                line.graphics.setStrokeStyle(8).beginStroke(gridLineColor).moveTo(0, 0).lineTo(xInc*mMaxDisplaySrcs, 0).endStroke();
                line.alpha = 0.24;
                line.name = "HLine";
                line.visible = false;
                stage.addChild(line);


                stage.addEventListener("click", function(evt) {
                    if (dbMode !== DBMode_Protect && (!presetAllowed || $.active)) {
                        return;
                    }
                    let salvoId = sessionStorage.getItem(sessionKeys.SELECTED_SALVO_ID);
                    let levels = JSON.parse(sessionStorage.getItem(sessionKeys.LEVEL_LIST));
                    let visibleLevels = JSON.parse(sessionStorage.getItem(sessionKeys.VISIBLE_LEVELS));
                    if (salvoId) {
                        let d = getDestBlock(evt.stageY);
                        let s = getSrcBlock(evt.stageX);
                        if ((s != -1) && (s < mAssignedSrcs) && (d != -1) && (d < mAssignedDests)) {
                            let deleteIds = [];
                            let updateMappings = [];
                            let addMappings = [];
                            setPreset(d, s);
                            let srcOffset = document.getElementById("srcScrollBar").value;
                            let destOffset = document.getElementById("dstScrollBar").value;
                            let destId = mFilteredDests[Number(d) + Number(destOffset)].id
                            let srcId = mFilteredSrcs[Number(s) + Number(srcOffset)].id
                            let destMap = mSalvoCache.get(Number(destId));
                            if (destMap) {
                                levels.forEach((level, i) => {
                                    let levelId = level.id
                                    if (isLevelSet(levelId)) {
                                        let mapping = destMap.get(Number(levelId));
                                        if (mapping) {
                                            if (mapping.srcId === srcId) {
                                                deleteIds.push(mapping.id);
                                            } else {
                                                updateMappings.push({"i": mapping.id, "s": srcId, "d": destId, "l": levelId});
                                            }
                                        } else {
                                            addMappings.push({"s": srcId, "d": destId, "l": levelId});
                                        }
                                    }
                                });
                            } else {
                                levels.forEach((level, i) => {
                                    if (isLevelSet(level.id)) {
                                        addMappings.push({"s": srcId, "d": destId, "l": level.id});
                                    }
                                });
                            }
                            OnPresets(addMappings, updateMappings, deleteIds);
                        }
                    }
                });

                stage.addEventListener("stagemousemove", function(evt) {
                    var hline = stage.getChildByName("HLine");
                    var vline = stage.getChildByName("VLine");
                    var targ = stage.getChildByName("Target");

                    //var old_state = targ.visible;
                    var new_state;

                    var old_coordinates = targ.x + ',' + targ.y + ',' + targ.visible + ',' + hline.x + ',' + hline.y + ',' + hline.visible + ',' + vline.x + ',' + vline.y + ',' + vline.visible;

                    var d = getDestBlock(evt.stageY);
                    var s = getSrcBlock(evt.stageX);

                    if ((s != -1) && (d != -1)) {
                        targ.x = (xInc/2) + (xInc*s);
                        targ.y = (yInc/2) + (yInc*d);

                        vline.x = (xInc/2) + (xInc*s);
                        vline.y = 0;

                        hline.x = 0;
                        hline.y = (yInc/2) + (yInc*d);

                        new_state = true;
                    } else {
                        new_state = false;
                    }

                    var new_coordinates = targ.x + ',' + targ.y + ',' + targ.visible + ',' + hline.x + ',' + hline.y + ',' + hline.visible + ',' + vline.x + ',' + vline.y + ',' + vline.visible;

                    targ.visible = new_state;
                    vline.visible = new_state;
                    hline.visible = new_state;

                    if (old_coordinates == new_coordinates) {
                    } else if (!updatePending) {
                        updatePending = true;
                        window.setTimeout(reallyUpdate, 50);
                    }
                });

                // Sources  - across top
                for (var i = 0; i < (mMaxDisplaySrcs); i++) {
                    // line down
                    line = new createjs.Shape();
                    line.graphics.beginStroke(gridLineColor).moveTo((xInc/2)+(xInc*i), 0).lineTo((xInc/2)+(xInc*i), yInc*mMaxDisplayDests).endStroke();
                    line.alpha = 0.24;
                    stage.addChild(line);

                    // Destinations - down the side
                    for(var j = 0; j < mMaxDisplayDests; j++) {
                        if (i == 0) {
                            // line across
                            line = new createjs.Shape();
                            line.graphics.beginStroke(gridLineColor).moveTo(0, (yInc/2)+(yInc*j)).lineTo(xInc*mMaxDisplaySrcs, (yInc/2)+(yInc*j)).endStroke();
                            line.alpha = 0.24;
                            stage.addChild(line);
                        }

                        if (i == (mMaxDisplaySrcs-1)) {
                            var radius = (Math.min(yInc,xInc)/2.2); // NEW Bigger

                            presetIndicators[j] = [];
                            statusIndicators[j] = [];
                            if (mMaxDisplayLevels == 1) {
                                var k =  0;

                                // Status indicators - filled pie
                                circle = new createjs.Shape();
                                circle.graphics.beginFill(colorStr[k]).drawCircle(0, 0, radius);
                                circle.x = (xInc/2) + (xInc*i);
                                circle.y = (yInc/2) + (yInc*j);
                                circle.name = "D"+i+"L"+k;
                                circle.visible = false;
                                circle.alpha = 0.80;
                                statusIndicators[j][k] = circle;
                                stage.addChild(circle);

                                // Preset indicators - hollow pie
                                circle = new createjs.Shape(pieCircle(0, 0, 0, 360, radius, transparentColor, colorStr[k], 2));
                                circle.x = (xInc/2) + (xInc*i);
                                circle.y = (yInc/2) + (yInc*j);
                                circle.name = "P"+i+"L"+k;
                                circle.visible = false;
                                circle.alpha = 0.80;
                                presetIndicators[j][k] = circle;
                                stage.addChild(circle);
                            } else {
                                for (var k = (mMaxDisplayLevels - 1); k >= 0; k--) {
                                    // Status indicators - filled pie
                                    circle = new createjs.Shape(pie(0, 0, (pieSlice*(mMaxDisplayLevels-(k+0.98))), pieSlice*(mMaxDisplayLevels-k), radius, 0, colorStr[k], colorStr[k], 0));
                                    circle.x = (xInc/2) + (xInc*i);
                                    circle.y = (yInc/2) + (yInc*j);
                                    circle.name = "D"+i+"L"+k;
                                    circle.visible = false;
                                    circle.alpha = 0.80;
                                    statusIndicators[j][k] = circle;
                                    stage.addChild(circle);

                                    // Preset indicators - hollow pie
                                    circle = new createjs.Shape(pie(0, 0, (pieSlice*(mMaxDisplayLevels-(k+0.99))), pieSlice*(mMaxDisplayLevels-(k+0.01)), radius, 1, transparentColor, colorStr[k], 2));
                                    circle.x = (xInc/2) + (xInc*i);
                                    circle.y = (yInc/2) + (yInc*j);
                                    circle.name = "P"+i+"L"+k;
                                    circle.visible = false;
                                    circle.alpha = 0.80;
                                    presetIndicators[j][k] = circle;
                                    stage.addChild(circle);
                                }
                            }
                        }
                    }
                }
            }
        }

        function RefreshCanvas() {
            resizeStage();
            updateStatusDisplay();
            updatePresetDisplay();
            updateStage();
        }

        function resizeCanvas(update) {
            var  htmlCanvas = document.getElementById("myCanvas");
            var  matrixDiv = document.getElementById("salvoMatrix");
            htmlCanvas.width = matrixDiv.offsetWidth;
            htmlCanvas.height = matrixDiv.offsetHeight;
        }

        function resizeAll() {
            resizeCanvas();
            resizeStage();
            updateStatusDisplay();
            updatePresetDisplay();
            updateStage();
        }

        function init() {
            let visibleLevels = JSON.parse(sessionStorage.getItem(sessionKeys.VISIBLE_LEVELS));
            mMaxDisplayLevels = Math.min(visibleLevels.length, mMaxSupportedLevels);
            stage = new createjs.Stage("myCanvas");
            resizeAll();
        }

        function initEx() {
            resizeCanvas();
            resizeStage();
            updateStage();
        }

        function resetAll(data) {
            // Parse display settings...
            mMaxDisplayDests = data.dests;
            mMaxDisplaySrcs = data.srcs;
            mMaxDisplayLevels = data.levels;

            // Parse level colors...
            for (var i = 0; i < data.colors.length; i++)
            {
                colorStr[i] = data.colors[i];
            }

            // Redraw canvas...
            resizeCanvas();
            resizeStage();
            updateStage();
        }

        var webget = {};

        webget.dbLoad = function() {
            initEx();
        }

        // NOTE: webget.getConfigOptions must be implemented in order to function correctly in the Linux version of Dashboard
        webget.getConfigOptions = function()
        {
            return {};
        };
    </script>

    <canvas id="myCanvas" oncontextmenu="return false;" style="background-color:black;float:left; width: 100%;height: 100%;"></canvas>

{{ end }}