<!DOCTYPE html>
<html>

  <head>
    <script src="../build/element-resize-detector.js"></script>
    <style>
        html, body {
            box-sizing: border-box;
        }
    </style>
  </head>

  <body>
    <div id="container">
        <button id="add-detached-object">Add detached (object)</button>
        <button id="add-detached-scroll">Add detached (scroll)</button>
        <button id="add-unrendered-object">Add unrendered (object)</button>
        <button id="add-unrendered-scroll">Add unrendered (scroll)</button>
        <button id="add-detached-unrendered-object">Add detached unrendered (object)</button>
        <button id="add-detached-unrendered-scroll">Add detached unrendered (scroll)</button>
    </div>

    <script>
        var container = document.querySelector('#container');
        var erdObject = elementResizeDetectorMaker({
            strategy: "object",
            debug: true
        });
        var erdScroll = elementResizeDetectorMaker({
            strategy: "scroll",
            debug: true
        });

        function addDetached(erd, container, content) {
            console.log("Creating detached element");
            var div = document.createElement("div");
            div.innerHTML = content;
            div.style.background = "grey";
            div.style.margin = "10px";
            erd.listenTo({
                callOnAdd: false
            }, div, function (el) {
                var style = getComputedStyle(el);
                console.log('el change size: ', style.width, style.height);
            });
            setTimeout(function () {
                console.log('Adding element to DOM');
                container.appendChild(div);
            }, 2000);
        }

        function addUnrendered(erd, container, content, n) {
            function add(erd, container, content) {
                console.log("Creating unrendered element");
                var div = document.createElement("div");
                div.innerHTML = content;
                div.style.background = "grey";
                div.style.margin = "10px";
                div.style.display = "none";
                div.style.position = "relative";
                container.appendChild(div);
                erd.listenTo({
                    callOnAdd: false
                }, div, function (el) {
                    var style = getComputedStyle(el);
                    console.log('el change size: ', style.width, style.height);
                });
                return div;
            }

            var divs = [];
            for (var i = 0; i < n; i++) {
                divs.push(add(erd, container, content));
            }

            setTimeout(function () {
                console.log('rendering elements');
                divs.forEach(function (div) {
                    div.style.display = "block";
                });
            }, 2000);
        }

        function addDetachedUnrendered(erd, container, content, n) {
            function add(erd, container, content) {
                console.log("Creating detached unrendered element");
                var div = document.createElement("div");
                div.innerHTML = content;
                div.style.background = "grey";
                div.style.margin = "10px";
                div.style.display = "none";
                div.style.position = "relative";
                erd.listenTo({
                    callOnAdd: false
                }, div, function (el) {
                    var style = getComputedStyle(el);
                    console.log('el change size: ', style.width, style.height);
                });
                return div;
            }

            var divs = [];
            for (var i = 0; i < n; i++) {
                divs.push(add(erd, container, content));
            }

            setTimeout(function () {
                console.log('Adding element to DOM');
                divs.forEach(function (div) {
                    container.appendChild(div);
                });
            }, 1000);

            setTimeout(function () {
                console.log('rendering elements');
                divs.forEach(function (div) {
                    div.style.display = "block";
                });
            }, 2000);
        }

        document.querySelector("#add-detached-object").onclick = addDetached.bind(null, erdObject, container, "detached object");
        document.querySelector("#add-detached-scroll").onclick = addDetached.bind(null, erdScroll, container, "detached scroll");
        document.querySelector("#add-unrendered-object").onclick = addUnrendered.bind(null, erdObject, container, "unrendered object", 1);
        document.querySelector("#add-unrendered-scroll").onclick = addUnrendered.bind(null, erdScroll, container, "unrendered scroll", 1);
        document.querySelector("#add-detached-unrendered-object").onclick = addDetachedUnrendered.bind(null, erdObject, container, "detached unrendered object", 1);
        document.querySelector("#add-detached-unrendered-scroll").onclick = addDetachedUnrendered.bind(null, erdScroll, container, "detached unrendered scroll", 1);
    </script>
  </body>
</html>