/**
 * Liquid Canvas jQuery Plugin 
 * 
 * Version 0.3
 *
 * Steffen Rusitschka  http://www.ruzee.com  MIT licensed
 */
(function($) {
  var canvasElements = [];
  var pollCounter = 0;
  var plugins = {};

  function Area(canvas) {
    var stack = [];
    
    $.extend(this, {
      width: canvas.width, height: canvas.height, ctx: canvas.getContext("2d"),
      
      save: function() {
        this.ctx.save();
        stack.push({ width: this.width, height: this.height });
      },
      
      restore: function() {
        this.ctx.restore();
        $.extend(this, stack.pop());
      }
    });
  }
  
  var Plugin = (function() {
    var shrink = function(area, steps) {
      area.ctx.translate(steps, steps);
      area.width -= 2 * steps;
      area.height -= 2 * steps;
    };
    return {
      action:{ paint:function(){} },  // provide a NOP "plugin"
      shrink: shrink,
      defaultShrink: shrink,
      setAction: function(action) { this.action = action; }
    };
  })();
  
  function newPlugin(hash, opts) {
    return $.extend({}, Plugin, hash, { opts: opts, savedOpts: opts });
  }
  
  function pluginFromPlugins(plugins) {
    return newPlugin({
      paint: function(area) {
        area.save();
        this.action.opts = $.extend(true, this.action.savedOpts);
        $.each(plugins, function() { this.paint(area); });
        area.restore();
      },
      
      setAction: function(action) {
        this.action = action; // should call super if it existed ...
        $.each(plugins, function() { this.action = action; });
      }
    });
  }
  var pluginFromApplications = pluginFromPlugins; // it just does the same ...
  
  function pluginFromName(name, opts) {
    var plugin = plugins[name];
    if (!plugin) throw "Unknown plugin: " + name;
    opts = $.extend({}, plugin.defaultOpts || {}, opts);
    return newPlugin(plugin, opts);
  }
  
  function parse(s) {
    s += " ";
    var index = 0;
    
    function err(m) { msg = m + " at " + index + ": ..." + s.substring(index) + "\nin " + s; alert(msg); throw msg; }
    function cur() { return s.charAt(index); }
    function next() { if (index > s.length) throw("Unexpected end"); return s.charAt(index + 1) }
    function eat() { return s.charAt(index++); }
    function skipWhite() { while (/\s/.exec(cur())) eat(); }
    function check(c) {
      skipWhite(); 
      for (var i=0; i<c.length; ++i) {
        if (cur() != c.charAt(i)) err("Expected '" + c.charAt(i) + "' found '" + cur() + "'"); 
        eat();
      }
    }

    //var parseApplications; // forward reference
    
    function parseWord() {
      skipWhite();
      for (var word = []; /\w/.exec(cur()); word.push(eat()));
      return word.join("");
    }
    
    function parseNumber() {
      skipWhite();
      for (var n = []; /\d/.exec(cur()); n.push(eat()));
      return parseInt(n.join(""));
    }
    
    function parseString() {
      skipWhite();
      var s = [], start = cur();
      if (/[^\'\"]/.exec(start)) { err("String expected") }
      eat();
      while (cur() != start) { if (cur() == "\\") s.eat(); s.push(eat()); }
      check(start);
      return s.join("");
    }
    
    // Yeah, strange thing - this does the CSS value like parsing
    function parseValue() {
      skipWhite();
      for (var s = []; /[^;}]/.exec(cur()); s.push(eat()));
      return s.join("");
    }
    
    function parseLiteral() {
      skipWhite();
      if (/\d/.exec(cur())) return parseNumber();
      if (/['"]/.exec(cur())) return parseString();
      return parseValue();
    }
    
    function parseOpts() {
      check("{");
      skipWhite();
      var opts = {};
      while (cur() != "}") {
        var key = parseWord();
        check(":");
        opts[key] = parseLiteral();
        skipWhite();
        if (cur() == "}") break;
        check(";");
      }
      check("}");
      return opts;
    }
    
    function parsePlugin() {
      var name = parseWord();
      skipWhite();
      opts = cur() == "{" ? parseOpts() : {};
      return pluginFromName(name, opts);
    }
    
    function parsePlugins() {
      check("[");
      skipWhite();
      var plugins = [];
      while (cur() != "]") {
        plugins.push(parsePlugin());
        skipWhite();
      }
      check("]");
      return pluginFromPlugins(plugins);
    }

    function parseActors() {
      skipWhite();
      return cur() == "[" ? parsePlugins() : parsePlugin();
    }
    
    function parseAction() {
      var action;
      skipWhite();
      if (cur() == "(") {
        eat();
        action = parseApplications();
        check(")");
      } else {
        action = parsePlugin();
      }
      return action;
    }
    
    function parseApplication() {
      var actors = parseActors();
      check("=>");
      var action = parseAction();
      actors.setAction(action);
      return actors;
    }
    
    function parseApplications() {
      var applications = [];
      while (true) {
        applications.push(parseApplication());
        skipWhite();
        if (cur() != ",") break;
        check(",");
      }
      return pluginFromApplications(applications);
    }
    
    return parseApplications();
  }

  function checkResize(container, force) {
    var $container = $(container);
    var data = $container.data('liquid-canvas');
    if (!data) return;
    var canvas = data.canvas;
    var $canvas = $(canvas);
    var w = $container.outerWidth();
    var h = $container.outerHeight();
    
    if (force || 
        canvas.width != w || canvas.height != h ||
        canvas.offsetTop != container.offsetTop || canvas.offsetLeft != container.offsetLeft) {
      pollCounter = 100;
      $canvas.css({ left: container.offsetLeft + "px", top: container.offsetTop + "px" });
      canvas.width = w;
      canvas.height = h;
      var area = new Area(canvas);
      area.save();
      data.paint(area);
      area.restore();
    }
  }

  function checkAllResize(force) {
    $.each(canvasElements, function() { checkResize(this, force); });
  }

  function poll(){
    checkAllResize();
    pollCounter--;
    if (pollCounter < 0) {
      pollCounter = 0;
      setTimeout(poll, 1000);
    } else {
      setTimeout(poll, 1000 / 60);
    }
  }

  jQuery.fn.extend({
    liquidCanvas: function(func) {
      this.each(function() {
        var canvas;
        if (window.G_vmlCanvasManager) {
          $(this).before('<div width="0" height="0" style="position:absolute; top:0px; left:0px;"></div>');
          canvas = G_vmlCanvasManager.initElement($(this).prev("div").get(0));
        } else {
          $(this).before('<canvas width="0" height="0" style="position:absolute; top:0px; left:0px;"></canvas>');
          canvas = $(this).prev("canvas").get(0);
        }
        
        var paint;
        if ($.isFunction(func)) {
          paint = func;
        } else {
          var plugin = parse(func)
          paint = function(area) { plugin.paint(area); };
        }
        
        $(this).data("liquid-canvas", {
          "canvas": canvas,
          "paint": paint
        });
        $(this).css({ background: "transparent" });
        if ($(this).css("position") != "absolute") $(this).css({ position: "relative" });
        
        canvasElements.push(this);
        checkResize(this, true);
      });
    }
  });
  
  jQuery.extend({
    registerLiquidCanvasPlugin: function(plugin) {
      plugins[plugin.name] = $.extend({}, Plugin, plugin);
    }
  });
  
  $(document).ready(checkAllResize);
  poll();
})(jQuery);