var MediaEditor = FormView.extend({
	el: "#mediaEditor",
		
	events: {
		"click .play": "togglePlaying",
	},

	initialize: function(opt){
		this.parent = opt.parent
		this.__super__.initialize.call(this)
		
		this.$name = this.$("[name=name]")
		this.$description = this.$("[name=description]")
		this.$autoplay = this.$("[name=autoplay]")

		// image fields
		this.$widthDimension = this.$("[name=width]")
		this.$heightDimension = this.$("[name=height]")
		this.$units = this.$("[name=units]")
		
		// video fields
		this.$playButton = this.$(".play")
		this.$loop = this.$("[name=loop]")
		this.$mute = this.$("[name=mute]")
		this.$keyframe = this.$("[name=keyframe]")
	},
	
	toggle: function(state) {
    this.$el.toggleClass("active", state);
	},
	
	togglePlaying: function(){
		var state = this.scenery.toggle()
		this.$playButton.toggleClass("playing", ! state)
	},
	
	pick: function(scenery) {
		if (this.scenery) {
			this.unbind()
		}
	
		this.bind(scenery)
		this.$el.addClass("active")
		
		var media = scenery.media
		
		this.$name.val(media.title)
		this.$description.val(media.description)
		
		switch (media.type) {
			case "image":
				this.$(".image").show()
				this.$(".video").hide()
				/*
				this.$widthDimension
				this.$heightDimension
				this.$units
				*/
				
				break

			case "youtube":
			case "vimeo":
			case "video":
				this.$(".video").show()
				this.$(".image").hide()
				
				/*
				this.$loop
				this.$mute
				this.$keyframe
				*/
				
				
				break
		}
	},
	
	bind: function(scenery){
		this.scenery = scenery
	},
	
	unbind: function(){
		this.scenery = null
	},

})