var MediaEditor = FormView.extend({
	el: "#mediaEditor",
		
	events: {
		"keydown": 'taint',
		"focus [name]": "clearMinotaur",
		"click [data-role=play-media]": "togglePaused",
		"mousedown [name=keyframe]": "stopPropagation",
		"mousedown": "stopPropagation",
		"change [name=keyframe]": "seek",
		"change [name=autoplay]": "setAutoplay",
		"change [name=loop]": "setLoop",
		"change [name=mute]": "setMute",
		"change [name=width]": 'changeWidth',
		"change [name=height]": 'changeHeight',
		"change [name=units]": 'changeUnits',
		"click [data-role=destroy-media]": "destroy",
	},
	
	initialize: function(opt){
		this.parent = opt.parent
		this.__super__.initialize.call(this)
		
		this.$name = this.$("[name=name]")
		this.$description = this.$("[name=description]")

		// image fields
		this.$width = this.$("[name=width]")
		this.$height = this.$("[name=height]")
		this.$units = this.$("[name=units]")
		
		// video fields
		this.$playButton = this.$("[data-role=play-media]")
		this.$autoplay = this.$("[name=autoplay]")
		this.$loop = this.$("[name=loop]")
		this.$mute = this.$("[name=mute]")
		this.$keyframe = this.$("[name=keyframe]")
	},
	
	toggle: function(state) {
    if (state) {
      this.parent.settings.toggle()
    }
    this.$el.toggleClass("active", state);
	},
	
	togglePaused: function(state){
		var state = this.scenery.toggle(state)
		this.$playButton.toggleClass("paused", ! state)
	},
	
	pick: function(scenery) {
		if (this.scenery) {
			this.unbind()
		}

		this.bind(scenery)
		this.$el.addClass("active")
		
//     app.controller.toolbar.resetMode()
    app.controller.toolbar.resetControls()
		Scenery.resize.show(scenery)
		Scenery.hovering = true
		
		var media = scenery.media
		
		console.log(media)
		
		this.$name.val(media.title || filenameFromUrl(media.url) )
		this.$description.val(media.description)
		this.setDimensions()
		this.$units.val( "ft" )
		
		switch (media.type) {
			case "image":
				this.$(".image").show()
				this.$(".video").hide()
				break

			case "youtube":
			case "vimeo":
			case "video":
				this.$(".video").show()
				this.$(".image").hide()
				
				this.$playButton.toggleClass("paused", ! this.scenery.paused())
				this.$autoplay.prop('checked', !! media.autoplay)
				this.$loop.prop('checked', !! media.loop)
				this.$mute.prop('checked', !! media.mute)
				this.$keyframe.val( Number(media.keyframe || 0) )
				break
		}
	},

	hide: function(scenery){
		if (this.scenery) {
			this.unbind()
		}
		this.toggle(false)
	},
	
	seek: function(){
		var n = parseFloat( this.$keyframe.val() )
		this.scenery.seek(n)
		this.tainted = true
		
		this.scenery.media.keyframe = n
	},
	setAutoplay: function(){
		var checked = this.$autoplay.prop('checked')
		this.scenery.media.autoplay = checked
		this.tainted = true
		if (checked && this.scenery.paused()) {
			this.togglePaused()
		}
	},
	setLoop: function(){
		var checked = this.$loop.prop('checked')
		this.scenery.setLoop(checked)
		this.tainted = true
	},
	setMute: function(){
		var checked = this.$mute.prop('checked')
		this.scenery.media.mute = checked
		this.scenery.mute(checked)
		this.tainted = true
	},

	setDimensions: function(){
	  if (! this.scenery) return
		this.$width.unitVal( Number(this.scenery.naturalDimensions.a * this.scenery.scale) || "" )
		this.$height.unitVal( Number(this.scenery.naturalDimensions.b * this.scenery.scale) || "" )
		this.tainted = true
	},
	changeWidth: function(e){
		e.stopPropagation()
		this.scenery.set_scale( this.$width.unitVal() / this.scenery.naturalDimensions.a )
		this.setDimensions()
	},
	changeHeight: function(e){
		e.stopPropagation()
		this.scenery.set_scale( this.$height.unitVal() / this.scenery.naturalDimensions.b )
		this.setDimensions()
	},
	changeUnits: function(){
		app.units = this.$units.val()
		this.$('.units').resetUnitVal()
	},
	
	taint: function(e){
	  e.stopPropagation()
		this.tainted = true
	},

	bind: function(scenery){
		this.scenery = scenery
		this.scenery.mx.bound = true
		this.scenery.mx.el.classList.add("picked")
	},
	
	unbind: function(){
	  if (this.scenery) {
	    if (this.tainted) {
        this.scenery.media.title = this.$name.val()
        this.scenery.media.description = this.$description.val()
        Minotaur.watch( app.router.editorView.settings )
      }
	    if (this.scenery.mx) {
        this.scenery.mx.bound = false
        this.scenery.mx.el.classList.remove("picked")
      }
    }
    this.tainted = false
    this.scenery = null
	},
	
	destroy: function(){
    var scenery = this.scenery
    this.hide()
    Scenery.remove(scenery.id)
    Scenery.resize.hide()
	},

})