// See a super simple version here
// https://codepen.io/SimonEvans/pen/wrMzeP

const statusBox = document.querySelector('.status');
let intersectItem = document.querySelectorAll('.item'), i;
let visiblity = 'invisible';
let statusText = 'Nothing is visible, scroll!';

const iObserver = new IntersectionObserver(items => {

  // Intersecting? (is the element in the available viewport)
  if (items[0].isIntersecting) {
		
		// Log visibility
    console.log('Visible? Yes');

    // Time when intersect occured (relative to page load)
    console.log('When? After ' + milliToSeconds(items[0].time));

    // Position values
    console.log('Position:')
    console.log(items[0].boundingClientRect);
		
		// Element that is visible
		console.log(items[0].target);
		
		// Update status vars
		visiblity = 'visible';
    statusText = items[0].target.textContent + ' is visible';

  } else {
    console.log('Visible? No')
    visiblity = 'invisible';
    statusText = 'Nothing is visible, scroll!';
  }

  console.log('---------------');

  // Update status
  updateStatus(statusText);
});

// Loop through and observe intersect items
for (i = 0; i < intersectItem.length; ++i) {
  iObserver.observe(intersectItem[i]);
}

// Update visibility status
function updateStatus(statusText) {
  statusBox.innerHTML = statusText;
  statusBox.className = 'status status--' + visiblity;
}

// Milliseconds -> Seconds
function milliToSeconds(milli) {
  let seconds = ((milli % 60000) / 1000).toFixed(0);
  return seconds + ' secs';
}