$(function() {
    $('.splatcontainer').randomizer({
        resize: true, //set true for container resizeable
        fade: false, //set true for enable fade effect, animation must be false
        fadeSpeed:"400", // fade effect speed 
        animation: false, //set true to move elements with animation, fade must be false 
        animationSpeed: 500, // animation speed
        linerAnimation: false, // elements animated liner
        linerAnimationSpeed: 500, // animation speed
        repeat: false, // when this variable is true elements will change there position every repeatInterval time
        repeatInterval: 500, // repeat interval using with repeat: true
        randomSize: true // randomly change width of elements
    });
});

$(document).ready(function () {
    var _container = document.querySelector('.splat'),
            _boubles = document.querySelectorAll('.splat'),
            _maxY = _container.getBBox().height, 
            _maxX = _container.getBBox().width;
            
    function _NextBounce (bouble) {
        var r = bouble.getAttribute('r'),
                minY = r,
                minX = r,
                maxY = _maxY - r,
                maxX = _maxX - r,
                randY = random(minY, maxY),
                randX = random(minX, maxX);

        TweenMax.to(bouble, random(5, 10), { 
            attr: {
                cx:randX,
                cy:randY,
            },
            ease: Power1.easeInOut,
            onComplete: function () {
                _NextBounce(bouble);
            } 
        });
    }
    
    function random(min, max) {
        if (max == null) {
            max = min;
            min = 0;
        }
        return Math.random() * (max - min) + Number(min);
    }

    // initialize
    for (var i = 0; i < _boubles.length; i++) {
        _NextBounce(_boubles[i]);
    }
});