<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API -->
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>

<div id="box">
  <div class="vertical" id='ad'>
    Welcome to <strong>the Ad!</strong>
  </div>
</div>


<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>

#box {
  background-color: rgba(40, 40, 190, 255);
  border: 4px solid rgb(20, 20, 120);
  transition: background-color 1s, border 1s;
  width: 350px;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.vertical {
  color: white;
  font: 32px "Arial";
}

.extra {
  width: 350px;
  height: 350px;
  margin-top: 10px;
  border: 4px solid rgb(20, 20, 120);
  text-align: center;
  padding: 20px;
}

var boxElement;
var visibliltyThreshold = 0.5;
var adInVPForOneSec = false;
var timeoutHandle ;
var timerRunning = false;

window.addEventListener("load", function(event) {
  boxElement = document.querySelector("#box");

  createObserver();
}, false);

function createObserver() {
  var observer;
  var options = {
    root: null,
    rootMargin: "0px",
    threshold: buildThresholdList()
  };
  function buildThresholdList() {
    var thresholds = [];
    var numSteps = 20;

    for (var i=1.0; i<=numSteps; i++) {
      var ratio = i/numSteps;
      thresholds.push(ratio);
    }

    thresholds.push(0);
    return thresholds;
}
  observer = new IntersectionObserver(handleIntersect, options);
  observer.observe(boxElement);
}
function handleIntersect(entries, observer) {
  entries.forEach(function(entry) {
    if (entry.intersectionRatio > visibliltyThreshold) {
        if(!adInVPForOneSec && !timerRunning){
                timerRunning = true;
                timeoutHandle = setTimeout(function(){
                adInVPForOneSec = true;
                console.log("ad in vp for 1 sec");
                document.getElementById('ad').innerHTML = "VIEWABILITY EVENT FIRED";
            },2000);
        }
    }
    console.log(timerRunning , entry.intersectionRatio);
    if (timerRunning && entry.intersectionRatio < visibliltyThreshold) {
         window.clearTimeout(timeoutHandle) ; 
         timerRunning = false;
         console.log("timer reset");
     }
    //prevRatio = entry.intersectionRatio;
  });
}