document.addEventListener('DOMContentLoaded', (event) => {
	// Only load the map viewer when it's visible (and javascript is enabled).
  const setMap  = () => { document.querySelector('#map').src = 'map/' }
  const details = document.querySelector('details:last-child')

  // If <details> is not supported (looking at you, Edge), the frame will be
  // visible by default, so just set the target immediately.
  if ('open' in details)
    details.addEventListener('toggle', setMap, { once: true })
  else
    setMap()


	// For custom (dark) CSS themes, set the <details> background to the inverse of
	// the text colour.
	const parseColour    = (str) => str.match(/([0-9.]+)/g).map(parseFloat)
	const dumpColour     = (col) => `rgba(${col.join(',')})`
	const textColour     = parseColour(window.getComputedStyle(document.body).getPropertyValue('color'))
	const invertedColour = [255-textColour[0], 255-textColour[1], 255-textColour[2], 0.8]
	const sheet = document.styleSheets[0]
	sheet.insertRule(`
		details {
			background-color: ${dumpColour(invertedColour)} !important;
		}`
	)
})