var w = window.innerWidth - 1,
    h = window.innerHeight - 1,
    color = d3.scale.category20c();

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

var div = d3.select("#chart").append("div")
    .style("position", "relative")
    .style("width", w + "px")
    .style("height", h + "px");

d3.json("readme.json", function(json) {
  div.data(d3.entries(json)).selectAll("div")
      .data(treemap)
    .enter().append("div")
      .attr("class", "cell")
      .style("background", function(d) { return d.depth == 1 ? color(d.data.key) : null; })
      .style("left", function(d) { return d.depth == 1 ? d.x + "px" : null; })
      .style("top", function(d) { return d.depth == 1 ? d.y + "px" : null; })
      .style("width", function(d) { return d.depth == 1 ? d.dx + "px" : null; })
      .style("height", function(d) { return d.depth == 1 ? d.dy + "px" : null; })
      .on('click', onClick);
});

function onClick(d,i) {
	var datum = d, dep = d.depth;
    var filtered = div.selectAll("div.cell")
	.filter(function(d){
		if(d.parent)
		{
			return d.depth == dep+1 && d.parent == datum;
		}
		else 
		{
			return d.depth == dep+1;
		}
	});
		filtered
                //.text(function(d){return d.data.key})
		.transition()
	     	.duration(1000)
			.style("left", function(d){return d.x + "px";})
			.style("top", function(d){return d.y + "px";})
			.style("width", function(d){return d.dx - 1 + "px";})
			.style("height", function(d){return d.dy - 1 + "px";})
			.style("background", function(d) { return color(d.data.key); })
			;

	filtered.append("svg:text")
      .attr("transform", function(d) { return "rotate(" + Math.PI * 180 + ")"; })
      .attr("x", function(d) { return d.x; })
	  .attr("y", function(d) { return d.y; })
//      .attr("dx", "6") // margin
//      .attr("dy", ".35em") // vertical-align
      .text(function(d) { return d.data.key; });
}