(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;
    }
  });
  
  // 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: { from: "#fff", to:"#666", xO:"", yO:"", xD:"", yD:"" },
    paint: function(area) {
		
		function trovaPercento(asse,myCode){
			//alert(myCode);
			myCode=""+myCode+"";
			//alert(myCode);
			lenStr="";
			lenStr=myCode.length;
			firstChars=myCode.substring(0,1);
			if(firstChars=="#") {
				myVal=myCode.substring(1,lenStr);
				if(asse=="x") {
					myObjDim=area.width;
				}else{
					myObjDim=area.height;
				}
				myValDef=((myObjDim/100)*myVal)*1;
			}else{
				myValDef=myCode*1;
			}
		}
		
		xo = this.opts.xO;
		yo = this.opts.yO;
		xd = this.opts.xD;
		yd = this.opts.yD;
		
		if(xo==null || xo==""){
			xo=0;
		}else{
			trovaPercento("x",xo);
			xo=myValDef;
		}
		if(yo==null || yo==""){
			yo=0;
		}else{
			trovaPercento("y",yo);
			yo=myValDef;
		}
		if(xd==null || xd==""){
			xd=0;
		}else{
			trovaPercento("x",xd);
			xd=myValDef;
		}
		if(yd==null || yd==""){
			yd=0;
		}else{
			trovaPercento("y",yd);
			yd=myValDef;
		}

		var grad = area.ctx.createLinearGradient(xo, yo, xd, yd);
		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
  
  $.registerLiquidCanvasPlugin({
    name: "shadow",
    defaultOpts: { width:4, color:'#000', shift:0, alpha:10 },
    paint: function(area) {
      var sw = this.opts.width;
      
      area.ctx.fillStyle = this.opts.color; 
      area.ctx.globalAlpha = (this.opts.alpha/100) / 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);
    }
  });
  
	$.registerLiquidCanvasPlugin({
		name: "ecken",
		defaultOpts: { tl: 5, tr: 20, bl:10, br:15 },
		paint: function(area) {
		var ctx = area.ctx;
		var opts = this.opts;
		ctx.beginPath();
		ctx.moveTo(0, opts.tl);
		ctx.lineTo(0, area.height - opts.bl);
		ctx.quadraticCurveTo(0, area.height, opts.bl, area.height);
		ctx.lineTo(area.width - opts.br, area.height);
		ctx.quadraticCurveTo(area.width, area.height, area.width, area.height - opts.br);
		ctx.lineTo(area.width, opts.tr);
		ctx.quadraticCurveTo(area.width, 0, area.width - opts.tr, 0);
		ctx.lineTo(opts.tl, 0);
		ctx.quadraticCurveTo(0, 0, 0, opts.tl);
		ctx.closePath();
		if (this.action) this.action.paint(area); // for chaining
		},
		shrink: function(area, steps) {
		this.defaultShrink(area, steps);
		this.opts.radius -= steps;
		}
	});

})(jQuery);