MX.Image = MX.Object3D.extend({
  init: function (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'
		
		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.ops.onload && layer.ops.onload( image )
      layer.update()
    }
    image.src = ops.src;
    if (image.complete) setTimeout(image.onload)
  },

})