MX.Vimeo = MX.Object3D.extend({

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

		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.el.classList.add("mx-scenery")
  	this.paused = !! this.media.autoplay
		this.muted = app.muted || !! this.media.mute
		this.started = false
		
		this.load()
  },

  load: function (ops) {
  	var uid = 'player-' + Uid ()
  	var loop = this.media.loop ? 'loop=1' : ""
  	var preload = document.createElement("iframe")
  	preload.id = uid
  	preload.setAttribute("src", "//player.vimeo.com/video/" + this.media.token + "?api=1&badge=0&controls=0branding=0&byline=0&portrait=0&title=0&" + loop + "&player_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.border = "0"
  	preload.style.pointerEvents = "none"
  	preload.className = "preload"
  	this.el.appendChild(preload)
  	this.player = $f(preload)

  	this.player.addEvent('ready', this.ready.bind(this))
  },
  
  ready: function(){
  	console.log("vimeo ready")
		this.started = true

  	// wait until ready before binding events. other events: play, pause
  	this.player.addEvent('play', this.onPlay.bind(this))
  	this.player.addEvent('pause', this.onPause.bind(this))
  	this.player.addEvent('finish', this.finished.bind(this))

  	// this is async on vimeo so call it asap
  	this.player.api('getDuration', function(n){
  		console.log("vimeo duration", n)
  		this.player.duration = n
  	}.bind(this))

		if (this.media.mute) {
			this.mute()
		}
		
		this.seek( this.media.keyframe || 0 )

		if (this.media.autoplay) {
			this.play()
		}
		else {
			this.pause()
		}
  },
  
  error: function(err){
  	console.log("vimeo error", err)
  },
  
  play: function(){
  	this.paused = false
  	this.player.api('play')
  },
  
  pause: function(){
  	this.paused = true
  	this.player.api('pause')
  },
  
  seek: function(n){
  	// defer seek until we have duration
  	if (! this.duration()) {
  		setTimeout(function(){
  			this.seek(n)
  		}.bind(this), 300)
  		return
  	}
  	
  	if (! this.started || n === 0) {
	  	return
  	}
  	
		if (n < 1) {
			n = n * this.duration()
		}
		this.player.api('seekTo', max(0, n-1))
		if (this.paused) {
			this.paused = false
			this.play()
			this.pause()
			setTimeout(function(){
				this.pause()
			}.bind(this), 100)
		}
  },
  
  duration: function(){
		return this.player.duration
  },

  mute: function(){
		this.player.api('setVolume', 0.0)
  	this.muted = true
  },
  
  unmute: function(){
		this.player.api('setVolume', 0.8)
  	this.muted = false
  },
  
  setLoop: function(state){
		this.media.loop = state
		this.player.api('setLoop', state)
  },
  
  onPlay: function(){
  	if (this.paused) {
  		this.pause()
  	}
  },
  
  onPause: function(){
  	if (! this.paused) {
  		this.play()
  	}
  },
  
  finished: function(){
//   	if (this.media.loop) {
//   		this.seek(0)
//   		this.play()
//   	}
//   	else if (this.bound) {
  	if (! this.media.loop && this.bound) {
  		$(".playButton").removeClass('playing')
  	}
  }
  
})