(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: "headline",
	defaultOpts: { top:28 },
    paint: function(area) {
      area.ctx.beginPath();
      area.ctx.rect(0, this.opts.top, area.width-2, 1);
      area.ctx.closePath();
      if (this.action) this.action.paint(area);  // for chaining
    }
  });
  
  $.registerLiquidCanvasPlugin({
    name: "roundedRect",
    defaultOpts: { radius:5 },
    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: "tooltip",
		defaultOpts: { radius:5, tipSize:5, position:'top' },
		paint: function(area) {
			var ctx = area.ctx;
			var opts = this.opts;
			ctx.beginPath();
			ctx.moveTo(
				(opts.position == 'left' ? opts.tipSize : 0),
				opts.radius + (opts.position == 'top' ? opts.tipSize : 0)
			);
			if(opts.position == 'left'){
				
			}
			ctx.lineTo(
				(opts.position == 'left' ? opts.tipSize : 0),
				area.height - opts.radius - (opts.position == 'bottom' ? opts.tipSize : 0)
			);
			ctx.quadraticCurveTo(
				(opts.position == 'left' ? opts.tipSize : 0),
				area.height - (opts.position == 'bottom' ? opts.tipSize : 0),
				opts.radius + (opts.position == 'left' ? opts.tipSize : 0),
				area.height - (opts.position == 'bottom' ? opts.tipSize : 0)
			);
			if(opts.position == 'bottom'){
				ctx.lineTo(area.width / 2 - opts.tipSize, area.height - opts.tipSize);
				ctx.lineTo(area.width / 2, area.height);
				ctx.lineTo(area.width / 2 + opts.tipSize, area.height - opts.tipSize);
			}
			ctx.lineTo(
				area.width - opts.radius - (opts.position == 'right' ? opts.tipSize : 0),
				area.height - (opts.position == 'bottom' ? opts.tipSize : 0)
			);
			ctx.quadraticCurveTo(
				area.width - (opts.position == 'right' ? opts.tipSize : 0),
				area.height - (opts.position == 'bottom' ? opts.tipSize : 0),
				area.width - (opts.position == 'right' ? opts.tipSize : 0),
				area.height - opts.radius - (opts.position == 'bottom' ? opts.tipSize : 0)
			);
			if(opts.position == 'right'){
				
			}
			ctx.lineTo(
				area.width - (opts.position == 'right' ? opts.tipSize : 0),
				opts.radius + (opts.position == 'top' ? opts.tipSize : 0)
			);
			ctx.quadraticCurveTo(
				area.width - (opts.position == 'right' ? opts.tipSize : 0),
				(opts.position == 'top' ? opts.tipSize : 0),
				area.width - opts.radius - (opts.position == 'right' ? opts.tipSize : 0),
				(opts.position == 'top' ? opts.tipSize : 0)
			);
			if(opts.position == 'top'){
				ctx.lineTo(area.width / 2 + opts.tipSize, opts.tipSize);
				ctx.lineTo(area.width / 2, 0);
				ctx.lineTo(area.width / 2 - opts.tipSize, opts.tipSize);
			}
			ctx.lineTo(
				opts.radius + (opts.position == 'left' ? opts.tipSize : 0),
				(opts.position == 'top' ? opts.tipSize : 0)
			);
			ctx.quadraticCurveTo(
				(opts.position == 'left' ? opts.tipSize : 0),
				(opts.position == 'top' ? opts.tipSize : 0),
				(opts.position == 'left' ? opts.tipSize : 0),
				opts.radius + (opts.position == 'top' ? opts.tipSize : 0)
			);
			ctx.closePath();
			if (this.action) this.action.paint(area);  // for chaining
		},
		shrink: function(area, steps) {
			this.defaultShrink(area, steps);
			this.opts.radius -= steps;
			this.opts.tipSize -= steps;
		}
	});

  $.registerLiquidCanvasPlugin({
    name: "customRect",
    defaultOpts: { topLeft:0, bottomLeft:0, bottomRight:0, topRight:0 },
    paint: function(area) {
      var ctx = area.ctx;
      var opts = this.opts;
      ctx.beginPath();
      ctx.moveTo(0, opts.topLeft);
      ctx.lineTo(0, area.height - opts.bottomLeft);
      ctx.quadraticCurveTo(0, area.height, opts.bottomLeft, area.height);
      ctx.lineTo(area.width - opts.bottomRight, area.height);
      ctx.quadraticCurveTo(area.width, area.height, area.width, area.height - opts.bottomRight);
      ctx.lineTo(area.width, opts.topRight);
      ctx.quadraticCurveTo(area.width, 0, area.width - opts.topRight, 0);
      ctx.lineTo(opts.topLeft, 0);
      ctx.quadraticCurveTo(0, 0, 0, opts.topLeft);
      ctx.closePath();
      if (this.action) this.action.paint(area);  // for chaining
    },
    shrink: function(area, steps) {
      this.defaultShrink(area, steps);
      this.opts.topLeft-=steps;
      this.opts.topRight-=steps;
      this.opts.bottomLeft-=steps;
      this.opts.bottomRight-=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", horizontal:"left", vertical:"top"},
    paint: function(area) {
	var ov=this.opts.vertical;
	var oh=this.opts.horizontal;
      var image = new Image();
      image.onload = function() {
		var h = 0;
		if(oh=="center") h = (area.width-this.width)/2;
		if(oh=="right") h = area.width-this.width;
		var v = 0;
		if(ov=="middle") v = (area.height-this.height)/2;
		if(ov=="bottom") v = area.height-this.height;
        area.ctx.drawImage(this, h, v);
      };
	  image.src = this.opts.url;
    }
  });

  // This is a Liquid Canvas Plugin
  $.registerLiquidCanvasPlugin({
    name: "gradient",
    defaultOpts: { from: "#fff", to:"#666", horizontal:"false" },
    paint: function(area) {
      var grad = (this.opts.horizontal == "false") ? area.ctx.createLinearGradient(0, 0, 0, area.height) : area.ctx.createLinearGradient(0, 0, area.width, 0);
      grad.addColorStop(0, this.opts.from);
      grad.addColorStop(1, this.opts.to);
      area.ctx.fillStyle = grad;
      this.action.paint(area);
      area.ctx.fill();
    }
  });
  // End of Liquid Canvas Plugin

	// This is a Liquid Canvas Plugin
	$.registerLiquidCanvasPlugin({
		name: "btnGradient",
		defaultOpts: { fromColor: "#909090", toColor:"#000", fromPercent: 0, toPercent: 58 },
		paint: function(area) {
			var opts = this.opts;
			var grad = area.ctx.createLinearGradient(0, 0, 0, area.height);
			grad.addColorStop(opts.fromPercent/100, opts.fromColor);
			grad.addColorStop(opts.toPercent/100, opts.toColor);
			area.ctx.fillStyle = grad;
			this.action.paint(area);
			area.ctx.fill();
		}
	});
	// End of Liquid Canvas Plugin

  $.registerLiquidCanvasPlugin({
    name: "shadow",
    defaultOpts: { width:1, color:'#ccc', offsetX:1, offsetY:1 },
    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.0;
      area.ctx.translate(-this.opts.offsetX, -this.opts.offsetY);
    }
  });

  $.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);