From 009007363dfca587c2cbbdbba6566179a05d8fb6 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 00:17:45 -0500
Subject: merge js into combo

---
 js/frames.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'js/frames.js')

diff --git a/js/frames.js b/js/frames.js
index c9c844d..2dddae2 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -29,6 +29,10 @@ frame_editor.bind = function(){
   $("#render").click(render)
   $("#save").click(save)
   $("#upload").click(upload)
+
+	$("#background").change(function(){
+		document.body.style.backgroundColor = $("#background").string()
+	})
 }
 
 function add_frame(){
@@ -121,8 +125,6 @@ function render (){
   $("#render").html("rendering")
 }
 
-function status(s){ $(".status").html(s) }
-
 var encoder = new GifEncoder()
 
 encoder.on("quantized", function(url){
-- 
cgit v1.2.3-70-g09d2


From 654ff510a723f545fe64ae629972f1fdc2a2705a Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 03:08:26 -0500
Subject: frame editor html

---
 js/frames.js      |  5 +++--
 shader-combo.html | 22 +++++++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

(limited to 'js/frames.js')

diff --git a/js/frames.js b/js/frames.js
index 2dddae2..62306fa 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -1,3 +1,4 @@
+var frame_thumb_size = 93
 
 var frame_editor = {}
 
@@ -51,14 +52,14 @@ function add_single_frame(){
   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])
+  var thumb = cc.clone().resize(frame_thumb_size,frame_thumb_size).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_delay = ($("#frameinterval").float() || $("#framedelay").float()) * 1000
   var frame
   for (var i = 0; i < frame_count; i++) {
     frame = giveFrame(t)
diff --git a/shader-combo.html b/shader-combo.html
index 0a5fcab..282e5e2 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -30,7 +30,7 @@ form { display: inline-block; }
 #instructions.dragging iframe { pointer-events: none; }
 #instructions .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
 
-#frames { width: 435px; max-height: 150px; overflow: auto; border: 1px solid #ddd; line-height: 0; }
+#frames { display: block; width: 404px; max-height: 150px; overflow: auto; border: 1px solid #ddd; line-height: 0; }
 #frames div { margin: 1px; padding: 0; position: relative; border: 1px solid #eee; cursor: -webkit-grab; }
 #frames canvas { display: block }
 #frames .remove { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
@@ -112,7 +112,27 @@ form { display: inline-block; }
 		<br>
 		<input type="text" id="uploaded-url">
 	</span>
+	<br>
+	
+	frames <input type="text" id="framecount" value="1">
+	<button id="add-frame">+add frame</button>
+	<select id="reorder-frames">
+		<option value="">reorder</option>
+		<option value="weave-frames">weave</button>
+		<option value="shuffle-frames">shuffle</button>
+		<option value="reverse-frames">reverse</button>
+		<option value="sort-frames">sort</button>
+	</select>
+	<button id="remove-all-frames">clear</button>
+	<button id="render" disabled>render</button>
+	<br>
+	
+	<span id="frames"></span>
+	<br>
+	<br>
 
+	gif delay <input type="text" id="framedelay" value="0.06s">
+	background <input type="text" id="background" value="#fff">
 </div>
 
 <div id="workspace"></div>
-- 
cgit v1.2.3-70-g09d2


From d93bffc6438e6c89081b9b345c85a131a3de1138 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 03:13:42 -0500
Subject: display rendered gif in workspace

---
 js/frames.js | 5 +++--
 js/render.js | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'js/frames.js')

diff --git a/js/frames.js b/js/frames.js
index 62306fa..1d08807 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -109,7 +109,7 @@ function render (){
     encoder.addFrame(frame.canvas, delay)
   })
   $("#pause,#render,#add-frame").disable()
-  $("#rendered").find("img").remove()
+  $("#workspace").find("img").remove()
   $("#rendered").show()
   // really bad results with neuquant?
   // status("quantizing")
@@ -144,7 +144,8 @@ encoder.on("rendered", function(bytes){
 encoder.on("rendered-url", function(url){
   var image = new Image ()
   lastGif = image.src = url
-  $("#rendered").append(image)
+	$("#workspace canvas").hide()
+  $("#workspace").append(image)
   $("#uploaded-url").hide().val("")
   $("#save,#upload,#rendered").show()
   $("#pause,#render,#add-frame,#save,#upload").enable()
diff --git a/js/render.js b/js/render.js
index e379ab8..6ad7560 100644
--- a/js/render.js
+++ b/js/render.js
@@ -80,7 +80,8 @@ function reset(){
   start_t = old_t
   pause_t = 0
   pause(false)
-  $("#rendered img").remove()
+  $("#workspace img").remove()
+  $("#workspace canvas").show()
   draw(0)
 }
 
-- 
cgit v1.2.3-70-g09d2


From beb6a880100835aa44b8508a03b3b0b63562055a Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 04:22:07 -0500
Subject: nicer loading logic

---
 js/frames.js      | 11 ++++++-----
 js/image.js       |  1 +
 js/render.js      |  8 ++++++--
 shader-combo.html | 32 ++++++++++++++++++--------------
 4 files changed, 31 insertions(+), 21 deletions(-)

(limited to 'js/frames.js')

diff --git a/js/frames.js b/js/frames.js
index 1d08807..887b497 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -54,7 +54,6 @@ function add_single_frame(){
   frame.canvas.style.display = "none"
   var thumb = cc.clone().resize(frame_thumb_size,frame_thumb_size).appendTo($el.find(".frame")[0])
   $("#frames").append($el)
-  $("#render").enable()
 }
 function add_frames(frame_count){
   rendering = true
@@ -71,9 +70,6 @@ function add_frames(frame_count){
 }
 function remove_frame(){
   $(this).closest("div").remove()
-  if ($("#frames div").length == 0) {
-    $("#render").disable()
-  }
 }
 function remove_all_frames(){
   $("#frames").empty()
@@ -102,6 +98,11 @@ function sort_frames(){
 function render (){
   if (rendering) return
   rendering = true
+  
+  if ($("#frames canvas.fullsize").length == 0) {
+  	add_frame()
+  }
+  
   encoder.reset()
   var delay = $("#framedelay").float() * 1000 || 100
   $("#frames canvas.fullsize").each(function(){
@@ -149,7 +150,7 @@ encoder.on("rendered-url", function(url){
   $("#uploaded-url").hide().val("")
   $("#save,#upload,#rendered").show()
   $("#pause,#render,#add-frame,#save,#upload").enable()
-  $("#render").html("render")
+  $("#render").html("render gif")
   rendering = false
   pause(true)
 })
diff --git a/js/image.js b/js/image.js
index 4de7fd9..aabab89 100644
--- a/js/image.js
+++ b/js/image.js
@@ -2,6 +2,7 @@ var gif, img
 
 function loadImage(imageURL, callback) {
   var imageURL = proxify( imageURL );
+  window.imageURL = imageURL
 
   window.gif = window.img = null
 
diff --git a/js/render.js b/js/render.js
index 6ad7560..cfc2d81 100644
--- a/js/render.js
+++ b/js/render.js
@@ -12,13 +12,17 @@ function choose (){
 }
 
 function load(){
-  var imageURL = $("#url").val()
+  var newImageURL = $("#url").val()
   loading = true
-  loadImage(imageURL, ready)
+  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
diff --git a/shader-combo.html b/shader-combo.html
index 3c28b54..f51037b 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <style type="text/css">
-body { background: #f8f8f8; }
+body { background: #f8f8f8; font-size: 14px }
 #url { width: 250px; }
 #width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; text-align: right; }
 #background { text-align: left; }
@@ -47,8 +47,10 @@ form { display: inline-block; }
 #rendered { display: none; }
 
 .status { font-size: 12px; }
-#header .status { float: right; margin-top: 5px; margin-right: 5px;}
 .toggle-off { float: right; }
+
+#render,#save,#upload,#save-shader { font-weight: bold; }
+#save[disabled],#upload[disabled] { font-weight: normal; }
 </style>
 </head>
 <body>
@@ -99,23 +101,20 @@ form { display: inline-block; }
 
 	<textarea id="shader"></textarea>
 	<br>
-	<button id="save-shader"><b>save shader</b></button>
-	<button id="pause">pause</button>
+	<button id="render">render gif</button>
+	<button id="save" disabled>save gif</button>
+	<button id="upload" disabled>upload gif</button>
 	<button id="reset">reset</button>
+	<br>
+	<button id="save-shader">save shader</button>
 	<input type="text" id="width" placeholder="width" value="0">
 	<input type="text" id="height" placeholder="height" value="0">
 	<span class="status"></span>
 	<!--<button id="step-forward">&gt;&gt;</button>-->
 	<br>
-	<span id="rendered">
-		<button id="save" disabled>save image</button>
-		<button id="upload" disabled>upload</button>
-		<br>
-		<input type="text" id="uploaded-url">
-	</span>
-	<br>
-	
-	frames <input type="text" id="framecount" value="1">
+	<br>	
+
+	frames <input type="text" id="framecount" value="10">
 	<button id="add-frame">+add frame</button>
 	<select id="reorder-frames">
 		<option value="">reorder</option>
@@ -125,15 +124,20 @@ form { display: inline-block; }
 		<option value="sort-frames">sort</button>
 	</select>
 	<button id="remove-all-frames">clear</button>
-	<button id="render" disabled>render</button>
 	<br>
 	
 	<span id="frames"></span>
 	<br>
 	<br>
 
+	<button id="pause">pause</button>
 	gif delay <input type="text" id="framedelay" value="0.06s">
 	background <input type="text" id="background" value="#fff">
+	&nbsp;
+	<input type="text" id="uploaded-url">
+	<span id="rendered">
+	</span>
+	<br>
 </div>
 
 <div id="workspace"></div>
-- 
cgit v1.2.3-70-g09d2


From e3297c52583f38ed71f7734f1ff04a267834e40c Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 21:45:12 -0500
Subject: fix rendering bug

---
 js/api/gallery.js |  1 +
 js/frames.js      |  3 +--
 js/render.js      |  2 ++
 shader-combo.html | 11 +++++------
 4 files changed, 9 insertions(+), 8 deletions(-)

(limited to 'js/frames.js')

diff --git a/js/api/gallery.js b/js/api/gallery.js
index 830ff93..e8af7f1 100644
--- a/js/api/gallery.js
+++ b/js/api/gallery.js
@@ -76,6 +76,7 @@ function load_shaders(err, shaders){
 function display_shader(shader_object){
 	var $shader = $("<div>").addClass("shader")
 	$shader.data("shader", shader_object)
+	$shader.data("id", shader_object.id)
 	var html = shader_gallery_template
 	for (var field in shader_object) {
 		html = html.replace("{" + field + "}", shader_object[field])
diff --git a/js/frames.js b/js/frames.js
index 887b497..571e862 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -97,12 +97,11 @@ function sort_frames(){
 
 function render (){
   if (rendering) return
-  rendering = true
-  
   if ($("#frames canvas.fullsize").length == 0) {
   	add_frame()
   }
   
+  rendering = true
   encoder.reset()
   var delay = $("#framedelay").float() * 1000 || 100
   $("#frames canvas.fullsize").each(function(){
diff --git a/js/render.js b/js/render.js
index 205da88..bd6deb1 100644
--- a/js/render.js
+++ b/js/render.js
@@ -7,6 +7,7 @@ function choose (){
 	loading = true
 	$("#url").val(this.src)
 	loadImage(this.src, ready)
+	reset()
 }
 
 function load(){
@@ -84,6 +85,7 @@ function reset(){
 	pause(false)
 	$("#workspace img").remove()
 	$("#workspace canvas").show()
+  $("#uploaded-url").hide().val("")
 	remove_all_frames()
 	draw(0)
 }
diff --git a/shader-combo.html b/shader-combo.html
index 97ffd33..65b81e9 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -3,6 +3,10 @@
 <head>
 <style type="text/css">
 body { background: #f8f8f8; font-size: 14px }
+div { float: left; padding: 10px;}
+form { display: inline-block; }
+a { color: #00f; }
+
 #url { width: 250px; }
 #width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; text-align: right; }
 #background { text-align: left; }
@@ -11,10 +15,6 @@ body { background: #f8f8f8; font-size: 14px }
 #shader-id { width: 40px; }
 #shader { width: 400px; height: 247px; font-family: fixed; }
 #uploaded-url { display: none; width: 300px; clear: both; }
-a { color: #00f; }
-
-div { float: left; padding: 10px;}
-form { display: inline-block; }
 
 #header { clear: right; width:100%; padding: 0; font-size: 12px; }
 #shader-gallery,#gallery-images { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; }
@@ -45,7 +45,6 @@ form { display: inline-block; }
 .close,.remove { cursor: pointer; }
 
 .status { font-size: 12px; }
-.toggle-off { float: right; }
 
 #render,#save,#upload,#save-shader { font-weight: bold; }
 #save[disabled],#upload[disabled] { font-weight: normal; }
@@ -56,6 +55,7 @@ form { display: inline-block; }
 
 <div id="header">
 	<button id="help">help</button>
+	<button class="toggle-off">x</button>
 	<button id="new-shader"><b>new shader</b></button>
 	<select id="examples">
 		<option>examples</option>
@@ -70,7 +70,6 @@ form { display: inline-block; }
 	|
 	<button id="toggle-shaders">browse shaders</button>
 	<button id="toggle-images">browse images</button>
-	<button class="toggle-off">hide</button>
 	<span class="status"></span>
 
 	<span id="shader-api-form" class="form">
-- 
cgit v1.2.3-70-g09d2


From a373ad5bf748abba348bd5e1a3865b61b470c5d1 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 22:56:38 -0500
Subject: using a plus selector weirdly

---
 js/frames.js      |  2 ++
 js/render.js      |  3 ++-
 shader-combo.html | 11 +++++------
 3 files changed, 9 insertions(+), 7 deletions(-)

(limited to 'js/frames.js')

diff --git a/js/frames.js b/js/frames.js
index 571e862..fc6ee24 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -147,6 +147,7 @@ encoder.on("rendered-url", function(url){
 	$("#workspace canvas").hide()
   $("#workspace").append(image)
   $("#uploaded-url").hide().val("")
+	$("#uploaded-url + br").hide()
   $("#save,#upload,#rendered").show()
   $("#pause,#render,#add-frame,#save,#upload").enable()
   $("#render").html("render gif")
@@ -197,6 +198,7 @@ function upload(){
       console.log(data);
       status("uploaded");
       $("#uploaded-url").show().focus().val(data.url)
+      $("#uploaded-url + br").show()
     },
     error: function(data){
       console.log(data)
diff --git a/js/render.js b/js/render.js
index bd6deb1..ac26eec 100644
--- a/js/render.js
+++ b/js/render.js
@@ -85,7 +85,8 @@ function reset(){
 	pause(false)
 	$("#workspace img").remove()
 	$("#workspace canvas").show()
-  $("#uploaded-url").hide().val("")
+  $("#uploaded-url").hide()
+	$("#uploaded-url + br").show()
 	remove_all_frames()
 	draw(0)
 }
diff --git a/shader-combo.html b/shader-combo.html
index 6b721a1..784f246 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -14,7 +14,8 @@ a { color: #00f; }
 #shader-name { width: 75px; }
 #shader-id { width: 40px; }
 #shader { width: 400px; height: 247px; font-family: fixed; }
-#uploaded-url { display: none; width: 300px; clear: both; }
+#uploaded-url { display: none; width: 400px; }
+#uploaded-url + br { display: none; }
 
 #header { clear: right; width:100%; padding: 0; font-size: 12px; }
 #shader-gallery,#gallery-images { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; }
@@ -103,22 +104,24 @@ a { color: #00f; }
 	<textarea id="shader"></textarea>
 	<br>
 	<input type="text" id="uploaded-url">
+	<br>
 	<button id="render">render gif</button>
 	<button id="save" disabled>save gif</button>
 	<button id="upload" disabled>upload gif</button>
 	<button id="reset">reset</button>
+	<button id="pause">pause</button>
 	<br>
 	<button id="save-shader">save shader</button>
 	<input type="text" id="width" placeholder="width" value="0">
 	<input type="text" id="height" placeholder="height" value="0">
 	<span class="status"></span>
 	<!--<button id="step-forward">&gt;&gt;</button>-->
-	<br>
 	<br>	
 	<span id="frame-hidden-controls">
 		<button id="show-frame-controls">show frame editor</button>
 	</span>
 	<span id="frame-controls">
+		<br>
 		<button id="hide-frame-controls">x</button>
 		frames <input type="text" id="framecount" value="10">
 		rate <input type="text" id="framedelay" value="0.06s">
@@ -135,10 +138,6 @@ a { color: #00f; }
 		<br>
 		<span id="frames"></span>
 	</span>
-	<br>
-	<br>
-
-	<button id="pause">pause</button>
 </div>
 
 <div id="workspace"></div>
-- 
cgit v1.2.3-70-g09d2


From f8b8dd6b8fe71b7689aad873fb8f8b82d6f46b67 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Fri, 7 Feb 2014 09:54:35 -0500
Subject: fix picker

---
 js/api/gallery.js | 9 +++++++--
 js/frames.js      | 1 +
 js/user.js        | 7 +++++++
 tutorial.html     | 8 +++-----
 4 files changed, 18 insertions(+), 7 deletions(-)

(limited to 'js/frames.js')

diff --git a/js/api/gallery.js b/js/api/gallery.js
index 48d6a92..8f9914b 100644
--- a/js/api/gallery.js
+++ b/js/api/gallery.js
@@ -25,7 +25,7 @@ shader_gallery.bind = function(){
 
 		var $option = $("<option>")
 		var username = "users"
-		$option.val(username).html(username)
+		$option.val("LATEST").html(username)
 		$el.append( $option )
 
 		users.sort(function(a,b){
@@ -40,7 +40,12 @@ shader_gallery.bind = function(){
 	
 	$(document).on("change", "#pick-user", function(){
 		var name = $(this).val()
-		ShaderAPI.username(name, load_shaders)
+		if (name == "LATEST") {
+			ShaderAPI.latest(load_shaders)
+		}
+		else {
+			ShaderAPI.username(name, load_shaders)
+		}
 	})
 	$(document).on("click", ".shader", function(){
 		run_shader( $(this).data("shader") )
diff --git a/js/frames.js b/js/frames.js
index fc6ee24..93d4ac3 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -37,6 +37,7 @@ frame_editor.bind = function(){
 }
 
 function add_frame(){
+	$("#render").enable()
   var frame_count = $("#framecount").int()
   if (frame_count < 2) {
     add_single_frame()
diff --git a/js/user.js b/js/user.js
index a1ac53e..16bf163 100644
--- a/js/user.js
+++ b/js/user.js
@@ -10,6 +10,13 @@ user.load = function(){
   user.username = user.getCookie()
   $("#username").val(user.username)
 }
+user.prefs = new function(){}
+user.prefs.get = function (key){
+	return localStorage.getItem("im.prefs." + key)
+}
+user.prefs.set = function (key,value){
+	return localStorage.setItem("im.prefs." + key, value)
+}
 user.sanitize = function(){
   return $("#username").val().replace(/[^-_ a-zA-Z0-9]/g,"")
 }
diff --git a/tutorial.html b/tutorial.html
index ba6d216..47973de 100644
--- a/tutorial.html
+++ b/tutorial.html
@@ -11,16 +11,14 @@ a{ color: #a39; }
 </style>
 </head>
 <body>
-<article id="pre">Shaders are little programs that draw a picture, pixel by pixel.  With ShaderBlaster, use shaders on gifs and images to make new effects.
+<article id="pre">Shaders are procedures that draw a picture by coloring each pixel individually.  Use shaders on gifs and images to make new effects.
 
 Your basic variables are position (x, y),
 time (t), and color (r, g, b, a).
 
-Many math functions such as <i>cos</i> and <i>sqrt</i> are available, along with functions from GLSL like <i>step</i> and <i>mix</i>.  You can see a full list by clicking "commands" above.
+Many math functions such as <i>cos</i> and <i>sqrt</i> are available, along with functions from GLSL like <i>step</i> and <i>mix</i>.  You can see a full list by clicking "commands" above.  When you make a cool effect, render a gif and save the shader for others to use.
 
-Click "images" below to search <a href="http://dump.fm/">Dumpfm</a> and <a href="http://asdf.us/im/">Photoblaster</a> for images, or enter a URL at top left.
-
-If you make a cool effect, you can render it out to a gif, or save the shader for others to use.
+You can apply these shaders to any image.  Click "images" below to search <a href="http://dump.fm/">Dumpfm</a> and <a href="http://asdf.us/im/">Photoblaster</a>, or enter a URL at top left.
 </article>
 </body>
 <script>
-- 
cgit v1.2.3-70-g09d2


From 43fc160d11bc041302367984901ebf7ecd8118ef Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Fri, 7 Feb 2014 23:54:25 -0500
Subject: split out file save api

---
 Gruntfile.js             |  1 +
 js/frames.js             | 51 ------------------------------------------------
 js/save.js               | 51 ++++++++++++++++++++++++++++++++++++++++++++++++
 shader-combo.html        |  1 +
 shader-localstorage.html |  1 +
 shader-picker.html       |  1 +
 6 files changed, 55 insertions(+), 51 deletions(-)
 create mode 100644 js/save.js

(limited to 'js/frames.js')

diff --git a/Gruntfile.js b/Gruntfile.js
index 42d25c3..333b2a4 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -37,6 +37,7 @@ module.exports = function(grunt) {
 					"js/gallery.js",
 					"js/frames.js",
 					"js/render.js",
+					"js/save.js",
 					"js/shader.js",
 					"js/error.highlight.js",
 					"js/help.js",
diff --git a/js/frames.js b/js/frames.js
index 93d4ac3..163e899 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -156,54 +156,3 @@ encoder.on("rendered-url", function(url){
   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)
-      $("#uploaded-url + br").show()
-    },
-    error: function(data){
-      console.log(data)
-      status("error uploading: " + data.error)
-    }
-  });
-}
diff --git a/js/save.js b/js/save.js
new file mode 100644
index 0000000..f54f7d1
--- /dev/null
+++ b/js/save.js
@@ -0,0 +1,51 @@
+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)
+      $("#uploaded-url + br").show()
+    },
+    error: function(data){
+      console.log(data)
+      status("error uploading: " + data.error)
+    }
+  });
+}
diff --git a/shader-combo.html b/shader-combo.html
index a7ede26..54f4329 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -183,6 +183,7 @@ a { color: #00f; }
 <script type="text/javascript" src="js/gallery.js"></script>
 <script type="text/javascript" src="js/frames.js"></script>
 <script type="text/javascript" src="js/render.js"></script>
+<script type="text/javascript" src="js/save.js"></script>
 <script type="text/javascript" src="js/shader.js"></script>
 <script type="text/javascript" src="js/error.highlight.js"></script>
 <script type="text/javascript" src="js/help.js"></script>
diff --git a/shader-localstorage.html b/shader-localstorage.html
index 923f1b6..48c5184 100644
--- a/shader-localstorage.html
+++ b/shader-localstorage.html
@@ -125,6 +125,7 @@ a { color: #00f; }
 <script type="text/javascript" src="js/user.js"></script>
 <script type="text/javascript" src="js/render.js"></script>
 <script type="text/javascript" src="js/shader.js"></script>
+<script type="text/javascript" src="js/save.js"></script>
 <script type="text/javascript" src="js/util.js"></script>
 <script type="text/javascript" src="shaders.json"></script>
 <script type="text/javascript">
diff --git a/shader-picker.html b/shader-picker.html
index 8bafc60..87aea23 100644
--- a/shader-picker.html
+++ b/shader-picker.html
@@ -127,6 +127,7 @@ a { color: #00f; }
 <script type="text/javascript" src="js/user.js"></script>
 <script type="text/javascript" src="js/render.js"></script>
 <script type="text/javascript" src="js/shader.js"></script>
+<script type="text/javascript" src="js/save.js"></script>
 <script type="text/javascript" src="js/util.js"></script>
 <script type="text/javascript" src="js/help.js"></script>
 <script type="text/javascript" src="shaders.json"></script>
-- 
cgit v1.2.3-70-g09d2