function codeWrap(){    
  var codeTpl = '' +
  '<ul class="nav nav-tabs nav-code" data-code-tablist>' +
    '<li class="active">' +
        '<a href="#promise">Promises</a>' +
    '</li>' +
    '<li>' +
        '<a href="#callback">Callbacks</a>' +
    '</li>' +
  '</ul>' +
  '<div class="tab-content">{{tapPanes}}</div>';

  var codeGroups =
    $('[data-code-id]')
      .get()
      .map(function(div){
          return div.attributes["data-code-id"].value
      })
      .filter(function(item, index, inputArray){
          return inputArray.indexOf(item) == index;
      })
      .forEach(function(id){
        var $code = $("[data-code-id='" + id + "']");

        var paneHeight = 0;

        var paneHtml = $code.get().map(function(div){
          if(div.clientHeight > paneHeight){
            paneHeight = div.clientHeight;
          }
          return div.outerHTML;
        }).join('');

        // Pad the pane height
        paneHeight = paneHeight + 15;

        var codeHtml = codeTpl
                         .replace(/{{tapPanes}}/g, paneHtml)
                         .replace(/<pre>/g, "<pre style='height: " + paneHeight + "px;'");

        $code
          .first()
          .replaceWith(codeHtml);
        $code.remove();

        // Remove items that are only useful for non-JS users.
        $('[data-code-hide]').addClass('hide');
      });

  $('[data-code-tablist] [href]').on('click', function(e){
    var href = $(this).attr('href');

    setAll(href.replace('#', ''));

    e.preventDefault();
  });

  function setAll(type){
    var type = type || localStorage.getItem('codeStyle');
    if(typeof type === "undefined" || type === null) return;

    $('[data-code-tablist] li, .tab-pane').removeClass('active');
    $('[data-code-tablist] [href="#' + type + '"]').parent().addClass('active');
    $('.tab-pane[id="' + type + '"]').addClass('active');
    localStorage.setItem('codeStyle', type);
  }

  setAll();
};
codeWrap();