var DocsMenu = function(categories, num_documents) {
  var menu;

  var render = function(elem) {
    var tpl = $.getTemplate(
        "views/documents",
        "zbase_documents_menu_main_tpl");

    menu = $("z-menu", tpl);
    $(".num_documents", menu).innerHTML = num_documents;
    categories.forEach(function(c) {
      insertMenuItem([], c.split("~"), menu);
    });

    $.handleLinks(elem);
    elem.innerHTML = "";
    elem.appendChild(tpl);
  };

  var setActiveMenuItem = function(raw_key) {
    var key = encodeURIComponent(raw_key);
    if (!menu) {
      return;
    }

    var items = menu.querySelectorAll("z-menu-item, z-menu-section");
    if (!items) {
      return;
    }

    for (var i = 0; i < items.length; ++i) {
      var e = items[i];

      if (key.indexOf(e.getAttribute("data-key")) == 0) {
        e.setAttribute("data-active", "active");
      } else {
        e.removeAttribute("data-active");
      }
    }
  };

  var insertMenuItem = function(path, tail, elem) {
    if (tail.length == 0) {
      return;
    }

    path.push(tail[0]);
    var key = encodeURIComponent(path.join("~"));
    var href = "/a/?" + $.buildQueryString({
      publishing_status: "PUBSTATUS_PUBLISHED",
      category: path.join("~")
    });

    // insert section
    if (path.length == 1) {
      var section_title = tail.shift();
      var section = elem.querySelector(
          "z-menu-section[data-key='" + key + "']");

      if (!section) {
        section = document.createElement("z-menu-section");
        section.setAttribute("data-key", key);
        elem.appendChild(section);

        var title = document.createElement("z-menu-title");
        section.appendChild(title);

        var link = document.createElement("a");
        link.innerHTML = $.escapeHTML(section_title);
        link.href = href;
        title.appendChild(link);
      }

      insertMenuItem(path, tail, section);
    } else {
      var item_title = tail.shift();
      var item = elem.querySelector("z-menu-item[data-key='" + key + "']");
      if (!item) {
        item = document.createElement("z-menu-item");
        item.setAttribute("data-key", key);
        $.onClick(item, function() { ZBase.navigateTo(href); });
        elem.appendChild(item);

        var link = document.createElement("a");
        link.innerHTML = $.escapeHTML(item_title);
        link.href = href;
        item.appendChild(link);
      }

      insertMenuItem(path, tail, item);
    }
  }

  return {
    render: render,
    setActiveMenuItem: setActiveMenuItem
  };

};

@@ -261,16 +261,30 @@
 rHTML = 
+toHumanNumber(
 num_docu
@@ -288,16 +288,17 @@
 ocuments
+)
 ;%0A    ca
@@ -2479,16 +2479,320 @@
    %7D%0A  %7D
+;%0A%0A  var toHumanNumber = function(number) %7B%0A    if (number %3C 1000) %7B%0A      return number;%0A    %7D%0A%0A    var number_str = number.toString();%0A    var hundred_tail = number_str.substr(number_str.length - 3);%0A    var head = number_str.substr(0, number_str.length - 3);%0A    return head + %22,%22 + hundred_tail;%0A  %7D;
 %0A%0A  retu

format docs menu number