(function() {
  var PADDING, SCALE, TIP, height, svg, treemap, vis, width, zoom, zoomable_layer;

  SCALE = 400;

  PADDING = 8;

  TIP = 10;

  treemap = d3.layout.treemap().size([SCALE, SCALE]).value(function(node) {
    return node.size;
  });

  svg = d3.select('svg');

  width = svg.node().getBoundingClientRect().width;

  height = svg.node().getBoundingClientRect().height;

  svg.attr({
    viewBox: "" + (-width / 2) + " " + (-height / 2) + " " + width + " " + height
  });

  zoomable_layer = svg.append('g');

  zoom = d3.behavior.zoom().scaleExtent([1, 10]).on('zoom', function() {
    return zoomable_layer.attr({
      transform: "translate(" + (zoom.translate()) + ")scale(" + (zoom.scale()) + ")"
    });
  });

  svg.call(zoom);

  vis = zoomable_layer.append('g').attr({
    transform: "translate(" + (-SCALE / 2) + "," + (-SCALE / 2) + ")"
  });

  d3.json('http://wafi.iit.cnr.it/webvis/tmp/flare.json', function(tree) {
    var enter_nodes, nodes, nodes_data;

    nodes_data = treemap.nodes(tree);
    nodes = vis.selectAll('.node').data(nodes_data);
    enter_nodes = nodes.enter().insert('rect', 'rect').attr({
      "class": 'node',
      x: function(node) {
        return node.x;
      },
      y: function(node) {
        return node.y;
      },
      width: function(node) {
        return node.dx;
      },
      height: function(node) {
        return node.dy;
      },
      stroke: function(node) {
        switch (node.depth) {
          case 0:
            return '#333';
          case 1:
            return '#999';
          default:
            return '#DDD';
        }
      },
      'stroke-width': function(node) {
        switch (node.depth) {
          case 0:
            return 3;
          case 1:
            return 2;
          default:
            return 1;
        }
      }
    });
    return enter_nodes.append('title').text(function(node) {
      return node.name;
    });
  });

}).call(this);