var BlueprintUpload = UploadView.extend({
	el: ".blueprintUpload",
	
	mediaTag: "blueprint",
	createAction: "/api/media/new",
	uploadAction: "/api/media/upload",
	listAction: "/api/media/user",
	destroyAction: "/api/media/destroy",

	events: {
		"mousedown": 'stopPropagation',
    "change .url": "enterUrl",
    "keydown .url": "enterSetUrl",
    
    "click .blueprint": "choose",
    "change [name=blueprint-dimensions]": "changeDimensions",
    "change [name=blueprint-units]": "changeUnits",
    "click #saveBlueprint": "save",
  },
	
	initialize: function(opt){
	  this.parent = opt.parent
	  this.__super__.initialize.call(this)

    this.$url = this.$(".url")

    this.$blueprintMap = this.$("#blueprintMap")
    this.$blueprintDimensionsRapper = this.$("#blueprintDimensions")
    this.$dimensions = this.$("[name=blueprint-dimensions]")
    this.$units = this.$("[name=blueprint-units]")
    this.$save = this.$("#saveBlueprint")
    
    this.map = new Map ({ type: ortho })
    
    this.load()
	},
	
  loaded: false,
	load: function(){
		$.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this))
	},

	populate: function(data){
		this.loaded = true
		if (data && data.length) {
		  data.forEach(this.append.bind(this))
		  this.$(".txt").hide()
		}
		else {
		  this.$(".txt").show()
		}
	},
	
	append: function(media){
	  var $el = $("<div>")
	  $el.data("id", media._id)
	  $el.addClass("blueprint")
	  this.$blueprints.append($el)
	},
	
	pick: function(e){
	  var $el = $(e.currentTarget)
	  // load map with it
	},
  
	destroy: function(_id, cb){
		$.ajax({
			type: "delete",
			url: this.destroyAction,
			data: { _id: _id, _csrf: $("[name=_csrf]").val() }
		}).complete(cb || function(){})
	},
	
	show: function(){
    this.toggle(true)
	},
	hide: function(){
		this.toggle(false)
	},
	toggle: function (state) {
    this.$el.toggleClass("active", state)
	},

	addUrl: function (url){
		Parser.loadImage(url, function(media){
			if (! media) return
			media._csrf = $("[name=_csrf]").val()
			media.tag = this.mediaTag
			
			var request = $.ajax({
				type: "post",
				url: this.createAction,
				data: media,
			})
			request.done(this.add.bind(this))
			
		}.bind(this))
	},
  enterUrl: function(){
  	var url = this.$url.sanitize()
  	this.addUrl(url)
  	this.$url.val("")
  },
	enterSetUrl: function (e) {
		e.stopPropagation()
		if (e.keyCode == 13) {
			setTimeout(this.enterUrl.bind(this), 100)
		}
	},
	
	add: function(media){
	  this.append(media)
	},
	changeDimensions: function(){
	},
	changeUnits: function(){
	},

})