if (window.addEventListener) {
window.addEventListener('load', 
function() {
   
   // borrowed and modified from http://jsdo.it/Evan/incV

function Brownian(size) {
   this.canvas = document.getElementById('background-motion');
   this.resize();
   this.context = this.canvas.getContext('2d');
   this.dots = [];
   this.size = size;
   this.damp = 0.95;
   this.createDots();
   var app = this;
   this.stopButton = document.getElementById("stop-brownian");
   this.stopButton.onclick = function() {
      app.stopButton.style.display = "none";
      app.startButton.style.display = "inline";
      clearInterval(app.looper);
   };
   this.startButton = document.getElementById("start-brownian");
   this.startButton.onclick = function() {
      app.stopButton.style.display = "inline";
      app.startButton.style.display = "none";
      app.start();
   };
}

Brownian.prototype.resize = function() {
   this.width = document.documentElement.offsetWidth-1;
   this.height = document.documentElement.offsetHeight-1;
   this.canvas.setAttribute("width",this.width);
   this.canvas.setAttribute("height",this.height);
}

Brownian.prototype.createDots = function() {
   var app = this;
   var startX = Math.random()<0.5 ? this.width/6 : 5*this.width/6;
   var startY = this.height*Math.random();
   for (var i=0; i<this.size; i++) {
      var dot = {
         x: startX,
         y: startY,
         vx: Math.random()-0.5,
         vy: Math.random()-0.5,
         update: function() {
            this.vx += Math.random()-0.5;
            this.vy += Math.random()-0.5;
            this.x += this.vx;
            this.y += this.vy;
            this.vx *= app.damp;
            this.vy *= app.damp;
            if (this.x > app.width) {
               this.x = 0;
            } else if (this.x < 0) {
               this.x = app.width;
            }
            if (this.y > app.height) {
               this.y = 0;
            } else if (this.y < 0) {
               this.y = app.height;
            }
         },
         draw: function() {
            app.context.fillRect(this.x-0.5, this.y-0.5, 1, 1);
         }
      };
      this.dots.push(dot);
   }
}

Brownian.prototype.start = function() {
   var app = this;
   this.looper = setInterval(function() {
     app.context.fillStyle = "rgba(240,240,240, 0.05)";
     app.context.fillRect(0,0,app.canvas.width, app.canvas.height);
     for (var i=0; i<app.size; i++) {
       app.dots[i].update();
       app.context.fillStyle = "rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")";
       //app.context.fillStyle = "rgb(60,60,60)";
       app.dots[i].draw();
     }
   } , 1000/31);
}



window.brownian = new Brownian(200);
window.brownian.start();

},false);

window.addEventListener("resize", function() {
   window.brownian.resize();
},false);
}