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.title || ! media.title.length) && (! media.description || ! media.description.length)) {
				this.hide()
				return
			}
		}

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

// 				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.$(".video").show()
				this.$(".image").hide()

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

				break
		}
	},
	
	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
	},

})