var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({
	el: ".blueprintScaler",

	fixedClose: true,

	action: "/api/blueprint/scale",
	
	events: {
    "change [name=blueprint-dimensions]": "changeDimensions",
    "change [name=blueprint-units]": "changeUnits",
    "click .uploadNewBlueprint": "showUploader",
	},
	
	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 = new Map ({
      type: "ortho",
      el: this.$blueprintMap.get(0),
      width: window.innerWidth,
      height: window.innerHeight,
      zoom: -2,
      zoom_min: -7.0,
      zoom_max: 2,
    })
    this.lineTool = new LineTool
    this.map.ui.add_tool("line", this.lineTool)
    this.map.ui.set_tool("line")
    
    scene = scene || { camera: { x: 0, y: 0, z: 0 } }
    
    this.floorplan = new MX.Image ()
	},
	
	showUploader: function(){
	  this.parent.uploader.show()
	},
	
	pick: function(media, shouldEdit){
	  this.media = media

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

    if (!! media.units && ! shouldEdit) {
      this.parent.ready(media)
      this.hide()
      this.stopAnimating()
      return
    }

    if (media.units && media.line && media.scale) {
      var points = media.line.split(",")
      this.lineTool.line[0] = new vec2( +points[0], +points[1] )
      this.lineTool.line[1] = new vec2( +points[2], +points[3] )

      app.units = media.units
      this.$units.val( media.units )
      this.$dimensions.unitVal( media.scale * this.lineLength() )
    }

    this.startAnimating()
	},
	
	animate: function(t, dt){
    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.save()
    this.map.draw.ctx.strokeStyle = "#f00"
    this.map.draw.ctx.lineWidth = 1/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.ctx.restore()

    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(), line = this.lineTool.line
    fd.append( "_id", this.media._id)
    fd.append( "units", this.$units.val() )
    fd.append( "scale", this.$dimensions.unitVal() / this.lineLength() )
    fd.append( "line", [line[0].a,line[0].b,line[1].a,line[1].b].join(",") )
    fd.append( "_csrf", $("[name=_csrf]").val())
    return fd
	},
	
	success: function(){
	  this.media.scale = this.$dimensions.unitVal() / this.lineLength()
    this.stopAnimating()
    this.parent.ready(this.media)
    this.hide()
	},

})