(function() {
  var Hero;

  Hero = function() {
    this.animate();
  }

  Hero.prototype = {
    animate() {
      this.setProgress();
      this.imageScale();
      this.blobAnimation();
    },
    setProgress() {
      const scrollY = window.pageYOffset;
      const hero = document.querySelector('.hero');
      const heroTop = hero.offsetTop;
      const heroHeight = hero.offsetHeight;

      this.duration = heroTop + heroHeight;
      this.progress = scrollY / this.duration;
    },
    imageScale() {
      const image = document.querySelector('.hero__image--scale');

      // Never scale below 100%
      const minScale = 1;
      // How quickly / slowly the scale happens
      const scaleFactor = .5;

      let scaleTo = 1 + (this.progress * scaleFactor);
      let slideTo = (this.progress * 50);

      // Make sure to stick to minimum scale
      if (scaleTo < minScale) {
        scaleTo = minScale;
      }

      let transform = `scale(${scaleTo}) translateY(${slideTo}%)`;

      image.style.transform = transform;
    },
    blobAnimation() {
      const d = {
        start: '.hero__blob--canvas svg path',
        middle: '.hero__blob--middle svg path',
        end: '.hero__blob--end svg path'
      };

      for (let x in d) {
        let svg = document.querySelector(d[x]);
        d[x] = svg.getAttribute('d');
      }

      const timeline = window.anime.timeline({
        duration: this.duration,
        easing: 'linear',
        autoplay: false,
        direction: 'normal',
        loop: false
      });

      timeline
        // .add({
        //   targets: '.hero__blob--canvas svg path',
        //   d: d.start
        // })
        .add({
          targets: '.hero__blob--canvas svg path',
          d: [{
              value: d.middle
            },
            {
              value: d.end
            }
          ]
        });

      const seekTo = this.progress * 100;
      console.log(seekTo);

      timeline.seek(seekTo);
    }
  }

  window.addEventListener('DOMContentLoaded', () => {
    window.hero = new Hero();
  });
  window.addEventListener('scroll', () => {
    if (window.hero) {
      window.hero.animate();
    }
  });

})();