// Each DIV has data-parent="parentid" (except the top)
// Go through all steps, make hierarchy of parent to children
var childrenIds = {};
var topId;
$('.step').each(function() {
  if($(this).hasClass('notree')) {
    return
  }
  var id = $(this).attr('id');
  var parentId = $(this).attr('data-parent');
  if (!parentId) {
    topId = id;
    console.log("Found topId " + topId)
    $(this).attr({
        'data-depth': 0,
        'data-size': 1
    });
  } else {
    if (!childrenIds[parentId]) {
      childrenIds[parentId] = [];
    }
    childrenIds[parentId].push(id);
  }
});

console.log(childrenIds);

var sizeY = 1000;
var sizeX = 1000;
calculateSize(topId);

function calculateSize(stepId) {
  var size = 0;
  var childDepth = parseInt($('#' + stepId).attr('data-depth'), 10) + 1;

  var children = childrenIds[stepId];
  if (!children) {
    $('#' + stepId).attr('data-size', size);
    return 1;
  }
  for (var i = 0; i < children.length; i++) {
    $('#' + children[i]).attr({
      'data-depth': childDepth,
      'data-siblings': children.length,
      'data-sibling-index': i
    });
    size += calculateSize(children[i]);
  }
  $('#' + stepId).attr('data-size', size);
  return size;
}

var startX = 0;
var startY = 0;
positionStep(topId, startX);

function positionStep(stepId, parentX, parentSize) {
  var stepDom = $('#' + stepId);

  // x is the complicated part
  var xUnits = $(stepDom).attr('data-size');
  var xSiblings = $(stepDom).attr('data-siblings') || 0;
  var xIndex = $(stepDom).attr('data-sibling-index') || 0;
  var xOffset = 0
  if (xSiblings && parentSize) {
    xOffset = (xIndex - (xSiblings - 1)/2) * parentSize / xSiblings
  }
  var x = parentX + (xOffset * sizeX);

  // y is always based on distance from topId
  var y = sizeY * parseInt($(stepDom).attr('data-depth')) + startY;

  stepDom.attr('data-x', x);
  stepDom.attr('data-y', y);
  //stepDom.css({width: sizeY + 'px', height: sizeY + 'px'});
  //stepDom.css({position: 'absolute', top: x + 'px', left: y + 'px'});
  console.log("Positioning step " + stepId + " at " + x + ", " + y);

  var children = childrenIds[stepId];
  if (!children) return;
  for (var i = 0; i < children.length; i++) {
    positionStep(children[i], x, xUnits);
  }
}
// now init to draw at new positions