var OKUpload = function(){
	this.action = "/_services/image"
}
OKUpload.prototype.bind = function(rapper){
  var uploader = this
  this.rapper = rapper
  this.$progress = $("<div class='progress'>")
  this.xhrCount = 0
  this.loadCount = 0
  
  $(this.rapper).append(this.$progress)
  $(".add-image-button input", rapper).change( uploader.handleFileSelect.bind(uploader) )
  $(".add-url", rapper).on("keydown blur", pressEnter( function(e){
    var url = $(this).val()
    $(this).val("")
    if (! url) return
    Parser.parse( url, function(media){
      console.log(url, media)
      if (media.type == "image") {
        uploader.add(url)
      }
      else {
        uploader.addVideo(media)
      }
    })
  }))
}
OKUpload.prototype.handleFileSelect = function(e) {
  e.stopPropagation();
  e.preventDefault();

  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.upload(f)
  }
}
OKUpload.prototype.upload = function(f){
  this.xhrCount += 1

  this.$progress.addClass("loading")

  var $loader = $("<div class='xhr'>")
  var $loading_bar = $("<div>")
  $loading_bar.css("width", "0%")
  $loader.append( $loading_bar )
  this.$progress.append($loader)
  
  var fd = new FormData()
  fd.append('image', f)

  var request = new XMLHttpRequest()
  request.open("POST", this.action, true)
 
  request.addEventListener("progress", updateProgress.bind(this));
  request.addEventListener("load", transferComplete.bind(this));
  request.addEventListener("error", transferError.bind(this));
  request.addEventListener("abort", transferAbort.bind(this));

  function updateProgress (e) {
    if (e.lengthComputable) {
      var percentComplete = Math.round( 100 * e.loaded / e.total )
      $loading_bar.css("width", percentComplete + "%")
    }
  }
  function transferComplete (data) {
    this.loadCount += 1
    this.hideUploadBars()
    if (request.readyState == 4 && request.status == 200) {
      var responseData
      try {
        responseData = JSON.parse( request.responseText )
        this.success( responseData )
      }
      catch (e) {
        console.log("ERROR PARSING JSON")
      }
    }
    console.log(arguments, request)
  }
  function transferError (data) {
    this.loadCount += 1
    this.hideUploadBars()
    console.log(arguments)
  }
  function transferAbort (data) {
    this.loadCount += 1
    this.hideUploadBars()
    console.log(arguments)
  }

  request.send(fd)
  
/*
  var request = $.ajax({
    url: this.action,
    type: "post",
    data: fd,
    dataType: "json",
    processData: false,
    contentType: false,
  })
  request.done(this.success.bind(this))
*/
}
OKUpload.prototype.hideUploadBars = function () {
  if (this.xhrCount == this.loadCount) {
    this.$progress.removeClass("loading")
    setTimeout(function(){
      this.$progress.empty()
    }.bind(this), 300)
  }
}
OKUpload.prototype.success = function(data){
  if (data.error) {
    console.log(data.error)
    return
  }
  var url = data[0].extra.Location
  this.add(url)
}
OKUpload.prototype.add = function(media){
  console.log(media)
}
OKUpload.prototype.addVideo = function(media){
  console.log(media)
}
OKUpload.prototype.error = function(error){
  throw error
}


function pressEnter(fn){
  return function(e){
    if (e.keyCode && e.keyCode !== 13) return
    e.preventDefault()
    fn.apply(this)
  }
}