$(document).ready(function()
{
$(".roundgrey").backgroundCanvas();
$(".roundwhite").backgroundCanvas();
$(".rounddarkgrey").backgroundCanvas();
});

function DrawBackground() {
$(".roundgrey").backgroundCanvasPaint(roundgreyBackgroundPaintFkt);
$(".roundwhite").backgroundCanvasPaint(roundwhiteBackgroundPaintFkt);
$(".rounddarkgrey").backgroundCanvasPaint(rounddarkgreyBackgroundPaintFkt);
}



function roundgreyBackgroundPaintFkt(context, width, height, elementInfo)
{
var options = {x:0, height: height, width: width,
radius:14, border: 0 };
// Draw the red border rectangle
context.fillStyle = "#DDDDDD";
$.canvasPaint.roundedRect(context,options);

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

} 

function rounddarkgreyBackgroundPaintFkt(context, width, height, elementInfo)
{
var options = {x:0, height: height, width: width,
radius:14, border: 0 };
// Draw the red border rectangle
context.fillStyle = "#DDDDDD";
$.canvasPaint.roundedRect(context,options);

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

} 

function roundwhiteBackgroundPaintFkt(context, width, height, elementInfo)
{
var options = {x:0, height: height, width: width,
radius:14, border: 0 };
// Draw the red border rectangle
context.fillStyle = "#DDDDDD";
$.canvasPaint.roundedRect(context,options);
// Draw the gradient filled inner rectangle

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



var drawBackground = false;
$(window).load(function()
{
drawBackground = true;
window.setTimeout(function()
{
if (drawBackground)
{
drawBackground = false;
DrawBackground();
}
}, 50);
});
$(window).resize(function()
{
drawBackground = true;
window.setTimeout(function()
{
if (drawBackground)
{
drawBackground = false;
DrawBackground();
}
}, 50);
});


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