$(function () {
  setTimeout(function () {
    $('.shopware-overlay').addClass('fade-out');
    $('.header-main, .footer-main, .content-main').removeClass('d-none');

    setTimeout(function () {
      $('.shopware-overlay').addClass('d-none');
    }, 500);
  }, 500);

  $('.card.product-box').each(function () {
    $(this)
      .find('.btn')
      .append(
        $(this).find('.product-price')
      );
  });
});

/** Run animation on product list only when they are in the middle of screen */
var getElementsInArea = (function (docElm) {
  var viewportHeight = docElm.clientHeight;

  return function (e, opts) {
    var found = [], i;

    if (e && e.type === 'resize') {
      viewportHeight = docElm.clientHeight;
    }

    for (i = opts.elements.length; i--;) {
      if (found.includes(i)) {
        continue;
      }

      var elm = opts.elements[ i ],
        pos = elm.getBoundingClientRect(),
        topPerc = pos.top / viewportHeight * 100,
        bottomPerc = pos.bottom / viewportHeight * 100,
        middle = (topPerc + bottomPerc) / 2,
        inViewport = middle > opts.zone[ 1 ] &&
          middle < (100 - opts.zone[ 1 ]);

      elm.classList.toggle(opts.markedClass, inViewport);

      if (inViewport) {
        found.push(elm);
      }
    }
  };
})(document.documentElement);

window.addEventListener('scroll', f)
window.addEventListener('resize', f)

function f(e) {
  getElementsInArea(e, {
    elements: document.querySelectorAll('div.product-image-wrapper'),
    markedClass: 'highlight--1',
    zone: [20, 20]
  });

  getElementsInArea(e, {
    elements: document.querySelectorAll('div.product-image-wrapper'),
    markedClass: 'highlight--2',
    zone: [40, 40]
  });
}
