var OKUpload = function(){
  this.config = $("#uploadConfig").data() || {
    imageMaxbytes: 10 * 1024 * 1024,
    audioMaxbytes: 10 * 1024 * 1024,
    videoMaxbytes: 10 * 1024 * 1024,
  }
  this.imageAction = "/_services/s3/image"
  this.videoAction = "/_services/s3/video"
  this.audioAction = "/_services/s3/audio"
  this.$progress = $("<div class='progress'>")
  this.xhrCount = 0
  this.loadCount = 0
}
OKUpload.prototype.bind = function(rapper){
  var uploader = this
  this.rapper = rapper
  
  $(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("")
    uploader.parse(url)
  }))
}
OKUpload.prototype.parse = function(url){
  if (! url) return
  var uploader = this
  Parser.parse( url, function(media){
    console.log(url, media)
    if (! media) {
      alert("Not a valid link")
    }
    else if (media.type == "image") {
      uploader.add(media)
    }
    else {
      uploader.addMedia(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++) {
    this.upload(f)
  }
}
OKUpload.prototype.largeFileError = function(file, maxSize) {
  var your_bytes = bytesToString(file.size)
  var max_bytes = bytesToString(maxSize)
  alert("Sorry, your file is too big.\n\n" + file.name + "\n\nYour file: " + your_bytes + "\nMax size: " + max_bytes)
  function bytesToString (n) {
    if (n < 1024) return n + " bytes"
    n /= 1024
    if (n < 1024) return n.toFixed(1) + " kb"
    n /= 1024
    if (n < 1024) return n.toFixed(1) + " mb"
  }
}
OKUpload.prototype.upload = function(f){

  var field, action

  if ( f.type.match('video.*') ) {
    if (this.config.videoMaxbytes && f.size > this.config.videoMaxbytes) {
      return this.largeFileError(f, this.config.videoMaxbytes)
    }
    field = 'video'
    action = this.videoAction
  }
  else if ( f.type.match('audio.*') ) {
    if (this.config.audioMaxbytes && f.size > this.config.audioMaxbytes) {
      return this.largeFileError(f, this.config.audioMaxbytes)
    }
    field = 'audio'
    action = this.audioAction
  }
  else {
    if (this.config.imageMaxbytes && f.size > this.config.imageMaxbytes) {
      return this.largeFileError(f, this.config.imageMaxbytes)
    }
    field = 'image'
    action = this.imageAction || this.action
  }

  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(field, f)

  var request = new XMLHttpRequest()
  request.open("POST", 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(request.responseText)
        console.log("ERROR PARSING JSON")
      }
    }
    console.log(arguments, request)
  }
  function transferError (data) {
    console.log("Transfer error")
    this.loadCount += 1
    this.hideUploadBars()
    console.log(arguments)
  }
  function transferAbort (data) {
    console.log("Transfer aborted")
    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.url
  console.log(url)
  this.parse(url)
}
OKUpload.prototype.add = function(media){
  console.log(media)
}
OKUpload.prototype.addMedia = 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)
  }
}