(function(){
  'use strict';

  var dots = document.getElementsByClassName('dot');

  var myColors = [
    '#4F587A',
    '#0080EA',
    '#AB86FF',
    '#FF9679',
    '#49E891',
    '#FFFFFF'
  ];

  function setColors(elements, colors){
    for (var i = 0; i < elements.length; i++) {
      var color = colors[Math.floor(Math.random() * colors.length)];
      elements[i].style.backgroundColor = color;
    }
  }

  setColors(dots, myColors);

  function getRandomElement(elements) {
    return elements[Math.floor(Math.random() * elements.length)];
  }

  function pop() {
    var dot = getRandomElement(dots);
    Velocity(
      dot,
      {
        scale: 1.5,
        backgroundColor: myColors[Math.floor(Math.random() * myColors.length)]
      },
      {
        duration: 50,
        easing: 'swing',
        complete: function(elements){
          Velocity(
            elements,
            {
              scale: 1
            },
            {
              duration: 50,
              easing: 'swing'
            }
          );
        }
      }
    );
    requestAnimationFrame(pop);
  }

  requestAnimationFrame(pop);

})();