MX.Youtube = MX.Object3D.extend({

  init: function (ops) {
  
  	this.type = "Youtube"

		this.media = ops.media
		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
		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("video")
		
		this.load()
  },

  load: function (ops) {
  	var uid = 'player-' + Uid()
  	var preload = document.createElement("div")
  	preload.id = uid
  	preload.style.backgroundImage = "url(" + this.media.thumbnail + ")"
  	preload.style.width = this.media.width + "px"
  	preload.style.height = this.media.height + "px"
  	preload.style.pointerEvents = "none"
  	preload.className = "preload"
  	this.el.appendChild(preload)
  	
		this.player = new YT.Player(uid, {
			videoId: this.media.token,
			width: this.width,
			height: this.height,
			events: {
				onReady: $.proxy(this.ready, this),
				onError: $.proxy(this.error, this),
			}
		})
  },
  
  ready: function(){
  	console.log("youtube ready")
  },
  
  error: function(err){
  	console.log("youtube error", err)
  },
  
  play: function(){
  	this.player.playVideo()
  },
  
  pause: function(){
		this.player.pauseVideo()
  },
  
  seek: function(n){
  },
  
  duration: function(){
  }
  
})

window.onYouTubePlayerAPIReady = function(){
	console.log("youtube ready")
}