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 (){
	loading = true
	$("#url").val(this.src)
	loadImage(this.src, ready)
	reset()
}

function load(){
	var newImageURL = $("#url").val()
	loading = true
	if (newImageURL != imageURL) {
		loadImage(newImageURL, ready)
		status("loading")
	}
}

function ready(){
	loading = false
	status("")
	if (window.gif) {
		frame = gif.frames[0]
		actual_w = w = cc.canvas.width = frame.ctx.canvas.width
		actual_h = 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 if (window.img) {
		fc = cq(img.width, img.height)
		fc.drawImage(img, 0, 0)
		frame = img_frame = { ctx: fc.context }
		actual_w = w = cc.canvas.width = frame.ctx.canvas.width
		actual_h = h = cc.canvas.height = frame.ctx.canvas.height
		frame.cloneData = frame.ctx.getImageData(0,0,w,h)
	}
	else {
		cc.canvas.width = w
		cc.canvas.height = h
		shader_build()
	}
	displayWidthHeight(w, h)
}

function displayWidthHeight(width, height){
	$("#width").val(width)
	$("#height").val(height)
}

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

function empty_frame(){
	actual_w = w = w || 400
	actual_h = h = h || 266
	var cx = cq(w, h).fillStyle("rgba(255,255,255,255)").fillRect(0,0,w,h)
	return { ctx: cx.context, cloneData: cx.getImageData(0,0,w,h) }
}

function feedback_frame(){
	return { ctx: cc.context, cloneData: cc.getImageData(0,0,w,h) }
}

function reset(){
	start_t = old_t
	pause_t = 0
	pause(false)
	$("#workspace img").remove()
	$("#workspace canvas").show()
  $("#uploaded-url").hide()
	$("#uploaded-url + br").show()
	remove_all_frames()
	draw(0)
}

function pause(state){
	paused = typeof state == "boolean" ? state : ! paused
	$("#pause").toggleClass("paused", paused).html(paused ? "paused" : "pause")
	if (!paused) {
		$("#workspace canvas").show()
		$("#workspace img").hide()
		$("#save,#upload").disable()
	}
}

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)
	quiet_status(~~(fps) + " fps")
}

function draw(t) {
	t -= start_t
	t -= pause_t
	frame = giveFrame(t)
	shade(frame, t)
}