1 files changed, 122 insertions, 76 deletions

diff --git a/js/render.js b/js/render.js
index fdb0125..7eea965 100644
--- a/js/render.js
+++ b/js/render.js
@@ -1,106 +1,152 @@
 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;
+var paused = false, dragging = false, rendering = false, scrolling = false, deferring = false, scrollTimeout = null
+var fps = 30
+var preserve_dimensions = true;
 
 function choose (){
-  imageURL = this.src
-  loading = true
-  $("#url").val(imageURL)
-  loadImage(imageURL, ready)
+	loading = true
+	preserve_dimensions = false
+	$("#url").val(this.src)
+	loadImage(this.src, ready)
+	reset()
 }
+
 function load(){
-  loading = true
-  var imageURL = $("#url").val()
-  loadImage(imageURL, ready)
+	var newImageURL = $("#url").val()
+	loading = true
+	if (newImageURL != imageURL) {
+		loadImage(newImageURL, ready)
+		status("loading")
+	}
 }
 
 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)
-  }
+	loading = false
+	status("")
+	if (window.gif) {
+		frame = gif.frames[0]
+		actual_w = cc.canvas.width = frame.ctx.canvas.width
+		actual_h = cc.canvas.height = frame.ctx.canvas.height
+		if (! preserve_dimensions) {
+			w = actual_w
+			h = actual_h
+		}
+		for (var i=0, f; f=gif.frames[i]; i++){
+			f.cloneData = f.ctx.getImageData(0,0,actual_w,actual_h)
+		}
+	}
+	else if (window.img) {
+		fc = cq(img.width, img.height)
+		fc.drawImage(img, 0, 0)
+		frame = img_frame = { ctx: fc.context }
+		actual_w = cc.canvas.width = frame.ctx.canvas.width
+		actual_h = cc.canvas.height = frame.ctx.canvas.height
+		if (! preserve_dimensions) {
+			w = actual_w
+			h = actual_h
+		}
+		frame.cloneData = frame.ctx.getImageData(0,0,actual_w,actual_h)
+	}
+	else {
+		cc.canvas.width = actual_w = w
+		cc.canvas.height = actual_h = h
+		shader_build()
+	}
+	displayWidthHeight(w, h)
+	preserve_dimensions = false;
+}
+
+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 {
-      return gif.frames[0]
-    }
-  }
-  else if (window.img) {
-    return img_frame
-  }
-  else {
-    return cq(w, h)
-  }
+	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)
-  $("#rendered img").remove()
-  draw(0)
+	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){
-  $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused).html(paused ? "paused" : "pause")
+	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)
+	var step = $("#framedelay").float() * 1000 || 100
+	old_t += step
+	draw(old_t)
+	pause(true)
 }
 
 function animate(t){
-  raf_id = requestAnimationFrame(animate);
+	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 step_t = t - old_t
+	old_t = t
 
-  // var timing = +(new Date())
-  draw(t)
-  // timing = +(new Date()) - timing
-  fps = avg(fps, 1000/step_t, 4)
-  // status(~~(fps) + " fps")
+	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)
+	t -= start_t
+	t -= pause_t
+	frame = giveFrame(t)
+	shade(frame, t)
 }
-
-function status(s){ $("#status").html(s); console.log(s) }