"use strict";

var classes = ['title', 'non-relational', 'non-relational', 'header',
  'group-header', 'data', 'data', 'data', 'aggregate', 'group-header', 'data',
  'data', 'data', 'aggregate', 'blank', 'non-relational'];

var targets = ['title', 'header', 'data', 'group-header', 'aggregate'];

var container = d3.select('body').append('div');

function create_copy(tr, i) {
  var node = d3.select(this);
  var pos = $(node.node()).position();
  container.append('table').append('tr')
    .attr('class', tr + ' copy')
    .style('position', 'absolute')
    .style('left', pos.left + 'px')
    .style('top', pos.top + 'px')
    .style('opacity', 0)
    .html(node.html());
}

d3.selectAll('.orig tr')
  .data(classes)
  .each(create_copy);

function extract(tgt_num) {
  var t = targets[tgt_num];
  var tgt = d3.select('#schema .' + t).node();
  var pos = $(tgt).position();
  console.log(pos);
  container.selectAll('tr.' + t)
    .transition()
    .delay(function(d, i) {return 1000 + i * 200;})
    .style('opacity', 1)
    .transition()
    .style('top', function(d, i) {return (pos.top + i * 20) + 'px';})
    .style('left', function(d, i) {return pos.left + 'px';})
    .each('end', function(d, i) {
      d3.select(this.parentNode).remove();
      tgt.appendChild(this);
      d3.select(this).style('position', 'inherit');
      if (tgt_num < targets.length) {extract(tgt_num + 1);}
    });
}

extract(0);