var SculptureEditor = FormView.extend({
	el: "#sculptureEditor",
		
	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=billboard]": "setBillboard",
		"change [name=outline]": "setOutline",
		"change [name=outlineColor]": "setOutlineColor",
		"change [name=loop]": "setLoop",
		"change [name=mute]": "setMute",
		"change [name=width]": 'changeWidth',
		"change [name=height]": 'changeHeight',
		"change [name=depth]": 'changeDepth',
		"change [name=units]": 'changeUnits',
		"click [data-role=destroy-sculpture]": "destroy",
	},
	
	initialize: function(opt){
		this.parent = opt.parent
		this.__super__.initialize.call(this)
		
		this.$name = this.$("[name=name]")
		this.$description = this.$("[name=description]")

		this.$billboard = this.$("[name=billboard]")
		this.$outline = this.$("[name=outline]")
		this.$outlineColor = this.$("[name=outlineColor]")

		// image fields
		this.$width = this.$("[name=width]")
		this.$height = this.$("[name=height]")
		this.$depth = this.$("[name=depth]")
		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.sculpture.toggle(state)
		this.$playButton.toggleClass("paused", ! state)
	},
	
	pick: function(sculpture) {
		if (this.sculpture && sculpture !== this.sculpture) {
			this.unbind()
		}

		this.bind(sculpture)
		this.$el.addClass("active")
		
//     app.controller.toolbar.resetMode()
    app.controller.toolbar.resetControls()
		Sculpture.resize.show(sculpture)
		Sculpture.hovering = true
		
		var media = sculpture.media
		
		// console.log(media)
		this.$name.val(media.title || "") // || filenameFromUrl(media.url) )
		this.$description.val(media.description || "")
		this.setDimensions()
		this.$units.val( "ft" )

		this.$outline.prop( 'checked', !! sculpture.outline )
		this.$outlineColor.val( sculpture.outlineColor || "#000000" )
		this.$billboard.prop( 'checked', !! sculpture.billboard )
		
		switch (media.type) {
			case "image":
				this.$(".video").hide()
				this.$(".audio").hide()
				this.$(".image").show()
				break

			case "youtube":
			case "vimeo":
			case "video":
				this.$(".image").hide()
				this.$(".audio").hide()
				this.$(".video").show()
				
				this.$playButton.toggleClass("paused", ! this.sculpture.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
			
			case "soundcloud":
				this.$(".image").hide()
				this.$(".video").hide()
				this.$(".audio").show()
				this.$playButton.toggleClass("paused", ! this.sculpture.paused())
				this.$autoplay.prop('checked', !! media.autoplay)
				this.$loop.prop('checked', !! media.loop)
			  break
		}
	},

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

	setBillboard: function(){
		var checked = this.$billboard.prop('checked')
		this.sculpture.setBillboard(checked)
		this.tainted = true
	},
	setOutline: function(){
		var checked = this.$outline.prop('checked')
		this.sculpture.setOutline(checked)
		this.tainted = true
	},
	setOutlineColor: function(){
		var color = this.$outlineColor.val()
		this.sculpture.setOutlineColor(color)
		this.tainted = true
	},

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

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

    sculpture.remove()
    
    this.tainted = false
    this.sculpture = null
	},

})