MX.Image = MX.Object3D.extend({
  init: function (ops) {
    ops = ops || {}
    
  	this.type = "Image"
		this.media = ops.media
    this.width = 0
    this.height = 0
		this.x = ops.x || 0
		this.y = ops.y || 0
		this.z = ops.z || 0
		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("image")
		this.el.classList.add("mx-scenery")

		this.el.style.backgroundRepeat = 'no-repeat'
		
		ops.src && this.load(ops)
  },

  load: function(ops){
    var layer = this
  	layer.ops = defaults(ops, layer.ops)

    var image = new Image()
    image.onload = function(){
    	if (! layer.ops) return
      layer.scale = layer.ops.scale || 1
      layer.width = layer.ops.width || image.naturalWidth
      layer.height = layer.ops.height || image.naturalHeight
      layer.x = layer.ops.x || 0
      layer.y = layer.ops.y || 0
      layer.z = layer.ops.z || 0
      layer.rotationX = layer.ops.rotationX || 0
      layer.rotationY = layer.ops.rotationY || 0
      layer.rotationZ = layer.ops.rotationZ || 0
      layer.el.style.backgroundImage = "url(" + image.src + ")"
      layer.el.classList.add('image')
      layer.dirty = true
      layer.update()
      layer.ops.onload
      
      if (ops.keepImage) {
        layer.image = image
      }
    }

    if (ops.src) {
      image.src = ops.src
    }
    else if (ops.media) {
      image.src = ops.media.url
    }
    else if (ops.url) {
      image.src = ops.url
    }
  },

  draw: function(ctx, recenter){
    if (! this.image) { return }
    
    if (recenter) {
      ctx.save()
      ctx.scale(-1, 1)
      ctx.translate( -this.width/2 * this.scale, -this.height/2 * this.scale )
    }

    ctx.drawImage(this.image,
      0, 0, this.image.naturalWidth, this.image.naturalHeight,
      0, 0, this.image.width * this.scale * devicePixelRatio, this.image.height * this.scale * devicePixelRatio
    )

    if (recenter) {
      ctx.restore()
    }
  },

})