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

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

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


function DrawBackground() 
{
    $("#container").backgroundCanvasPaint(wrapperPaintFkt);
    $("#header").backgroundCanvasPaint(headerPaintFkt);
    $("#dashboard").backgroundCanvasPaint(dashboardPaintFkt);
    $(".content").backgroundCanvasPaint(contentPaintFkt);

    $("#menuLeft").height($("#content").height());
    $("#menuLeft").backgroundCanvasPaint(menuLeftPaintFkt);
}

function wrapperPaintFkt(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 8, border: 0 };
    context.fillStyle = "#B8B9BD";
    $.canvasPaint.roundedRect(context, options);
}

function headerPaintFkt(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 8, border: 0 };
    context.fillStyle = "#FFFFFF";
    $.canvasPaint.roundedRect(context, options);
}

function dashboardPaintFkt(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 8, border: 0 };
    context.fillStyle = "#B02329";
    $.canvasPaint.roundedRect(context, options);
}

function menuLeftPaintFkt(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, '#D9D9D9');
		backgroundGradient.addColorStop(0.5, '#FFFFFF');
		context.fillStyle = "#B02329";
		
		// 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 contentPaintFkt(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, '#D9D9D9');
    backgroundGradient.addColorStop(0.5, '#FFFFFF');
    context.fillStyle = "#B02329";

    $.canvasPaint.roundedRect(context, options);

    // Draw the gradient filled inner rectangle
    options.border = 1;
    context.fillStyle = "#FFFFFF";
    $.canvasPaint.roundedRect(context, options);
}