// Insert all the boid stuff onto the page and 
  // set it all up
  window.onload = function () {
          width = 600;
          height = 400;
          var stop = false;
          
          maxVelocity = 5;
  
          var elem = document.getElementById("boids");
          if(!elem) {
                  alert("Boids requires an element with id 'boids'");
                  return;
          }
  
          elem.innerHTML = "<div id='boids-canvas' style='margin: auto; background: white; width:" + width + "px; height:" + height + "px;'></div><p><button id='boids-stop'>Stop</button></p>";
  
      paper = Raphael("boids-canvas", width, height);
  
          var boids = [];
          var numBoids = 20;
          for(var i = 0; i < numBoids; i++) {
                  boids.push(new Boid(random(width), random(height), 5));
          }
  
          function moveBoids() {
                  for(var i = 0; i < numBoids; i++) {
                          boids[i].moveWith(boids, 300);
                          boids[i].moveCloser(boids, 300);                                        
                          boids[i].moveAway(boids, 15);        
                  }
          
                  
                  for(var i = 0; i < numBoids; i++) {
                          boids[i].move();
                  }
                  if(!stop) setTimeout(arguments.callee, 50);
          };                        
          
          moveBoids();
          
          var stopButton = document.getElementById('boids-stop');
          stopButton.onclick = function() { 
                  stop = !stop;
                  if(stop) stopButton.innerHTML = "Start";
                  else {
                          moveBoids();
                          stopButton.innerHTML = "Stop";                                
                  }
          }                        
  };