var MediaPlayer = FormView.extend({
	el: "#mediaPlayer",
		
	events: {
		"click .playButton": "togglePlaying",
		"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.$(".playButton")
	},
	
	toggle: function(state) {
    this.$el.toggleClass("active", state);
	},
	
	togglePlaying: function(){
		var state = this.scenery.toggle()
		this.$playButton.toggleClass("playing", ! state)
	},
	
	pick: function(scenery) {
		var media = scenery.media

		if (this.scenery) {
			this.unbind()
		}
		console.log(media)
		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("playing", ! this.scenery.paused())

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

})