var MediaPlayer = FormView.extend({
	el: "#mediaPlayer",
		
	events: {
		"click [data-role=play-media]": "togglePaused",
		"click [data-role=mute-media]": "toggleMuted",
		"mousedown": "stopPropagation",
	},
	
	initialize: function(opt){
		this.parent = opt.parent
		this.__super__.initialize.call(this)
		
		this.$name = this.$(".name")
		this.$description = this.$(".description")

		// image fields
		this.$dimensions = this.$(".dimensions")
		
		// video fields
		this.$playButton = this.$("[data-role=play-media]")
		this.$muteButton = this.$("[data-role=mute-media]")
	},
	
	toggle: function(state) {
    this.$el.toggleClass("active", state);
	},
	
	togglePaused: function(state){
		var state = this.scenery.toggle(state)
		this.$playButton.toggleClass("paused", ! state)
	},
	
	toggleMuted: function(state){
		var state = this.scenery.toggleMuted(state)
		this.$muteButton.toggleClass("muted", state)
	},
	
	pick: function(scenery) {
		var media = scenery.media

		if (this.scenery) {
			this.unbind()
		}
		if (media.type == "image") {
			if ( ! media.description && (! media.title || media.title == filenameFromUrl(media.url)) ) {
				this.hide()
				return false
			}
		}
		else if (media.type == "text") {
		  return false
		}

		this.bind(scenery)
		this.$el.addClass("active")
		
		this.$name.html( sanitize(media.title) )
		this.$description.html( marked(media.description) )
		
		switch (media.type) {
			case "image":
				this.$(".video").hide()
				this.$(".audio").hide()
				this.$(".image").show()

// 				this.$widthDimension.html( Number(media.widthDimension) || "" )
// 				this.$heightDimension.html( Number(media.heightDimension) || "" )
// 				this.$units.html( media.units || "cm" )
				
				break

			case "youtube":
			case "vimeo":
			case "video":
				this.$(".image").hide()
				this.$(".audio").hide()
				this.$(".video").show()

				this.$playButton.toggleClass("paused", ! this.scenery.paused())
				this.$muteButton.toggleClass("muted", this.scenery.muted())

				break
			
			case "soundcloud":
				this.$(".image").hide()
				this.$(".video").hide()
				this.$(".audio").show()

				this.$playButton.toggleClass("paused", ! this.scenery.paused())
			  break
		}
		return true
	},
	
	hide: function(scenery){
		if (this.scenery) {
			this.unbind()
		}
		this.toggle(false)
	},
	
	bind: function(scenery){
		this.scenery = scenery
		this.scenery.mx.bound = true
	},
	
	unbind: function(){
		this.scenery.mx.bound = false
		this.scenery = null
	},

})