var onload_blocks = document.getElementById("blocks").cloneNode(true); // сохраняем блоки в изначальном виде

testRun(); // вызов функции


function testRun (){

    document.getElementById("blocks").innerHTML = onload_blocks.innerHTML;

    // 1000 - 1 секунда
    var showInterval = 500, // интервал между появлениями блоков
        hideInterval = 2000, // через сколько пропадать блоку
        totalAnimationTime = 10000, // общее время анимации
        docHeight = window.innerHeight,
        docWidth = window.innerWidth;

    checkBlocksCount();

    var blocks = document.querySelectorAll("#blocks .block");
    blocks.forEach(function(block) {
        setLettersBorder(block);
        setRandomPosition(block);
    });


    var blocksShowInterval = setInterval(function(){

        showNextBlock();

        var interval = setInterval(function() {
            var vblocks = document.querySelectorAll("#blocks .block.visible");
            vblocks[0].classList.remove('visible');
            setTimeout(function() {
                vblocks[0].remove();
            }, 300);
            clearInterval(interval);
        }, hideInterval);

    }, showInterval);


    setTimeout(function() {
        clearInterval(blocksShowInterval);
    }, totalAnimationTime);


    function showNextBlock() {
        var blocks = document.querySelectorAll("#blocks .block:not(.visible)");
        var currentBlock = blocks[0];
        currentBlock.classList.add('visible');
    }

    function setLettersBorder(block) {
        if (block.classList.contains('border-end') && (/\s/.test(block.innerHTML))) {
            block.innerHTML = block.innerHTML.replace(/\s(.{2})/,'<span class="border">$&</span>');
        } else {
            block.innerHTML = block.innerHTML.replace(/.{2}/,'<span class="border">$&</span>');
        }
    }

    function setRandomPosition(block) {
        var divWidth = block.offsetWidth,
            divHeight = block.offsetHeight,
            heightMax = docHeight - divHeight,
            widthMax = docWidth - divWidth;

        block.style.left = Math.floor( Math.random() * widthMax) + 'px';
        block.style.top = Math.floor( Math.random() * heightMax) + 'px';
    }

    function checkBlocksCount() {
        var needBlocksCount = totalAnimationTime / showInterval;
        var nowBlocksCount = document.querySelectorAll("#blocks .block").length-1;
        if (nowBlocksCount < needBlocksCount) {

            var blocks_container = document.getElementById("blocks");

            for (var i = 0; i < needBlocksCount-1; i++) {
                var blocks = document.querySelectorAll("#blocks .block");
                blocks_container.appendChild(blocks[i].cloneNode(true));
            }
        }
    }

};