var MediaEditor = FormView.extend({
	el: "#mediaEditor",
		
	events: {
		"keydown": 'stopPropagation',
		"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) {
    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")
		
		var media = scenery.media
		
		this.$name.val(media.title)
		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.scenery.media.keyframe = n
	},
	setAutoplay: function(){
		var checked = this.$autoplay.prop('checked')
		this.scenery.media.autoplay = checked
		if (checked && this.scenery.paused()) {
			this.togglePaused()
		}
	},
	setLoop: function(){
		var checked = this.$loop.prop('checked')
		this.scenery.setLoop(checked)
	},
	setMute: function(){
		var checked = this.$mute.prop('checked')
		this.scenery.media.mute = checked
		this.scenery.mute(checked)
	},

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

	bind: function(scenery){
		this.scenery = scenery
		this.scenery.mx.bound = true
	},
	
	unbind: function(){
	  if (this.scenery && this.scenery.mx) {
      this.scenery.mx.bound = false
    }
    this.scenery = null
	},
	
	destroy: function(){
		ConfirmModal.confirm("Are you sure you want delete to this media?", function(){
			var scenery = this.scenery
			this.hide()
			Scenery.remove(scenery.id)
		}.bind(this))
	},

})