var frame_thumb_size = 93

var frame_editor = {}
var lastGif, lastWebm

frame_editor.init = function(){
  frame_editor.bind()
}

frame_editor.bind = function(){
  $("#add-frame").click(add_frame)
  $("#frames").sortable({
    start: drag_start,
    stop: drag_stop
  });
  $(document).on("click","#frames .remove",remove_frame)
  $("#framecount").change(function(){
    var val = $(this).int()
    if (val < 1 || isNaN(val)) $(this).val(val = 1)
    if (val == 1) $("#add-frame").html("+add frame")
    else $("#add-frame").html("+add frames")
  })

  $("#frames").disableSelection();
  $("#remove-all-frames").click(remove_all_frames)
  $("#weave-frames").click(weave_frames)
  $("#shuffle-frames").click(shuffle_frames)
  $("#reverse-frames").click(reverse_frames)
  $("#sort-frames").click(sort_frames)

  $("#render").click(render)
  $("#render-webm").click(render_webm)
  $("#save").click(save)
  $("#upload").click(upload)

  $("#background").change(function(){
    document.body.style.backgroundColor = $("#background").string()
  })
}

function add_frame(){
  $("#render").enable()
  $("#render-webm").enable()
  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(frame_thumb_size,frame_thumb_size).appendTo($el.find(".frame")[0])
  $("#frames").append($el)
}
function add_frames(frame_count){
  rendering = true
  var t = old_t - start_t - pause_t
  var frame_delay = ($("#frameinterval").float() || $("#framedelay").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()
}
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
  if ($("#frames canvas.fullsize").length == 0) {
    add_frame()
  }
  
  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,#render-webm,#add-frame").disable()
  $("#workspace").find("img").remove()
  $("#workspace").find("video").remove()
  $("#rendered").show()
  // really bad results with neuquant?
  // status("quantizing")
  // encoder.quantize()
  status("encoding")
  try {
    encoder.encode()
  } catch (e) {
    $("#pause,#render,#render-webm,#add-frame").enable()
    rendering = false
    status(e)
    throw e
  }
  $("#render").html("rendering")
}

function render_webm (){
  if (rendering) return
  if ($("#frames canvas.fullsize").length == 0) {
    add_frame()
  }
  rendering = true
  var $frames = $("#frames canvas.fullsize")
  var webm_encoder = new Whammy.Video($frames.length)
  $frames.each(function(){
    var frame = cq(this.width, this.height).fillStyle($("#background").string()).fillRect(0,0,this.width, this.height).drawImage(this,0,0)
    webm_encoder.add(frame.canvas)
  })
  $("#pause,#render,#render-webm,#add-frame").disable()
  $("#workspace").find("img").remove()
  $("#workspace").find("video").remove()
  $("#rendered").show()
  lastGif = null
  var output = lastWebm = webm_encoder.compile();
  var video = document.createElement("video")
  video.src = (window.webkitURL || window.URL).createObjectURL(output);
  video.setAttribute("loop", true)
  video.setAttribute("autoplay", true)
  video.play()
  $("#workspace canvas").hide()
  $("#workspace").append(video)
  $("#uploaded-url").hide().val("")
  $("#uploaded-url + br").hide()
  $("#save,#upload,#rendered").show()
  $("#pause,#render,#render-webm,#add-frame,#save,#upload").enable()
  $("#render").html("render gif")
  rendering = false
  pause(true)
}

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
  lastWebm = null
  $("#workspace canvas").hide()
  $("#workspace").append(image)
  $("#uploaded-url").hide().val("")
  $("#uploaded-url + br").hide()
  $("#save,#upload,#rendered").show()
  $("#pause,#render,#render-webm,#add-frame,#save,#upload").enable()
  $("#render").html("render gif")
  rendering = false
  pause(true)
})