(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: "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: "rbox",
	defaultOpts: { tl:10, tr:10, bl:10, br:10, h:0, w:0, color:"#000" },
	paint: function(area) {
		
		var ctx = area.ctx;
		var opts = this.opts;
		
		var height ;
		if(opts.h==0){
			height = area.height ;
		}else{
			height = opts.h;	
		}
		var width ;
		if(opts.w==0){
			width = area.width ;
		}else{
			width = opts.w;	
		}		
	
	ctx.fillStyle = this.opts.color;
	ctx.beginPath();
	ctx.moveTo(0, opts.tl);
	ctx.lineTo(0, height - opts.bl);
	ctx.quadraticCurveTo(0, height, opts.bl, height);
	ctx.lineTo(width - opts.br, height);
	ctx.quadraticCurveTo(width, height, width, height - opts.br);
	ctx.lineTo(width, opts.tr);
	ctx.quadraticCurveTo(width, 0, width - opts.tr, 0);
	ctx.lineTo(opts.tl, 0);
	ctx.quadraticCurveTo(0, 0, 0, opts.tl);
	ctx.closePath();
    ctx.fill();
	
	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); 
      };
    }
  });
  
  $.registerLiquidCanvasPlugin({  // hmmmmmmm, no rotation? no width??? ah patterns!
    name: "pattern",
    defaultOpts: { url:"http://www.ruzee.com/files/liquid-canvas-image.png", repeat:'repeat'},
    paint: function(area) {
	
      var image = new Image();
	  var repeat = this.opts.repeat ;
      image.src = this.opts.url;
      image.onload = function() { 
	  	var ptrn = area.ctx.createPattern(this,repeat);
		area.ctx.fillStyle = ptrn;
		//this.action.paint(area);
        area.ctx.fill();

      };
    }
  });

  // This is a Liquid Canvas Plugin
  $.registerLiquidCanvasPlugin({
    name: "gradient",
    defaultOpts: { from: "#D9D9D9", to:"#FFF", height:100, direction:"v", opacity:0.2},
    paint: function(area) {
		
	//alert(this.opts.from + "-->" + this.opts.to + "-->" + this.opts.height) ;
	var theheight = this.opts.height ;
	if(theheight==0){
		theheight = area.height ;	
	}
		
    
	if (this.opts.direction == "h") {
		var grad = area.ctx.createLinearGradient(0, 0, area.width, 0);
	}
	else if (this.opts.direction == "d") {
		var grad = area.ctx.createLinearGradient(0, 0, area.width, theheight);
	}
	else {
		var grad = area.ctx.createLinearGradient(0, 0, 0, theheight);
	}
			  
	  
      grad.addColorStop(0, this.opts.from);
      grad.addColorStop(1, this.opts.to);
      area.ctx.fillStyle = grad;
      this.action.paint(area);
	  area.ctx.globalAlpha = this.opts.opacity ;
      area.ctx.fill();

    }
  });
  // End of Liquid Canvas Plugin
  
  $.registerLiquidCanvasPlugin({
    name: "shadow",
    defaultOpts: { width:5, color:'#000', shift:0 },
    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: "drawstrip",
    defaultOpts: { left:0, top:0, width:200, height:10, color:'#000'},
    paint: function(area) { 
      var width = area.width-4;
	  var height = this.opts.height;
	  var left = this.opts.left;
	  var top = this.opts.top;
	  this.action.paint(area);
	  area.ctx.fillStyle = this.opts.color; 
	  area.ctx.fillRect(top, left, width, height);
	
    }
  });
  

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