document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('nav');

var canvasWidth;
var canvasHeight;
var canvas;
var dc2d;
var top;
var G_vmlCanvasManager;


jQuery(document).ready(function() {

	var canvasElem = document.createElement('canvas');
	var CANVAS_WIDTH = 960; var CANVAS_HEIGHT = 400;
	document.getElementById('canvas_wrapper').appendChild(canvasElem);
	// if it is IE 
	if (typeof G_vmlCanvasManager != 'undefined') {
		// reassign the variable to the new element created by initElement
		canvasElem = G_vmlCanvasManager.initElement(canvasElem);
	}
	canvasElem.setAttribute("width", CANVAS_WIDTH); canvasElem.setAttribute("height", CANVAS_HEIGHT); canvasElem.setAttribute("id", "canvas1");
      canvasWidth = jQuery("#canvas1").innerWidth();
      canvasHeight = jQuery("#canvas1").innerHeight(); 
   	startAnimation()
});

      // Define a basic sprite class
      function Sprite(context, x, y, width, height)
      {
        this.context = context;
 
        this.x = x;
        this.y = y;
 
        this.width = width;
        this.height = height;
 
        this.dx = 0;
        this.dy = 0;
 
        this.Animate = function() {
          this.x = x + dx;
          this.y = y + dy;
 
          //this.context.strokeRect(x,y,width,height);
          
          this.context.beginPath();
          this.context.arc(x,y,width,0,Math.PI*2,true);
		  this.context.closePath();
		  this.context.fill();
          
        }
      }
 
      // Extend the sprite class to make a bubble class
      function Bubble(context, x, y, width, height, r, g, b, a)
      {
        this.baseClass = Sprite;
        this.baseClass(context, x, y, width, height);
 
        this.maxy = 0;
 
        this.fillStyle = "rgba(" + r + "," + g + "," + b + "," + a + ")";
 
        this.Animate = function()
        {
          this.y = this.y + this.dy;
 
          if( this.y < 0 ) this.y = this.maxy;
 
          this.context.fillStyle = this.fillStyle;
        //  this.context.fillRect( this.x, this.y, this.width, this.height);
          
          this.context.beginPath();
          this.context.arc(this.x,this.y,this.width,0,Math.PI*2,true);
		  this.context.closePath();
		  this.context.fill();
          
        }
      }
 
      // Main animation loop.      
      function animationLoop()
      {
        render();
        setTimeout("animationLoop()", 25);
      }

 
      // Draws a single frame on the canvas      
      function render()
      {
 
        dc2d.clearRect(0, 0, canvasWidth, canvasHeight);
 
 
        for( var i = 0; i < bubbleCount; i++ )
        {
          allBubbles[i].Animate();
        }
 
 
      }
 
      // Gets the canvas and 2D context      
      function getCanvas()
      {
        canvas = document.getElementById("canvas1");
        if( canvas )
        {
           if (G_vmlCanvasManager != undefined) { // ie IE
                G_vmlCanvasManager.initElement(canvas);
        }
          dc2d = canvas.getContext("2d");
        }
        else
        {
          alert("Failed to get canvas element");
          return;
        }
      }
 
      var allBubbles;
      var bubbleCount = 50;
 
      // Create all the bubbles we want to animate
      function createBubbles()
      {
        allBubbles = new Array();
 
        for( var i = 0; i < bubbleCount; i++ )
        {
          var width = Math.random() * 3 + Math.random() * 3 + 1;
          var height = width;
 
          var startPosX = Math.random() * (canvasWidth - width - 1);
          var startPosY = Math.random() * (canvasHeight - height - 1);
 
          var deltaX = 0;
          var deltaY = -5 * Math.random() - 1.5;
 
          var g = Math.floor( 128 * Math.random());
          var r = g;
          var b = g;
          var a = Math.random();
			 
          var bubble = new Bubble(dc2d, startPosX, startPosY, width, height, r, g, b, a);
          bubble.dx = deltaX;
          bubble.dy = deltaY;
          bubble.maxy = canvasHeight;
 
          allBubbles[i] = bubble;
        }
      }
 
      // Starts the animation for the canvas
      function startAnimation()
      {
        getCanvas();
        createBubbles();
 
        animationLoop();
      }