var UploadView = View.extend({

  // define uploadAction

  events: {
    "change [type=file]": "handleFileSelect",
    "submit form": "preventDefault",
  },
  
  initialize: function(){
    this.$file = this.$("[type=file]")
    this.$upload = this.$(".upload-icon")
  },
  
  beforeUpload: function(){
  },
  
  handleFileSelect: function(e) {
    e.stopPropagation();
    e.preventDefault();
    
    this.beforeUpload()

    var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;

    for (var i = 0, f; f = files[i]; i++) {
      if ( ! f.type.match('image.*')) {
        continue;
      }
      
      this.getImageDimensions(f)
    }
  },
  
  getImageDimensions: function(f){
    var base = this
    
    this.$upload.addClass('uploading')

    var reader = new FileReader();

    reader.onload = function(e) {
      var image = new Image()
      image.onload = function(){
        var width = image.naturalWidth,
          height = image.naturalHeight
        base.upload(f, width, height)
      }
      image.src = e.target.result
    }
    
    reader.readAsDataURL(f);
  },
  
  upload: function(f, width, height){
    var fd = new FormData()
    fd.append('image', f)
    fd.append('width', width)
    fd.append('height', height)
    fd.append('_csrf', $("[name=_csrf]").val())
    
    if (this.mediaTag) {
      fd.append('tag', this.mediaTag)
    }

    var request = $.ajax({
      url: this.uploadAction,
      type: "post",
      data: fd,
      dataType: "json",
      processData: false,
      contentType: false,
    })
    request.done(this.success.bind(this))
  },
  
  success: function(media){
    if (media.error) {
      // console.log(media.error)
      this.$upload.removeClass('uploading')
      this.error(media.error)
      return
    }
    this.$upload.removeClass('uploading')
    this.add(media)
  },
  
  add: function(media){
    console.log(media)
  },
  
  error: function(error){
  },

})