var frame, img_frame;
var timeout, raf_id, start_t = 0, old_t = 0, pause_t = 0
var paused = false, dragging = false, rendering = false, scrolling = false, deferring = false, scrollTimeout = null;
var fps = 30;

function choose (){
  imageURL = this.src
  loading = true
  $("#url").val(imageURL)
  loadImage(imageURL, ready)
}
function load(){
  loading = true
  var imageURL = $("#url").val()
  loadImage(imageURL, ready)
}

function ready(){
  loading = false
  if (window.gif) {
    frame = gif.frames[0]
    w = cc.canvas.width = frame.ctx.canvas.width
    h = cc.canvas.height = frame.ctx.canvas.height
    for (var i=0, f; f=gif.frames[i]; i++){
      f.cloneData = f.ctx.getImageData(0,0,w,h)
    }
  }
  else {
    fc = cq(img.width, img.height)
    fc.drawImage(img, 0, 0)
    frame = img_frame = { ctx: fc.context }
    w = cc.canvas.width = frame.ctx.canvas.width
    h = cc.canvas.height = frame.ctx.canvas.height
    frame.cloneData = frame.ctx.getImageData(0,0,w,h)
  }
}

function giveFrame(t){
  if (window.gif) {
    if (gif.currentFrame) {
      return gif.frames[gif.currentFrame(t)]
    }
    else {
      return gif.frames[0]
    }
  }
  else if (window.img) {
    return img_frame
  }
  else {
    return cq(w, h)
  }
}

function reset(){
  start_t = old_t
  pause_t = 0
  pause(false)
  $("#rendered img").remove()
  draw(0)
}

function pause(state){
  $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused).html(paused ? "paused" : "pause")
}

function step_forward(){
  var step = $("#framedelay").float() * 1000 || 100
  old_t += step
  draw(old_t)
  pause(true)
}

function animate(t){
  raf_id = requestAnimationFrame(animate);

  var step_t = t - old_t
  old_t = t
  
  if (paused || dragging || rendering || scrolling || deferring) {
    pause_t += step_t
    if (scrolling) {
      scrolling = false
      deferring = true
    }
    else {
      deferring = false
    }
    return
  }

  // var timing = +(new Date())
  draw(t)
  // timing = +(new Date()) - timing
  fps = avg(fps, 1000/step_t, 4)
  status(~~(fps) + " fps")
}
function draw(t) {
  t -= start_t
  t -= pause_t
  frame = giveFrame(t)
  shade(frame, t)
}