- var contents = [{
-    'title': 'First Page Title',
-    'description': 'This is the description of the \'First\' content'
-  }, {
-    'title': 'Second Page Title',
-    'description': 'This is the description of the \'Second\' content'
-  }, {
-    'title': 'Third Page Title',
-    'description': 'This is the description of the \'Third\' content'
-  }, {
-    'title': 'Fourth Page Title',
-    'description': 'This is the description of the \'Fourth\' content'
-  }, {
-    'title': 'Fifth Page Title',
-    'description': 'This is the description of the \'Fifth\' content'
-  }];
- var count = contents.length;

#app
  .bg(ref="bg")
    - for (var i = 1; i <= count; i++)
      .c(class="c" + i)
  .bg.bg2(ref="bg2")
    .c
  .fg(ref="fg" v-on:scroll="foregroundScroll")
    each content in contents
      .c
        h1 #{content.title}
          small #{content.description}
  .i
    - for (var i = 1; i <= count; i++)
      a(
        href="#"
        ref="a" + i
        v-on:click="fgScrollTo(" + i + ")"
        v-bind:class="{ active : (iconActive == " + i + ") ? true : false }"
      )

$photos: (
  url("https://images.unsplash.com/photo-1513360371669-4adf3dd7dff8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"),
  url("https://images.unsplash.com/photo-1520523839897-bd0b52f945a0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"),
  url("https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"),
  url("https://images.unsplash.com/photo-1518599807935-37015b9cefcb?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"),
  url("https://images.unsplash.com/photo-1541689592655-f5f52825a3b8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ")
);

$c-h1-font-family: "Bowlby One SC", cursive;
$c-h1-small-font-family: "Poiret One", cursive;

@import url("https://fonts.googleapis.com/css?family=Bowlby+One+SC&display=swap");
@import url("https://fonts.googleapis.com/css?family=Poiret+One&display=swap");

// ----- BACKGROUND
.bg {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  &.bg2 {
    height: 100vh;
    .c {
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ea1e1e' fill-opacity='0.29' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 100vmin 100vmin;
      height: 625vh;
    }
  }
  .c {
    background-position: center;
    background-size: cover;
    background-repeat: none;
    width: 100%;
    height: 100%;
    @for $i from 1 through length($photos) {
      &.c#{$i} {
        background-image: linear-gradient(rgba(#0f102b, 0.7) 0 30%, rgba(#0f102b, 0.5) 50% 100%), nth($photos, $i);
      }
    }
  }
}

// ----- FOREGROUND
.fg {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  .c {
    width: 100%;
    height: 150vh;
    position: relative;
    &:last-child {
      height: 100vh;
    }
    h1 {
      color: white;
      font-family: $c-h1-font-family;
      font-size: 56px;
      text-align: center;
      width: 100%;
      height: 100vh;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      small {
        color: #cfcfcf;
        font-family: $c-h1-small-font-family;
        font-size: 0.45em;
        margin-top: 20px;
        display: block;
      }
    }
  }
}

// ----- ICONS

.i {
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 30px;
  a {
    background-color: rgba(#6f6f6f, 0.8);
    width: 20px;
    height: 20px;
    margin: 0 5px;
    display: block;
    border-radius: 50%;
    transition: background-color 300ms ease-out;
    &.active {
      background-color: white;
    }
  }
}

var app = new Vue({
  el: '#app',
  data: {
    iconActive: 1
  },
  methods: {
    foregroundScroll: function(evt) {
      let el = evt.target;
      let bg = this.$refs.bg;
      let b2 = this.$refs.bg2;
      
      bg.scrollTop = el.scrollTop / 1.5;
      b2.scrollTop = el.scrollTop / 1.25;
      
      this.iconActive = Math.floor(el.scrollTop / 1.5 / window.innerHeight) + 1;
    },
    fgScrollTo: function(i) {
      let fg = this.$refs.fg;
      
      // GSAP Scroll
      TweenLite.to(fg, 1.2, {
        scrollTo: {
          y: (window.innerHeight * 1.5) * (i - 1)
        },
        ease: Power3.easeInOut
      });
    }
  }
});