// Generated by CoffeeScript 1.10.0
(function() {
  var all_items, color, data, en_items, fx, fy, height, items, n_columns, n_rows, side, svg, to_bounding_box, transform, width, zoom, zoomable_layer;

  svg = d3.select('svg');

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

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

  color = d3.schemeSet3;

  zoomable_layer = svg.append('g');

  zoom = d3.zoom().scaleExtent([1, 1000]).on('zoom', function() {
    return zoomable_layer.attrs({
      transform: d3.event.transform
    });
  });

  svg.call(zoom);


  /* Return a transform for center a bounding box in the browser viewport
      - w and h are the witdh and height of the container
      - center cointains the coordinates of the bounding box center
      - side_lengths is an array containing the length of the bounding box sides
      - margin defines the margin of the bounding box once zoomed
   */

  to_bounding_box = function(W, H, center, w, h, margin) {
    var k, kh, kw, x, y;
    kw = (W - margin) / w;
    kh = (H - margin) / h;
    k = d3.min([kw, kh]);
    x = W / 2 - center.x * k;
    y = H / 2 - center.y * k;
    return d3.zoomIdentity.translate(x, y).scale(k);
  };


  /* Data
   */

  side = 5;

  n_columns = 5;

  n_rows = 2;

  fx = side * 2 ;

  fy = side * 2 + 30;

  data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(function(d, i) {
    return {
      s1: side + Math.floor(Math.random() * 20),
      s2: side + Math.floor(Math.random() * 20),
      x: fx * (i % n_columns),
      y: fy * (i % n_rows)
    };
  });


  /* Visualization
   */

  items = zoomable_layer.selectAll('item').data(data);
  
  

  en_items = items.enter().append('rect').attrs({
    "class": 'item'
  });

  all_items = en_items.merge(items);

  all_items.attrs({
    width: function(d) {
      return d.s1;
    },
    height: function(d) {
      return d.s2;
    },
    x: function(d) {
      return d.x;
    },
    y: function(d) {
      return d.y;
    },
    fill: function(d, i) {
      return color[i];
    }
  }).on('click', function(d, i) {
    var center, transform;
    center = {
      x: d.x + d.s1 / 2,
      y: d.y + d.s2 / 2
    };
    transform = to_bounding_box(width, height, center, d.s1, d.s2, height / 10);
    return svg.transition().duration(2000).call(zoom.transform, transform);
  });

  transform = to_bounding_box(width, height, {
    x: 170 / 2,
    y: 70 / 2
  }, 170, 70, 150);

  svg.call(zoom.transform, transform);

}).call(this);