var canvas;
var ctx;
var lGradStop = 0;
var rGradStop = 350;
var factor = 20;
var delay = 31;
var interval;

//set up the canvas and call the gradient function
function draw(){
	canvas = document.getElementById('logocanvas');
	if (canvas.getContext){
		ctx = canvas.getContext('2d');
		update_gradient();
		interval = setInterval("update_gradient()", delay);
	}
	else{
		var element = document.getElementById("logo");
		var logocanvas = document.getElementById("logocanvas");
		var backuplogo = document.createElement('div');
		var new_h3 = document.createElement('h2');
		var txt = document.createTextNode("Connecticut Insurance Law Journal");
		backuplogo.appendChild(new_h3);
		new_h3.appendChild(txt);
		element.appendChild(backuplogo);
		canvas.style.display = "none";
	}
}

function update_gradient(){
	ctx.font = "bold 51px Georgia1";
	
	//increase the stop points
	if(lGradStop >= canvas.width){
		lGradStop = 800;
		clearInterval ( interval );
	}
	else{
		lGradStop = lGradStop+factor;
		rGradStop = rGradStop+factor;
	}
	
	//create the gradient
	gradient = ctx.createLinearGradient(lGradStop, 0, rGradStop, 0);
	gradient.addColorStop(0, "white");
	gradient.addColorStop(1, "#333366");
	
	//draw and redraw
	ctx.clearRect(0,0, canvas.width,canvas.height);
    ctx.save();
	ctx.fillStyle = gradient;
    ctx.fillText("Connecticut Insurance Law Journal", 4, 100)
    ctx.restore();
}