<!-- See: https://github.com/WICG/ResizeObserver/blob/master/demo.html -->

<style>
  .resize {
    border: 2em solid rgba(0,255,0, 0.5);
    background-color: #DDD;
    width: 90%; //300.49px;
    height: 200.5px;
    overflow: hidden;
    position:relative;
    display:inline-block;
  }
  .yellowBorder {
    border-width: 1px;
    border-style: solid;
  }

  .maptiles {
    overflow: hidden;
  }

  .maptiles::after {
    content: "map tiles";
    position: relative;
    top: 20px;
  }

  .elipse {
    border: 20px solid rgba(100,255,100, 0.5);
  }
  .elipse::after {
    content: "canvas";
    position: relative;
    top: -100px;
  }
  .domMunch {
    background-color: orange;
  }
  .domMunch > div {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid black;
  }
  .domMunch::after {
    content: "domMunch";
    position: relative;
    top: 20px;
  }

  .toolbar {
    margin: 16px 0;
    position: relative;
    display: flex;
    align-items: center;
  }

  .toolbar > * {
    margin-right: 8px;
    min-width: 110px;
    width: auto;
  }

  .toolbar > span {
    flex-grow: 1;
    text-align: right;
    font-weight: 600;
    font-size: 1.2em;
  }
</style>

<h1 style="display:none">ResizeObserver unexpected error</h1>
<pre id="log" style="display:none">log:</pre>

<section class="toolbar">
  <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
    <input id="cb-observe" type="checkbox" class="mdl-checkbox__input" checked>
    <span class="mdl-checkbox__label">Observe</span>
  </label>

  <div id="input-inc-container" class="mdl-textfield mdl-textfield--floating-label mdl-js-textfield">
    <input id="input-inc" class="mdl-textfield__input" type="number" min="1" max="40" value="10">
    <label class="mdl-textfield__label">Size increment</label>
  </div>

  <button id="btn-grow" class="cmd-button mdl-button mdl-js-button mdl-button--raised">Grow</button>
  <button id="btn-shrink" class="cmd-button mdl-button mdl-js-button mdl-button--raised">Shrink</button>
  <button id="btn-delete" class="cmd-button mdl-button mdl-js-button mdl-button--raised">Delete observed element</button>

  <span id="observe-notification">
  </span>
</section>


<div id="observed-element" class="resize maptiles" ></div>

<script>
  'use strict';

  (function() {
    'use strict';
    document.addEventListener('DOMContentLoaded', function() {

      if (!window.ResizeObserver) {
        throw new Error('no window.ResizeObserver');
      }

      function log(msg) {
        var e = document.querySelector('#log');
        e.textContent = e.innerText + '\n' + msg;
      }

      function nextColor() {
        return '#'+Math.random().toString(16).substr(-6);
      }

      function grow() {
        var inc = parseInt(document.querySelector('#input-inc').value);
        var elements = document.querySelectorAll('.resize');
        for (var i = 0; i < elements.length; i++) {
          var el = elements[i];
          var s = window.getComputedStyle(el);
          var w = parseFloat(s.width);
          var h = parseFloat(s.height);
          el.style.width = (w + inc) + 'px';
          el.style.height = (h + inc * 2 / 3) + 'px';
        }
      }

      function shrink() {
        var dec = parseInt(document.querySelector('#input-inc').value);
        var elements = document.querySelectorAll('.resize');
        for (var i = 0; i < elements.length; i++) {
          var el = elements[i];
          var s = window.getComputedStyle(el);
          var w = parseFloat(s.width);
          var h = parseFloat(s.height);
          el.style.width = (w - dec) + 'px';
          el.style.height = (h - dec * 2 / 3) + 'px';
        }
      }


      function initResizeHandlers() {
        var elements = document.querySelectorAll('.maptiles');
        for (var i = 0; i < elements.length; i++) {
          elements[i].onresize = function() { this.style.borderColor = nextColor() };
        }
      }

      function displayNotification(value) {
        var notification = document.querySelector("#observe-notification");
        notification.style.color = nextColor();
        if(Number.isInteger(value)) {
          notification.innerHTML = '<span>Observed: ' + value + ' element' + (value > 1 ? 's' : '') + '</span>';
        }
        else {
          notification.innerHTML = '<span>Observer: ' + value + '</span>';
        }
      }

      //
      // Init
      //
      window.addEventListener('error', function (e) {
        var error = e.error;
        console.log(error);
        log(error);
      });


      var ro = new ResizeObserver( function(entries) {

        displayNotification(entries.length);

        for (var i = 0; i < entries.length; i++) {
          var entry = entries[i];
          if (!entry.target || !entry.target.parentNode) {
            throw new Error("detected resize on orphan element");
          }
          if (entry.target.onresize) {
            entry.target.onresize(entry);
          }
        }
      });

      function toggleObserve() {
        var isObserve = document.querySelector('#cb-observe').checked;
        displayNotification(isObserve ? 'on' : 'off');

        var elements = document.querySelectorAll('.resize');
        if (isObserve) {
          for (var i = 0; i < elements.length; i++) {
            ro.observe(elements[i]);
          }
        }
        else {
          for (var i = 0; i < elements.length; i++) {
            ro.unobserve(elements[i]);
          }
        }
      }

      function deleteObservedElement() {
        var el = document.querySelector('#observed-element');
        el.parentNode.removeChild(el);
      }


      document.querySelector('#cb-observe').addEventListener('click', function() { toggleObserve() });
      document.querySelector('#btn-grow').addEventListener('click', function() { grow() });
      document.querySelector('#btn-shrink').addEventListener('click', function() { shrink() });
      document.querySelector('#btn-delete').addEventListener('click', function() { deleteObservedElement() });

      // Start
      initResizeHandlers()
      toggleObserve();
    });

  }());
</script>