/*! Admin heatmap overlay on captured page screenshot. */
(function () {
  function colorFor(t) {
    if (t < 0.33) {
      var k = t / 0.33;
      return [67 + (255 - 67) * k, 160 + (235 - 160) * k, 71 * (1 - k)];
    }
    if (t < 0.66) {
      var k2 = (t - 0.33) / 0.33;
      return [255, 235 - (235 - 152) * k2, 0];
    }
    var k3 = (t - 0.66) / 0.34;
    return [255, 152 * (1 - k3), 0];
  }

  function fit() {
    var canvas = document.getElementById("admin-heatmap");
    var stage = document.getElementById("admin-heatmap-stage");
    var scaler = document.getElementById("admin-heatmap-scaler");
    var shot = document.getElementById("admin-heatmap-shot");
    if (!canvas || !stage) return;

    var designW = 1200;
    var designH = 900;
    if (scaler) {
      designW = parseInt(scaler.getAttribute("data-design-width"), 10) || designW;
      designH = parseInt(scaler.getAttribute("data-design-height"), 10) || designH;
    }
    if (shot && shot.naturalWidth > 0) {
      designW = shot.naturalWidth;
      designH = shot.naturalHeight;
    }

    if (scaler) {
      scaler.style.width = designW + "px";
      scaler.style.height = designH + "px";
      var stageW = Math.max(stage.clientWidth, 320);
      var scale = Math.min(1, stageW / designW);
      scaler.style.transform = "scale(" + scale + ")";
      stage.style.height = Math.max(420, Math.round(designH * scale)) + "px";
    } else {
      designW = Math.max(stage.clientWidth, 320);
      designH = Math.max(stage.clientHeight, 480);
    }

    var grid = parseInt(canvas.getAttribute("data-grid"), 10) || 40;
    var max = parseInt(canvas.getAttribute("data-max"), 10) || 1;
    var cells = [];
    try {
      cells = JSON.parse(canvas.getAttribute("data-cells") || "[]");
    } catch (e) {
      cells = [];
    }

    canvas.width = designW;
    canvas.height = designH;
    canvas.style.width = designW + "px";
    canvas.style.height = designH + "px";

    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, designW, designH);

    var cellW = designW / grid;
    var cellH = designH / grid;
    var radius = Math.max(cellW, cellH) * 2.2;

    cells.forEach(function (cell) {
      var intensity = Math.min(1, cell.c / max);
      if (intensity <= 0) return;
      var cx = (cell.x + 0.5) * cellW;
      var cy = (cell.y + 0.5) * cellH;
      var rgb = colorFor(intensity);
      var alpha = 0.28 + intensity * 0.55;
      var grd = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
      grd.addColorStop(
        0,
        "rgba(" + Math.round(rgb[0]) + "," + Math.round(rgb[1]) + "," + Math.round(rgb[2]) + "," + alpha + ")"
      );
      grd.addColorStop(
        1,
        "rgba(" + Math.round(rgb[0]) + "," + Math.round(rgb[1]) + "," + Math.round(rgb[2]) + ",0)"
      );
      ctx.fillStyle = grd;
      ctx.beginPath();
      ctx.arc(cx, cy, radius, 0, Math.PI * 2);
      ctx.fill();
    });
  }

  function boot() {
    var shot = document.getElementById("admin-heatmap-shot");
    fit();
    if (shot) {
      if (shot.complete && shot.naturalWidth > 0) fit();
      else shot.addEventListener("load", fit);
    }
    window.addEventListener("resize", fit);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", boot);
  } else {
    boot();
  }
})();