var Tabular = Tabular || function(head, body) {
  this.head_element = head;              // DOM element for tabular_head
  this.element = body;                   // DOM element for tabular
  this.exercises = [];
  this.entry_count = 0;
};

Tabular.prototype.clear = function() {
  for (var i = this.exercises.length-1; i >= 0; i--) {
    for (var j = this.exercises[i].sets.length-1; j >= 0; j--) {
      this.exercises[i].sets[j].destroy();
    }
  }
  this.exercises = [];
};
Tabular.prototype.addExercise = function() {
  var i = this.exercises.length;
  this.exercises[i] = new TabularExercise(this, i);

  var event = document.createEvent('HTMLEvents');
  event.initEvent('addexercise', true, true);
  event.exercise = this.exercises[i];
  this.element.dispatchEvent(event);
};
Tabular.prototype.removeExercise = function(index) {
  if (index < 0 || index > this.exercises.length) return;
  console.log('removing 1 at ' + index);
  for (var i = this.exercises[index].sets.length-1; i >= 0; i--) {
    console.log('removing ' + i);
    this.exercises[index].removeSet(i);
  }
  var exercise = this.exercises.splice(index, 1)[0];
  var event = document.createEvent('HTMLEvents');
  event.initEvent('removeexercise', true, true);
  event.exercise = exercise;
  event.exercise_index = index;
  this.element.dispatchEvent(event);
};

var TabularExercise = function(parent, index) {
  this.parent = parent;
  this.index = index;

  this.sets = [];
};
TabularExercise.prototype.addSet = function() {
  var i = this.sets.length;
  this.sets[i] = new TabularSet(this, i);
  var event = document.createEvent('HTMLEvents');
  event.initEvent('addset', true, true);
  event.set = this.sets[i];
  this.parent.element.dispatchEvent(event);
};
TabularExercise.prototype.removeSet = function(index) {
  if (index < 0 || index > this.sets.length) return;
  var set = this.sets[index];
  this.sets.splice(index, 1);
  /*for (var i = 0; i < this.sets.length; i++) {
    this.sets[i].index = i;
  }*/
  var event = document.createEvent('HTMLEvents');
  event.initEvent('removeset', true, true);
  event.set = set;
  event.set_index = index;
  this.parent.element.dispatchEvent(event);

  set.destroy();
};

var TabularSet = function(parent, index) {
  var self = this;
  this.parent = parent;
  this.index = index;

  this.row = null;
  this.row_head = null;
  this.head_input = null;
  this.entries = [];

  // create our tabular row
  this.row = document.createElement('div');
  this.row.className = 'row';
  // create our tabular head row and input
  this.row_head = document.createElement('div');
  this.row_head.className = 'row';
  var head_cell = document.createElement('div');
  head_cell.className = 'cell';
  this.head_input = document.createElement('input');
  this.head_input.addEventListener('input', function(e) {
    var event = document.createEvent('HTMLEvents');
    event.initEvent('head-input', true, true);
    event.value = self.head_input.value;
    event.set_index = self.index;
    event.exercise_index = self.parent.index;
    self.parent.parent.head_element.dispatchEvent(event);
    // DING
  });
  head_cell.appendChild(this.head_input);
  this.row_head.appendChild(head_cell);
  // bogus padding cell
  var padding = document.createElement('div');
  padding.className = 'cell';
  padding.id = 'last';
  this.row.appendChild(padding);
  // add to tabular
  if (this.index == 0) {
    this.parent.parent.element.appendChild(this.row);
    this.parent.parent.head_element.appendChild(this.row_head);
  } else {
    var set_len = this.parent.sets.length-1;
    var next_row = this.parent.sets[set_len].row;
    var next_head = this.parent.sets[set_len].row_head;
    this.parent.parent.element.insertBefore(this.row, next_row.nextSibling);
    this.parent.parent.head_element.insertBefore(this.row_head, next_head.nextSibling);
  }
};
TabularSet.prototype.addEntry = function() {
  this.entries.push(new TabularEntry(this, this.entries.length));
  var event = document.createEvent('HTMLEvents');
  event.initEvent('addentry', true, true);
  event.entry = this.entries[this.entries.length-1];
  this.parent.parent.element.dispatchEvent(event);
};
TabularSet.prototype.removeEntry = function(index) {
  if (index < 2 || index > this.entries.length) return;
  var entry = this.entries[index];
  this.entries.splice(index, 1);
  for (var i = index; i < this.entries.lenth; i++) {
    this.entries[i].index = i;
  }
  this.entries[this.entries.length-1].id = 'last';

  var event = document.createEvent('HTMLEvents');
  event.initEvent('removeentry', true, true);
  event.entry = entry;
  this.parent.parent.element.dispatchEvent(event);

  entry.destroy();
};
TabularSet.prototype.destroy = function() {
  this.parent.parent.element.removeChild(this.row);
  this.parent.parent.head_element.removeChild(this.row_head);
  for (var i = 0; i < this.entries.length; i++) {
    this.entries[i].destroy();
  }
  this.entries = [];
};

var TabularEntry = function(parent, index) {
  this.parent = parent;
  this.index = index;

  this.cell = null;
  this.cell_input = null;
  
  this.cell = document.createElement('div');
  this.cell.className = 'cell';
  
  this.cell_input = document.createElement('input');
  this.cell_input.addEventListener('input', function(e) {
    // TODO: emit event tabular_entry_input
  });
  this.cell.appendChild(this.cell_input);
  // add to parent
  this.parent.row.appendChild(this.cell);
};

TabularEntry.prototype.destroy = function() {
  this.cell.removeChild(this.cell_input);
  this.parent.row.removeChild(this.cell);
};