"use strict";

/* global self */

d3.json('./tables.json', function(err, data) {
  var cells = d3.nest()
      .key(function(d) {return +d.row;})
      .entries(data[0]);

  var table = d3.select('body').append('table');

  var tr = table.selectAll('tr')
      .data(cells)
    .enter().append('tr');

  var td = tr.selectAll('td')
      .data(function(d) {return d.values;})
    .enter().append('td')
      .attr('rowspan', function(d) {return d.rowspan;})
      .attr('colspan', function(d) {return d.colspan;})
      .each(function(d) {
        d3.select(this).style(d.style);
      })
      .text(function(d) {return d.text;});

  var delay = 0,
      divisions = [[3, 14], [4], [9], [5, 8, 10, 13]],
      decomposed = false;

  function decompose() {
    if (!decomposed) {
      decomposed = true;
      divisions.forEach(function(r) {
        tr.filter(function(d, i) {return r.indexOf(i) > -1;})
            .each(function() {
              var node = d3.select(this).node();
              table.insert('tr', function() {return node;})
                  .attr('class', 'phantom')
                  .style('height', 0)
                .transition().duration(500).delay(delay)
                  .style('height', '20px');
              delay += 40;
            });
        delay += 750;
      });
    } else {
      decomposed = false;
      delay = 0;
      table.selectAll('tr.phantom')
        .transition().duration(500)
          .style('height', '0px')
          .remove();
    }
  }

  table.style('cursor', 'pointer')
    .on('click', decompose);
});

d3.select(self.frameElement).style("height", "600px");