$(document).ready(function() {
    if (!$.browser.msie || $.browser.version > 6) {
        $('.sidebarBox').css('border', 0);
        $(".box").backgroundCanvas();
        $(".sectionHeaderBox").backgroundCanvas();
        $(".headerBox").backgroundCanvas();
        $(".footerBox").backgroundCanvas();
        $(".sidebarBox").backgroundCanvas();
    }
});

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

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


function drawBackground() {
    if (!$.browser.msie || $.browser.version > 6) {
        $(".box").backgroundCanvasPaint(paintBox);
        $(".sectionHeaderBox").backgroundCanvasPaint(paintSectionBox);
        $(".headerBox").backgroundCanvasPaint(paintHeader);
        $(".footerBox").backgroundCanvasPaint(paintFooter);
        $(".sidebarBox").backgroundCanvasPaint(paintSidebar);
    } else {
    $('.box').css('width', '90%');
    }
}
function paintBox(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(.2, '#FAFAD2');
    backgroundGradient.addColorStop(1, '#B18D19');
    context.fillStyle = "#8B4513";

    // Draw the border rectangle 
    $.canvasPaint.roundedRect(context, options);

    // Draw the gradient filled inner rectangle
    options.border = 3;
    context.fillStyle = backgroundGradient;
    $.canvasPaint.roundedRect(context, options);
}
function paintSectionBox(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 14, border: 0 };
    var backgroundGradient = context.createLinearGradient(width, 0, 0, height);
    backgroundGradient.addColorStop(.2, '#F8F7CB');
    backgroundGradient.addColorStop(1, '#B18D19');
    context.fillStyle = "#8B4513";

    // Draw the border rectangle 
    $.canvasPaint.roundedRect(context, options);

    // Draw the gradient filled inner rectangle
    options.border = 3;
    context.fillStyle = backgroundGradient;
    $.canvasPaint.roundedRect(context, options);
}
function paintSidebar(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(.8, '#F8F7CB');
    backgroundGradient.addColorStop(1, '#B18D19');
    context.fillStyle = "#8B4513";

    // Draw the border rectangle 
    $.canvasPaint.roundedRect(context, options);

    // Draw the gradient filled inner rectangle
    options.border = 3;
    context.fillStyle = backgroundGradient;
    $.canvasPaint.roundedRect(context, options);
}
function paintHeader(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 14, radiusTL: 0, radiusTR: 0, border: 0 };
    var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
    backgroundGradient.addColorStop(0, '#B18D19');
    backgroundGradient.addColorStop(1, '#F8F7CB');
    context.fillStyle = "#8B4513";

    // Draw the border rectangle 
    $.canvasPaint.roundedRect(context, options);

    // Draw the gradient filled inner rectangle
    options.border = 3;
    context.fillStyle = backgroundGradient;
    $.canvasPaint.roundedRect(context, options);
}
function paintFooter(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 14, border: 4, fill: false, stroke: true };
    context.strokeStyle = "#8B4513";
    $.canvasPaint.roundedRect(context, options);
}