var BlueprintScaler = ModalFormView.extend({
	el: ".blueprintScaler",
	
	action: "/api/media/scale",
	
	events: {
    "change [name=blueprint-dimensions]": "changeDimensions",
    "change [name=blueprint-units]": "changeUnits",
    "click .uploadNewBlueprint": "showBlueprintUpload",
	},
	
	initialize: function(opt){
	  this.parent = opt.parent
	  
    this.$blueprintMap = this.$("#blueprintMap")
    this.$blueprintDimensionsRapper = this.$("#blueprintDimensions")
    this.$dimensions = this.$("[name=blueprint-dimensions]")
    this.$pixels = this.$("[name=blueprint-pixels]")
    this.$units = this.$("[name=blueprint-units]")
    this.$save = this.$("#saveBlueprint")

    this.map = map = new Map ({
      type: "ortho",
      el: this.$blueprintMap.get(0),
      width: window.innerWidth,
      height: window.innerHeight,
      zoom: -2,
      zoom_min: -6.2,
      zoom_max: 1,
    })
    this.lineTool = new LineTool
    map.ui.add_tool("line", this.lineTool)
    map.ui.set_tool("line")
    
    scene = scene || { camera: { x: 0, y: 0, z: 0 } }
    
    this.floorplan = new MX.Image ()
    
    this.animating = false
	},
	
	showBlueprintUpload: function(){
	  this.parent.blueprintUpload.show()
	},
	
	pick: function(media){
	  this.media = media
    
    if (!! media.units) {
      this.parent.useFloorplan(media)
      this.hide()
      return
    }

    this.floorplan.load({ media: media, keepImage: true })

    if (! this.animating) {
      this.animating = true
      this.animate()
    }
	},
	
	animate: function(t){
    requestAnimationFrame(this.animate.bind(this))
    
    if (! this.animating) return

    var dt = t - this.last_t
    this.last_t = t

    if (! t) return

    this.map.update(t)

    this.map.draw.ctx.save()
    this.map.draw.translate()

    this.floorplan.draw(this.map.draw.ctx, true)
    
    this.map.draw.ctx.strokeStyle = "#f00"
    this.map.draw.ctx.lineWidth = 2/map.zoom
    switch (this.lineTool.line.length) {
      case 1:
        this.map.draw.line(
          this.lineTool.line[0].a,
          this.lineTool.line[0].b,
          this.lineTool.cursor.x.a,
          this.lineTool.cursor.y.a
        )
        break
      case 2:
        this.map.draw.line(
          this.lineTool.line[0].a,
          this.lineTool.line[0].b,
          this.lineTool.line[1].a,
          this.lineTool.line[1].b
        )
        break
    }

    this.map.draw.coords()

    this.map.draw.mouse(this.map.ui.mouse.cursor)

    this.map.draw.ctx.restore()
	},

	changeDimensions: function(){
	  app.units = this.$units.val()
	  this.$dimensions.unitVal()
	},
	changeUnits: function(){
	  app.units = this.$units.val()
	  this.$dimensions.resetUnitVal()
	},
	lineLength: function(){
	  if (this.lineTool.line.length !== 2) return 0
	  var line = this.lineTool.line
	  return dist( line[0].a, line[0].b, line[1].a, line[1].b )
	},

	validate: function(){
	  var val = this.$dimensions.unitVal()
	  var errors = []
	  if (! this.lineLength()) {
	    errors.push("no line")
      this.$dimensions.val("")
	    alert("Please click two corners of a wall and then specify how long it is in feet or meters.")
	  }
	  else if (val == 0) {
	    errors.push("no measurement")
	    alert("Please tell us how long the wall is in feet or meters.")
	  }
    return errors
	},
	
	showErrors: function(){},
	
	serialize: function(){
    var fd = new FormData()
    fd.append( "_id", this.media._id)
    fd.append( "units", this.$units.val() )
    fd.append( "scale", this.$dimensions.unitVal() / this.lineLength() )
    fd.append( "_csrf", $("[name=_csrf]").val())
    return fd
	},
	
	success: function(){
	  this.animating = false
    this.parent.useFloorplan(this.media)
    this.hide()
	},

})