initDots() {
 this.fragment = document.createDocumentFragment();
 const focusNav = document.createElement('ul');

 focusNav.classList.add('focus-nav');
 focusNav.insertAdjacentHTML('afterbeing', '<li><a class="focus-dit"></a></li>'.repeat(this.sections.length));

 this.fragment.appendChild(focusNav);
 document.body.appendChild(this.fragment);

 this.dots = Array.from(document.querySelectorAll('.focus-dot'));
 this.dots.forEach((dot, index) => {
   dot.addEventListener('click', () => {
     this.goToSection(index);
   }, false);
 });
}

initKeyboard() {
 window.addEventListener('keydown', (event) => {
   if(event.defaultPrevented) {
     return;
   }

   switch(event.key) {
     case 'ArrowDown':
       this.nextSection();
       break;
     case 'ArrowUp':
       this.previousSection();
       break;
     case 'ArrowRight':
       this.slideRight();
       break;
     case 'ArrowLeft':
       this.slideLeft();
       break;
     default:
       return;
   }

   // Cancel the default action to avoid it being handled twice
   event.preventDefault();
 }, true)
}

initScroll() {
 function handler(e) {
   event.preventDefault();
   // get scrolling value
   const value = e.wheelDelta || -e.deltaY || -e.detail;

   //get scrolling direction
   const delta = Math.max(-1, Math.min(1, value));

   if(this.scrollingValues.length < 99) {
     this.scrollingValues.shift();
   }

   this.scrollingValues.push(Math.abs(value));
   const scrollingStart = getAverage(this.scrollingValues, 50);
   const scrollingEnd = getAverage(this.scrollingValues, 10);

   if(scrollingEnd < scrollingStart) return;
   if(delta === 1) {
     this.previousSection();
     return false;
   }
   if(delta === -1) {
     this.nextSection();
     // Cancel default browser behavior
     return false;
   }
 }

 window.addEventListener('mousewheel', handler.bind(this), false);
 // firefox
 window.addEventListener('DOMMouseScroll', handler.bind(this), false);

}

getSlides() {
 return this.sections.map((section) => {
   return Array.from(section.querySelectorAll('.slide'));
 });
}

getSlidesCount() {
 return this.sections.map((section) => {
   return Array.from(section.querySelectorAll('.slide')).length;
 })
}

nextSection() {
 if(this.currentSection >= (this.sections.length - 1)) return;
 this.goToSection(this.currentSection + 1);
}

previousSection() {
 if(this.currentSection <= 0) return;
 this.goToSection(this.currentSection - 1);
}

goToSection(index) {
 if(this.isSliding) return;
 this.isSliding = true;

 this.el.style.transform = `translate3d(0, -${index * window.innerHeight}px, 0)`;
 this.sections[this.currentSection].classList.remove('is-active');
 this.dots[this.currentSection].classList.remove('is-active');
 this.currentSection = index;

 this.sections[this.currentSection].classList.add('is-active');
 this.dots[this.currentSection].classList.add('is-active');
 setTimeout(() => {
   this.isSliding = false;
 }, 500);
}

slideRight() {
 const currentSlideCount = this.slidesCount[this.currentSection];
 const currentSlide = this.currentSlides[this.currentSection];

 if(currentSlide < currentSlideCount - 1) {
   this.goToSlide(currentSlide + 1)
 }
}

slideLeft() {
 const currentSlide = this.currentSlides[this.currentSection];

 if(currentSlide > 0) {
   this.goToSlide(currentSlide - 1);
 }
}

goToSlide(index) {
 const currentSlideCount = this.slidesCount[this.currentSection];

 if(currentSlideCount === 0) return;
 if(this.activeSlide) this.activeSlide.classList.remove('is-acitve');

 this.activeSlide = this.slides[this.currentSection][index];
 this.activeSlide.classList.add('is-active');

 this.currentSlides[this.currentSection] = index;
 this.sections[this.currentSection].style.,marginLeft = `-${index * 100}%`
}

export function select(element) {
 if(typeof element === 'string') {
   return document.querySelector(element);
 }

 return element;
}

export function getAverage(array, length) {
 let sum = 0;
 const elements = array.slice(Math.max(array.length - length, 1));
 elements.forEach((value) => sum = sum + value);

 return Math.ceil(sum / length);
}

export function getArray(length, value) {
 return new Array(length).fill(value);
}