///////////////////////////// Make headers linkable /////////////////////////////

$(".article--content h2, \
   .article--content h3, \
   .article--content h4, \
   .article--content h5, \
   .article--content h6" ).each(function() {
  var link = "<a href=\"#" + $(this).attr("id") + "\"></a>"
  $(this).wrapInner( link );
  })

///////////////////////////////// Smooth Scroll /////////////////////////////////

var elementWhiteList = [
  ".tabs p a",
  ".code-tabs p a",
  ".truncate-toggle",
  ".children-links a",
  ".list-links a"
]

$('.article a[href^="#"]:not(' + elementWhiteList + ')').click(function (e) {
  e.preventDefault();

  var target = this.hash;
  var $target = $(target);

  $('html, body').stop().animate({
    'scrollTop': ($target.offset().top)
  }, 400, 'swing', function () {
    window.location.hash = target;
  });
});

///////////////////////////// Left Nav Interactions /////////////////////////////

$(".children-toggle").click(function(e) {
  e.preventDefault()
  $(this).toggleClass('open');
  $(this).siblings('.children').toggleClass('open');
})

//////////////////////////// Mobile Contents Toggle ////////////////////////////

$('#contents-toggle-btn').click(function(e) {
  e.preventDefault();
  $(this).toggleClass('open');
  $('#nav-tree').toggleClass('open');
})

//////////////////////////////// Tabbed Content ////////////////////////////////

function tabbedContent(container, tab, content) {

  // Add the active class to the first tab in each tab group,
  // in case it wasn't already set in the markup.
  $(container).each(function () {
    $(tab, this).removeClass('is-active');
    $(tab + ':first', this).addClass('is-active');
  });

  $(tab).on('click', function(e) {
    e.preventDefault();

    // Make sure the tab being clicked is marked as active, and make the rest inactive.
    $(this).addClass('is-active').siblings().removeClass('is-active');

    // Render the correct tab content based on the position of the tab being clicked.
    const activeIndex = $(tab).index(this);
    $(content).each(function(i) {
      if (i === activeIndex) {
        $(this).show();
        $(this).siblings(content).hide();
      }
    });
  });
}

tabbedContent('.code-tabs-wrapper', '.code-tabs p a', '.code-tab-content');
tabbedContent('.tabs-wrapper', '.tabs p a', '.tab-content');

/////////////////////////////// Truncate Content ///////////////////////////////

$(".truncate-toggle").click(function(e) {
  e.preventDefault()
  $(this).closest('.truncate').toggleClass('closed');
})

//////////////////// Replace Missing Images with Placeholder ///////////////////

$(".article--content img").on("error", function() {
  $(this).attr("src", "/img/coming-soon.svg");
  $(this).attr("style", "max-width:500px;");
});

////////////////////////// Inject tooltips on load //////////////////////////////

$('.tooltip').each( function(){
  $toolTipText = $('<div/>').addClass('tooltip-text').text($(this).attr('data-tooltip-text'));
  $toolTipElement = $('<div/>').addClass('tooltip-container').append($toolTipText);
  $(this).prepend($toolTipElement);
});