$(function() {
  /*
   * 指定されたヘッダ要素（例: 'h2'）のタイトル名をもとに
   * メニュー要素 (ul) を生成する。
   *
   * - searchParent: この要素以下のヘッダ要素を抽出する（例: '#content'）
   * - headerTagNames: 抽出するヘッダ要素名（例: 'h2'）
   */
  function createMenu(searchParent, headerTagNames) {
    var $ul = $('<ul />');  // メニュー項目の親要素
    var sectionNumber = 1;  // ジャンプ先名称のサフィックス

    $(searchParent).find(headerTagNames).each(function (index, elem) {
      var $e = $(elem);
      // ジャンプ先となる a 要素を追加する（name 属性も自動生成）
      var name = 'section' + (sectionNumber++);
      $e.prepend('<a name="' + name + '"></a>');

      // メニュー項目となる li 要素を追加する
      $ul.append('<li><a href="#' + name + '">' + $e.text() + '</a>');
    });

    return $ul;
  }

  // main 要素以下の h2 ヘッダを抽出して、メニュー (ul 要素) を自動生成し、
  // その ul 要素を #menuStub へと挿入する。
  var menuElem = createMenu('main', 'h2');
  $('#menuStub').append(menuElem);
});

$(function() {
  /*
   * 指定されたヘッダ要素（例: 'h2, h3, h4'）のタイトル名をもとに
   * メニュー要素 (ul) を生成する。
   *
   * - searchParent: この要素以下のヘッダ要素を抽出する（例: '#content'）
   * - headerTagNames: 抽出するヘッダ要素名（例: 'h2, h3, h4'）
   */
  function createMenu(searchParent, headerTagNames) {
    var $ul = $('<ul />');  // メニュー項目の親要素
    var sectionNumber = 1;  // ジャンプ先名称のサフィックス

    $(searchParent).find(headerTagNames).each(function (index, elem) {
      var $e = $(elem);
      // ジャンプ先となる a 要素を追加する（name 属性も自動生成）
      var name = 'section' + (sectionNumber++);
      $e.prepend('<a name="' + name + '"></a>');

      // メニュー項目となる li 要素を追加する
      var level = $e.get(0).tagName.charAt(1);  // 'h2' などの後ろの数値部分
      $ul.append('<li class="level-' + level + '"><a href="#' + name + '">' + $e.text() + '</a>');
    });

    return $ul;
  }

  // main 要素以下の h2, h3 ヘッダを抽出して、メニュー (ul 要素) を自動生成し、
  // その ul 要素を #menu へと挿入する。
  var menuElem = createMenu('main', 'h2, h3');
  $('#menuStub').append(menuElem);
});