(function($) {

    $.registerLiquidCanvasPlugin({
        name: "rect",
        paint: function(area) {
            area.ctx.beginPath();
            area.ctx.rect(0, 0, area.width, area.height);
            area.ctx.closePath();
            if (this.action) this.action.paint(area);  // for chaining
        }
    });


    $.registerLiquidCanvasPlugin({
        name: "circle",
        defaultOpts: {},
        paint: function(area) {
            var ctx = area.ctx;
            var opts = this.opts;
            var radius;

            radius = (area.height > area.width) ? area.width / 2 : area.height / 2;

            ctx.beginPath();
            ctx.arc(area.width / 2, area.height / 2, radius, 0, Math.PI * 2, true); // circle
            //ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
            if (this.action) this.action.paint(area);  // for chaining
        },
        shrink: function(area, steps) {
            this.defaultShrink(area, steps);
            this.opts.radius -= steps;
        }
    });


    $.registerLiquidCanvasPlugin({
        name: "roundedRect",
        defaultOpts: { radius: 20 },
        paint: function(area) {
            var ctx = area.ctx;
            var opts = this.opts;
            ctx.beginPath();
            ctx.moveTo(0, opts.radius);
            ctx.lineTo(0, area.height - opts.radius);
            ctx.quadraticCurveTo(0, area.height, opts.radius, area.height);
            ctx.lineTo(area.width - opts.radius, area.height);
            ctx.quadraticCurveTo(area.width, area.height, area.width, area.height - opts.radius);
            ctx.lineTo(area.width, opts.radius);
            ctx.quadraticCurveTo(area.width, 0, area.width - opts.radius, 0);
            ctx.lineTo(opts.radius, 0);
            ctx.quadraticCurveTo(0, 0, 0, opts.radius);
            ctx.closePath();
            if (this.action) this.action.paint(area);  // for chaining
        },
        shrink: function(area, steps) {
            this.defaultShrink(area, steps);
            this.opts.radius -= steps;
        }
    });


    $.registerLiquidCanvasPlugin({
        name: "partialRoundedRect",
        defaultOpts: { topLeftRadius: 5, topRightRadius: 10, bottomRightRadius: 20, bottomLeftRadius: 30 },
        paint: function(area) {
            var ctx = area.ctx;
            var opts = this.opts;

            ctx.beginPath();
            //x,y
            ctx.moveTo(0, opts.topLeftRadius);
            ctx.lineTo(0, area.height - opts.bottomLeftRadius);

            ctx.quadraticCurveTo(0, area.height, opts.bottomLeftRadius, area.height);
            ctx.lineTo(area.width - opts.bottomRightRadius, area.height);

            ctx.quadraticCurveTo(area.width, area.height, area.width, area.height - opts.bottomRightRadius);
            ctx.lineTo(area.width, opts.topRightRadius);

            ctx.quadraticCurveTo(area.width, 0, area.width - opts.topRightRadius, 0);
            ctx.lineTo(opts.topLeftRadius, 0);

            ctx.quadraticCurveTo(0, 0, 0, opts.topLeftRadius);
            ctx.closePath();
            if (this.action) this.action.paint(area);  // for chaining
        },
        shrink: function(area, steps) {
            this.defaultShrink(area, steps);
            this.opts.radius -= steps;
        }
    });





    // This is a Liquid Canvas Plugin
    $.registerLiquidCanvasPlugin({
        name: "fill",
        defaultOpts: { color: "#aaa" },
        paint: function(area) {

        area.ctx.fillStyle = this.opts.color;
        this.action.paint(area);
        area.ctx.fill();
        }
    });

    $.registerLiquidCanvasPlugin({  // hmmmmmmm, no rotation? no width??? ah patterns!
        name: "image",
        defaultOpts: { url: "http://www.ruzee.com/files/liquid-canvas-image.png" },
        paint: function(area) {
            var image = new Image();
            image.src = this.opts.url;
            image.onload = function() {
                area.ctx.drawImage(this, 0, 0);
            };
        }
    });

    // This is a Liquid Canvas Plugin
    $.registerLiquidCanvasPlugin({
        name: "gradient",
        defaultOpts: { type: "linear", from: "#fff", to: "#666" },
        paint: function(area) {
            var grad;
            if (this.opts.type == "linear")
                grad = area.ctx.createLinearGradient(0, 0, 0, area.height);
            if (this.opts.type == "radial") {
                grad = area.ctx.createRadialGradient(45, 45, 10, 250, 250, 330);
            }


            grad.addColorStop(0, this.opts.from);
            grad.addColorStop(1, this.opts.to);
            area.ctx.fillStyle = grad;
            this.action.paint(area);
            area.ctx.fill();
        }
    });


    $.registerLiquidCanvasPlugin({
        name: "shadow",
        defaultOpts: { width: 3, color: '#000', shift: 2 },
        paint: function(area) {
            var sw = this.opts.width;

            area.ctx.fillStyle = this.opts.color;
            area.ctx.globalAlpha = 1.0 / sw;
            for (var s = 0; s < sw; ++s) {
                this.action.paint(area);
                area.ctx.fill();
                this.action.shrink(area, 1);
            }
            area.ctx.globalAlpha = 1;
            area.ctx.translate(0, -this.opts.shift);
        }
    });

    $.registerLiquidCanvasPlugin({
        name: "border",
        defaultOpts: { color: '#8f4', width: 3 },
        paint: function(area) {
            var bw = this.opts.width;
            area.ctx.strokeStyle = this.opts.color;
            area.ctx.lineWidth = bw;
            this.action.shrink(area, bw / 2);
            this.action.paint(area);
            area.ctx.stroke();
            this.action.shrink(area, bw / 2);
        }
    });

})(jQuery);