// register a user defined plugin
$.registerLiquidCanvasPlugin({
    name: "mandala",
    paint: function(area) {
        var opts = this.opts;
        var ctx = area.ctx;
        var min = area.width > area.height ? area.height : area.width;
        var trans = min / 2;
        var rad = trans / 3;
        for (var i = 0; i < 10; ++i) {
            area.save();
            ctx.translate(area.width / 2, area.height / 2);
            ctx.rotate(i * 2 * Math.PI / 10);
            ctx.translate(trans - rad, 0);
            area.width = 30;
            area.height = 30;
            this.action.paint(area);
            area.restore();
        }
    }
});

$(window).load(function() {
    // Necessary to insure that Liquid Canvas draws boxes of equal height when there is a row of three infoboxes
    var threeColContainerHeight;
    threeColContainerHeight = jQuery("#ThreeColumnContainer1").height();
    jQuery("#ThreeColumnContainer1 .InfoBox").css({ height: threeColContainerHeight });

    // Liquid Canvas
    $("#ContentBody").liquidCanvas("[shadow{width:5; color:#525252;} fill{color:#fff}] => roundedRect{radius:15}");
    $("#HeaderGradient").liquidCanvas("gradient{from:rgba(0, 0, 0, 0.1); to:rgba(255, 255, 255, 0.0);} => roundedRect{radius:8}");
    $(".ShadowBoxTop").liquidCanvas("gradient{from:rgba(255, 255, 255, 0.0); to:rgba(0, 0, 0, 0.05);} => rect");
    $(".ShadowBoxBottom").liquidCanvas("gradient{from:rgba(0, 0, 0, 0.15); to:rgba(255, 255, 255, 0.0);} => rect");
    $(".CommonGradientBox").liquidCanvas("gradient{from:rgba(255, 255, 255, 0.0); to:rgba(0, 0, 0, 0.6)} => rect}");
    $(".CommonGradientBox2").liquidCanvas("gradient{from:#fff; to: #e0e0e0;} => roundedRect{radius:20}");
    $(".GenericContainerSmallNoShadow").liquidCanvas("[border{color:#6db737; width:1} fill{color:#f2f2f2;}] => roundedRect{radius:4}");
    $(".TinyInfoImageContainer").liquidCanvas("[shadow{width:3; color:#999;} fill{color:#FFF;}] => roundedRect{radius:6}");
    $(".TinyInfoVideoContainer").liquidCanvas("[shadow{width:3; color:#999;} fill{color:#FFF;}] => roundedRect{radius:13}");
    //$(".CommentBoxContainer").liquidCanvas("[shadow{width:3; color:#999;} fill{color:#e9e8c3} border{color:#fff; width:7}] => roundedRect{radius:8}");
    $(".CommentBoxContainer").liquidCanvas("[shadow{width:3; color:#999;} gradient{from:#FFF; to: #DEDEDE;} border{color:#fff; width:7}] => roundedRect{radius:8}");
    $(".CommentBoxContainerThin").liquidCanvas("[shadow{width:3; color:#999;} gradient{from:#FFF; to: #DEDEDE;} border{color:#fff; width:4}] => roundedRect{radius:8}");
    $("#FooterGradient").liquidCanvas("gradient{from:rgba(255, 255, 255, 0.0); to:rgba(0, 0, 0, 0.1);} => roundedRect{radius:8}");
    $(".TabTopOrange").liquidCanvas("[fill{color:#ef6100} gradient{from:rgba(255, 255, 255, 0.6); to:rgba(228, 93, 0, 1.0)}] => partialRoundedRect{topLeftRadius:10; topRightRadius:10; bottomRightRadius:0; bottomLeftRadius:0}");
    $(".TabTopGreen").liquidCanvas("[fill{color:#62b131} gradient{from:rgba(255, 255, 255, 0.2); to:rgba(79, 151, 33, 1.0)}] => partialRoundedRect{topLeftRadius:10; topRightRadius:10; bottomRightRadius:0; bottomLeftRadius:0}");
    $(".TabBottomGray").liquidCanvas("fill{color:#E0E0E0} => partialRoundedRect{topLeftRadius:0; topRightRadius:0; bottomRightRadius:10; bottomLeftRadius:10}");
    $(".InfoBoxBar").liquidCanvas("[fill{color:#FFFFFF} gradient{from:rgba(255, 255, 255, 0.0); to:rgba(255, 255, 255, 0.8)}] => partialRoundedRect{topLeftRadius:0; topRightRadius:5; bottomRightRadius:5; bottomLeftRadius:0}");
    $("a.buttonLink").liquidCanvas("[shadow{width:3; color:#999;} gradient{from:#ffb51b; to:#ff7400;} border{color:#000; width:1}] => roundedRect{radius:10}");
    $(".ModalWindow").liquidCanvas("[shadow{width:9; color:#535353;} fill{color:#fff} border{color:#5eac2d; width:5}] => roundedRect{radius:26}");
    $(".ModalCloseDiv").liquidCanvas("[border{color:#5eac2d; width:10} fill{color:#5eac2d}] => roundedRect{radius:20}");
    $("#LeftNav").liquidCanvas("[shadow{width:3; color:#999;} gradient{from:#FFF; to: #DEDEDE;}  border{color:#fff; width:4}] => roundedRect{radius:6}");
    $("#PaymentSteps").liquidCanvas("[shadow{width:3; color:#999;} gradient{from:#FFF; to: #DEDEDE;}  border{color:#fff; width:4}] => roundedRect{radius:6}");
    //$(".LeftNavMenu ul ul").liquidCanvas("[border{color:#d75903; width:1} fill{color:#f9f8ef;}] => roundedRect{radius:4}");
    $(".CartItemsBox").liquidCanvas("[shadow{width:3; color:#999;} fill{color:#cbdfbc;} border{color:#fff; width:4}] => roundedRect{radius:6}");
    $(".CartItemsBoxInner").liquidCanvas("[border{color:#d75903; width:1} fill{color:#f9f8ef;}] => roundedRect{radius:4}");
    $(".VideoTestimonialWhiteTab").liquidCanvas("[fill{color:#fff}] => partialRoundedRect{topLeftRadius:8; topRightRadius:8; bottomRightRadius:0; bottomLeftRadius:0}");
    $(".TableContainer").liquidCanvas("[gradient{from:#ccc; to:#fff;}] => roundedRect{radius:8}");
    $(".GenericColorContainer1Shadow").liquidCanvas("[shadow{width:3; color:#999;} fill{color:#cbdfbc;}] => roundedRect{radius:8}");
    $(".GenericContainerShadow").liquidCanvas("[shadow{width:3; color:#999;} fill{color:#FFF;}] => roundedRect{radius:8}");
    $(".GenericContainerNoShadow").liquidCanvas("[border{color:#6db737; width:3} fill{color:#f2f2f2;}] => roundedRect{radius:8}");
    $(".GenericContainer2NoShadow").liquidCanvas("[fill{color:#ebebeb;} border{color:#ccc; width:1}] => roundedRect{radius:6}");
    $(".GenericContainer2Shadow").liquidCanvas("[shadow{width:3; color:#999;} fill{color:#ebebeb;} border{color:#ccc; width:1}] => roundedRect{radius:6}");
    $(".GenericContainer3Shadow").liquidCanvas("[shadow{width:3; color:#bbbaba;} fill{color:#a6a6a6;}] => roundedRect{radius:8}");
    $(".GenericContainer3NoShadow").liquidCanvas("[border{color:#6db737; width:3} fill{color:#a6a6a6;}] => roundedRect{radius:8}");
    $(".GenericContainer4NoShadow").liquidCanvas("[border{color:#fff; width:1} fill{color:#fff;}] => roundedRect{radius:24}");
    $(".MainNavItemSelected").liquidCanvas("[border{color:#fff; width:2} fill{color:#e2e2e2;}] => roundedRect{radius:6}");
});