var d;
  var nodes = [];
  var hue   = 0;
  var table;
  
  function renderSquares() {
  	d     = document.getElementById('squares');
  	table = d.parentNode;
  	
  	for (var y=0; y<4; y++){
  		var d2 = document.createElement("tr");
  		
  		for (var x=0; x<6; x++){
  			var n = document.createElement("td");
  			n.setAttribute("width", "10%");
  			d2.appendChild(n);
  			nodes.push(n);
  			n.setAttribute("num", parseInt(Math.random()*255));
  		}
  		
  		d.appendChild(d2);
  	}
  	
  	setInterval(updateSquares, 150);
  }
  function updateSquares() {
  
    hue += 0.001;
   
    var red   = (Math.sin(hue)+ 1) / 2;
    var green = (Math.sin(hue + Math.PI / 3) + 1) / 2;
    var blue  = (Math.sin(hue + Math.PI * 2 / 3) + 1) / 2;
   
    red   = red   * red;
    green = green * green;
    blue  = blue  * blue;
   
    var len = Math.sqrt(red*red + green*green + blue*blue);
    
    red   /= len;
    green /= len;
    blue  /= len;
   
    table.style.backgroundColor = "rgb(" + parseInt(red * 170) + "," + parseInt(green * 170) + "," + parseInt(blue * 170) + ")";
    
    for (var ntemp in nodes) {
      var n = nodes[ntemp];
      var c = parseInt(n.getAttribute("num"));
      
      c += (Math.random() * 2 - 1) * 8;
      c = Math.min(255, Math.max(90, parseInt(c)));
      n.setAttribute("num", c);
      
      var r = parseInt(c*red);
      var g = parseInt(c*green);
      var b = parseInt(c*blue);
      
      n.style.backgroundColor = "rgb("+r+","+g+","+b+")";
    }
  }