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

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

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


function DrawBackground()
{
	//$("#Content").backgroundCanvasPaint(BackgroundPaintFkt); 
	$("#Demo1Container").backgroundCanvasPaint(Demo1BackgroundPaintFkt); 
	$("#Demo1Container1").backgroundCanvasPaint(Demo1BackgroundPaintFkt);
	$("#Demo2Container").backgroundCanvasPaint(Demo1BackgroundPaintFkt2); 
	$("#Demo2Container1").backgroundCanvasPaint(Demo1BackgroundPaintFkt3);
	$("#Demo3Container").backgroundCanvasPaint(Demo1BackgroundPaintFkt2); 
	//$("#Demo2Container").backgroundCanvasPaint(Demo2BackgroundPaintFkt); 

}



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 ,'#FFFFFF');
		backgroundGradient.addColorStop(1, '#FFFFFF');
		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);
}

function Demo1BackgroundPaintFkt2(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 ,'#ACB7DB');
		backgroundGradient.addColorStop(1, '#ACB7DB');
		context.fillStyle = "#ACB7DB";
		
		// 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);
}

function Demo1BackgroundPaintFkt3(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 ,'#1860AC');
		backgroundGradient.addColorStop(1, '#1860AC');
		context.fillStyle = "#1860AC";
		
		// 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);
}


function Demo2BackgroundPaintFkt(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
		// process each list element and draw a tab shape
		$element.find("li").reverse().each(
		function(){
		     $this = $(this);
		     var offsetParent = $content.offset();
		     var offset = $this.offset({relativeTo:$content[0]});
		     var width = $this.outerWidth();
		     var height = $this.outerHeight();
		     var options = {x: offset.left - offsetParent.left , y: offset.top - offsetParent.top,  height: height, 
		     width: width +15, offsetLeft: 5, offsetRight: 30, radiusLeft: 7, radiusRight: 7,
		     border:0};
		     
		     context.fillStyle = "#9999CC";  // Border Color
		     $.canvasPaint.roundTab(context,options); 
		     options.border = 1;                 
		     context.fillStyle = "#D8E2F5"; // Background color
		     $.canvasPaint.roundTab(context,options);                  
		     }); 
}