"use strict";

var fixed = true
var watchScroll = true
var activeSection = 0
var yearScrollFactor = 0
var activeIndex = 0
var clientX, clientY;
var body = document.querySelector('body')
var years = document.querySelector('.years')
var events = document.querySelector('.events')
var holder = document.querySelector('.holder.middle')
var mainSectionContent = document.querySelectorAll('.main-section-content')
var sections = document.querySelectorAll('.events .column')
var yearsHeight = years.getBoundingClientRect().height
var sectionsPosition = []
var statusOpenYearsMenu = undefined

function scrollTo2(offset, callback) {
  jQuery('html, body').animate({
    scrollTop: offset
  }, 500);
  setTimeout(callback, 1000)
}

function throttle(callback, wait, immediate) {

  var timeout = null
  var initialCall = true

  return function() {
    var callNow = immediate && initialCall

    var _arguments = arguments,
      _this = void 0;
    var next = function next() {
      callback.apply(_this, _arguments);
      timeout = null;
    };

    if (callNow) {
      initialCall = false
      next()
    }

    if (!timeout) {
      timeout = setTimeout(next, wait)
    }
  }
}


var calcSections = function calcSections() {
  sectionsPosition = [];
  for (var i = 0; i < sections.length; i++) {
    sectionsPosition.push(sections[i].getBoundingClientRect().top + window.pageYOffset);
  }
  yearsHeight = years.getBoundingClientRect().height;

  if (window.innerWidth < 680) {
    years.classList.add('collapse');
  } else {
    years.classList.remove('collapse');
  }
};

var setYearScroll = function setYearScroll(factor) {
  if (factor >= 0 && factor <= 1) {
    yearScrollFactor = factor;
  } else if (factor < 0) {
    yearScrollFactor = 0;
  } else if (factor > 1) {
    yearScrollFactor = 1;
  }

  years.style.transform = "translateY(-".concat(yearScrollFactor * 100, "%) translateY(").concat(yearScrollFactor * window.innerHeight, "px)");
};

var yearsMouseWheel = function yearsMouseWheel(e) {
  e.preventDefault();
  setYearScroll(yearScrollFactor + e.deltaY / yearsHeight);
};

var yearsMouseMove = function yearsMouseMove(e) {
  //e.preventDefault();
  var eventClientY = e.clientY || e.touches[0].clientY;
  var deltaY = clientY - eventClientY;
  clientY = eventClientY;
  setYearScroll(yearScrollFactor + deltaY / yearsHeight);
};

var setYear = function setYear(index, animateWindowScroll, toSetYearScroll) {
  years.children[activeIndex].classList.remove('active');
  years.children[index].classList.add('active');
  years.style.transition = '.5s cubic-bezier(0,0,0,1)';
  var px = years.children[index].getBoundingClientRect().top - window.innerHeight / 2;
  if (!toSetYearScroll) setYearScroll(yearScrollFactor + px / (yearsHeight - window.innerHeight));
  activeIndex = index;
  setTimeout(function () {
    years.style.transition = 'none';
  }, 500);

  if (animateWindowScroll) {
    watchScroll = false;
    scrollTo2(Math.ceil(sectionsPosition[index]), function () {
      watchScroll = true;
    });
  }
};

var yearsMouseDown = function yearsMouseDown(e) {
  clientX = e.clientX || e.touches[0].clientX;
  clientY = e.clientY || e.touches[0].clientY;
  window.addEventListener('mousemove', yearsMouseMove);
  window.addEventListener('mouseup', function () {
    window.removeEventListener('mousemove', yearsMouseMove);
  });
  window.addEventListener('touchmove', yearsMouseMove);
  window.addEventListener('touchend', function () {
    window.removeEventListener('touchmove', yearsMouseMove);
  });
};

var watchFixed = function watchFixed() {
  if (events.getBoundingClientRect().top < 0) {
    if (!fixed) {
      holder.classList.remove('holder_notfixed');
      years.addEventListener('mousewheel', yearsMouseWheel);
      years.addEventListener('mousedown', yearsMouseDown);
      years.addEventListener('touchstart', yearsMouseDown);
      setYearScroll(0);
      setYear(0, false, true);
      fixed = true;
    }
  } else {
    if (fixed) {
      setYearScroll(0);
      setYear(0, false, true);
      holder.classList.add('holder_notfixed');
      years.removeEventListener('mousewheel', yearsMouseWheel);
      years.removeEventListener('mousedown', yearsMouseDown);
      years.removeEventListener('touchstart', yearsMouseDown);
      fixed = false;
    }
  }
};

mainSectionContent[0].addEventListener('click', function() {
  closeYears();
});

var closeYears = function closeYears(e) {
  if (statusOpenYearsMenu || statusOpenYearsMenu === undefined) {
    statusOpenYearsMenu = false;
    body.classList.add('closeYearsMenu');
    body.classList.remove('no-scroll');
  }
};

var openYears = function openYears(e) {
  statusOpenYearsMenu = true;
  body.classList.remove('closeYearsMenu');
  body.classList.add('no-scroll');
};

years.addEventListener('mousewheel', yearsMouseWheel)
years.addEventListener('mousedown', yearsMouseDown)
years.addEventListener('touchstart', yearsMouseDown)

window.addEventListener('scroll', throttle(function (e) {
  calcSections();

  if (watchScroll) {
    var pos = sectionsPosition.filter(function (v) {
      return v < window.pageYOffset;
    });

    if (activeSection !== pos.length - 1 && pos.length > 0) {
      activeSection = pos.length - 1;
      setYear(activeSection);
    }
  }
}, 500));
window.addEventListener('scroll', watchFixed)
window.addEventListener('resize', calcSections)
calcSections()
watchFixed()

for (let i = 0; i < years.children.length; i++) {
  years.children[i].addEventListener('click', function(e) {

    var index = Array.prototype.indexOf.call(years.children, e.target);

    setYear(index, true);
    if (document.querySelector('.holder_inner').classList.contains('collapse')) {
      openYears();
    }
  })
}