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

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


function DrawBackground()
{
	$(".roundedorange").backgroundCanvasPaint(BackgroundCanvasBackgroundPaintFktOrange); 
	$(".roundedgreen").backgroundCanvasPaint(BackgroundCanvasBackgroundPaintFktGreen); 
	$(".roundedblue").backgroundCanvasPaint(BackgroundCanvasBackgroundPaintFktBlue); 
	$(".TabShapeContainer").backgroundCanvasPaint(TabShapeBackgroundPaintFkt); 

}



function BackgroundCanvasBackgroundPaintFktOrange(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
	var colorStrong = '#f4ac25';
	var colorFaint = '#fad896';
	var topsplit = 22;
	var bottsplit = 20; //40
	
	// logo=#0069aa(pastel:#91d6ff), mic=#f4ac25(pastel:#fad896)
    var options = {x:0, y:0, height: height, width: width, radiusTL:5, radiusTR:5, radiusBL:5, radiusBR:5, border: 0 };

    context.fillStyle = "#9999EF";
    $.canvasPaint.roundedRect(context,options);
    options.border = 1;

    var backgroundGradient1 = context.createLinearGradient(0, 0, 0, topsplit );
    backgroundGradient1.addColorStop(0, colorFaint);
    backgroundGradient1.addColorStop(1 ,colorStrong);
    context.fillStyle = backgroundGradient1; 
    options.height = topsplit+1;
    options.radiusBL=0;
    options.radiusBR=0;
    $.canvasPaint.roundedRect(context,options);

    var backgroundGradient2 = context.createLinearGradient(0, topsplit, 0,  height-topsplit-bottsplit );
    backgroundGradient2.addColorStop(0 ,'#EEEEFF');
    backgroundGradient2.addColorStop(1, '#EEEEFF');
    context.fillStyle =  backgroundGradient2; 
    options.y = topsplit-1;
    options.height = height-topsplit-bottsplit+2;
    options.radiusTL=0;
    options.radiusTR=0;
    options.radiusBL=0;
    options.radiusBR=0;
    $.canvasPaint.roundedRect(context,options);

    var backgroundGradient3 = context.createLinearGradient(0, height-bottsplit, 0,  height);
    backgroundGradient3.addColorStop(0, '#EEEEFF');
    backgroundGradient3.addColorStop(1 ,colorFaint);
    context.fillStyle =  backgroundGradient3; 
    options.y = height-bottsplit-1;
    options.height = bottsplit+1;
    options.radiusTL=0;
    options.radiusTR=0;
    options.radiusBL=5;
    options.radiusBR=5;
    $.canvasPaint.roundedRect(context,options);
}

function BackgroundCanvasBackgroundPaintFktGreen(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
	var colorStrong = '#00B95B';
	var colorFaint = '#BFEFD6';
	var topsplit = 22;
	var bottsplit = 80;
	
	// logo=#0069aa(pastel:#91d6ff), mic=#f4ac25(pastel:#fad896)
    var options = {x:0, y:0, height: height, width: width, radiusTL:5, radiusTR:5, radiusBL:5, radiusBR:5, border: 0 };

    context.fillStyle = "#9999EF";
    $.canvasPaint.roundedRect(context,options);
    options.border = 1;

    var backgroundGradient1 = context.createLinearGradient(0, 0, 0, topsplit );
    backgroundGradient1.addColorStop(0, colorFaint);
    backgroundGradient1.addColorStop(1 ,colorStrong);
    context.fillStyle = backgroundGradient1; 
    options.height = topsplit+1;
    options.radiusBL=0;
    options.radiusBR=0;
    $.canvasPaint.roundedRect(context,options);

    var backgroundGradient2 = context.createLinearGradient(0, topsplit, 0,  height-topsplit-bottsplit );
    backgroundGradient2.addColorStop(0 ,'#EEEEFF');
    backgroundGradient2.addColorStop(1, '#EEEEFF');
    context.fillStyle =  backgroundGradient2; 
    options.y = topsplit-1;
    options.height = height-topsplit-bottsplit+2;
    options.radiusTL=0;
    options.radiusTR=0;
    options.radiusBL=0;
    options.radiusBR=0;
    $.canvasPaint.roundedRect(context,options);

    var backgroundGradient3 = context.createLinearGradient(0, height-bottsplit, 0,  height);
    backgroundGradient3.addColorStop(0, '#EEEEFF');
    backgroundGradient3.addColorStop(1 ,colorFaint);
    context.fillStyle =  backgroundGradient3; 
    options.y = height-bottsplit-1;
    options.height = bottsplit+1;
    options.radiusTL=0;
    options.radiusTR=0;
    options.radiusBL=5;
    options.radiusBR=5;
    $.canvasPaint.roundedRect(context,options);
}

function BackgroundCanvasBackgroundPaintFktBlue(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
	var colorStrong = '#256EF5';
	var colorFaint = '#C5D8F7';
	var topsplit = 22;
	var bottsplit = 80;
	
	// logo=#0069aa(pastel:#91d6ff), mic=#f4ac25(pastel:#fad896)
    var options = {x:0, y:0, height: height, width: width, radiusTL:5, radiusTR:5, radiusBL:5, radiusBR:5, border: 0 };

    context.fillStyle = "#9999EF";
    $.canvasPaint.roundedRect(context,options);
    options.border = 1;

    var backgroundGradient1 = context.createLinearGradient(0, 0, 0, topsplit );
    backgroundGradient1.addColorStop(0, colorFaint);
    backgroundGradient1.addColorStop(1 ,colorStrong);
    context.fillStyle = backgroundGradient1; 
    options.height = topsplit+1;
    options.radiusBL=0;
    options.radiusBR=0;
    $.canvasPaint.roundedRect(context,options);

    var backgroundGradient2 = context.createLinearGradient(0, topsplit, 0,  height-topsplit-bottsplit );
    backgroundGradient2.addColorStop(0 ,'#EEEEFF');
    backgroundGradient2.addColorStop(1, '#EEEEFF');
    context.fillStyle =  backgroundGradient2; 
    options.y = topsplit-1;
    options.height = height-topsplit-bottsplit+2;
    options.radiusTL=0;
    options.radiusTR=0;
    options.radiusBL=0;
    options.radiusBR=0;
    $.canvasPaint.roundedRect(context,options);

    var backgroundGradient3 = context.createLinearGradient(0, height-bottsplit, 0,  height);
    backgroundGradient3.addColorStop(0, '#EEEEFF');
    backgroundGradient3.addColorStop(1 ,colorFaint);
    context.fillStyle =  backgroundGradient3; 
    options.y = height-bottsplit-1;
    options.height = bottsplit+1;
    options.radiusTL=0;
    options.radiusTR=0;
    options.radiusBL=5;
    options.radiusBR=5;
    $.canvasPaint.roundedRect(context,options);
}

function TabShapeBackgroundPaintFkt(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);                  
		     }); 
}