let isIE11 = !(window.ActiveXObject) && "ActiveXObject" in window;

function getRandomNumber(min, max) {
  return Math.random() * (max - min) + min;
}

function modal() {
  $('.open-modal').on('click', function() {
    var modal = $(this).data('content-id');

    console.log('#' + modal, $('#' + modal));
    
    $('body').addClass('modal-open');
    $('#' + modal).removeClass('hidden');
  });

  $('.modal__overlay,.modal__close').on('click', function() {
    $('body').removeClass('modal-open');
    $('.modal__content').addClass('hidden');
  });
}

function positionElements(){
  $('[data-pos]').each(function(i, el){
    const positions = $(el).data('pos');

    $(el).css({
      marginTop: positions.y,
      marginLeft: positions.x
    })
  })
}

$(document).ready(function() {
  console.log(isIE11);

  positionElements();

  hotspots.init();
  
  if(isIE11) {
    $('body').addClass('ie11');
  }

  $('.main-ui__burger, .menu__item a').on('click', function() {
    $('body').toggleClass('nav-open');
  });

  $('.chapter').each(function(i) {
    let itemClass = i == 0 ? 'chapter-pager__item chapter-pager__item--active' : 'chapter-pager__item';
    $('.chapter-pager').append('<li class="' + itemClass + '">');
  });

  setInterval(function() {
    let newX = getRandomNumber(-4,4);
    let newY = getRandomNumber(-4,4);
    let randomRot = getRandomNumber(-3,3);
    
    $('.video-round').css('transform', 'translate3d(' + newX + '%,' + newY + '%,0) rotate(' + randomRot + 'deg)');
  }, 4000);

  var titleAnim = anime({
    targets: '.title--large',
    translateY: ["20%", "0%"],
    opacity: [0,1],
    easing: "easeInOutSine",
    duration: 500
  });

  $('.movie-wrapper').each(function() {
    let movie = $(this).data('movie');
    let iframe = '<iframe class="movie-embed lazyload" src="' + movie + '?autoplay=true&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
    let wrapper = $(this);

    $(this).find('.movie-poster').on('click', function() {
      wrapper.append(iframe);
      wrapper.addClass('playing');
    });
  });
  
  if(!isIE11) {
    $('.anime').not('.anime--scroll, .anime--reach').each(function(i) {
      let xStart = $(this).data('x') ? $(this).data('x') : 0 ;
      let yStart = $(this).data('y') ? $(this).data('y') : 0 ;
      let delay = $(this).data('delay') ? $(this).data('delay') : 0;
  
      var animation = (anime({
        targets: this,
        translateX: [xStart,0],
        translateY: [yStart,0],
        opacity: [0,1],
        delay: delay,
        autoplay: true,
        duration: 500,
        elasticity: 200,
        easing: 'easeInOutSine',
      }));
    });
  }

  modal();
});

$(window).on('scroll resize load', function() {
  const scrollTop = $(window).scrollTop();
  const windowHeight = $(window).height();
  const scrolled = scrollTop + windowHeight;
  
  $('.chapter').each(function(i) {
    const theme = $(this).data('theme');
    const label = $(this).data('label');
    const height = $(this).height();
    const offset = $(this).offset().top;

    if(scrolled - (windowHeight / 2) >= offset && scrolled - (windowHeight / 2) < offset + height) {
      $('.chapter-label__sub').text(label);
      const hasLabel = (label.length > 0) ? true : false;
      if(!hasLabel){
        $('.chapter-label__sub').addClass('hide')
      }
      else {
        $('.chapter-label__sub').removeClass('hide')
      }

      
      if(theme){
        $('body').removeClass(function (index, className) {
          return (className.match(/(^|\s)theme-\S+/g) || []).join(' ');
        });
        $('body').addClass('theme-' + theme);
      }
      $('.chapter-pager__item').removeClass('chapter-pager__item--active');
      $('.chapter-pager__item').eq(i).addClass('chapter-pager__item--active');
    }
  });

  $('[data-balls]').each(function() {
    const height = $(this).height();
    const offset = $(this).offset().top;

    if(scrolled >= 0 && scrolled - (windowHeight / 1.2) < offset + height) {
      $('.balls').addClass('visible');
    }
    else {
      $('.balls').removeClass('visible');
    }
  });

  if(!isIE11) {
    
    $('[data-flow]').each(function(i) {
      let $this = $(this);
      const rect = this.getBoundingClientRect();
      const posY = rect.y;
      const data = $(this).data('flow');
      console.log('data.speed', data.speed);
      const diffSpeed = (data.speed.x || data.speed.y) ? true : false; 
      console.log('diffspeed: ', diffSpeed);
      const speed = {
        x: parseFloat(data.speed.x || data.speed) || .33,
        y: parseFloat(data.speed.y || data.speed) || .33
      };
      let direction = ""; 
      switch(data.direction){
        case 'horizontal':
          direction = "X";
          break;
        case 'vertical':
          direction = "Y";
          break;
        case 'both':
          direction = "";
          break;
        default:
          direction = "Y";
          break;
      } 
      const offset = parseFloat(data.offset) * windowHeight || 0;
      const dir = (window.innerWidth < 1024 ) ? 1 : -1;

      // console.log('rect.y', rect.y);
      // console.log('speed', speed);
      // console.log('offset', offset);


      if(posY < (offset)){
      // if(posY < 0){
        const scroll = {
          x: ((posY - offset)* dir) * speed.x,
          y: ((posY - offset)* dir) * speed.y
        }

        // const scroll = (posY*-1);
        console.log('scroll: ' + scroll);
        $this.css({
          maxWidth: '100%',
          willChange: 'transform',
          transition: 'all .1s linear',
          transform: 'translate' + direction + '(' + scroll.x + 'px' + ((data.direction === "both") ? ", " + scroll.y + "px" : "") + ')'
        })
      }
    });

    $('.anime--scroll').each(function(i) {
      let xStart = $(this).data('x') || 0 ;
      let yStart = $(this).data('y') || 0 ;
      let flow = $(this).data('flow') || false;
      let delay = $(this).data('delay') ? $(this).data('delay') : 0;
      const offset = $(this).offset().top;
      const scrollPercent = scrolled / offset;
      let seek = scrolled - offset <= 0 ? 0 : (scrolled - offset) / 500;
      let seekValue = scrollPercent <= 0 ? 0 : scrollPercent;
  
      if(seek >= 100) {
        seekValue = 100;
      }


      const endOfAnimation = flow || 0;
      const opacity = flow ? [1,1] : [0,1];
      const transX = (flow && (xStart !== 0)) ? [xStart, endOfAnimation] : [xStart, 0];
      const transY = (flow && (yStart !== 0)) ? [yStart, endOfAnimation] : [yStart, 0];
      const easing = flow ? 'linear' : 'easeInOutSine';
      var animeScroll = (anime({
        targets: this,
        translateX: transX,
        translateY: transY,
        opacity: opacity,
        delay: delay,
        autoplay: false,
        duation: 500,
        elasticity: 200,
        easing: easing,
      }));
  
      if(scrolled >= offset) {
        if(!flow){
          animeScroll.seek(seek * (animeScroll.duration - animeScroll.delay));
        }
      }
    });
  
    $('.graph .line').each(function(i) {
      let percent = $(this).data('value');
      const offset = $(this).offset().top;
      const animDelay = $(this).data('delay') ? $(this).data('delay') : 0;
  
      if(scrolled >= offset && !$(this).hasClass('reached')) {
        var graphAnim = (anime({
          targets: this,
          autoplay: true,
          width: ["0%", percent],
          duration: 600,
          delay: animDelay,
          elasticity: 200,
          easing: 'easeInOutSine',
        }));
  
        $(this).addClass('reached');
      }
    });
  
    $('.movie-bubble').each(function(i) {
      const offset = $(this).offset().top;
      const countValue = $(this).data('value');
      const thisElem = $(this);
  
      let animeObject = {
        counter: 0
      }
      
      if(scrolled >= offset) {
        if(!thisElem.hasClass('counted')) {
          anime({
            targets: animeObject,
            counter: countValue,
            easing: 'linear',
            round: 1,
            autoPlay: false,
            update: function() {
              thisElem.text(JSON.stringify(animeObject.counter) + ' %');
              thisElem.addClass('counted');
            }
          });
        }
      }
    });
  
    $('.co2-percent__value').each(function(i) {
      const offset = $(this).offset().top;
      const countValue = $(this).data('value');
      const thisElem = $(this);
  
      let animeObject = {
        counter: 0
      }
      
      if(scrolled >= offset) {
        if(!thisElem.hasClass('counted')) {
          anime({
            targets: animeObject,
            counter: countValue,
            easing: 'linear',
            round: 1,
            autoPlay: false,
            update: function() {
              thisElem.text(JSON.stringify(animeObject.counter) + ' %');
              thisElem.addClass('counted');
            }
          });
        }
      }
    });
  }
});

window.hotspots = {
  list: $('.hot-spots'),

  init: function () {

    this.list = $('.hot-spots');
    hotspots.setEvents();

    this.list.addClass('hot-spots--loaded');

    hotspots.list.each(function () {

      var $hotspots = $(this).find('.hot-spot');

      $hotspots.each(function () {
        var $this = $(this),
          pos = $this.attr('data-pos'),
          posX = pos.split(',')[0],
          posY = pos.split(',')[1];

        $this.css({
          'left': posX + "%",
          'top': posY + "%"
        });
      });

    });
  },

  addMouseFunctions: function(_id){
    console.log('_id', _id);

    _id = (_id.indexOf("#") >= 0) ? _id : '[spot-id="' + _id + '"]';
    $(_id).addClass('hover');

    if (!$(_id).hasClass('show-me')) {
      hotspots.controlSpots(_id);
    }
  },

  setEvents: function () {

    $('.hot-spot').on('mouseover click', function () {
      var _id = $(this).attr('spot-id');
      console.log('_id', _id);
      // _id = (_id.indexOf("#") >= 0) ? _id : '[control-spot="' + _id + '"]';
      _id = (_id.indexOf("#") >= 0) ? _id : '[control-spot~="' + _id + '"]';

      // console.log('spots: ' + _id);

      if (!$(_id).hasClass('show-me')) {
        hotspots.controlSpots(_id);
      }
    })
      .on('mouseleave', function () {
        var _id = $(this).attr('spot-id');
        // _id = ( _id.indexOf("#") >= 0 ) ? _id : `[control-spot="${_id}" ]`;
        _id = (_id.indexOf("#") >= 0) ? _id : '[control-spot~="' + _id + '"]';

        hotspots.controlSpots(_id);
      });

    $('[control-spot]').on('mouseover', function () {
      var _id = $(this).attr('control-spot');
      const _idsArray = _id.split(' ');
      const hasMultipleIds = _idsArray.length > 1;
      console.log('multipleIds: ', hasMultipleIds);
      // _id = ( _id.indexOf("#") >= 0 ) ? _id : `[spot-id="${_id}" ]`;
      $(this).addClass('hover');

      if(hasMultipleIds){
        $(_idsArray).each(function(i,spotId){
          hotspots.addMouseFunctions(spotId);
        })
      }
      else {
        hotspots.addMouseFunctions(_id);
      }
      
    })
      .on('mouseleave', function () {

        $('.hover').removeClass('hover');

      });

    $('[control-spots]').on('click', function () {
      var _id = $(this).attr('control-spots');
      // _id = ( _id.indexOf("#") >= 0 ) ? _id : `[spot-id="${_id}" ]`;
      _id = (_id.indexOf("#") >= 0) ? _id : '[spot-id="' + _id + '"]';


      if ($(_id).hasClass('show-me')) {
        $(_id).removeClass('show-me');
      }
      else {
        hotspots.controlSpots(_id);
      }

    });

  },

  controlSpots: function (_id) {
    var $hotspots = $('.hot-spots');
    $hotspots.removeClass('show-me');

    if ($(_id).hasClass('show-me')) {
      $(_id).removeClass('show-me');
    }
    else {
      $(_id).addClass('show-me');
    }

  }
}