// This script emulates lazy loading, also in IE11

(function() {
    var items = [].slice.call(document.getElementsByClassName('js-lazy-item'));
    var initialItems = 3;
    var desiredItems = 3; // Desired number of items to lazy load
    var lazyLoadItems = [];
    var btnLoadMore = document.getElementById('js-btn-lazy-load-more');
    var itemsContainer = document.getElementById('js-lazy-items-container');
    
    // Disable button if there are less items than the desired number of items
    if (items.length <= initialItems) {
        btnLoadMore.disabled = true;
    // Remove more than the desired number of items
    } else if (items.length > initialItems) {
        var sliceItems = items.slice(initialItems, items.length);
        sliceItems.forEach(function(element) {
            lazyLoadItems.push(element); // Store items for later use
            element.parentNode.removeChild(element); // Remove items from DOM
        });
    }

    btnLoadMore.addEventListener('click', function() {
        // Splice array in multiple arrays of the desired number of items
        var splicedItems = lazyLoadItems.splice(desiredItems);
        
        // Place desired number of items back into the DOM
        lazyLoadItems.forEach(function(element) {
            itemsContainer.appendChild(element);
        });
        
        // Create new array with the leftover items to repeat the step above
        lazyLoadItems = splicedItems;
        
        // Disable button when all items are on the page
        if (lazyLoadItems.length < 1) {
            btnLoadMore.disabled = true;
        }
    });
}());