function mapTiles(entry) {
  let target = entry.target;
  let TileWidth = 100;
  let TileHeight = TileWidth * 2 / 3;

  let cols = Math.ceil(entry.contentRect.width / TileWidth);
  let rows = Math.ceil(entry.contentRect.height / TileHeight);

  // Ensure correct number of tiles
  let tileCount = cols * rows;
  while (target.childNodes.length > tileCount)
    target.removeChild(target.firstChild);
  while (target.childNodes.length < tileCount)
    target.appendChild(document.createElement('div'));

  // Position all tiles.
  let colWidth = entry.contentRect.width / cols;
  let rowHeight = entry.contentRect.height / rows;
  for (let r=0; r<rows; r++)
    for (let c=0; c<cols; c++) {
      let tile = target.childNodes.item(r * cols + c);
      tile.innerText = r + "." + c + String.fromCodePoint(0x1F600 + r );
      tile.style.left = `${c * colWidth}px`;
      tile.style.width = `${colWidth}px`;
      tile.style.top = `${r * rowHeight}px`;
      tile.style.height = `${rowHeight}px`;
      tile.classList.add('mapTile');
    }
}

function initUI() {
  function resizeBy(delta) {
    for (let el of document.querySelectorAll('.resize')) {
      let s = window.getComputedStyle(el);
      el.style.width = Math.max((parseFloat(s.width) + delta), 10) + 'px';
      el.style.height = Math.max((parseFloat(s.height) + delta * 2 / 3), 7) + 'px';
    }
  }
  function animate() {
  	for (let el of document.querySelectorAll('.resize'))
    	el.classList.toggle('resizeAnimation');
  }
  document.querySelector('#grow').addEventListener('click', function() { resizeBy(5) });
  document.querySelector('#shrink').addEventListener('click', function() { resizeBy(-5) });
  document.querySelector('#animate').addEventListener('click', animate);
  // set up resize handler for all maps
  document.querySelector('#map').onresize = mapTiles;
}

function initObserver() {
  if (!window.ResizeObserver) {
    document.querySelector('#unavailable').style.display = "block";
  } else {
    let ro = new ResizeObserver( entries => {
      // This ResizeObserver callback mimics event handlers.
      // It calls Element's onresize method.
      for (let entry of entries)
        if (entry.target.onresize)
          entry.target.onresize(entry);
    });

    ro.observe(document.querySelector('#map'));
  }
}


initUI();
initObserver();