var count_loads = 0;

(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: "slider",
    defaultOpts: { radius:20 },
    paint: function(area) {
      var ctx = area.ctx;
      var opts = this.opts;
      ctx.beginPath();
      ctx.moveTo(4, 0);
      ctx.lineTo(area.width, 0);
      ctx.lineTo(area.width-4, area.height);
      ctx.lineTo(0, area.height);
	  ctx.lineTo(4, 0);
      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: "subNav",
    defaultOpts: { radius:20, color:"#FFF" },
    paint: function(area) {
      
	  
	  var ctx = area.ctx;
      var opts = this.opts;
      
	  ctx.fillStyle = this.opts.color;
	  
	  ctx.beginPath();
      ctx.moveTo(0, 8);
      ctx.lineTo(20, 8);
	  ctx.lineTo(26, 0);
	  ctx.lineTo(32, 8);
	  ctx.lineTo(area.width, 8);
	  ctx.lineTo(area.width, area.height);
	  ctx.lineTo(0, area.height);
	  ctx.lineTo(0, 8);
	  
      ctx.closePath();
	  
      
      
      if (this.action) { this.action.paint(area);  ctx.fill(); }  // for chaining
    },
    shrink: function(area, steps) {
      this.defaultShrink(area, steps);
      this.opts.radius -= steps;
    }
  });
  
  $.registerLiquidCanvasPlugin({
    name: "subsubNav",
    defaultOpts: { radius:20, color:"#FFF" },
    paint: function(area) {
      
	  
	  var ctx = area.ctx;
      var opts = this.opts;
      
	  ctx.fillStyle = this.opts.color;
	  
	  ctx.beginPath();
      ctx.moveTo(8, 0);
	  ctx.lineTo(area.width, 0);
	  ctx.lineTo(area.width, area.height);
	  ctx.lineTo(8, area.height);
	  ctx.lineTo(8, 18);
	  ctx.lineTo(0, 12);
	  ctx.lineTo(8, 6);
	  ctx.lineTo(8,0);
	  
      ctx.closePath();
	  
      
      
      if (this.action) { this.action.paint(area);  ctx.fill(); }  // for chaining
    },
    shrink: function(area, steps) {
      this.defaultShrink(area, steps);
      this.opts.radius -= steps;
    }
  });

  $.registerLiquidCanvasPlugin({
    name: "arrowL",
    defaultOpts: { radius:20 },
    paint: function(area) {
      var ctx = area.ctx;
      var opts = this.opts;
      ctx.beginPath();
      ctx.moveTo(0, area.height/2);
      ctx.lineTo(area.width, area.height);
      ctx.lineTo(area.width, 0);
      ctx.lineTo(0, area.height/2);
      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: "arrowR",
    defaultOpts: { radius:20 },
    paint: function(area) {
      var ctx = area.ctx;
      var opts = this.opts;
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(area.width, area.height/2);
      ctx.lineTo(0, area.height);
      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;
    }
  });
  
  // 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: "imageslice",
    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() { 
        var f = 70/image.height;
		
		
		for(y=0; y<image.height; y++) {
			area.ctx.drawImage(this, 70-(f*y), y, image.width-70, 1, 70-(f*y), y, image.width-70, 1); 	
			
		}
		count_loads++;
      };
    }
  });

  $.registerLiquidCanvasPlugin({
    name: "Rectslice",
    defaultOpts: { radius:70 },
    paint: function(area) {
      var ctx = area.ctx;
      var opts = this.opts;
      ctx.beginPath();
      ctx.moveTo(70, 0);
      ctx.lineTo(900, 0);
	  ctx.lineTo(830, 263);
	  ctx.lineTo(0, 263);
	  ctx.lineTo(70, 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 is a Liquid Canvas Plugin
  $.registerLiquidCanvasPlugin({
    name: "gradientH",
    defaultOpts: { from: "#fff", to:"#666" },
    paint: function(area) {
      var grad = area.ctx.createLinearGradient(0, 0, 0, area.height);
      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: "gradientW",
    defaultOpts: { from: "#fff", to:"#666" },
    paint: function(area) {
      var grad = 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
  
  $.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);