var w = 960,
    h = 500,
    color = d3.scale.category20c();

var treemap = d3.layout.treemap()
    .padding(4)
    .size([w, h])
	.children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
    .value(function(d) { return d.value; })
	.sticky(true);

var svg = d3.select("body").append("svg:svg")
    .style("width", w)
    .style("height", h)
  .append("svg:g")
    .attr("transform", "translate(-.5,-.5)");

d3.json("readme.json", function(json) {
  var cell = svg.data(d3.entries(json)).selectAll("g")
      .data(treemap, function(d) {return d.key;})
    .enter().append("svg:g")
      .attr("class", "cell")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
	  .on("click", onClick);

  cell.append("svg:rect")
      .attr("width", function(d) { return d.dx; })
      .attr("height", function(d) { return d.dy; })
      .style("fill", function(d) { return d.children ? color(d.data.key) : null; });

  cell.append("svg:text")
      .attr("x", function(d) { return d.dx / 2; })
      .attr("y", function(d) { return d.dy / 2; })
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.children ? null : d.data.key; });
});

function onClick(d,i) {

	d.value = 0; //TO-DO: zero out values for children too
	d3.select(this).remove();
	var deleteKey = d.key;
	svg.selectAll("g")
		.data(treemap, function(d) {return d.key;})
		.transition()
		.call(refreshTree)
		;

	svg.selectAll("g").exit().remove();
}

function refreshTree(d,i) {

	
	this.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
	;
	
	this.selectAll("rect")
      .attr("width", function(d) { return d.dx-1; })
      .attr("height", function(d) { return d.dy-1; })
	  ;
	  
	this.selectAll("text")
		.attr("x", function(d) { return d.dx / 2; })
		.attr("y", function(d) { return d.dy / 2; })
}