Quintus.DOM = function(Q) {


  (function() { 
    function translateBuilder(attribute) {
      return function(dom,x,y) {
        dom.style[attribute] = 
        "translate(" + Math.floor(x) + "px," +
        Math.floor(y) + "px)";
      };
    }

    function translate3DBuilder(attribute) {
      return function(dom,x,y) {
        dom.style[attribute] = 
        "translate3d(" + Math.floor(x) + "px," +
        Math.floor(y) + "px,0px)";
      };
    }

    function scaleBuilder(attribute) {
      return function(dom,scale) {
        dom.style[attribute + 'Origin'] = "0% 0%";
        dom.style[attribute] = "scale(" + scale + ")";
      };

    }

    function fallbackTranslate(dom,x,y) {
      dom.style.left = x + "px";
      dom.style.top = y + "px";
    }

    var has3d =  ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix());
    var dummyStyle = $("<div>")[0].style;
    var transformMethods = ['transform',
                            'webkitTransform',
                            'MozTransform',
                            'msTransform' ];

    for(var i=0;i<transformMethods.length;i++) {
      var transformName = transformMethods[i];
      if(!_.isUndefined(dummyStyle[transformName])) {
        if(has3d) {
          Q.positionDOM = translate3DBuilder(transformName);
        } else {
          Q.positionDOM = translateBuilder(transformName); 
        }
        Q.scaleDOM = scaleBuilder(transformName);
        break;
      }
    }

    Q.positionDOM = Q.positionDOM || fallbackTranslate;
    Q.scaleDOM = Q.scaleDOM || function(scale) {};
  })();


  (function() {
     function transitionBuilder(attribute,prefix){
      return function(dom,property,sec,easing) {
        easing = easing || "";
        if(property == 'transform') {
          property = prefix + property;
        }
        sec = sec || "1s";
        dom.style[attribute] = property + " " + sec + " " + easing;
      };
    }

    // Dummy method
    function fallbackTransition() { }

    var dummyStyle = $("<div>")[0].style;
    var transitionMethods = ['transition',
                            'webkitTransition',
                            'MozTransition',
                            'msTransition' ];
    var prefixNames = [ '', '-webkit-', '-moz-', '-ms-' ];

    for(var i=0;i<transitionMethods.length;i++) {
      var transitionName = transitionMethods[i];
      var prefixName = prefixNames[i];
      if(!_.isUndefined(dummyStyle[transitionName])) {
        Q.transitionDOM = transitionBuilder(transitionName,prefixName); 
        break;
      }
    }

    Q.transitionDOM = Q.transitionDOM || fallbackTransition;
  })();
  

  // Properties:
  //    x
  //    y
  //    z
  //    sheet or asset
  //    frame
  Q.DOMSprite = Q.Sprite.extend({
    init: function(props) {
      this._super(props);

      this.el = $("<div>").css({
        width: this.p.w,
        height: this.p.h,
        zIndex: this.p.z || 0,
        position: 'absolute'
      });

      this.dom = this.el[0];

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

    setImage: function() {
      var asset;

      if(this.sheet()) {
        asset = Q.asset(this.sheet().asset);
      } else {
        asset = this.asset();
      }

      if(asset) {
        this.dom.style.backgroundImage = "url(" + asset.src + ")";
      }
    },

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

      if(rp.frame !== p.frame) {
        if(p.sheet) {
          this.dom.style.backgroundPosition = (-this.sheet().fx(p.frame)) +"px " + (-this.sheet().fy(p.frame)) + "px";
        } else {
          this.dom.style.backgroundPosition = "0px 0px";
        }
        rp.frame = p.frame;
      }

      if(rp.x !== p.x || rp.y !== p.y) {
        Q.positionDOM(this.dom,p.x,p.y);
        rp.x = p.x;
        rp.y = p.y;
      } 
    },

    hide: function() {
      this.dom.style.display = 'none';
    },

    show: function() {
      this.dom.style.display = 'block';
    },

    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.el.remove();
    }
  });

  Q.DOMTileMap = Q.DOMSprite.extend({
    init:function(props) {
      var sheet = Q.sheet(props.sheet);

      this._super(_(props).extend({
        w: props.cols * sheet.tilew,
        h: props.rows * sheet.tileh,
        tilew: sheet.tilew,
        tileh: sheet.tileh
      }));

      this.shown = [];
      this.domTiles = [];
    },

    setImage: function() { },
  
    setup: function(tiles,hide) {
      this.tiles = tiles;

      for(var y=0,height=tiles.length;y<height;y++) {
        this.domTiles.push([]);
        this.shown.push([]);
        for(var x=0,width=tiles[0].length;x<width;x++) {
          var domTile = this._addTile(tiles[y][x]);
          if(hide) { domTile.style.visibility = 'hidden'; }
          this.shown.push(hide ? false : true);
          this.domTiles[y].push(domTile);
        }
      }
    },

    _addTile: function(frame) {
      var p = this.p;

      var div = document.createElement('div');
      div.style.width = p.tilew + "px";
      div.style.height = p.tileh + "px";
      div.style.styleFloat = div.style.cssFloat = 'left';

      this._setTile(div,frame);
      this.dom.appendChild(div);
      return div;
    },

    _setTile: function(dom,frame) {
      var asset = Q.asset(this.sheet().asset);
      dom.style.backgroundImage = "url(" + asset.src + ")";
      dom.style.backgroundPosition = (-this.sheet().fx(frame)) +"px " + (-this.sheet().fy(frame)) + "px";
    },

    validTile: function(x,y) {
      return (y >= 0 && y < this.p.rows) && (x >= 0 && x < this.p.cols);
    },

    get: function(x,y) { return this.validTile(x,y) ? this.tiles[y][x] : null; },
    getDom: function(x,y) { return this.validTile(x,y) ? this.domTiles[y][x] : null; },

    set: function(x,y,frame) {
      var domTile = this.getDom(x,y);
      if(!domTile) return;
      this.tiles[y][x] = frame;
      this._setFile(domTile,frame);
    },

    show: function(x,y) {
      var domTile = this.getDom(x,y);
      if(!domTile) return;
      if(this.shown[y][x]) return;

      domTile.style.visibility = 'visible';
      this.shown[y][x] = true;
    },

    hide: function(x,y) {
      var domTile = this.getDom(x,y);
      if(!domTile) return;
      if(!this.shown[y][x]) return;

      domTile.style.visibility = 'hidden';
      this.shown[y][x] = false;
    }

  });


  Q.setupDOM = function(id,options) {
    options = options || {};
    id = id || "quintus";
    Q.el = $(_.isString(id) ? "#" + id : id);

    if(Q.el.length === 0) {
      Q.el = $("<div>")
                .attr('id',id)
                .css({width: 320, height:420 })
                .appendTo("body");
    }

    if(options.maximize) {
      var w = $(window).width();
      var h = $(window).height();

      Q.el.css({width:w,height:h});
    }


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


    Q.el.css({ position:'relative', overflow: 'hidden' });

    Q.width = Q.el.width();
    Q.height = Q.el.height();

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

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

    return Q;
  };
      

  if(Q.Stage) {
    // Add in DOMStage support 
    Q.DOMStage = Q.Stage.extend({

      init: function(scene) {
        this.el = $("<div>").css({
          top:0,
          position:'relative'
        }).appendTo(Q.el);
        this.dom = this.el[0];
        this.wrapper = this.el.wrap('<div>').parent().css({
          position:'absolute',
          left:0,
          top:0
        });

        this.scale = 1;
        this.wrapper_dom = this.wrapper[0];
        this._super(scene);
      },

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

      destroy: function() {
        this.wrapper.remove();
        this._super();
      },

      rescale: function(scale) {
        this.scale = scale;
        Q.scaleDOM(this.wrapper_dom,scale);
      },

      centerOn: function(x,y) {
        this.x = Q.width/2/this.scale -  x;
        this.y = Q.height/2/this.scale - y;
        Q.positionDOM(this.dom,this.x,this.y);
      }

    });
  }

  Q.domOnly = function() {
    Q.Stage = Q.DOMStage;
    Q.setup = Q.setupDOM;
    Q.Sprite = Q.DOMSprite;
    return Q;
  };
  

};