(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, topleft:1, bottomleft:1, bottomright:1, topright:1 },
    paint: function(area) {
      var ctx = area.ctx;
      var opts = this.opts;
      ctx.beginPath();
	  if (opts.topleft){
	      ctx.moveTo(0, opts.radius);
	  }else{
		  ctx.moveTo(0,0);
	  }
      ctx.lineTo(0, area.height - opts.radius);
	  if (opts.bottomleft){
	      ctx.quadraticCurveTo(0, area.height, opts.radius, area.height);
	  }else{
		  ctx.lineTo(0,area.height);
		  ctx.lineTo(opts.radius,area.height);
	  }
      ctx.lineTo(area.width - opts.radius, area.height);
	  if (opts.bottomright){
	      ctx.quadraticCurveTo(area.width, area.height, area.width, area.height - opts.radius);
	  }else{
		  ctx.lineTo(area.width,area.height);
		  ctx.lineTo(area.width,opts.radius);
	  }
      ctx.lineTo(area.width, opts.radius);
	  if (opts.topright){
	      ctx.quadraticCurveTo(area.width, 0, area.width - opts.radius, 0);
	  }else{
		  ctx.lineTo(area.width,0);
		  ctx.lineTo(area.width - opts.radius,0)
	  }
      ctx.lineTo(opts.radius, 0);
	  if (opts.topleft) {
	      ctx.quadraticCurveTo(0, 0, 0, opts.radius);
	  }else{
	      ctx.lineTo(0,0);
	  }
      ctx.closePath();
      if (this.action) this.action.paint(area);  // for chaining
    },
    shrink: function(area, steps) {
      this.defaultShrink(area, steps);
      this.opts.radius -= steps;
    }
  });

  // Plugin da Barrinha de Escala
	$.registerLiquidCanvasPlugin({
		name: 'scalebar',
		defaultOpts: { colors:[{ln:0,cl:'#F5F5F5'},{ln:1,cl:'#EEEEEE'}],divname:'scalebardiv' },
			paint: function(area) {
			
			if ( $('#'+this.opts.divname).data('colors') ){
				var lenght_color=$('#'+this.opts.divname).data('colors');
				if (!lenght_color[0].cl){
					lenght_color=this.opts.colors;
				}
			}else{
				var lenght_color=this.opts.colors;
			}

			// Gradiente			
			var grad = area.ctx.createLinearGradient(0,0,area.width,0);
			var g;
			for (g in lenght_color){
				grad.addColorStop(lenght_color[g].ln, lenght_color[g].cl);
			}
			area.ctx.fillStyle = grad;
			this.action.paint(area);
			area.ctx.fill();

			// Sombra
			var sw = 1;
			var shift = 0.5;
			area.ctx.fillStyle = '#999999'; 
			area.ctx.globalAlpha = 0.5 / sw;
			for (var s = 0; s < sw; ++s) {
				this.action.paint(area);
				area.ctx.fill();
				this.action.shrink(area, 0.5);
			}
			area.ctx.globalAlpha = 1;
			area.ctx.translate(0, - shift);

			// Gradiente
			grad = area.ctx.createLinearGradient(0,0,area.width,0);
			for (g in lenght_color){
				grad.addColorStop(lenght_color[g].ln, lenght_color[g].cl);
			}
			area.ctx.fillStyle = grad;
			this.action.paint(area);
			area.ctx.fill();

			// Borda
			var bw = 0.5;
			area.ctx.strokeStyle = '#FFFFFF';
			area.ctx.lineWidth = bw;
			this.action.shrink(area, bw / 4);
			this.action.paint(area);
			area.ctx.stroke();
		}
	});

  // 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({
		name: "gradient",
		defaultOpts: { from: "#ACD50D", to:"#FFBF00", direction:'horizontal' },
		paint: function(area) {
			if (this.opts.direction=='horizontal'){
				w=area.width; h=0;
			}else{
				w=0; h=area.height;
			}
		  var grad = area.ctx.createLinearGradient(0,0,w,h);
		  grad.addColorStop(0.0, this.opts.from);
		  grad.addColorStop(1.0, this.opts.to);
		  area.ctx.fillStyle = grad;
		  this.action.paint(area);
		  area.ctx.fill();

		}
	  });

	  $.registerLiquidCanvasPlugin({
		name: "iphone",
		defaultOpts: { direction:'horizontal', fill:'', colors:'bright' },
		paint: function(area) {
			if (this.opts.direction=='horizontal'){
				w=area.width; 
				h=0;
			}else{
				w=0; 
				h=area.height;
			}
			tons=      [0		,0.02	,0.05	,0.45	,0.49	,0.52	,0.95	,1];
			if (this.opts.colors=='gray'){
				colors='#A1A1A1	,#DDDDDD,#EAEAEA,#CDCDCD,#C8C8C8,#BCBCBC,#BEBEBE,#A7A7A7';
			}else if (this.opts.colors=='blue'){
				colors='#30363E	,#7E8FA7,#8EA4C1,#5877A2,#5E76AC,#476999,#496B9B,#375073';
			}else {
				colors='#AAAAAA	,#F9F9F9,#FFFFFF,#FAFAFA,#F5F5F5,#F1F1F1,#FFFFFF,#DDDDDD';
			}
			colors=colors.split(',');
			
			if (this.opts.fill>''){
				area.ctx.fillStyle = this.opts.fill;
				this.action.paint(area);
			}else {
			  var grad = area.ctx.createLinearGradient(0,0,w,h);
		      for (var g in tons) {
				  grad.addColorStop(tons[g], colors[g]);
			  }
			  area.ctx.fillStyle = grad;
			  this.action.paint(area);
			}
		  area.ctx.fill();
		  if (this.opts.bordercolor>''){
			var bw = this.opts.borderwidth;
			bw=bw>0?bw:1;
			area.ctx.strokeStyle = this.opts.bordercolor;
			area.ctx.lineWidth = bw;
			area.ctx.stroke();
		  }


		}
	  });
	  
	  $.registerLiquidCanvasPlugin({
		name: "gradient3",
		defaultOpts: { from: "#ACD50D", to:"#FFBF00" , to2:"#ACD50D" },
		paint: function(area) {

		  var grad = area.ctx.createLinearGradient(0,0,area.width,0);
		  grad.addColorStop(0.0, this.opts.from);
		  grad.addColorStop(0.3, this.opts.to);
		  grad.addColorStop(0.7, this.opts.to);
		  grad.addColorStop(1.0, this.opts.to2);
		  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);