var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = 0;
var intervalID;
var animationImage = new Image();
var slides_bg = new Image();
animationImage.src = "wp-content/themes/calcey/images/text.png";
slides_bg.src = "wp-content/themes/calcey/images/clients_slides_bg.png";
	

function setAdRotatorBackground(){
	context.drawImage(slides_bg, 618, 28);
	context.font = "bold 13px arial";
	context.fillStyle = "#166082";
	context.fillText("Our Clients", 745, 30);
}


function animateImage()
{
	if (x > 0)
	{
		context.fillStyle = "#26a3dc";
		context.fillRect(x-1, 60, 525, 100);
	}
		
	context.drawImage(animationImage, x, 60);
	
	if (x < 45)
	{
		x += 1;
	}
	else
	{
		clearInterval(intervalID);	
	}
}

function startAnimation(){
	drawCanvasBackground();
	setAdRotatorBackground();
	intervalID = setInterval(animateImage, 0.10);
}

function drawCanvasBackground()
{
	var bg_gradient = context.createLinearGradient(0, 0, 0, 223);
	bg_gradient.addColorStop(0, "#2395c9");
	bg_gradient.addColorStop(0.3, "#26a3dc");
	bg_gradient.addColorStop(0.7, "#26a3dc");
	bg_gradient.addColorStop(1, "#2395c9");
	context.beginPath();
	context.moveTo(0,0);
	context.lineTo(959,0);
	context.quadraticCurveTo(969,0,969,10);
	context.lineTo(969,223);
	context.lineTo(0, 223);
	context.lineTo(0, 10);
	context.quadraticCurveTo(0, 0, 10, 0);
	context.fillStyle = bg_gradient;
	context.fill();
	context.closePath();
}