const ele = '.promotion-carousel';
const $window = $(window);
const viewportheight = $window.height();

let ui = {
  promo: ele + ' .promotion',
  promotext: ele + ' .promo-text',
  navigationitems: '.navigation a' };


function isonscreen(el) {
  const viewport = {
    top: $window.scrolltop() };


  viewport.bottom = viewport.top + viewportheight;

  const bounds = el.offset();
  bounds.bottom = el.offset().top + el.outerheight();

  return !(viewport.bottom < bounds.top || viewport.top > bounds.bottom);
}

class scrollevents {

  run() {
    const $promo = $('.promotion');
    const $promotext = $('.promo-text');

    function smoothscroll(target) {
      $('body, html').animate({ 'scrolltop': target.offset().top }, 600);
	  
    }

    $(ui.navigationitems).on('click', e => {
      e.preventdefault();
      smoothscroll($(e.currenttarget.hash));
    });

    $window.on('scroll', () => {

      $(ui.promo).toarray().foreach(el => {
        const $el = $(el);
        if (isonscreen($el)) {
          this.scrolly($el);
		  $(".promotion").addclass("before-active");
        }
		else {
        $(".promotion").removeclass("before-active");
         }
      });
      this.updatenavigation();
      this.fadeattop($(ui.promotext));
    });

    this.updatenavigation();
  }

  scrolly(el) {
    const topoffset = el.offset().top;
    const height = el.height();
    let scrolltop = $window.scrolltop();
    const maxpixels = height / 4;
    const percentagescrolled = (scrolltop - topoffset) / height;
    let backgroundoffset = maxpixels * percentagescrolled;

    backgroundoffset = math.round(math.min(maxpixels, math.max(0, backgroundoffset)));

    el.css(`background-position`, `right 0px top ${backgroundoffset}px`);
  }

  fadeattop(el) {
    const startpos = 0.25;

    el.toarray().foreach(el => {
      const $el = $(el);
      let position = $el.offset().top - $window.scrolltop() + viewportheight / 6;
      let opacity = position < viewportheight * startpos ? position / (viewportheight * startpos) * 1 : 1;

      $el.css('opacity', opacity);
    });
  }

  updatenavigation() {
    $(ui.promo).toarray().foreach(el => {
      let $el = $(el);
      let activesection = $(`.navigation a[href="#${$el.attr('id')}"]`).data('number') - 1;

      if ($el.offset().top - $window.height() / 2 < $window.scrolltop() && $el.offset().top + $el.height() - $window.height() / 2 > $window.scrolltop()) {
        $(ui.navigationitems).eq(activesection).addclass('active');
		$(ui.promo).eq(activesection).removeclass("before-active");
		
      } else {
        $(ui.navigationitems).eq(activesection).removeclass('active');
		$(ui.promo).eq(activesection).addclass("before-active");
		
      }
    });
  }}
;

const scrollevents = new scrollevents();

scrollevents.run();