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

	events: {
		"keydown": 'stopPropagation',
		"change [name=x]": 'changeX',
		"change [name=y]": 'changeY',
		"change [name=width]": 'changeWidth',
		"change [name=depth]": 'changeDepth',
		"change [name=height]": 'changeHeight',
		"change [name=units]": 'changeUnits',
		"change [name=resolution]": 'changeResolution',
		"change [name=viewHeight]": 'changeViewHeight',
	},
	
	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")
		app.on("builder-pick-room", this.pick.bind(this))
		app.on("builder-destroy-room", this.destroy.bind(this))
	},
	
	load: function(data){
		this.$viewHeight.unitVal( data.viewHeight || app.defaults.viewHeight )
		this.$units.val( "ft" )
		this.$unitName.html( "ft" )
	},

	toggle: function(state){
		this.$el.toggleClass("active", state)
	},
	
	show: function(){	
		this.toggle(true)
	},
	
	hide: function(){	
		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 )
	},

	destroy: function(room){
		this.room = null
		this.hide()
	},

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

})

$.fn.resetUnitVal = function(){
	this.each(function(){
		var n = $(this).data("px")
		$(this).unitVal(n)
	});
}

$.fn.unitVal = function(n){
	var s
	if (typeof n === "undefined") {
		s = $(this).val()
		n = stringToMeasurement( s )
		if (! n || isNaN(n)) {
			n = $(this).data("px")
		}
	}
	s = measurementToString( n )
	$(this).val( s ).data("px", n)
	return n
}

function measurementToString( n ) {
	var s, ft, inch
	switch (app.units) {
		case 'm':
			s = round(n/36 * 0.3048 * 100) / 100 + " m"
			break
		case 'ft':
			ft = floor(n / 36)
			inch = abs(round((n % 36) / 3))
			s = ft + "'"
			if (inch > 0) {
				s += " " + inch + '"'
			}
			break
		case 'px':
		default:
			s = round(n) + " px"
			break
	}
	return s
}
function stringToMeasurement( s ) {
	var ft, inch, ft_in, type
	if (! s.match(/[0-9]/)) {
		return NaN
	}
	if (s.indexOf("'") !== -1 || s.indexOf('"') !== -1 || s.indexOf('ft') !== -1) {
		ft_in = s.match(/[0-9.]+/g)
		if (ft_in.length >= 2) {
			ft = parseFloat( ft_in[0] )
			inch = parseFloat( ft_in[1] )
		}
		else if (ft_in.length == 1) {
			if (s.indexOf('"') !== -1) {
				ft = 0
				inch = parseFloat( ft_in[0] )
			}
			else {
				ft = parseFloat( ft_in[0] )
				inch = 0
			}
		}
		else {
			ft = inch = 0
		}
		n = ft * 36 + inch * 3
	}
	else if (s.indexOf("m") !== -1) {
		n = parseFloat(s.match(/[0-9.]+/)) * 36 / 0.3048
	}
	else if (s.indexOf("px") !== -1) {
		n = parseFloat(s.match(/[0-9.]+/))
	}
	else {
		n = abs( stringToMeasurement( s + app.units ) )
	}
	if (s.indexOf('-') !== -1) {
		n *= -1
	}
	return n
}