MX.Grid = MX.Object3D.extend({
  init: function (ops) {
  
  	this.type = "Grid"

  	var ops = this.ops = defaults(ops, {
  	  x: 0, 
  	  y: 0,
  	  z: 0,
  	  space: 20,
  	  cells: 20,
  	})

    ops.side = ops.space * ops.cells
    
    var ctx, canvas = document.createElement("canvas")
    
    this.el = canvas
    this.width = this.height = canvas.width = canvas.height = ops.side + 4

    ctx = canvas.getContext('2d')

		this.x = ops.x || 0
		this.y = ops.y || 0
		this.z = ops.z || 0
		this.rotationX = PI/2
		this.scale = ops.scale || 1
		this.backface = ops.backface || false
			
		ops.className && this.el.classList.add(ops.className)
		this.backface && this.el.classList.add("backface-visible")
		this.el.classList.add("mx-grid")
		
		this.draw(ctx)
  },
  
  draw: function(ctx, recenter){
    ctx = ctx || this.ctx

    if (recenter) {
      ctx.save()
      ctx.translate( -grid.width/2, -grid.height/2 )
    }
    
    var cells = this.ops.cells,
        space = this.ops.space,
        side = this.ops.side

    ctx.strokeStyle = "#444"
    ctx.lineWidth = 1
    ctx.beginPath()
    ctx.translate(1,1)
    for (var i = 0; i <= cells; i++) {
      ctx.moveTo(i*space, 0)
      ctx.lineTo(i*space, side)
      ctx.moveTo(0, i*space)
      ctx.lineTo(side, i*space)
    }
    ctx.closePath()
    ctx.stroke()

    if (recenter) {
      ctx.restore()
    }

  },

})