// Gradient Outlines

function MyBackgroundPaint30(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
    var options = {x:0, height: height, width: width, radius:10,  border: 0 };

    // Draw a red red border round corner rectangle
    context.fillStyle = "#009FC2";
    $.canvasPaint.roundedRect(context,options);

    // Draw the gradient filled inner rectangle
    var backgroundGradient = context.createLinearGradient(0, 0, 0, 30);
    backgroundGradient.addColorStop(0,'#009FC2');
	backgroundGradient.addColorStop(1,'#F4F8FF');

    options.border = 1;

    context.fillStyle = backgroundGradient; 
    options.height = 32;
    options.radiusBL=0;
    options.radiusBR=0;
	
    $.canvasPaint.roundedRect(context,options);

    var backgroundGradient2 = context.createLinearGradient(0, 30, 0,  height-10 );
    backgroundGradient2.addColorStop(0 ,'#F4F8FF');
	backgroundGradient2.addColorStop(1 ,'#F4F8FF');
//    backgroundGradient2.addColorStop(1, '#E8F0FF');

    context.fillStyle =  backgroundGradient2; 
    options.y = 28;
    options.height = height-28;	
    options.radiusTL=0;
    options.radiusTR=0;
    options.radiusBL=10;
    options.radiusBR=10;
    $.canvasPaint.roundedRect(context,options);

}

function MyBackgroundPaint40(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
    var options = {x:0, height: height, width: width, radius:10,  border: 0 };

    // Draw a red red border round corner rectangle
    context.fillStyle = "#009FC2";
    $.canvasPaint.roundedRect(context,options);

    // Draw the gradient filled inner rectangle
    var backgroundGradient = context.createLinearGradient(0, 0, 0, 40);
    backgroundGradient.addColorStop(0,'#009FC2');
	backgroundGradient.addColorStop(1,'#F4F8FF');

    options.border = 1;

    context.fillStyle = backgroundGradient; 
    options.height = 42;
    options.radiusBL=0;
    options.radiusBR=0;
	
    $.canvasPaint.roundedRect(context,options);

    var backgroundGradient2 = context.createLinearGradient(0, 40, 0,  height-10 );
    backgroundGradient2.addColorStop(0 ,'#F4F8FF');
	backgroundGradient2.addColorStop(1 ,'#F4F8FF');
//    backgroundGradient2.addColorStop(1, '#E8F0FF');

    context.fillStyle =  backgroundGradient2; 
    options.y = 38;
    options.height = height-38;	
    options.radiusTL=0;
    options.radiusTR=0;
    options.radiusBL=10;
    options.radiusBR=10;
    $.canvasPaint.roundedRect(context,options);

}

function MyBackgroundPaintNoColour(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
    var options = {x:0, height: height, width: width, radius:10,  border: 0 };

    // Draw a red red border round corner rectangle
    context.fillStyle = "#009FC2";
    $.canvasPaint.roundedRect(context,options);

    // Draw the gradient filled inner rectangle
    var backgroundGradient = context.createLinearGradient(0, 0, 0, 40);
    backgroundGradient.addColorStop(0,'#F4F8FF');
	backgroundGradient.addColorStop(1,'#F4F8FF');

    options.border = 1;

    context.fillStyle = backgroundGradient; 
    options.height = height;
    options.radiusBL=10;
    options.radiusBR=10;
	
    $.canvasPaint.roundedRect(context,options);

}