if(navigator.userAgent.search(/msie/i)!= -1) {
// IE Code
} else { 

var offset= 0;

//find canvas
var lineColor = "blue";
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var xTude = 3;
var yTude = 20;
var height = 29;
var width = 42;
var framesPerCycle = 30;
var frameNo = 0;
var oldX = 0;
var oldY = height / 2;
var waveLength = 8;
var amplitude = 2;
var FPS = 30;
var mode = 'sin';

// Create gradients


function renderFrame(i){ 
 //slowly fade out old particles
 //ctx.fillStyle = "rgba(0, 0, 0, 0.05)"
 ctx.fillStyle = "rgba(1, 1, 1, 0.05)"
 ctx.fillRect(0, 0, width, height);

 // check if to start again
 frameNo ++;
 if(frameNo > framesPerCycle){
 frameNo = 0;
 oldX = 0;
 oldY = height / 2;
 }
 
 ratio = width / framesPerCycle;
 
 //calculate x and y of new particle
 var x = frameNo * ratio;
 
 switch(mode){
	 case 'sin':
	 var y = Math.sin(frameNo*(100/framesPerCycle) / waveLength)*amplitude + height / 2;
	 break;
}
// fill in a circle at particle point
if(lineColor == "blue"){
	ctx.strokeStyle = "rgba(108, 217, 241, 1)"; //getGradient(oldX,oldY,x,y);
} else {
	ctx.strokeStyle = "rgba(188, 174, 255, 1)";
}
ctx.lineWidth   = 1;
ctx.beginPath();
ctx.moveTo(oldX,oldY);
ctx.lineTo(x,y);

//ctx.arc(x, y, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.stroke();
//rinse repeat
oldX = x;
oldY = y;

}


window.onload = function()
    {

	//slowly fade out old particles
	ctx.fillStyle = "rgba(0, 0, 0, 1)"
	ctx.fillRect(0, 0, 310, 250);
	setInterval("renderFrame()", 1000/FPS);
	/*$(document).everyTime(1000/FPS, function(i){
		renderFrame(i);
	}, 0);*/
 
 }

}