impress.js: Attempt at flowchart generation

impressflow.js

 // 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() {
  var id = $(this).attr('id');
  var parentId = $(this).attr('data-parent');
  if (!parentId) { 
    topId = id;
  } else {
    if (!childrenIds[parentId]) {
      childrenIds[parentId] = [];
    }
    childrenIds[parentId].push(id);
  }
});

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

function calculateSize(stepId) {
  var size = 0;

  var children = childrenIds[stepId];
  if (!children) {
    $('#' + stepId).attr('data-size', size);
    return sizeY;
  }
  for (var i = 0; i < children.length; i++) {
    size += calculateSize(children[i]);
  }
  $('#' + stepId).attr('data-size', size);
  return size;
}

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

function positionStep(stepId, x, y) {
  var stepDom = $('#' + stepId);

  x += sizeX;
  var children = childrenIds[stepId];
  if (children && children.length > 1) {
    totalY = stepDom.attr('data-size');
    y = y - (totalY/2 - sizeY/2);
  }

  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'});
  
  if (!children) return;
  for (var i = 0; i < children.length; i++) {
    positionStep(children[i], x, y + sizeY*i);
  }
}