var canvasWidth=250;
var canvasHeight=0;
var resizeTimer=null;
var g1,g2,g3;
      var waves = ["red",
                   "green",
                   "blue"];

                function resizeCanvas()
                {
                  if (canvasHeight!=$(window).height() && canvas && canvas.getContext) {
//                      $("#canvas").hide();
                        canvasHeight = $(window).height();
        //      canvasWidth=320;canvasHeight=240;
                        $("#canvas").attr("height", canvasHeight);
                        $("#canvas").attr("width", canvasWidth);

g1 = c.createLinearGradient(0, 0,0,canvasHeight);
g1.addColorStop(0,"rgba(200,200,200,0.6)");
g1.addColorStop(0.8,"rgba(200,200,200,0.6)");
g1.addColorStop(1,"white");
waves[0]=g1;
g2 = c.createLinearGradient(0, 0,0,canvasHeight);
g2.addColorStop(0,"rgba(210,210,210,0.6)");
g2.addColorStop(0.8,"rgba(210,210,210,0.6)");
g2.addColorStop(1,"white");
waves[1]=g2;
g3 = c.createLinearGradient(0, 0,0,canvasHeight);
g3.addColorStop(0,"rgba(220,220,220,0.6)");
g3.addColorStop(0.8,"rgba(220,220,220,0.6)");
g3.addColorStop(1,"white");
waves[2]=g3;

                        if (exCanvasLoaded) { // slow excanvas is being used so only draw once
                          bgDraw();
                        } else {
    			  var loop = setInterval(function(){bgDraw();}, 50);
			}
//                      $("#canvas").show();
                  }
               }

var canvas;
var c;
var i=Math.floor(Math.random()*100);

function bgDraw(){
c.fillStyle="white";
c.fillRect(0,0,canvasWidth,canvasHeight);
if (exCanvasLoaded) i=Math.floor(Math.random()*100); // create a new initial frame, just for a bit of variety
        for(var j = waves.length - 1; j >= 0; j--) {
          var offset = i + j * Math.PI * 12;
          c.fillStyle = waves[j];

          var randomLeft = Math.abs(Math.pow( Math.sin(offset/100), 2 )) * 200;
          var randomRight = Math.abs(Math.pow( Math.sin((offset/100) + 10), 2 )) * 200;
          var randomLeftConstraint = Math.abs(Math.pow( Math.sin((offset/90)+2), 2 )) * 300;
          var randomRightConstraint = Math.abs(Math.pow( Math.sin((offset/90)+1), 2)) * 300;

          c.beginPath();
          c.moveTo(randomLeft + 10,0);

          c.bezierCurveTo(randomLeftConstraint,canvasHeight/3,randomRightConstraint, canvasHeight / 3 * 2, randomRight + 10,canvasHeight);
          c.lineTo(0 , canvasHeight);
          c.lineTo(0, 0);
          c.lineTo(randomLeft + 10,0);

          c.closePath();
          c.fill();
        }
        i++;
}
//  c.fillStyle="rgba(230,230,230,1)";
//  c.fillStyle="rgba(220,220,220,0.6)";

function render(){
canvas = $('#canvas')[0];

if (canvas && canvas.getContext) {
  c=canvas.getContext('2d');
  resizeTimer=setTimeout(resizeCanvas,100);

//c.strokeStyle="#999";
//c.lineWidth=1.5;
  if (exCanvasLoaded==0) { // fast native canvas support so animate it
  //  var loop = setInterval(function(){bgDraw();}, 50);
  }
}
}