$(function() {

  /* Parallax */
  $('html').mousemove(function(e){
      
    var wx = $(window).width();
    var wy = $(window).height();
    
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    
    var newx = x - wx/2;
    var newy = y - wy/2;

    // var parallaxList = [];
    
    $('.parallax').each(function(index, element){

      // var currentParallaxItem = $(this);
      var speed = $(this).attr('data-speed');

      var translateValX = 1 - newx*speed;
      var translateValY = 1 - newy*speed;

      var playParallax = anime({
        targets: element,
        translateX: translateValX,
        translateY: translateValY,
        duration: 200
      })
      
    });
    
  });

	var alchemyWatcher = scrollMonitor.create($('.alchemy'), 100);
	var partnerWatcher = scrollMonitor.create($('.partner'), 100);
	var introductionWatcher = scrollMonitor.create($('.introduction'));

	if (partnerWatcher.isAboveViewport) {
    $('.blob').addClass('blob--partner');
    $('.tublob').addClass('tublob--partner');
    $('.polygon').addClass('polygon--partner');
    $('.textelement').addClass('textelement--partner');
  }

  alchemyWatcher.fullyEnterViewport(function() {
    $('.blob').addClass('blob--alchemy');
    $('.tublob').addClass('tublob--alchemy');
    $('.polygon').addClass('polygon--alchemy');
  });

  alchemyWatcher.exitViewport(function() {
    if (alchemyWatcher.isBelowViewport) {
      $('.blob').removeClass('blob--alchemy');
      $('.tublob').removeClass('tublob--alchemy');
      $('.polygon').removeClass('polygon--alchemy');
    }
  });

  introductionWatcher.fullyEnterViewport(function() {
    $('.textelement').removeClass('textelement--alchemy');
  });

  introductionWatcher.exitViewport(function() {
    $('.textelement').addClass('textelement--alchemy');
  });

  partnerWatcher.fullyEnterViewport(function() {
    $('.blob').addClass('blob--partner');
    $('.tublob').addClass('tublob--partner');
    $('.polygon').addClass('polygon--partner');
  });

  partnerWatcher.exitViewport(function() {
    if (partnerWatcher.isBelowViewport) {
      $('.blob').removeClass('blob--partner');
      $('.tublob').removeClass('tublob--partner');
      $('.polygon').removeClass('polygon--partner');
    }
  });

  function debounce(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };

  // Splash setup code
  var windowHeight = $(window).outerHeight();
  var windowWidth = $(window).outerWidth();

  var splashLogoOffsetX;
  var splashLogoOffsetY = windowHeight * 0.4;
  var splashLogoScale;

  var wrapperWidth;
  var splashTransformArea;

  var logoWidth;

  if (windowWidth <= 767) {
    wrapperWidth = 30;
    $('.formblob').attr('preserveAspectRatio', 'xMidYMid slice');
  } else {
    wrapperWidth = 120;
    $('.formblob').attr('preserveAspectRatio', 'xMidYMid meet');
  }

  splashTransformArea = windowWidth - wrapperWidth;

  if (windowWidth > 875) {
    splashLogoScale = (windowHeight * 0.45) / 92;
    splashLogoOffsetX = 0;
  } else {
    splashLogoScale = (windowHeight * 0.85) / 92;
    logoWidth = $('.splash__logo').outerWidth() * splashLogoScale * 0.5;
    splashLogoOffsetX = (splashTransformArea * 0.5) - logoWidth;
  }

  // Resize code
  var updateSplashLogo = debounce(function() {
    anime({
      targets: '.splash__logo',
      translateX: [splashLogoOffsetX],
      translateY: [splashLogoOffsetY],
      scale: [splashLogoScale],
      easing: 'easeInOutQuad',
      duration: 200
    });
  }, 100);

  $(window).resize(function() {
    windowHeight = $(window).outerHeight();
    windowWidth = $(window).outerWidth();
    halfWindowHeight = (windowHeight / 2) * -1;
    splashLogoOffsetY = windowHeight * 0.4;

    splashTransformArea = windowWidth - wrapperWidth;

    if (windowWidth <= 767) {
      wrapperWidth = 30;
      $('.formblob').attr('preserveAspectRatio', 'xMidYMid slice');
    } else {
      wrapperWidth = 120;
      $('.formblob').attr('preserveAspectRatio', 'xMidYMid meet');
    }
    
    if (windowWidth > 875) {
      splashLogoScale = (windowHeight * 0.45) / 92;
      splashLogoOffsetX = 0;
    } else {
      splashLogoScale = (windowHeight * 0.85) / 92;
      logoWidth = $('.splash__logo').outerWidth() * splashLogoScale * 0.5;
      splashLogoOffsetX = (splashTransformArea * 0.5) - logoWidth;
    }

    updateSplashLogo();

    scrollMonitor.update();
    if (windowWidth < 875) {
      $('.year--active').removeClass('year--active');
      $('.journey--active').removeClass('journey--active');
    }
  })

  function replaySplash() {
    $('.splash__caption--cta').css('opacity', '1');
    $('.splash__caption--cta').css('transform', 'translateY(0)');
    $('.splash__caption--text').css('opacity', '1');
    $('.splash__caption--text').css('transform', 'translateY(0)');
    $('.splash').css('display', 'grid'); 
    
    // fade in background then play logo animation
    var resetSplashLogoTimeline = anime.timeline({
      autoplay: false,
      complete: function() {
        replaySplashTimeline.play();
      }
    }).add({
      targets: '.splash__logo',
      translateX: [splashLogoOffsetX],
      translateY: [splashLogoOffsetY],
      scale: [splashLogoScale],
      duration: 0
    })

    var replaySplashTimeline = anime.timeline({
      autoplay: false,
      complete: function() {
        splash();
      }
    }).add({
      targets: '.splash',
      opacity: 1,
      easing: 'easeInOutQuad',
      duration: 1000
    })

    resetSplashLogoTimeline.play();
  }
      
  // Splash logo
  function splash() {
    $('body').addClass('preventscroll');
    $('html').addClass('preventscroll');
    $('.splash').css('display', 'grid');  
    $('.splash').css('opacity', '1');

    // Intro animation timelines
    var introLogoTimeline = anime.timeline({
      autoplay: false,
      complete: function() {
        $('.splash').css('display', 'none');
      }
    }).add({
      targets: '.splash__logo',
      translateX: [splashLogoOffsetX, 0],
      translateY: [splashLogoOffsetY, 0],
      scale: [splashLogoScale, 1],
      easing: 'easeInOutQuad',
      duration: 1000
    }).add({
      targets: '.splash',
      opacity: 0,
      easing: 'easeInOutQuad',
      duration: 1000,
      offset: '+=200'
    })
    // Intro text fade and slide animation
    var introTextTimeline = anime.timeline({
      autoplay: false
    }).add({
      targets: '.splash__caption--cta',
      opacity: 0,
      translateY: 75,
      easing: 'easeInQuad',
      duration: 350
    }).add({
      targets: '.splash__caption--text',
      opacity: 0,
      translateY: 75,
      easing: 'easeInQuad',
      duration: 350,
      offset: '-=75'
    })

    // Play animation and remove preventScroll
    $('.splash__caption--cta').on('click', function(e) {
      e.preventDefault();
      
      introLogoTimeline.play();
      introTextTimeline.play();
      $('body').removeClass('preventscroll');
      $('html').removeClass('preventscroll');

      localStorage.setItem('splashPlayed', true);
    })
  }

  // Replay splash is footer__intro button is clicked.
  $( '.footer__intro' ).click(function() {
    replaySplash();
  });

  // Play splash if localStorage not set
  if(!localStorage.getItem('splashPlayed')) {
    splash();
  }
})