const SVG_NS = "http://www.w3.org/2000/svg";

function getJSON(filename, cb) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', filename);
  xhr.overrideMimeType('text/plain');
  xhr.addEventListener("load",
                       function() { cb(JSON.parse(xhr.responseText)); },
                       false);
  xhr.send(null);
}

function SVGElement(name, attribs, options) {
  var element = document.createElementNS(SVG_NS, name);
  for (name in attribs)
    element.setAttribute(name, attribs[name]);
  if (options) {
    if (options.content)
      element.textContent = options.content;
  }
  return element;
}

function drawDir(svg, dir, depth, options) {
  if (depth == 0)
    return;

  var currY = options.y + options.height;
  dir.subdirs.forEach(
    function(subdir) {
      var heightScale = subdir.size / dir.size;
      var height = options.height * heightScale;
      var y = currY - height;

      if (height < options.minHeight)
        return;

      svg.appendChild(SVGElement("rect", {x: options.x,
                                          y: y,
                                          width: options.width,
                                          height: height}));
      svg.appendChild(SVGElement("text",
                                 {x: options.x + options.textPadding,
                                  y: y + height - options.textPadding},
                                 {content: subdir.name}));
      drawDir(svg, subdir, depth - 1, {x: options.x + options.width,
                                       y: y,
                                       width: options.width,
                                       height: height,
                                       minHeight: options.minHeight,
                                       textPadding: options.textPadding});
      currY = y;
    });
}

function makeTree(tree, options) {
  var svg = document.createElementNS(SVG_NS, "svg");
  var group = document.createElementNS(SVG_NS, "g");
  var svgHeight = options.height;
  var svgWidth = options.dirWidth * options.dirDepth;

  if (options.landscape) {
    var temp = svgWidth;
    group.setAttribute("transform",
                       "translate(" + svgHeight + ", 0) rotate(90)");
    svgWidth = svgHeight;
    svgHeight = temp;
  }

  svg.setAttribute("width", svgWidth);
  svg.setAttribute("height", svgHeight);
  svg.appendChild(group);

  drawDir(group, tree, options.dirDepth,
          {x: 0,
           y: 0,
           width: options.dirWidth,
           height: options.height,
           textPadding: options.textPadding,
           minHeight: options.minHeight});
  return svg;
}

$(window).ready(
  function() {
    getJSON('moztree.json',
            function(tree) {
              var svg = makeTree(tree, {height: 2800,
                                        dirWidth: 100,
                                        dirDepth: 6,
                                        landscape: false,
                                        textPadding: 4,
                                        minHeight: 16});
              $(document.body).append(svg);
              $(svg).hide();
              $(svg).fadeIn("fast");
            });
  });