var BlueprintUploader = UploadView.extend({
	el: ".blueprintUploader",
	
	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": "pick",
    "click .remove": "destroy",
  },
	
	initialize: function(opt){
	  this.parent = opt.parent
	  this.__super__.initialize.call(this)

    this.$url = this.$(".url")
    this.$blueprints = this.$(".blueprints")
	},
	
  loaded: false,
	load: function(){
		$.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this))
	},

	populate: function(data){
		this.loaded = true
		if (data && data.length) {
		  this.$blueprints.show()
      data.forEach(this.append.bind(this))
      this.hide()
      this.parent.scaler.pick(data[0])
		}
		else {
		  this.show()
		}
	},
	
	pick: function(e){
	  var $el = $(e.currentTarget)
	  var media = $el.data("media")
	  this.hide()
	  this.parent.scaler.pick(media)
	},
  
	destroy: function(e){
	  e.stopPropagation()
	  var $el = $(e.currentTarget)
	  var _id = $el.closest(".blueprint").data("id")
    $el.remove()
		$.ajax({
			type: "delete",
			url: this.destroyAction,
			data: { _id: _id, _csrf: $("[name=_csrf]").val() }
		}).complete(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.$blueprints.show()
	  this.append(media)
	  this.hide()
	  this.parent.scaler.pick(media)
	},

	append: function(media){
	  var $el = $("<span>")
	  var img = new Image ()
	  img.src = media.url
	  var remove = document.createElement("span")
	  remove.className = "remove"
	  remove.innerHTML = "<span>x</span>"
	  
	  $el.data("id", media._id)
	  $el.data("media", media)
	  $el.append(img)
	  $el.append(remove)
	  $el.addClass("blueprint")
	  this.$blueprints.append($el)
	},
	
})