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

var x_children = d3.scale.linear().range([0, w]),
    y_children = d3.scale.linear().range([30, h]);
var x_parent = d3.scale.linear().range([0, w]),
    y_parent = d3.scale.linear().range([0, 30]);
	
	
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 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)
    .enter().append("svg:g")
      .attr("class", function(d) {return d.depth == 0 ? "parent" : "child"})
      .attr("transform", function(d) { return "translate(" + x_children(d.x) + "," + y_children(d.y) + ")"; })
	  .attr("visibility", function(d) {return d.depth == 0 ? "visible" : "hidden"})
	  .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 color(d.data.key);})
	  .style("stroke-width",2)
	  ;
  	
  cell.append("svg:text")
  	.attr("x",0)
	.attr("dx", "1em")
    .attr("dy", "1em")
	  .style("font-size", "15px")
	  .style("fill","white")
    .text(function(d) { return d.data.key; })
	  ;

function onClick(d,i) {
	
	var clickClass = d3.select(this).attr("class");
	var datum = (clickClass == "parent" && d.depth != 0) ? d.parent : d;
	
	x_parent.domain([d.x, d.x + d.dx]);
    y_parent.domain([d.y, d.y + d.dy]);
	
	if(d.children && d.depth != 0)
		svg.selectAll("g")
			.attr("visibility","hidden")
			;
	
	svg.selectAll("g")
		.filter(function(d) {
			return d == datum && d.children;
		})
		.attr("class","parent")
		.attr("visibility","visible")
		.transition().duration(750)
		.attr("transform", function(d) { return "translate(" + x_parent(d.x) + "," + y_parent(d.y) + ")"; })
		.select("rect")
			.attr("width", function(d) { return x_parent(d.dx+d.x) - x_parent(d.x); })
      		.attr("height", function(d) { return y_parent(d.dy+d.y) - y_parent(d.y); })
			;

	x_children.domain([datum.x, datum.x + datum.dx]);
    y_children.domain([datum.y, datum.y + datum.dy]);
			
    svg.selectAll("g")
	.filter(function(d){
			return d.parent ? d.parent == datum : d.depth == 1;
	})
	.transition().duration(750)
	.attr("class","child")
	.attr("visibility","visible")
	.attr("transform", function(d) { return "translate(" + x_children(d.x) + "," + y_children(d.y) + ")"; })
	.select("rect")
		.attr("width", function(d) { return x_children(d.dx+d.x) - x_children(d.x); })
		.attr("height", function(d) { return y_children(d.dy+d.y)-y_children(d.y); })
		;
}
	  
});