$(document).ready(function() 
{  
	$(".col").backgroundCanvas(); 
	$(".rtCol").backgroundCanvas(); 
});

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

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


function DrawBackground()
{
	$(".col").backgroundCanvasPaint(Sec1BackgroundPaintFkt); 
	$(".rtCol").backgroundCanvasPaint(Sec1BackgroundPaintFkt); 

}



function Sec1BackgroundPaintFkt(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 ,'#dedcbd');
		backgroundGradient.addColorStop(1, '#ffffff');
		context.fillStyle = "#ffffff";
		
		// 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 Sec2BackgroundPaintFkt(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 = "#ddd"; // Background color
		     $.canvasPaint.roundTab(context,options);                  
		     }); 
}