$(document).ready(function() 
{  
	$("#Content").backgroundCanvas(); 
	$("#Demo1Container").backgroundCanvas(); 
	$("#Demo2Container").backgroundCanvas();
	$("#Demo3Container").backgroundCanvas(); 
	$("#Demo4Container").backgroundCanvas();
});

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

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


function DrawBackground()
{
	$("#Content").backgroundCanvasPaint(BackgroundPaintFkt); 
	$("#Demo1Container").backgroundCanvasPaint(Demo1BackgroundPaintFkt); 
	$("#Demo2Container").backgroundCanvasPaint(Demo1BackgroundPaintFkt);
    $("#Demo3Container").backgroundCanvasPaint(Demo1BackgroundPaintFkt);
	$("#Demo4Container").backgroundCanvasPaint(Demo1BackgroundPaintFkt);
}



function Demo1BackgroundPaintFkt(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
		var options = {x:0, height: height, width: width, radius:14,  border: 0 };
		var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
		backgroundGradient.addColorStop(0 ,'#E4DAC7');
		backgroundGradient.addColorStop(1, '#AB9C54');
		context.fillStyle = "#9999EF";
		
		// Draw the blue border rectangle 
		$.canvasPaint.roundedRect(context,options);
		
		// Draw the gradient filled inner rectangle
		options.border = 1;
		context.fillStyle = backgroundGradient; 
		$.canvasPaint.roundedRect(context,options);
}