$(function() {
  var report = #{json};

  var w = $("#chart").width(),
      h = $("#chart").height(),
      r = Math.min(w, h) / 2,
      x = d3.scale.linear().range([0, 2*Math.PI]),
      y = d3.scale.sqrt().range([0, r]),
      color = d3.scale.category20c();

  var vis = d3.select("#chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w/2 + "," + h/2 + ")");

  var partition = d3.layout.partition()
    .value(function(d) { return d.individualTime; })
    .children(function(d) { return d.subForest; });

  var arc = d3.svg.arc()
    .startAngle(function(d) { return Math.max(0, Math.min(2*Math.PI, x(d.x))); })
    .endAngle(function(d) { return Math.max(0, Math.min(2*Math.PI, x(d.x + d.dx))); })
    .innerRadius(function(d) { return Math.max(0, y(d.y)); })
    .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

  var path = vis.data([report]).selectAll("path")
    .data(partition.nodes)
    .enter().append("svg:path")
    .attr("id", function(d) { return "cc" + d.no + (d.isParent ? "p" : ""); })
    .attr("class", function(d) { return d.children || d.isParent ? "branch" : "leaf"; })
    .attr("d", arc)
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
    .on("click", click)
    .on("mouseover", mouseover)
    .each(stash);

  d3.select("#time").on("click", function() {
    path.data(partition.value(function(d) { return d.individualTime; }))
      .transition()
      .duration(500)
      .attrTween("d", arcTween);

    d3.select("#time").classed("active", true);
    d3.select("#alloc").classed("active", false);
  });

  d3.select("#alloc").on("click", function() {
    path.data(partition.value(function(d) { return d.individualAlloc; }))
      .transition()
      .duration(500)
      .attrTween("d", arcTween);

    d3.select("#time").classed("active", false);
    d3.select("#alloc").classed("active", true);
  });

  function click(d) {
    showCostCentre(d);
    showChildren(d);
    path.transition()
      .duration(500)
      .attrTween("d", arcTweenZoom(d));
  }

  function mouseover(d) {

  }

  // Stash the old values for transition.
  function stash(d) {
    d.x0 = d.x;
    d.dx0 = d.dx;
  }

  // Interpolate the arcs in data space.
  function arcTween(a) {
    var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
    return function(t) {
      var b = i(t);
      a.x0 = b.x;
      a.dx0 = b.dx;
      return arc(b);
    };
  }

  function arcTweenZoom(d) {
    var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
        yd = d3.interpolate(y.domain(), [d.y, 1]),
        yr = d3.interpolate(y.range(), [d.y ? 20 : 0, r]);
    return function(d, i) {
      return i
        ? function(t) { return arc(d); }
        : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
    };
  }

  function showCostCentre(node) {
    var currentNode = $("#current-node dl");
    $("#current-node-module", currentNode).text(node.module);
    $("#current-node-name", currentNode).text(node.name);
    $("#current-node-number", currentNode).text(node.no);
    $("#current-node-entries", currentNode).text(node.entries);
    $("#current-node-ind-time", currentNode).text(node.individualTime);
    $("#current-node-ind-alloc", currentNode).text(node.individualAlloc);
    $("#current-node-inh-time", currentNode).text(node.inheritedTime);
    $("#current-node-inh-alloc", currentNode).text(node.inheritedAlloc);
  }

  function showChildren(node) {
    $("#children ol li").remove();
    var children = $("#children ol");
    var cs = node.children;
        n  = cs.length < 10 ? cs.length : 10;
    for (var i = 0; i < n; i++) {
      children.append("<li>" + cs[i].name + "</li>");
    }
  }
  showCostCentre(report);
  showChildren(report);
});