jQuery(document).ready(function() 
{  
	jQuery(".gradient_box.blue").backgroundCanvas(); 
	jQuery(".gradient_box.lightblue").backgroundCanvas(); 
	jQuery(".gradient_box.blue.side").backgroundCanvas(); 
	jQuery(".gradient_box.pink").backgroundCanvas(); 
	jQuery(".rounded").backgroundCanvas(); 
});

// Draw the background  on load and resize
jQuery(window).load(function () 
{ 
	DrawBackground(); 
});

jQuery(window).resize(function()
{
	DrawBackground(); 
});


function DrawBackground()
{
	jQuery(".gradient_box.blue").backgroundCanvasPaint(GradientBlue); 
	jQuery(".gradient_box.lightblue").backgroundCanvasPaint(GradientLightBlue); 
	jQuery(".gradient_box.blue.side").backgroundCanvasPaint(GradientBlueSide); 
	jQuery(".gradient_box.pink").backgroundCanvasPaint(GradientPink); 
	jQuery(".rounded").backgroundCanvasPaint(Rounded); 

}



function GradientBlue(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
		var options = {x:0, height: height, width: width, radius:13,  border: 2, stroke: true };
		var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
		backgroundGradient.addColorStop(0 ,'#7c93c3');
		backgroundGradient.addColorStop(1, '#cbd4e6');
		context.fillStyle = "#cbd4e6";
		
		// Draw the blue border rectangle 
		context.strokeStyle = "#cce6ff";
		jQuery.canvasPaint.roundedRect(context,options);
		
		// Draw the gradient filled inner rectangle
		options.border = 1;
		context.fillStyle = backgroundGradient;
		jQuery.canvasPaint.roundedRect(context,options);
}

function GradientLightBlue(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
		var options = {x:0, height: height, width: width, radius:13,  border: 1, stroke: true };
		var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
		backgroundGradient.addColorStop(0 ,'#a8d8ff');
		backgroundGradient.addColorStop(1, '#e0f1ff');
		context.fillStyle = "#e0f1ff";
		
		// Draw the blue border rectangle 
		context.strokeStyle = "silver";
		jQuery.canvasPaint.roundedRect(context,options);
		
		// Draw the gradient filled inner rectangle
		options.border = 1;
		context.fillStyle = backgroundGradient;
		jQuery.canvasPaint.roundedRect(context,options);
}

function GradientBlueSide(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
		var options = {x:0, height: height, width: width, radius:13, radiusTL:0, radiusBL:0, border:1, stroke: false };
		var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
		backgroundGradient.addColorStop(0 ,'#7c93c3');
		backgroundGradient.addColorStop(1, '#cbd4e6');
		context.fillStyle = "#cbd4e6";
		
		// Draw the blue border rectangle 
		context.strokeStyle = "silver";
		jQuery.canvasPaint.roundedRect(context,options);
		
		// Draw the gradient filled inner rectangle
		options.border = 1;
		context.fillStyle = backgroundGradient; 
		jQuery.canvasPaint.roundedRect(context,options);
}


function GradientPink(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
		var options = {x:0, height: height, width: width, radius:13,  border: 4, stroke: true };
		var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
		backgroundGradient.addColorStop(0 ,'#ffe1f7');
		backgroundGradient.addColorStop(1, '#fff8fd');
		context.fillStyle = "#fff8fd";
		
		// Draw the blue border rectangle
		context.strokeStyle = "silver";
		jQuery.canvasPaint.roundedRect(context,options);
		
		// Draw the gradient filled inner rectangle
		options.border = 1;
		context.fillStyle = backgroundGradient; 
		jQuery.canvasPaint.roundedRect(context,options);
}

function Rounded(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
		var options = {x:0, height: height, width: width, radius:10,  border: 1, stroke: true };
		var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
		
		// Draw the blue border rectangle
		context.strokeStyle = "black";
		jQuery.canvasPaint.roundedRect(context,options);
}