MX.Text = MX.Object3D.extend({

  init: function (ops) {

		this.type = "Text"

  	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

    this.scale = ops.scale || 1
    this.width = ops.media.width
    this.height = ops.media.height
    this.x = ops.x || 0
    this.y = ops.y || 0
    this.z = ops.z || 0
    this.rotationX = ops.rotationX || 0
    this.rotationY = ops.rotationY || 0
    this.rotationZ = ops.rotationZ || 0
		
		ops.className && this.el.classList.add(ops.className)
		this.backface && this.el.classList.add("backface-visible")
		this.el.classList.add("mx-text")
		this.el.classList.add("mx-scenery")
		
		this.inner = document.createElement("div")
		this.inner.classList.add("inner")
		this.el.appendChild(this.inner)
		
		this.load(ops)
  },
  
  load: function(ops){
    var media = ops.media
    if (media.font) this.setFont(media.font)

    this.setText( media.description )
  },
  
  setFont: function(font){
    if (! font.color || font.color[0] == "#") { font.color = [0,0,0] }

    this.inner.style.fontFamily = "'" + font.family + "',sans-serif"
    this.el.style.fontSize = (2 * font.size / devicePixelRatio) + "pt"
    this.el.style.textAlign = font.align
    this.el.style.color = rgb_string(font.color)
  },
  
  setText: function(text){
    this.inner.innerHTML = marked( text || "" )
  },

})