<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            height: 100%;
        }

        #aligner {
            height: 100%;
            display: flex;
        }

        .container {
            width: 20%;
            background: #FF9800;
            cursor: pointer;
            position: relative;
            border-right: 1px solid black;
            border-left: 1px solid black;
        }

        .container.elq-width-under-200 {
            height: 200px;
        }

        .container.elq-width-above-200 {
            height: 400px;
        }

        #dimensions {
            font-size: 3em;
            color: #FFF;
        }

        #dim-x, #dim-y {
            color: #263248;
        }

    </style>
</head>
<body>
    <button onclick="resize()">Resize</button>
    <div id="aligner">
    </div>


    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../build/element-resize-detector.js"></script>
    <script>
        var alignerWidth = 100;
        var cnt = 0;

        function resize() {
            if(alignerWidth === 100) {
                alignerWidth = 50;
            } else {
                alignerWidth = 100;
            }

            $("#aligner").width(alignerWidth + "%");

            console.time("resize");
        }

        $(function() {
            function onElementResize(element) {

                if(++cnt === numElements) {
                    cnt = 0;
                    console.timeEnd("resize");
                }
            }

            function createDiv(width) {
                var d = document.createElement("div");
                d.className = "container";
                d.style.width = width;
                return d;
            }

            function loopCreateAndAppend(numNested, create, target) {
                for(var i = 0; i < numNested; i++) {
                    var d = create();
                    target.appendChild(d);
                }

                return target;
            }

            var numElements = 200;
            loopCreateAndAppend(numElements, createDiv.bind(null, numElements), document.getElementById("aligner"));

            (function listenToResize() {
                var erd = elementResizeDetectorMaker({
                    strategy: "scroll"
                });
                console.time("install");
                erd.listenTo({
                    callOnAdd: false,
                    onReady: function onReady() {
                        console.timeEnd("install");
                        console.log("ready");
                    }
                }, $(".container"), onElementResize);
            })();
        });

    </script>
</body>
</html>