function add_frame(){
  var frame_count = $("#framecount").int()
  if (frame_count < 2) {
    add_single_frame()
  }
  else {
    add_frames(frame_count)
  }
}
function add_single_frame(){
  var $el = $("<div>")
  $el.html( $("#frame-template").html() )
  $el.attr('index', $("#frames div").length)
  var frame = cc.clone().appendTo($el.find(".frame")[0])
  frame.canvas.className = "fullsize"
  frame.canvas.style.display = "none"
  var thumb = cc.clone().resize(100,100).appendTo($el.find(".frame")[0])
  $("#frames").append($el)
  $("#render").enable()
}
function add_frames(frame_count){
  rendering = true
  var t = old_t - start_t - pause_t
  var frame_delay = $("#frameinterval").float() * 1000
  var frame
  for (var i = 0; i < frame_count; i++) {
    frame = giveFrame(t)
    t += frame_delay
    shade(frame, t)
    add_single_frame()
  }
  rendering = false
}
function remove_frame(){
  $(this).closest("div").remove()
  if ($("#frames div").length == 0) {
    $("#render").disable()
  }
}
function remove_all_frames(){
  $("#frames").empty()
}
function shuffle_frames(){
  var shuffled = []
  var $frames = $("#frames div")
  $("#frames").empty().append(shuffle($frames))
}
function reverse_frames(){
  var $frames = $("#frames div")
  $("#frames").empty().append(reverse($frames))
}
function weave_frames(){
  var $frames = $("#frames div")
  $("#frames").empty().append(weave($frames))
}
function sort_frames(){
  var $frames = $("#frames div")
  var sorted = $frames.map(function(i,el){ console.log(i,el); return [[ el.getAttribute('index'), el ]] })
                     .sort(function(a,b){ return a[0]-b[0] })
                     .map(function(i,e){ console.log( e ); return e[1] })
  $("#frames").empty().append(sorted)
}

function render (){
  if (rendering) return
  rendering = true
  encoder.reset()
  var delay = $("#framedelay").float() * 1000 || 100
  $("#frames canvas.fullsize").each(function(){
    var frame = cq(this.width, this.height).fillStyle($("#background").string()).fillRect(0,0,this.width, this.height).drawImage(this,0,0)
    encoder.addFrame(frame.canvas, delay)
  })
  $("#pause,#render,#add-frame").disable()
  $("#rendered").find("img").remove()
  $("#rendered").show()
  // really bad results with neuquant?
  // status("quantizing")
  // encoder.quantize()
  status("encoding")
  try {
    encoder.encode()
  } catch (e) {
    $("#pause,#render,#add-frame").enable()
    rendering = false
    status(e)
    throw e
  }
  $("#render").html("rendering")
}

function status(s){ $(".status").html(s) }

var encoder = new GifEncoder()

encoder.on("quantized", function(url){
  status("encoding")
  encoder.encode()
})

encoder.on("encoded-frame", function(done,count){
  status("encoded " + done + " / " + count)
})

encoder.on("rendered", function(bytes){
  status(filesize(bytes.length))
})

encoder.on("rendered-url", function(url){
  var image = new Image ()
  lastGif = image.src = url
  $("#rendered").append(image)
  $("#uploaded-url").hide().val("")
  $("#save,#upload,#rendered").show()
  $("#pause,#render,#add-frame,#save,#upload").enable()
  $("#render").html("render")
  rendering = false
  pause(true)
})

function get_filename(){
  var basename = $("#url").val().replace(/^.*\//,"").replace(/\..*$/,"").replace(/[^-_ a-zA-Z0-9]/g,"")
  var username = user.username
  var filename = basename + "-" + username + "-" + (+new Date()) + ".gif"
  return filename.replace(/ /g,"_").replace(/-+/g,"-")
}
function save (){
  if (! lastGif) return;
  var filename = get_filename()
  var blob = dataUriToBlob(lastGif)
  saveAs(blob, filename);
}
function saveJSON (data, filename) {
  var bytes = JSON.stringify(data)
  var buf = new ArrayBuffer(bytes.length);
  var arr = new Uint8Array(buf);
  for (var i = 0; i < bytes.length; i++) {
    arr[i] = bytes.charCodeAt(i);
  }

  var blob = new Blob([arr], { type: "text/json" });
  blob.slice = blob.slice || blob.webkitSlice;
  
  saveAs(blob, filename);
}

function upload(){
  var filename = get_filename()
  var username = user.username
  var blob = dataUriToBlob(lastGif)
  uploadImage({
    blob: blob,
    filename: filename,
    username: username,
    success: function(data){
    
      // data.url
      // data.filesize
      // data.success

      console.log(data);
      status("uploaded");
      $("#uploaded-url").show().focus().val(data.url)
    },
    error: function(data){
      console.log(data)
      status("error uploading: " + data.error)
    }
  });
}