$(document).ready(function() {
//    $(".rounded-box").backgroundCanvas();
//$(".rounded-box2").backgroundCanvas();
//$(".rounded-btn").backgroundCanvas();
//$(".glossy-btn").backgroundCanvas();
//$(".rounded-solid").backgroundCanvas();
//$(".sixsixone-box").backgroundCanvas();
//$(".sunline-box").backgroundCanvas();
//$(".tag-box").backgroundCanvas();
//$(".royal-box").backgroundCanvas();
//$(".vsg-box").backgroundCanvas();
DrawCanvas();
});

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

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


function DrawCanvas() {
    try {
//        $(".rounded-box").backgroundCanvasPaint(RoundedBox);
//        $(".rounded-box2").backgroundCanvasPaint(RoundedBox2);
//        $(".rounded-btn").backgroundCanvasPaint(RoundedBtn);
//        $(".glossy-btn").backgroundCanvasPaint(GlossyBtn);
//        $(".rounded-solid").backgroundCanvasPaint(RoundedSolid);
//        $(".sixsixone-box").backgroundCanvasPaint(SixsixoneBox);
//        $(".sunline-box").backgroundCanvasPaint(SunlineBox);
//        $(".tag-box").backgroundCanvasPaint(TagBox);
//        $(".royal-box").backgroundCanvasPaint(RoyalBox);
//        $(".vsg-box").backgroundCanvasPaint(VSGBox);
        } catch (e) {
        $(".jbgContentDiv").css("background-color", "#000000");
    }
}



function RoundedBox(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 10, border: 0 };
    if ($element.attr("radius") != undefined) {
        options.radius = parseInt($element.attr("radius"));
    }
    var maincolor = $element.attr("bgc");
    if (maincolor == undefined) {
        maincolor = "#CCCCCC";
    }
    if ($element.attr("maincolor") != undefined) {
        maincolor = $element.attr("maincolor");
    }
    var startcolor = ColorShade(maincolor, 1.07);
    if ($element.attr("startcolor") != undefined) {
        startcolor = $element.attr("startcolor");
    }
    var endcolor = maincolor;
    if ($element.attr("endcolor") != undefined) {
        endcolor = $element.attr("endcolor");
    }
    var pad = 8;
    if ($element.attr("padding") != undefined) {
        pad = parseInt($element.attr("padding"));
    }
    $content.wrap("<div style=\"padding:"+pad+"px\"></div>");
    if ($element.attr("brdr") != undefined && $element.attr("brdr") != "rgb(0, 0, 0)" && $element.attr("brdr") != "#000") {
        maincolor = $element.attr("brdr");
    }
    context.fillStyle = maincolor;
    $.canvasPaint.roundedRect(context, options);

    // Draw the gradient filled inner rectangle
    if (startcolor != endcolor) {
        var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
        backgroundGradient.addColorStop(0, startcolor);
        backgroundGradient.addColorStop(50/((height>50)?height:50), endcolor);
        backgroundGradient.addColorStop(1, endcolor);
            options.border = 2;
            context.fillStyle = backgroundGradient;
            $.canvasPaint.roundedRect(context, options);
    }
}
function RoundedSolid(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 10, border: 0 };
    if ($element.attr("radius") != undefined) {
        options.radius = parseInt($element.attr("radius"));
    }
    var maincolor = $element.attr("bgc");
    if (maincolor == undefined) {
        maincolor = "#000000";
    }
    if ($element.attr("maincolor") != undefined) {
        maincolor = $element.attr("maincolor");
    }
    var startcolor = maincolor;
    if ($element.attr("startcolor") != undefined) {
        startcolor = $element.attr("startcolor");
    }
    var endcolor = maincolor;
    if ($element.attr("endcolor") != undefined) {
        endcolor = $element.attr("endcolor");
    }
    var pad = Math.ceil(options.radius/2)+1;
    if ($element.attr("padding") != undefined) {
        pad = parseInt($element.attr("padding"));
    }
    $content.wrap("<div style=\"padding:" + pad + "px\"></div>");
    if ($element.attr("brdr") != undefined && $element.attr("brdr") != "rgb(0, 0, 0)" && $element.attr("brdr") != "#000") {
        maincolor = $element.attr("brdr");
    }
    context.fillStyle = maincolor;
    $.canvasPaint.roundedRect(context, options);

    // Draw the gradient filled inner rectangle
    if (startcolor != endcolor) {
        var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
        backgroundGradient.addColorStop(0, startcolor);
        backgroundGradient.addColorStop(50 / ((height > 50) ? height : 50), endcolor);
        backgroundGradient.addColorStop(1, endcolor);
        options.border = 2;
        context.fillStyle = backgroundGradient;
        $.canvasPaint.roundedRect(context, options);
    }
}

function RoundedBtn(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 5, border: 0 };
    if ($element.attr("radius") != undefined) {
        options.radius = parseInt($element.attr("radius"));
    }
    var maincolor = $element.attr("bgc");
    if (maincolor == undefined) {
        maincolor = "#CCCCCC";
    }
    if ($element.attr("maincolor") != undefined) {
        maincolor = $element.attr("maincolor");
    }
    var startcolor = ColorShade(maincolor, 1.25);
    if ($element.attr("startcolor") != undefined) {
        startcolor = $element.attr("startcolor");
    }
    var endcolor = maincolor;
    if ($element.attr("endcolor") != undefined) {
        endcolor = $element.attr("endcolor");
    }
    var pad = 0;
    if ($element.attr("padding") != undefined) {
        pad = parseInt($element.attr("padding"));
    }
    //$content.wrap("<div style=\"padding:" + pad + "px\"></div>");
    if ($element.attr("brdr") != undefined && $element.attr("brdr") != "rgb(0, 0, 0)" && $element.attr("brdr") != "#000") {
        maincolor = $element.attr("brdr");
    }
    context.fillStyle = maincolor;
    $.canvasPaint.roundedRect(context, options);

    // Draw the gradient filled inner rectangle
    if (startcolor != endcolor) {
        var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
        backgroundGradient.addColorStop(0, "#FFFFFF");
        backgroundGradient.addColorStop(5 / ((height > 5) ? height : 5), startcolor);
        backgroundGradient.addColorStop(10 / ((height > 10) ? height : 10), endcolor);
        backgroundGradient.addColorStop(1, endcolor);
        options.border = 1;
        context.fillStyle = backgroundGradient;
        $.canvasPaint.roundedRect(context, options);
    }
}

function GlossyBtn(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 5, border: 0 };
    if ($element.attr("radius") != undefined) {
        options.radius = parseInt($element.attr("radius"));
    }
    var maincolor = $element.attr("bgc");
    if (maincolor == undefined) {
        maincolor = "#CCCCCC";
    }
    if ($element.attr("maincolor") != undefined) {
        maincolor = $element.attr("maincolor");
    }
    var startcolor = ColorShade(maincolor, 1.5);
    if ($element.attr("startcolor") != undefined) {
        startcolor = $element.attr("startcolor");
    }
    var midcolor = ColorShade(maincolor, 1.2);
    var endcolor = maincolor;
    if ($element.attr("endcolor") != undefined) {
        endcolor = $element.attr("endcolor");
    }
    var pad = 2;
    if ($element.attr("padding") != undefined) {
        pad = parseInt($element.attr("padding"));
    }
    $content.wrap("<div style=\"padding:" + pad + "px\"></div>");
    if ($element.attr("brdr") != undefined && $element.attr("brdr") != "rgb(0, 0, 0)" && $element.attr("brdr") != "#000") {
        maincolor = $element.attr("brdr");
    }
    context.fillStyle = maincolor;
    $.canvasPaint.roundedRect(context, options);

    // Draw the gradient filled inner rectangle
        var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
        backgroundGradient.addColorStop(0, startcolor);
        backgroundGradient.addColorStop(.5, midcolor);
        backgroundGradient.addColorStop(1, endcolor);
        options.border = 2;
        context.fillStyle = backgroundGradient;
        $.canvasPaint.roundedRect(context, options);
}

function RoundedBox2(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 10, border: 0 };
    if ($element.attr("radius") != undefined) {
        options.radius = parseInt($element.attr("radius"));
    }
    var maincolor = $element.attr("bgc");
    if (maincolor == undefined) {
        maincolor = "#CCCCCC";
    }
    if ($element.attr("maincolor") != undefined) {
        maincolor = $element.attr("maincolor");
    }
    var startcolor = ColorShade(maincolor, 1.2);
    if ($element.attr("startcolor") != undefined) {
        startcolor = $element.attr("startcolor");
    }
    var endcolor = maincolor;
    if ($element.attr("endcolor") != undefined) {
        endcolor = $element.attr("endcolor");
    }
    var pad = 8;
    if ($element.attr("padding") != undefined) {
        pad = parseInt($element.attr("padding"));
    }
    $content.wrap("<div style=\"padding:" + pad + "px\"></div>");
    
    context.fillStyle = "#CCCCCC";
    $.canvasPaint.roundedRect(context, options);
    context.fillStyle = "#FFFFFF";
    options.border = 2
    $.canvasPaint.roundedRect(context, options);

    // Draw the gradient filled inner rectangle
    if (startcolor != endcolor) {
        var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
        backgroundGradient.addColorStop(0, startcolor);
        backgroundGradient.addColorStop(1, endcolor);
        options.border = 4;
        context.fillStyle = backgroundGradient;
        $.canvasPaint.roundedRect(context, options);
    }
}

function SixsixoneBox(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 18, border: 0 };
    if ($element.attr("radius") != undefined) {
        options.radius = parseInt($element.attr("radius"));
    }
    var maincolor = "#000000";

    var color1 = "#FFFFFF";
    var color2 = "#005CCE";
    var pad = 18;
    $content.wrap("<div style=\"padding:10px\"></div>");

    context.fillStyle = color2;
    $.canvasPaint.roundedRect(context, options);
    context.fillStyle = color1;
    options.border = 6;
    $.canvasPaint.roundedRect(context, options);
    context.fillStyle = maincolor;
    options.border = 10;
    $.canvasPaint.roundedRect(context, options);


}
function SunlineBox(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 18, border: 0 };
    if ($element.attr("radius") != undefined) {
        options.radius = parseInt($element.attr("radius"));
    }
    var maincolor = "#000000";

    var color1 = "#FFFFFF";
    var color2 = "#000000";
    var pad = 18;
    $content.wrap("<div style=\"padding:15px 10px\"></div>");

    context.fillStyle = color2;
    $.canvasPaint.roundedRect(context, options);
    context.fillStyle = color1;
    options.border = 4;
    $.canvasPaint.roundedRect(context, options);
    context.fillStyle = maincolor;
    options.border = 9;
    $.canvasPaint.roundedRect(context, options);


}

function TagBox(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 18, border: 0 };
    if ($element.attr("radius") != undefined) {
        options.radius = parseInt($element.attr("radius"));
    }
    var maincolor = "#000000";

    var color1 = "#FFFFFF";
    var color2 = "#F60000";
    var pad = 18;
    $content.wrap("<div style=\"padding:15px 10px\"></div>");
    context.fillStyle = maincolor;
    $.canvasPaint.roundedRect(context, options);
    context.fillStyle = color2;
    options.border = 2;
    $.canvasPaint.roundedRect(context, options);
    context.fillStyle = color1;
    options.border = 6;
    $.canvasPaint.roundedRect(context, options);
    context.fillStyle = maincolor;
    options.border = 10;
    $.canvasPaint.roundedRect(context, options);


}
function RoyalBox(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 18, border: 0 };
    if ($element.attr("radius") != undefined) {
        options.radius = parseInt($element.attr("radius"));
    }
    var maincolor = "#000000";

    var color1 = "#FFFFFF";
    var color2 = "#F60000";
    var pad = 18;
    $content.wrap("<div style=\"padding:15px 10px\"></div>");
    
    context.fillStyle = color2;
    options.border = 0;
    $.canvasPaint.roundedRect(context, options);
    context.fillStyle = color1;
    options.border = 5;
    $.canvasPaint.roundedRect(context, options);
    context.fillStyle = maincolor;
    options.border = 10;
    $.canvasPaint.roundedRect(context, options);


}
function VSGBox(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
    var options = { x: 0, height: height, width: width, radius: 18, border: 0 };
    if ($element.attr("radius") != undefined) {
        options.radius = parseInt($element.attr("radius"));
    }
    var maincolor = "#000000";

    var color1 = "#FFFFFF";
    var color2 = "#F60000";
    var pad = 18;
    $content.wrap("<div style=\"padding:15px 10px\"></div>");
    context.fillStyle = color2;
    $.canvasPaint.roundedRect(context, options);
    context.fillStyle = color1;
    options.border = 4;
    $.canvasPaint.roundedRect(context, options);
    context.fillStyle = maincolor;
    options.border = 6;
    $.canvasPaint.roundedRect(context, options);


}
var hexchars = "0123456789ABCDEF";
function ColorShade(color, factor) {
    var R, G, B;
    //alert(color);
    if (color.indexOf("rgb(") >= 0) {
        color = color.replace("rgb(","").replace(")","");
        var rgb = color.split(",");
        R = parseInt(rgb[0]);
        G = parseInt(rgb[1]);
        B = parseInt(rgb[2]);
    } else {
    color = color.replace('#', '').toUpperCase();
        R = Hex2Dec(color.substring(0, 2));
        G = Hex2Dec(color.substring(2, 4));
        B = Hex2Dec(color.substring(4, 6));
    }

    var newColor = "#";
    newColor += Dec2Hex(R * factor);
    newColor += Dec2Hex(G * factor);
    newColor += Dec2Hex(B * factor);
    return newColor;
}
function Hex2Dec(hex) {
    var dec = hexchars.indexOf(hex.charAt(0)) * 16;
    dec += hexchars.indexOf(hex.charAt(1));
    return dec;
}
function Dec2Hex(dec) {
    if (dec > 255) { dec = 255; }
    var hex = "";
    var h1 = Math.floor(dec / 16);
    hex = hexchars.charAt(h1);
    var h2 = dec - (h1 * 16);
    hex += hexchars.charAt(h2);
    return hex;
}