<!-- Progress -->
<div class="progress-top"></div>
<div class="progress-right"></div>
<div class="progress-bottom"></div>
<div class="progress-left"></div>

<!-- Header -->
<header class="header">
  <span>Scroll Down</span>
</header>

<!-- Main -->
<main></main>

<!-- Footer -->
<footer class="footer">
  <span>Scroll Up</span>
</footer>

// Variables
$color-alpha: #ffc769;
$progress: 0.35em;

// Progress
.progress-top,
.progress-right,
.progress-bottom,
.progress-left {
  position: fixed;
  z-index: 999;

  background-color: $color-alpha;
}

.progress-top,
.progress-bottom {
  height: $progress;
}

.progress-right,
.progress-left {
  width: $progress;
}

.progress-top,
.progress-right {
  top: 0;
}

.progress-top,
.progress-left {
  left: 0;
}

.progress-bottom,
.progress-left {
  bottom: 0;
}

.progress-bottom,
.progress-right {
  right: 0;
}

// Body
body {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  color: #fff;
  background-color: #000;
}

// Header
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  
  font-size: 3em;
}

// Main
main {
  height: 500vh;
}

// Footer
.footer {
  @extend .header;  
}

// Progress Scroll
const ProgressScroll = (() => {
  let s;

  return {
    settings() {
      return {
        top: $('.progress-top'),
        right: $('.progress-right'),
        bottom: $('.progress-bottom'),
        left: $('.progress-left'),
        windowHeight: $(window).height(),
        windowWidth: $(window).width(),
        scrollHeight: $(document).height() - $(window).height(),
        progressTotal: $(window).height() * 2 + $(window).width() * 2,
        scrollPosition: $(document).scrollTop()
      };
    },

    init() {
      s = this.settings();
      this.bindEvents();
    },

    bindEvents() {
      $(window).on('scroll', this.onScroll);
      $(window).on('resize', this.onResize);

      this.progress();
    },

    onScroll() {
      s.scrollPosition = $(document).scrollTop();

      ProgressScroll.requestTick();
    },

    onResize() {
      s.windowHeight = $(window).height();
      s.windowWidth = $(window).width();
      s.scrollHeight = $(document).height() - s.windowHeight;
      s.progressTotal = s.windowHeight * 2 + s.windowWidth * 2;

      ProgressScroll.requestTick();
    },

    requestTick() {
      requestAnimationFrame(this.progress);
    },

    progress() {
      const percentage = s.scrollPosition / s.scrollHeight;
      const width = s.windowWidth / s.progressTotal;
      const height = s.windowHeight / s.progressTotal;

      s.top.css('width', `${(percentage / width) * 100}%`);
      s.right.css('height', `${((percentage - width) / height) * 100}%`);
      s.bottom.css('width', `${((percentage - width - height) / width) * 100}%`);
      s.left.css('height', `${((percentage - width - height - width) / height) * 100}%`);
    }
  };
})();

// Init
$(() => {
  ProgressScroll.init();
});