var BuilderInfo = View.extend({
	el: "#builderInfo",

	events: {
	  "mousedown": "stopPropagation",
		"keydown": 'stopPropagation',
		"change [name=x]": 'changeX',
		"change [name=y]": 'changeY',
		"change [name=width]": 'changeWidth',
		"change [name=depth]": 'changeDepth',
		"change [name=height]": 'changeHeight',
		"keydown [name=width]": 'enterWidth',
		"keydown [name=depth]": 'enterDepth',
		"keydown [name=height]": 'enterHeight',
		"change [name=units]": 'changeUnits',
		"change [name=viewHeight]": 'changeViewHeight',
		"click [data-role=destroy-room]": 'destroy',
	},
	
	initialize: function(opt){
		this.parent = opt.parent
		this.$x = this.$("[name=x]")
		this.$y = this.$("[name=y]")
		this.$width = this.$("[name=width]")
		this.$depth = this.$("[name=depth]")
		this.$height = this.$("[name=height]")
		this.$units = this.$("[name=units]")
		this.$viewHeight = this.$("[name=viewHeight]")
		this.$unitName = this.$(".unitName")
		this.$noSelection = this.$(".no-selection")
		this.$settings = this.$(".setting")
		app.on("builder-pick-room", this.pick.bind(this))
		app.on("builder-destroy-room", this.hide.bind(this))
		app.on("builder-pick-nothing", this.deselect.bind(this))
	},
	
	load: function(data){
		this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight )
		this.$units.val( "ft" )
		this.$unitName.html( "ft" )
	},

	toggle: function(state){
    this.$settings.toggle( !! this.room )
    this.$noSelection.toggle( ! this.room )
		this.$el.toggleClass("active", state)
	},
	
	show: function(){	
		this.toggle(true)
	},
	
	hide: function(){
	  this.room = null
		this.toggle(false)
	},

	room: null,
	
	pick: function(room){
		this.room = room
		this.$width.unitVal( room.rect.x.length() )
		this.$depth.unitVal( room.rect.y.length() )
		this.$height.unitVal( room.height )
		this.$x.unitVal( room.rect.x.a )
		this.$y.unitVal( room.rect.y.a )
	  this.show()
	},
	
	deselect: function(){
	  this.room = null
	  this.toggle(true)
	},

	destroy: function(){
    UndoStack.push({
      type: "destroy-room",
      undo: this.room.copy(),
      redo: { id: this.room.id },
    })

    Rooms.remove(this.room)
    app.tube("builder-destroy-room", this.room)

		this.room = null
		this.hide()
	},

	enterWidth: function(e){
	  if (e.keyCode == 13) this.changeWidth(e)
	},
	changeWidth: function(e){
		e.stopPropagation()
		this.room.rect.x.setLength( this.$width.unitVal() )
    Rooms.rebuild()
	},
	enterDepth: function(e){
	  if (e.keyCode == 13) this.changeDepth(e)
	},
	changeDepth: function(e){
		e.stopPropagation()
		this.room.rect.y.setLength( this.$depth.unitVal() )
    Rooms.rebuild()
	},
	enterHeight: function(e){
	  if (e.keyCode == 13) this.changeHeight(e)
	},
	changeHeight: function(e){
		e.stopPropagation()
		this.room.height = this.$height.unitVal()
    Rooms.rebuild()
	},
	changeX: function(e){
		e.stopPropagation()
		this.room.rect.x.setPosition( this.$x.unitVal() )
    Rooms.rebuild()
	},
	changeY: function(e){
		e.stopPropagation()
		this.room.rect.y.setPosition( this.$y.unitVal() )
    Rooms.rebuild()
	},
	changeUnits: function(){
		app.units = this.$units.val()
		this.$('.units').resetUnitVal()
	},
	changeViewHeight: function(){
 		window.viewHeight = this.$viewHeight.unitVal( )
	},

})