var w = window.innerWidth - 1,
    h = window.innerHeight - 1;
var color = d3.scale.category20c();
var x = d3.scale.linear().range([0, w]),
    y = d3.scale.linear().range([0, h]);

function fontSize(d,i) {
	return x(d.dx)/6.8+ "px";
}

function lineHeight(d,i) {
	
	return y(d.dy)+"px";
}

	
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 color(d.data.key);})
      .style("left", function(d) { return d.depth == 0 ? x(d.x) + "px" : null; })
      .style("top", function(d) { return d.depth == 0 ? y(d.y) + "px" : null; })
      .style("width", function(d) { return d.depth == 0 ? x(d.dx-2) + "px" : null; })
      .style("height", function(d) { return d.depth == 0 ? y(d.dy-2) + "px" : null; })
	  .style("line-height", fontSize)
	  .style("font-family", "arial, sans-serif")
	  .style("font-size", fontSize)
	  .style("font-style", function(d) {return d.children ? "normal" : "italic";})
	  .style("font-weight", function(d) {return d.children ? "bolder" : "normal";})
          .text(function(d){return d.depth == 0 ? d.data.key : null})
	  .on('click', onClick)
		;
});

function onClick(d,i) {
	
	x.domain([d.x, d.x + d.dx]);
        y.domain([d.y, 1]).range([d.y ? 20 : 0, h]);

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