svg

var colCounter = 0;
var rowCounter = 0;
var redShades = {
    "D": "#7D000E",
    "u": "#990515",
    "a": "#E0082D",
    "d": "#E9967A",
    "s": "#CC0000",
    "C": "#DC143C",
    "A": "#FF0000",
    "S": "#B22222",
    "E": "#8B0000",
    "": "#00D030"
};
var newWidth = 1000;
var svgElement = null;
var side;
var loading = false;

function createHeatMap() {
    "use strict";
    svgElement = document.getElementById("heat-map-svg");
    if (svgElement === null) {
        svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svgElement.setAttribute("height", "1000");
        svgElement.setAttribute("id", "heat-map-svg");
        document.getElementById("heat-map").appendChild(svgElement);
    }
}

function createNode(node) {
    "use strict";
    var x;
    var y;
    var colour;
    var rectElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    var bad = null;

    if ((colCounter * side) <= newWidth) {
        x = colCounter * side;
        y = rowCounter * side;
        colCounter++;
    } else {
        rowCounter++;
        colCounter = 1;
        x = 0;
        y = rowCounter * side;
    }

    rectElement.setAttribute("x", x);
    rectElement.setAttribute("y", y);
    rectElement.setAttribute("width", side);
    rectElement.setAttribute("height", side);
    if (node.queueList.length) {
        _.each(node.queueList, function (queue) {
            if (queue.state !== "") {
                bad = queue.state;
            }
        });
        colour = bad ? redShades[bad.charAt(0)] : "#00D030";
    } else {
        colour = "#000000";
    }
    rectElement.setAttribute("title", node.hostname);
    rectElement.setAttribute("fill", colour);
    rectElement.setAttribute("stroke-width", 1);
    rectElement.setAttribute("stroke", "#008000");
    rectElement.setAttribute("data-id", node._id._str);
    svgElement.appendChild(rectElement);
}

function populateHeatMap(data) {
    "use strict";

    side = Math.floor(1000 / Math.ceil(Math.sqrt(data.counter)));
    if (1000 % side) {
        newWidth = Math.ceil(1000 / side) * side;
    }

    if (svgElement) {
        svgElement.innerHTML = "";
    }
    $("div#heat-map").width(newWidth);
    svgElement.setAttribute("width", newWidth);
    _.each(data.data, createNode);

}

function getHeatMapData() {
    "use strict";

    Meteor.call("heatMap", function (error, result) {
        if (error) {
            console.error(error);
        }
        if (result) {
            populateHeatMap(result);
            if (loading) {
                Blaze.remove(loading);
                loading = false;
            }
        }
    });
}

Template.heatMap.onRendered(function () {
    "use strict";
    var $ul = this.$("ul");
    loading = Blaze.render(Template.loading, document.getElementById("heat-map"));
    createHeatMap()
    getHeatMapData();
    $ul.find("li.active").removeClass("active");
    $ul.find("button[data-type='heat-map']").closest("li").addClass("active");
    Meteor.setInterval(getHeatMapData, 10000);
});