var VideoView = View.extend({

  events: {
  },

  initialize: function(media){
    this.media = media
    this.mx
    this.build(media)
  },

  build: function(media){
    var mxType
    switch (media.type) {
      case 'video':
        mxType = MX.Video
        break
      case 'vimeo':
        mxType = MX.Vimeo
        break
      case 'youtube':
        mxType = MX.Youtube
        break
    }
    if (app.muted) {
      media.mute = true
    }
    this.mx = new mxType({
      media: media,
      backface: false,
    })
    this.el.innerHTML = ""
    this.el.appendChild(this.mx.el)
    
    this.mx.load()
  },
  
  play: function(){
    this.mx.play()
  },
  
  pause: function(){
    this.mx.pause()
  },
  
  toggle: function(shouldPause){
    if (typeof shouldPause !== "boolean") {
      shouldPause = ! this.mx.paused
    }
    shouldPause ? this.mx.pause() : this.mx.play()
    return shouldPause
  },
  
  toggleMuted: function(shouldMute){
    if (typeof shouldMute !== "boolean") {
      shouldMute = ! this.mx.muted
    }
    shouldMute ? this.mx.mute() : this.mx.unmute()
    return shouldMute
  },
  
  paused: function(){
    return this.mx.paused
  },
  
  muted: function(){
    return this.mx.muted
  },
  
  seek: function(n){
    this.mx.seek(n)
  },
  
  setLoop: function(shouldLoop){
    this.mx.setLoop(shouldLoop)
  },
  
  mute: function(muted){
    if (muted) {
      this.mx.mute()
    }
    else {
      this.mx.unmute()
    }
  },

  unmute: function(){
    this.mx.unmute()
  },
  
  setVolume: function(n){
    this.mx.setVolume(n)
  }

})