var BlueprintInfo = View.extend({
	el: "#blueprintInfo",

	events: {
	  "mousedown": "stopPropagation",
		"keydown": 'stopPropagation',
		"keydown [name=height]": 'enterHeight',
		"change [name=units]": 'changeUnits',
		"keydown [name=viewHeight]": 'enterViewHeight',
		"change [name=viewHeight]": 'changeViewHeight',
		"click [data-role=destroy-room]": 'destroy',
	},
	
	initialize: function(opt){
		this.parent = opt.parent
		this.$units = this.$("[name=units]")
		this.$viewHeight = this.$("[name=viewHeight]")
		this.$unitName = this.$(".unitName")
	},
	
	load: function(data){
		this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight )
		this.$units.val( data.units )
		this.$unitName.html( data.units )
	},

	toggle: function(state){
		this.$el.toggleClass("active", state)
    this.$viewHeight.unitVal( window.viewHeight )
	},
	
	show: function(){	
		this.toggle(true)
	},
	
	hide: function(){
	  this.room = null
		this.toggle(false)
	},

	room: null,
	
	pick: function(room){
	},
	
	deselect: function(){
	  this.room = null
	  this.toggle(true)
	},

	enterHeight: function(e){
	  if (e.keyCode == 13) this.changeHeight(e)
	},
	changeHeight: function(e){
		e.stopPropagation()
		var height = this.room.height = this.$height.unitVal()
		if (window.heightIsGlobal) {
		  Rooms.forEach(function(room){
		    room.height = height
		  })
		}
    Rooms.rebuild()
	},
	changeUnits: function(){
		app.units = this.$units.val()
		this.$('.units').resetUnitVal()
	},
	enterViewHeight: function(e){
	  if (e.keyCode == 13) this.changeViewHeight(e)
	},
  changeViewHeight: function(){
 		window.viewHeight = this.$viewHeight.unitVal()
	}

})