1 files changed, 21 insertions, 4 deletions
diff --git a/shader-gif.html b/shader-gif.html
index 385f644..f990805 100644
--- a/shader-gif.html
+++ b/shader-gif.html
@@ -5,9 +5,11 @@
 #url { width: 450px; }
 #width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; }
 #shader { width: 100%; height: 247px; font-family: fixed; }
-#frames { width: 435px; min-height: 100px; border: 1px solid #ddd; line-height: 0; }
 #controls { width: 450px; }
-#frames div { margin: 1px; padding: 0; position: relative; border: 1px solid #eee; }
+#frames { width: 435px; min-height: 100px; border: 1px solid #ddd; line-height: 0; }
+#frames div { margin: 1px; padding: 0; position: relative; border: 1px solid #eee; cursor: -webkit-grab; }
+.dragging { cursor: -webkit-grabbing !important; }
+.ui-sortable-helper { cursor: -webkit-grabbing !important; }
 #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; }
 .paused { background: black; color: white; border-width: 1px; padding: 2px 7px; }
@@ -17,6 +19,10 @@ div { display: inline-block; padding: 10px;}
 #rendered { display: none; }
 #render,#save { font-weight: bold; }
 #render { float: right; }
+#instructions { position: absolute;top:20px;right:20px; width:180px;height:450px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
+#instructions iframe {width: 100%;height:100%;margin:0;padding:0;border:0;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; }
+.close,.remove { cursor: pointer; }
 </style>
 </head>
 <body>
@@ -47,6 +53,7 @@ div { display: inline-block; padding: 10px;}
   <br>
   <br>
 
+  <button id="help">help</button>
   <button id="demo">demo</button>
   <button id="dither-demo">dither</button>
   <br>
@@ -60,6 +67,7 @@ div { display: inline-block; padding: 10px;}
   <br>
 </div>
 
+<div id="instructions"><iframe src="instructions.html"></iframe><button class="close">x</button></div>
 </body>
 <script type="text/javascript" src="js/vendor/gif-encode/util.js"></script>
 <script type="text/javascript" src="js/vendor/gif-encode/tube.js"></script>
@@ -93,8 +101,8 @@ function init(){
   $("#demo").click(function(){ demo("#first") })
   $("#dither-demo").click(function(){ demo("#second") })
   $("#frames").sortable({
-    start: function(){ dragging = true },
-    stop: function(){ dragging = false }
+    start: drag_start,
+    stop: drag_stop
   });
   $(document).on("mousemove", function(e) {
     mousex = event.pageX
@@ -114,10 +122,19 @@ function init(){
   $("#remove-all-frames").click(remove_all_frames)
   $("#render").click(render)
   $("#save").click(save)
+  $("#help,#instructions .close").click(function(){ $("#instructions").toggle() })
+  $("#instructions").draggable({
+    start: drag_start,
+    stop: drag_stop
+  })
+  $("#instructions").disableSelection();
+
   demo('#first')
   load()
   draw()
 }
+function drag_start(){ dragging = true; $(this).addClass("dragging") }
+function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") }
 function demo(el){
   $el = $(el)
   s = $el.html()