// The #shade element is the obscuring overlay
const $shade = document.getElementById('shade')

// Holes will be cut out from the overlay for each element with the "hl" class
const $hls = document.querySelectorAll('.hl')

// Extra "padding" to apply to boundaries of the holes on each side
const SPREAD = 2

// Reusable function for drawing the overlay
function drawKnockout () {
  const w = window.innerWidth
  const h = window.innerHeight

  // Start by drawing the shade curtain over the entire viewport, moving
  // clockwise between each corner
  const coords = [
    [0, 0], // NW
    [w, 0], // NE
    [w, h], // SE
    [0, h], // SW
    [0, 0]  // NW
  ]

  // Iterate over each "highlight" target for the holes
  for (const $hl of $hls) {
    // Collect all the bounding boxes for this element - inline elements (like
    // word wrapped spans) can have multiple boxes
    const boxes = $hl.getClientRects()

    // Cut out a hole for each box, moving counter-clockwise this time
    for (const box of boxes) {
      const x1 = box.left - SPREAD
      const x2 = box.right + SPREAD
      const y1 = box.top - SPREAD
      const y2 = box.bottom + SPREAD
      coords.push(
        [x1, y1], // NW
        [x1, y2], // SW
        [x2, y2], // SE
        [x2, y1], // NE
        [x1, y1], // NW
        [0, 0]
      )
    }
  }

  // Apply the knockout as `clip-path` style rule on the #shade element
  $shade.style.clipPath = `polygon(${coordsToPolygon(coords)})`
}

// Convert 2D array of coordinates to polygon-friendly string:
// [[0, 0], [20, 40]] -> "0px 0px, 20px 40px"
function coordsToPolygon (coords) {
  return coords
    .map((p) => p.map((c) => `${c}px`).join(' '))
    .join(', ')
}

// Draw the knockout on load, and again if/when the viewport is resized
drawKnockout()
window.addEventListener('resize', drawKnockout)