var PhotoView = (function(){

  var hue = 0, sat = 0, lum = 0
  var nn, invert, width
  var timeout

  var PhotoView = View.extend({

    el: "#photo",
  
    events: {
      "change #width_el": "updateWidth",
      "change #ratio_el": "updateRatio",
      "change #hue_el": "updateHue",
      "change #saturation_el": "updateSat",
      "change #luminance_el": "updateLum",
      "change #invert_el": "updateInvert",
      "change #palette_el": "updatePalette",
      "change #nn_el": "updateNN",
      "click .post-btn": "post",
      "click .upload-btn": "upload",
      "click .close-btn": "hide",
    },
  
    initialize: function(){
      Photo.set_recolor_fn(function(rgb){
        if (invert) {
          rgb[0] = 255 - rgb[0]
          rgb[1] = 255 - rgb[1]
          rgb[2] = 255 - rgb[2]
        }
        var hsl = rgb2hsl(rgb)
        hsl[0] = mod(hsl[0] + hue, 1.0)
        hsl[1] = clamp(hsl[1] + sat, 0.0, 1.0)
        hsl[2] = clamp(hsl[2] + lum, 0.0, 1.0)
        return hsl2rgb.apply(this, hsl)
      })
      
      this.$uploadBtn = this.$(".upload-btn")
      this.$postBtn = this.$(".post-btn")
      this.$closeBtn = this.$(".close-btn")

      this.$width = this.$("#width_el")
      this.$widthSpan = this.$("#width_span")
      this.$heightSpan = this.$("#height_span")
      this.$ratio = this.$("#ratio_el")
      this.$nn = this.$("#nn_el")
      this.$invert = this.$("#invert_el")
      this.$palette = this.$("#palette_el")
      this.$canvasRapper = this.$("#canvas_rapper")
      this.camera = new UploadView({ el: this.$(".camera-btn") })

      this.canvas = document.createElement("canvas")
      this.ctx = this.canvas.getContext('2d')
      this.$canvasRapper.append(this.canvas)
      
      width = parseInt( this.$width.val() )
      ratio = parseFloat( this.$ratio.val() )
      nn = this.$nn.prop('checked')
      invert = this.$invert.prop('checked')
      this.$widthSpan.html(width)

      this.img = new Image ()
      this.img.onload = function(){
        this.$ratio.val()
        this.updateRatio()
      }.bind(this)
    },
    
    load: function(f){
      var url
      if (typeof f == "string") {
        url = f
        this.$uploadBtn.hide()
      }
      else {
        this.file = f
        url = URL.createObjectURL(f)
        this.$uploadBtn.show()
      }
      this.img.src = url
      console.log("load", url)
      this.show()
    },
  
    show: function(){
      $("body").addClass("photo")
    },
  
    hide: function(){
      $("body").removeClass("photo")
    },
    
    update: function(){
      Photo.fromCanvas(this.img, this.toCanvas.bind(this), { width: width, ratio: ratio, neighbor: nn })
    },

    updateWidth: function(){
      width = parseInt( this.$width.val() )
      this.$widthSpan.html( width )
      this.$heightSpan.html( "..." )
      this.deferUpdate()
    },
    updateRatio: function(){
      ratio = parseFloat( this.$ratio.val() )
      if (ratio < 0.03) return
      this.$widthSpan.html( width )
      this.$heightSpan.html( "..." )
      this.deferUpdate()
    },

    deferUpdate: function(){
      clearTimeout( timeout )
      timeout = setTimeout(this.update.bind(this), 50)
    },

    updateHue: function(){
    },
    updateSat: function(){
    },
    updateLum: function(){
    },
    updateInvert: function(){
      invert = this.$invert.prop('checked')
      this.update.bind(this)
    },
    updateNN: function(){
      nn = this.$nn.prop('checked')
      this.update.bind(this)
    },
    updatePalette: function(){
      var palette = this.$palette.val()
      Photo.set_colors( Photo[palette] )
      this.update.bind(this)
    },

    toCanvas: function(rows){
      this.rows = rows
      var wpx = 6, hpx = 12
      var rgb_colors = Photo.colors.map(function(c){ return "rgb(" + c + ")" })
      this.canvas.width = rows[0].length * wpx
      this.canvas.height = rows.length * hpx
      var ctx = this.ctx
      rows.forEach(function(row, j){
        row.forEach(function(lex, i){
          ctx.fillStyle = rgb_colors[lex]
          ctx.fillRect(i*wpx,j*hpx,wpx,hpx)
        })
      })
      this.$heightSpan.html( rows.length )
      // 
    },
    
    post: function(){
      if (! this.rows) return
      var color_code = Photo.mirc(this.rows)
      var _csrf = $("meta[name='_csrf']").attr('content')

      var request = $.ajax({
        url: "/_irc/post",
        type: "post",
        data: { image: color_code, _csrf: _csrf },
      })
      request.done(this.success.bind(this))
    },
    
    success: function(){
      console.log("posted colorcode")
      this.hide()
    },
    
    upload: function(){
      this.camera.upload(this.file)
      this.hide()
    },

  })
  
  return PhotoView

})()