// --- this is a test ometria object for this script here

var testOmetria = {
  // test function
  trackRecommendedProductsImpression: function() {
    alert('tracking happened');
  }
}

// this assignment is for the test here - not for live code.
var ometria = testOmetria;

// test prodRecInstance
var prodRecInstance = '5588dc36c00xxb7v57be2daxx991a90cd';

// ---- end.

function areRecommendedProductsInView (el) {
	const scroll = window.scrollY || window.pageYOffset
	const boundsTop = el.getBoundingClientRect().top + scroll
	
	const viewport = {
		top: scroll,
		bottom: scroll + window.innerHeight,
	}
	
    const bounds = {
		top: boundsTop,
		bottom: boundsTop + el.clientHeight,
	}
	
	return (bounds.bottom >= viewport.top && bounds.bottom <= viewport.bottom ) 
		|| ( bounds.top <= viewport.bottom && bounds.top >= viewport.top );
}

document.addEventListener('DOMContentLoaded', function () {
	var prodRecSection = document.querySelector('.prodRecSection');
	var answer = document.querySelector('.answer');
  var timestracked = 0;
	
	function handler() { 
    return raf(function () {
      var areProductsInView = areRecommendedProductsInView(prodRecSection);
      // tracking function call is happening here
      if (areProductsInView && timestracked === 0 && typeof ometria !== 'undefined' && typeof ometria.trackRecommendedProductsImpression === 'function') {
        timestracked += 1;
        ometria.trackRecommendedProductsImpression(prodRecInstance); 
      }
		  answer.innerHTML = 'Are the recommended products visible? ' + (               areProductsInView ? 'Yes' : 'No' )
	    })
  }
	
	handler();
	window.addEventListener('scroll', handler);
});

// requestAnimationFrame
var raf = 
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function( callback ) {
        window.setTimeout( callback, 1000 / 60 )
    };