{% if site.enable_progressbar %}

<!-- Scrolling Progress Bar -->
<script type="text/javascript">
  /*
   * This JavaScript code has been adapted from the article 
   * https://css-tricks.com/reading-position-indicator/ authored by Pankaj Parashar, 
   * published on the website https://css-tricks.com on the 7th of May, 2014.
   * Couple of changes were made to the original code to make it compatible 
   * with the `al-foio` theme.
   */
  const progressBar = $("#progress");
  /*
   * We set up the bar after all elements are done loading.
   * In some cases, if the images in the page are larger than the intended
   * size they'll have on the page, they'll be resized via CSS to accomodate
   * the desired size. This mistake, however, breaks the computations as the
   * scroll size is computed as soon as the elements finish loading.
   * To account for this, a minimal delay was introduced before computing the
   * values.
   */
  window.onload = function () {
    setTimeout(progressBarSetup, 50);
  };
  /*
   * We set up the bar according to the browser.
   * If the browser supports the progress element we use that.
   * Otherwise, we resize the bar thru CSS styling
   */
  function progressBarSetup() {
    if ("max" in document.createElement("progress")) {
      initializeProgressElement();
      $(document).on("scroll", function() {
        progressBar.attr({ value: getCurrentScrollPosition() });
      });
      $(window).on("resize", initializeProgressElement);
    } else {
      resizeProgressBar();
      $(document).on("scroll", resizeProgressBar);
      $(window).on("resize", resizeProgressBar);
    }
  }
  /*
   * The vertical scroll position is the same as the number of pixels that
   * are hidden from view above the scrollable area. Thus, a value > 0 is
   * how much the user has scrolled from the top
   */
  function getCurrentScrollPosition() {
    return $(window).scrollTop();
  }

  function initializeProgressElement() {
    let navbarHeight = $("#navbar").outerHeight(true);
    $("body").css({ "padding-top": navbarHeight });
    $("progress-container").css({ "padding-top": navbarHeight });
    progressBar.css({ top: navbarHeight });
    progressBar.attr({
      max: getDistanceToScroll(),
      value: getCurrentScrollPosition(),
    });
  }
  /*
   * The offset between the html document height and the browser viewport
   * height will be greater than zero if vertical scroll is possible.
   * This is the distance the user can scroll
   */
  function getDistanceToScroll() {
    return $(document).height() - $(window).height();
  }

  function resizeProgressBar() {
    progressBar.css({ width: getWidthPercentage() + "%" });
  }
  // The scroll ratio equals the percentage to resize the bar
  function getWidthPercentage() {
    return (getCurrentScrollPosition() / getDistanceToScroll()) * 100;
  }
</script>

{%- endif %}