Quintus.SVG = function(Q) {

  var SVG_NS ="http://www.w3.org/2000/svg"; 

  Q.setupSVG = function(id,options) {
    options = options || {};
    id = id || "quintus";
    Q.svg = $(_.isString(id) ? "#" + id : id)[0];

    if(!Q.svg) {
      Q.svg = document.createElementNS(SVG_NS,'svg');
      Q.svg.setAttribute('width',320);
      Q.svg.setAttribute('height',420);
      document.body.appendChild(Q.svg);
    }

    if(options.maximize) {
      var w = $(window).width();
      var h = $(window).height()-5;
      Q.svg.setAttribute('width',w);
      Q.svg.setAttribute('height',h);
    }

    Q.width = Q.svg.getAttribute('width');
    Q.height = Q.svg.getAttribute('height');

    Q.wrapper = $(Q.svg)
                 .wrap("<div id='" + id + "_container'/>")
                 .parent()
                 .css({ width: Q.width,
                        height: Q.height,
                        margin: '0 auto' });

    setTimeout(function() { window.scrollTo(0,1); }, 0);

    $(window).bind('orientationchange',function() {
      setTimeout(function() { window.scrollTo(0,1); }, 0);
    });

    return Q;
  };

  Q.SVGSprite = Q.Sprite.extend({
    init: function(props) {
      this._super(_(props).defaults({
        shape: 'block',
        color: 'black',
        angle: 0,
        active: true,
        cx: 0,
        cy: 0
      }));

      this.createShape();
      this.svg.sprite = this;

      this.rp = {};
      this.setTransform();
    },

    createShape: function() {
      var p = this.p;
      switch(p.shape) {
        case 'block':
          this.svg = document.createElementNS(SVG_NS,'rect');

          _.extend(p,{ cx: p.w/2, cy: p.h/2 });
          this.set({ width: p.w, height: p.h });
          break;

        case 'circle':
          this.svg = document.createElementNS(SVG_NS,'circle');

          this.set({ r: p.r, cx: 0, cy: 0 });
          break;

        case 'polygon':
          this.svg = document.createElementNS(SVG_NS,'polygon');

          var pts = _.map(p.points, 
                          function(pt) { 
                            return pt[0] + "," + pt[1];
                          }).join(" ");
          this.set({ points: pts });
          break;
          
      }

      this.set({ fill: p.color });
      if(p.outline) {
        this.set({
          stroke: p.outline,
          "stroke-width": p.outlineWidth || 1
        });

      }
    },

    setTransform: function() {
      var p = this.p;
      var rp = this.rp;

      if(rp.x !== p.x || 
         rp.y !== p.y || 
         rp.angle !== p.angle ) {

        var transform = "translate(" + (p.x - p.cx) + "," +
                                     + (p.y - p.cy) + ") " +
                        "rotate(" + p.angle + 
                                "," + p.cx +
                                "," + p.cy +
                                ")";

        this.svg.setAttribute('transform',transform);

        rp.angle = p.angle;
        rp.x = p.x;
        rp.y = p.y;
      } 
    },



    set: function(attr) {
      _.each(attr,function(value,key) {
        this.svg.setAttribute(key,value);
      },this);
    },

    draw: function(ctx) {
      this.trigger('draw');
    },

    step: function(dt) {
      this.stepData.dt = dt;
      this.trigger('step',this.stepData);
      this.setTransform();
    },

    destroy: function() {
      if(this.destroyed) return false;
      this._super();
      this.parent.svg.removeChild(this.svg);
    }
  });

  Q.SVGStage = Q.Stage.extend({

    init: function(scene) {
      this.svg = document.createElementNS(SVG_NS,'svg');
      this.svg.setAttribute('width',Q.width);
      this.svg.setAttribute('height',Q.height);
      Q.svg.appendChild(this.svg);
      
      this.viewBox = { x: 0, y: 0, w: Q.width, h: Q.height };
      this._super(scene);
    },

    insert: function(itm) {
      if(itm.svg) { this.svg.appendChild(itm.svg); }
      return this._super(itm);
    },

    destroy: function() {
      Q.svg.removeChild(this.svg);
      this._super();
    },

    viewport: function(w,h) {
      this.viewBox.w = w;
      this.viewBox.h = h;
      if(this.viewBox.cx || this.viewBox.cy) {
        this.centerOn(this.viewBox.cx,
                      this.viewBox.cy);
      } else {
        this.setViewBox();
      }
    },

    centerOn: function(x,y) {
      this.viewBox.cx = x;
      this.viewBox.cy = y;
      this.viewBox.x = x - this.viewBox.w/2;
      this.viewBox.y = y - this.viewBox.h/2;
      this.setViewBox();
    },

    setViewBox: function() {
      this.svg.setAttribute('viewBox',
                            this.viewBox.x + " " + this.viewBox.y + " " +
                            this.viewBox.w + " " + this.viewBox.h);
    },

    browserToWorld: function(x,y) {
      var m = this.svg.getScreenCTM();
      var p = this.svg.createSVGPoint();
      p.x = x; p.y = y;
      return p.matrixTransform(m.inverse());
    }
  });


  Q.svgOnly = function() {
    Q.Stage = Q.SVGStage;
    Q.setup = Q.setupSVG;
    Q.Sprite = Q.SVGSprite;
    return Q;
  };
  
      
};