var WebcamView = View.extend({

  el: "#photobooth",
  
  events: {
    "change #upload-btn input": "handleFileSelect",
  },
  
  initialize: function(){
    this.$input = this.$('#file')
    this.$snapBtn = this.$("#snap-btn")
  },
  
  loaded: false,
  ready: function(){
    this.canvas = document.createElement("canvas")
    this.ctx = this.canvas.getContext('2d')
    this.$overlayer.append(this.canvas)
    this.draw()
  },

  handleFileSelect: function(e) {
    e.stopPropagation()
    e.preventDefault()
    
    var files = e.dataTransfer ? e.dataTransfer.files : e.target.files

    var file = files[0]
    if (! file) return
    if ( ! file.type.match('image.*')) return
    // this.upload(file)
    var img = new Image
    img.onload = function() {
      var w, h
      var ratio = img.naturalWidth / img.naturalHeight
      if (ratio >= 4/3) {
        h = 480
        w = 480 * ratio
      }
      else {
        w = 640
        h = 640 / ratio
      }
      ctx.drawImage(img, 0, 0, w, h)
    }.bind(this)
    img.src = URL.createObjectURL(file)
  },
  
  upload: function(file){
    var _csrf = $("meta[name=_csrf]").attr("value")
    var fd = new FormData()
    fd.append('image', file)
    
    var request = $.ajax({
      url: "/irc/image?_csrf=" + _csrf,
      type: "post",
      data: fd,
      dataType: "json",
      processData: false,
      contentType: false,
    })
    request.done(this.success.bind(this))
  },
  
  success: function(data){
    // probably append image..
  },

})