'use strict';

function createRoot(container){
    var root, width, height;

    // SETTINGS
        
    width = window.innerWidth;
    height = window.innerHeight;

    function round(num, places){
        return Number(num.toFixed(places));
    }

    var root;

    // Body styles
    Pablo('body').css({
        margin:0,
        body: 0,
        'background-color': 'black',
        color: 'white'
    });

    // SVG root node
    return Pablo('#paper').root({
        width: width,
        height: height
    });
}

/////

var root = createRoot('#paper'),
    rootElem = root.el[0],
    reqAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
        window.msRequestAnimationFrame,
    w = Number(root.attr('width')),
    h = Number(root.attr('height')),
    r = 50,
    speed = 100,
    speedX = speed,
    speedY = speed,
    frameCount = 0,
    spawnEvery = 10;

    function createSymbol(){
        var circle,
            x = -r,
            y = -r,
            diffX, diffY;

        circle = root.circle({
            cx: x,
            cy: y,
            r: r,
            fill: 'red'
        });


        function loop(){
            diffX = w + r - x;
            diffY = h + r - y;

            if (diffX < 1 || diffY < 1){
                console.log('end');
                circle.remove();
                return;
            }

            x += (diffX / w) * speedX;
            y += (diffY / w) * speedY;

            circle.attr({
                cx: x,
                cy: y
            });

            reqAnimFrame(loop, rootElem);
        }

        reqAnimFrame(loop, rootElem);
    }

    function spawn(){
        frameCount ++;
        if (frameCount > spawnEvery){
            frameCount = 0;
            createSymbol();
        }
        reqAnimFrame(spawn, rootElem);
    }

/////

// Create a symbol; spawn more intermittently
if (reqAnimFrame){
    createSymbol();
    reqAnimFrame(spawn, rootElem);
}
@@ -929,17 +929,190 @@
 ery = 10
-;
+,%0A    colors = %5B'red', 'green', 'blue'%5D,%0A    colorsLength = colors.length;%0A%0A    function randomInt(length)%7B%0A        return Math.ceil((length %7C%7C 2) * Math.random()) - 1;%0A    %7D
 %0A%0A    fu
@@ -1732,16 +1732,71 @@
    cy: y
+,%0A                fill: colors%5BrandomInt(colorsLength)%5D
 %0A       

Add multicolor to viz example