var canvas = document.getElementById("world");
var ctx = canvas.getContext("2d");
var drops = [];

var MAX_DROPS = 100;

/* Drop Class. Lets being the digital rain! */
function Drop(){
  
  this.x = Math.floor(Math.random()*150);
  this.y = 0;
  this.width = 1; //Math.floor(Math.random()*3+1);
  this.height = 8;//Math.floor(Math.random()*7+1);
  this.shade = 150;//Math.floor(Math.random()*180+50);
  this.color = "rgb(" + this.shade + "," + this.shade + "," + this.shade + ")";
  
  this.vy = Math.floor(Math.random()*8+4);
  this.vx = 0;

  
  this.draw = function(ctx){
      ctx.fillStyle = this.color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
  };
  
  this.fall = function(ctx){
    
    
    if(this.y >= 150){
      this.x = Math.floor(Math.random()*150);
      this.y = 0;
      this.vy = Math.floor(Math.random()*8+3);
    }
    
    this.y += this.vy;
    this.x += this.vx;
    
     this.draw(ctx);
  };
}



function Update(){
  ctx.clearRect(0, 0,150, 150);
  
  for(var i =0; i < MAX_DROPS; i++)
    drops[i].fall(ctx);
}


function init(){
   for(var i =0; i < MAX_DROPS; i++)
     drops[i] = new Drop();
  setInterval(Update, 10);
}


function cleanUp(){
  
  for(var i =0; i < MAX_DROPS; i++)
    delete drops[i];
}


init();