var DragView = UploadView.extend({

  el: "body",
  
  uploadAction: "/upload",
  
  selfDrag: false,

  events: {
    'dragover': 'dragover',
    'dragstart': 'dragstart',
    'drop': 'handleDrop',
  },

  drop: function(){
    $("#droparea").hide()
    $("#loading").show()
  },
  
  dragover: function(e){
    e.stopPropagation()
    e.preventDefault()
    if (this.selfDrag) {
      $("#droparea").hide()
    }
    else {
      $("#droparea").show()
    }
  },
  
  // set if we're dragging an image from the page, versus from another window
  dragstart: function(e){
    this.selfDrag = true
  },

  handleDrop: function(e){
    var base = this
    e.stopPropagation()
    e.preventDefault()
    
    e = e.originalEvent
    
    if (e.dataTransfer && ! this.selfDrag) {
      if (e.dataTransfer.files.length) {
        this.handleFileSelect(e)
      }
    }
    else {
      this.handleFileSelect(e)
    }
    this.selfDrag = false
    this.drop()
  },

  add: function(data){
    $("#loading").hide()
    app.view.display(data)
    history.pushState(data, document.title, "/p/" + data.id)
  },

})