From 99eb0952b67b7f7f9dffd6b744dfe123e45d1bae Mon Sep 17 00:00:00 2001
From: John-Michael Faircloth <fairclothjm@gmail.com>
Date: Fri, 2 Sep 2022 15:30:15 -0500
Subject: [PATCH 1/2] Work in progress: use canvas for day view actagram

---
 browse/makefile   |   5 +-
 browse/showdir.c  |  76 ++++++++++--
 browse/showdir.js | 295 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 368 insertions(+), 8 deletions(-)
 create mode 100755 browse/showdir.js

diff --git a/browse/makefile b/browse/makefile
index 94e2896..01e9e01 100755
--- a/browse/makefile
+++ b/browse/makefile
@@ -3,7 +3,7 @@ CC=gcc -std=c99 -Wall -DVIEWCGI
 LINKER=link
 LINKCON = /nologo
 
-all:objdir view.cgi wait_change.cgi tb.cgi ../../www/realtime.html ../../www/favicon.ico ../../www/showpic.js ../../www/styledir.css
+all:objdir view.cgi wait_change.cgi tb.cgi ../../www/realtime.html ../../www/favicon.ico ../../www/showpic.js ../../www/showdir.js ../../www/styledir.css
 
 OBJ = obj
 
@@ -49,5 +49,8 @@ wait_change.cgi:	$(OBJ)/wait_change.o
 ../../www/showpic.js: showpic.js
 	cp showpic.js ../../www
 
+../../www/showdir.js: showdir.js
+	cp showdir.js ../../www
+
 ../../www/styledir.css: styledir.css
 	cp styledir.css ../../www
diff --git a/browse/showdir.c b/browse/showdir.c
index fbefd74..90eb67a 100755
--- a/browse/showdir.c
+++ b/browse/showdir.c
@@ -80,6 +80,7 @@ static void PrintNavLinks(Dir_t * Dir, int IsRoot)
 //----------------------------------------------------------------------------------
 // Show an actagram for one hour.
 //----------------------------------------------------------------------------------
+/*
 static void ShowHourActagram(VarList SubdImages, char * HtmlPath, char * SubdirName)
 {
     // Build an actagram for the hour.
@@ -129,6 +130,7 @@ static void ShowHourActagram(VarList SubdImages, char * HtmlPath, char * SubdirN
     if (hrefOpen) printf("</a>");
     printf("</ul>\n");
 }
+*/
 
 //----------------------------------------------------------------------------------
 // Show directories for all the hours (or days)
@@ -140,9 +142,9 @@ static int ShowHourlyDirs(char * HtmlPath, int IsRoot, VarList Directories)
     int prevwkd = 6, thiswkd=6;
     for (int b=0;b<Directories.NumEntries;b++){
         char * SubdirName = Directories.Entries[b].Name;
-        
+
         if (strcmp(SubdirName, "saved") == 0) continue;
-        
+
         int isw = IsWeekendString(SubdirName);
         thiswkd = isw & 7;
         if (thiswkd < prevwkd){
@@ -171,7 +173,64 @@ static int ShowHourlyDirs(char * HtmlPath, int IsRoot, VarList Directories)
         printf("<br>\n");
 
         if (!IsRoot) {
-            ShowHourActagram(SubdImages, HtmlPath, SubdirName);
+            //ShowHourActagram(SubdImages, HtmlPath, SubdirName);
+            printf("<br>\n<canvas id=%s width='240px' height='30px' "
+                   "style=\"margin: 0; padding: 0; overflow: hidden; text-decoration: none;\"></canvas>\n", SubdirName);
+            int npic = 0;
+            char * Prefix = NULL;
+            int prefixlen = 0;
+
+            for (int a=0;a<(int)SubdImages.NumEntries;a++){
+                if (!NameIsImage(SubdirName)) continue;
+
+                if (Prefix == NULL){
+                    Prefix = SubdirName;
+                    prefixlen = 7;
+                    continue;
+                }
+
+                for (int b=0;b<prefixlen;b++){
+                    if (SubdirName[b] != Prefix[b] || SubdirName[b] == 0){
+                        prefixlen = b;
+                        break;
+                    }
+                }
+            }
+            prefixlen = prefixlen >= 7 ? 7 : 0;
+
+
+            printf("\n<script type=\"text/javascript\">\n");
+            printf("pixpath=\"pix/\"\n");
+            printf("subdir=\"%s\"\n",HtmlPath);
+            printf("prefix=\"%.*s\"\n",prefixlen, Prefix);
+            printf("subdirname=%s\n", SubdirName);
+            printf("piclist = [");
+
+            // Output list of images in the hour that we can flip through.
+            int HasLog = 0;
+
+            for (int a=0;a<(int)SubdImages.NumEntries;a++){
+                if (strcmp(SubdirName, "Log.html") == 0) HasLog = 1;
+                if (!NameIsImage(SubdirName)) continue;
+
+                int e = strlen(SubdirName);
+                e -= 4;
+
+                if (npic){
+                    putchar(',');
+                    if (npic % 5 == 0) putchar('\n');
+                }
+                printf("\"%s\"",SubdirName+prefixlen);
+                npic++;
+            }
+
+            printf("];\n\n");
+
+            // Dump some variables for the javascript code.
+            printf("hasLog=%d\n",HasLog);
+            //printf("isSavedDir=%d\n",IsSavedDir);
+            //printf("PrevDir=\"%s\";NextDir=\"%s\"\n",dir->Previous, dir->Next);
+            printf("</script>\n");
         }
         free(SubdImages.Entries);
 
@@ -179,7 +238,7 @@ static int ShowHourlyDirs(char * HtmlPath, int IsRoot, VarList Directories)
     }
     printf("<br clear=left>\n");
     if (TotImages) printf("<br>%d images<br>",TotImages);
-    
+
     return TotImages;
 }
 
@@ -430,11 +489,14 @@ void MakeHtmlOutput(Dir_t * Dir)
 
     // Add javascript for hover-over preview when showing a whole day's worth of images
     if (SubdirImages){
-        
+
         printf("<br><small id='prevn'></small><br>\n"
            "<a id='prevh' href=""><img id='preview' src='' width=0 height=0></a>\n");
 
-    // Javascript
+        // Include the showdir.js javascript file.
+        printf("<script type=\"text/javascript\" src=\"showdir.js\"></script>\n");
+
+        // Javascript
         printf("<script>\n" // Script to resize the image to the right aspect ratio
            "function sizeit(){\n"
            "  var h = 350\n"
@@ -442,7 +504,7 @@ void MakeHtmlOutput(Dir_t * Dir)
            "  if (w > 1024){ w=850;h=w/el.naturalWidth*el.naturalHeight;}\n"
            "  el.width=w;el.height=h;\n"
            "}\n");
-           
+
         printf("function mmo(str){\n"
            "   str='%s/'+str\n",Dir->HtmlPath);
         printf("   el = document.getElementById('preview')\n"
diff --git a/browse/showdir.js b/browse/showdir.js
new file mode 100755
index 0000000..3a03daf
--- /dev/null
+++ b/browse/showdir.js
@@ -0,0 +1,295 @@
+// Javascript code for flipping through an hour's worth of images from imgcomp
+// Invoked from HTML generated by view.cgi module showpic.c
+var canv = document.getElementById(subdirname);
+pic_mouseindex = -1
+
+canv.addEventListener('mousemove', function(event) {
+    var x = event.pageX - canv.offsetLeft;
+    var thisbin = Math.floor(x / per_hist_bar)
+    if (ActNums[thisbin] >= 0){
+        if (ScrollDir) PlayStop()
+        pic_mouseindex = ActNums[thisbin]
+        UpdatePix();
+    }
+}, false);
+
+canv.addEventListener('mouseleave', function (event) {
+    if (pic_mouseindex >= 0){
+        pic_mouseindex = -1
+        UpdatePix();
+    }
+}, false);
+
+canv.addEventListener('click', function(event) {
+    var x = event.pageX - canv.offsetLeft;
+    var thisbin = Math.floor(x / per_hist_bar)
+    if (ActBins[thisbin]){
+        SetIndex(ActNums[thisbin])
+    }else if (thisbin>0 && ActBins[thisbin-1]){
+        SetIndex(ActNums[thisbin-1])
+    }else if (thisbin<HIST_BINS-1 && ActBins[thisbin+1]){
+        SetIndex(ActNums[thisbin+1])
+    }
+}, false);
+BARS_HEIGHT = canv.height-5;
+HIST_BINS = 240
+
+thisbin_last = -1
+per_hist_bar = canv.width/HIST_BINS
+
+function UpdateActagram(){
+    // Update the actagram text character display below the nav links.
+    var ctx = canv.getContext("2d");
+    var thisbin
+
+    if (piclist.length){
+        var thissec = parseInt(piclist[pic_index].substring(0,2))*60 + parseInt(piclist[pic_index].substring(2,4))
+        thisbin = Math.floor(thissec*HIST_BINS/3600)
+    }
+
+    if (thisbin == thisbin_last) return;
+    thisbin_last = thisbin
+
+    // clear canvas so we don't draw on top of it each time
+    ctx.clearRect(0, 0, canv.width, canv.height);
+
+    // draw 10 minute scale stripe background as first layer
+    for (a=0;a<60;a+=10){
+        ctx.fillStyle = a % 20 == 0 ? "#ffffff" : "#ebebeb";
+        var histX = a*HIST_BINS/60*per_hist_bar
+        ctx.fillRect(histX, 0, canv.width/6, canv.height);
+    }
+
+    ctx.fillStyle = "#a0a0ff"
+    ctx.fillRect((thisbin-0.5)*per_hist_bar, 0, per_hist_bar*2-0.5, canv.height);
+
+    for (a=0;a<HIST_BINS;a++){
+        b = ActBins[a];
+        if (!b) continue
+
+        ctx.fillStyle = a == thisbin ? "black" : "gray";
+        var rectHeight = b/max_bin*BARS_HEIGHT;
+        ctx.fillRect(a*per_hist_bar, BARS_HEIGHT, per_hist_bar-0.5, -rectHeight);
+    }
+}
+
+NextImgUrl = ""
+flagsstr = ""
+SaveResp = ""
+function UpdatePix(){
+    if (!piclist.length) return;
+    index = pic_mouseindex >= 0 ? pic_mouseindex : pic_index
+    var n = prefix+piclist[index]
+    document.getElementById("this").innerHTML = n.substring(5,7)+":"+n.substring(7,9)+":"+n.substring(9,11)
+    var imgname = subdir+n
+    var url = pixpath+imgname;
+    flagsstr = ""
+    if (AdjustBright){
+        flagsstr = "b";
+        url = "tb.cgi?"+imgname+(ShowBigOn?"$1":"$2")
+    }
+    if (!document.getElementById("view").complete){
+        NextImgUrl = url;
+    }else{
+        document.getElementById("view").src = url
+    }
+    if (ShowBigOn) flagsstr = flagsstr + "e";
+    if (flagsstr != "") flagsstr = flagsstr +","
+    var nch = "#"+flagsstr+prefix+piclist[index]
+
+    UpdateActagram()
+    if (SaveResp){
+        document.getElementById("save").innerHTML = "Save"
+        SaveResp = ""
+    }
+
+    if ((pic_mouseindex < 0 || pic_mouseindex == pic_index)
+         && (nch != currenthash)){
+        if (nch.substring(0,5) == currenthash.substring(0,5) || currenthash == ""){
+            // If only image# changed, don't fill up the browser history.
+            // But... when scrubbing thru a lot of images on iPad, history.replacestate ends up
+            // failing, so I moved it late in the processing so it doesn't cause other stuff to fail.
+            // I should make it only call on pictouchend (or mouse up) 
+            // to not overwhelm history.replacestate mechaism.
+            history.replaceState({}, imgname, nch)
+        }else{
+            location.hash = nch
+            document.title = imgname
+        }
+        currenthash = nch
+    }
+}
+
+function DoNext(dir){
+    if (pic_index+dir < 0 || pic_index+dir >= piclist.length){
+        PlayStop()
+        return 0
+    }else{
+        pic_index += dir
+        UpdatePix();
+        return 1
+    }
+}
+
+ScrollDir = 0
+ScrollTimer = 0
+function ScrollMoreTimer()
+{
+    ScrollTimer = 0
+    var img = document.querySelector('img')
+    if (!document.getElementById("view").complete) return;
+
+    if (ScrollDir){
+        if (DoNext(ScrollDir)){
+            ScrollTimer = setTimeout(ScrollMoreTimer,isSavedDir?400:100)
+        }
+    }
+}
+
+function SetIndex(index)
+{
+    pic_index = index
+    UpdatePix()
+}
+
+function PlayStart(dir)
+{
+    ScrollDir = dir
+    DoNext(ScrollDir)
+    ScrollTimer = setTimeout(ScrollMoreTimer, 400)
+}
+function PlayStop()
+{
+    ScrollDir = 0
+    document.getElementById("play").innerHTML="Play"
+    clearTimeout(ScrollTimer)
+    ScrollTimer = 0
+}
+
+function PlayButtonClick()
+{
+    if (ScrollDir){
+        PlayStop()
+    }else{
+        if (pic_index >= piclist.length-1) pic_index = 0
+        PlayStart(1)
+        document.getElementById("play").innerHTML="Stop"
+    }
+}
+
+function PrevNextDirLinkUpdate()
+{
+    if (PrevDir) document.getElementById("prevdir").href = "view.cgi?"+PrevDir+"/#"+flagsstr
+    if (NextDir) document.getElementById("nextdir").href = "view.cgi?"+NextDir+"/#"+flagsstr
+}
+
+
+DragActive = false
+xref = 0;
+ref_index = 0;
+MouseIsDown = 0
+
+TouchDebounce = false; // Touch and mouse events arrive out of order on iPad, so "debounce" to avoid turning
+                        // single taps into double taps.
+
+
+
+
+function SizeImage()
+{
+    document.getElementById("big").innerHTML= ShowBigOn?"Smaller":"Enlarge"
+    if (ShowBigOn){
+        vc.width = vc.naturalWidth;
+        vc.height = vc.naturalHeight;
+        ShwW = vc.width;
+        ShwH = vc.height;
+        return;
+    }
+    maxw = 950; maxh = 650
+    //maxw = 600; maxh = 350
+
+    ShwW = maxw
+    if (ShwW > window.innerWidth-15) ShwW = window.innerWidth-15;
+    if (piclist.length == 0){
+        return;
+    }
+    if (vc.naturalWidth > 0){
+        ShwH = Math.round(ShwW*vc.naturalHeight/vc.naturalWidth)
+        if (ShwH > maxh){
+            ShwH = maxh;
+            ShwW = Math.round(ShwH*vc.naturalWidth/vc.naturalHeight)
+        }
+    }else{
+        console.log("Unknown width")
+        ShwW = 320; ShwH = 240
+    }
+    vc.width = ShwW
+    vc.height = ShwH
+}
+
+
+// Fill bins for actagram (a sort of motion time histogram)
+ActBins = []
+ActNums = []
+
+var max_bin = 6;// maximun used to scale histogram within canvas height
+for (a=0;a<piclist.length;a++){
+    var sec = parseInt(piclist[a].substring(0,2))*60 + parseInt(piclist[a].substring(2,4))
+    var binfl = sec*HIST_BINS/3600
+    var bin = Math.floor(binfl)
+    var frac = binfl-bin
+    if (ActBins[bin]) ActBins[bin]++
+    else ActBins[bin] = 1
+
+    if (frac < 0.6 || !ActNums[bin]) ActNums[bin] = a;
+    if (max_bin < ActBins[bin]) max_bin = ActBins[bin];
+}
+
+pic_index=0
+currenthash = "x"
+// Read hash and figure out which image to load with what settings.
+// Used for direct links to iamge, page reload, and back button URL changes.
+function ReadHash(){
+    var pct = location.hash.replace("%20", " ");
+    if (currenthash == pct) return;
+    currenthash = pct
+
+    if (pct){
+        var ci = pct.indexOf(",");
+        var flags = ""
+        if (ci > 0 && ci < 5){
+            flags=pct.substring(0,ci)
+            pct = pct.substring(ci)
+        }
+        var nab = flags.indexOf("b") >= 0
+        if (nab != AdjustBright){
+            AdjustBright = nab;
+            UpdBrBt();
+        }
+        var lsb = ShowBigOn;
+        ShowBigOn = flags.indexOf("e") >= 0
+        if (lsb != ShowBigOn && LastWidth !=0) SizeImage();
+
+        // Figure out index in picture list based on URL after '#'
+        var m = pct.substring(prefix.length+1)
+        //if (m.substring(m.length-4) == ".jpg") m = m.substring(0,m.length-4)
+        for (pic_index=0;pic_index<piclist.length-1;pic_index++){
+            if (piclist[pic_index] >= m) break;
+        }
+        if (pct == "first") pic_index = 0;
+        if (pct == "last") pic_index = piclist.length-1
+        //console.log("big:"+ShowBigOn+"   Bright:"+AdjustBright);
+    }else{
+        pic_index = 0
+        AdjustBright = ShowBigOn = false;
+    }
+    UpdatePix();
+}
+
+UpdateActagram()
+window.onhashchange = ReadHash
+ReadHash();
+function DbgAdd(msg){
+//  dbg = (dbg+" "+msg)
+//  document.getElementById("dbg").innerHTML = dbg
+}

From e3a776528bdcb5c1c2c874f67ecd9a9a4064dfd7 Mon Sep 17 00:00:00 2001
From: John-Michael Faircloth <fairclothjm@gmail.com>
Date: Tue, 6 Sep 2022 15:56:05 -0500
Subject: [PATCH 2/2] draw the minute markers on all canvas elements

---
 browse/showdir.c  |  31 +++---
 browse/showdir.js | 234 ++--------------------------------------------
 2 files changed, 26 insertions(+), 239 deletions(-)

diff --git a/browse/showdir.c b/browse/showdir.c
index 90eb67a..ae5a62b 100755
--- a/browse/showdir.c
+++ b/browse/showdir.c
@@ -174,7 +174,7 @@ static int ShowHourlyDirs(char * HtmlPath, int IsRoot, VarList Directories)
 
         if (!IsRoot) {
             //ShowHourActagram(SubdImages, HtmlPath, SubdirName);
-            printf("<br>\n<canvas id=%s width='240px' height='30px' "
+            printf("<br>\n<canvas id='canvas-%s' width='240px' height='30px' "
                    "style=\"margin: 0; padding: 0; overflow: hidden; text-decoration: none;\"></canvas>\n", SubdirName);
             int npic = 0;
             char * Prefix = NULL;
@@ -203,7 +203,8 @@ static int ShowHourlyDirs(char * HtmlPath, int IsRoot, VarList Directories)
             printf("pixpath=\"pix/\"\n");
             printf("subdir=\"%s\"\n",HtmlPath);
             printf("prefix=\"%.*s\"\n",prefixlen, Prefix);
-            printf("subdirname=%s\n", SubdirName);
+            printf("console.log(\"subdirname\", %s)\n", SubdirName);
+            printf("subdirname='canvas-%s'\n", SubdirName);
             printf("piclist = [");
 
             // Output list of images in the hour that we can flip through.
@@ -231,6 +232,8 @@ static int ShowHourlyDirs(char * HtmlPath, int IsRoot, VarList Directories)
             //printf("isSavedDir=%d\n",IsSavedDir);
             //printf("PrevDir=\"%s\";NextDir=\"%s\"\n",dir->Previous, dir->Next);
             printf("</script>\n");
+            // Include the showdir.js javascript file.
+            printf("<script type=\"text/javascript\" src=\"showdir.js\"></script>\n");
         }
         free(SubdImages.Entries);
 
@@ -405,11 +408,11 @@ void MakeHtmlOutput(Dir_t * Dir)
 
     int IsSavedDir = 0;
     int IsRoot = 0;
-            
+
     if (strstr(Dir->HtmlPath, "saved") != NULL) IsSavedDir = 1;
-    
+
     Images = Dir->Images;
-    Directories = Dir->Dirs;    
+    Directories = Dir->Dirs;
 
     // Header of file.
     printf("<html>\n<title>%s</title>\n",Dir->HtmlPath);
@@ -453,7 +456,7 @@ void MakeHtmlOutput(Dir_t * Dir)
     }
 
     printf("<p>\n");
-        
+
     if (IsRoot){
         // Show host name and free space for root directory.
         FILE * fp = fopen("/proc/sys/kernel/hostname","r");
@@ -461,20 +464,25 @@ void MakeHtmlOutput(Dir_t * Dir)
         memset(HostName, 0, 32);
         fread(HostName, 1, 30, fp);
         fclose(fp);
-        
+
         struct statvfs sv;
         statvfs("pix/", &sv);
         printf("%s: %5.1f gig ", HostName, (double)sv.f_bavail * sv.f_bsize / 1000000000);
         printf("(%4.1f%%) free<br>\n", (double)(sv.f_bavail*100.0/sv.f_blocks));
     }
-    
+
     int SubdirImages = 0;
     if (Directories.NumEntries){
         if (!IsSavedDir){
             printf("<b>20%.2s/%.2s/%.2s</b><br>",Dir->HtmlPath,Dir->HtmlPath+2,Dir->HtmlPath+4);
         }
         PrintNavLinks(Dir, IsRoot);
+
         SubdirImages = ShowHourlyDirs(Dir->HtmlPath, IsRoot, Directories);
+
+        // Include the showdir.js javascript file.
+        //printf("<script type=\"text/javascript\" src=\"showdir.js\"></script>\n");
+
     }else{
         PrintNavLinks(Dir, IsRoot);
     }
@@ -484,7 +492,7 @@ void MakeHtmlOutput(Dir_t * Dir)
         ShowThumbnailList(Dir->HtmlPath, IsSavedDir, Images);
     }
 
-    printf("<p>\n");    
+    printf("<p>\n");
     PrintNavLinks(Dir, IsRoot);
 
     // Add javascript for hover-over preview when showing a whole day's worth of images
@@ -493,9 +501,6 @@ void MakeHtmlOutput(Dir_t * Dir)
         printf("<br><small id='prevn'></small><br>\n"
            "<a id='prevh' href=""><img id='preview' src='' width=0 height=0></a>\n");
 
-        // Include the showdir.js javascript file.
-        printf("<script type=\"text/javascript\" src=\"showdir.js\"></script>\n");
-
         // Javascript
         printf("<script>\n" // Script to resize the image to the right aspect ratio
            "function sizeit(){\n"
@@ -518,4 +523,6 @@ void MakeHtmlOutput(Dir_t * Dir)
            " + ' &nbsp;'+str.substring(15, 17)+':'+str.substring(17,19);"
            "}\n</script>\n");
     }
+    printf("</body>\n");
+    printf("</html>\n");
 }
diff --git a/browse/showdir.js b/browse/showdir.js
index 3a03daf..d99c1e9 100755
--- a/browse/showdir.js
+++ b/browse/showdir.js
@@ -2,42 +2,20 @@
 // Invoked from HTML generated by view.cgi module showpic.c
 var canv = document.getElementById(subdirname);
 pic_mouseindex = -1
+console.log("canv", subdirname)
 
-canv.addEventListener('mousemove', function(event) {
-    var x = event.pageX - canv.offsetLeft;
-    var thisbin = Math.floor(x / per_hist_bar)
-    if (ActNums[thisbin] >= 0){
-        if (ScrollDir) PlayStop()
-        pic_mouseindex = ActNums[thisbin]
-        UpdatePix();
-    }
-}, false);
-
-canv.addEventListener('mouseleave', function (event) {
-    if (pic_mouseindex >= 0){
-        pic_mouseindex = -1
-        UpdatePix();
-    }
-}, false);
-
-canv.addEventListener('click', function(event) {
-    var x = event.pageX - canv.offsetLeft;
-    var thisbin = Math.floor(x / per_hist_bar)
-    if (ActBins[thisbin]){
-        SetIndex(ActNums[thisbin])
-    }else if (thisbin>0 && ActBins[thisbin-1]){
-        SetIndex(ActNums[thisbin-1])
-    }else if (thisbin<HIST_BINS-1 && ActBins[thisbin+1]){
-        SetIndex(ActNums[thisbin+1])
-    }
-}, false);
-BARS_HEIGHT = canv.height-5;
+if (canv) {
+    BARS_HEIGHT = canv.height-5;
+} else {
+    console.log("canv is null; subdirname", subdirname);
+}
 HIST_BINS = 240
 
 thisbin_last = -1
 per_hist_bar = canv.width/HIST_BINS
 
 function UpdateActagram(){
+    console.log("update called for", subdirname)
     // Update the actagram text character display below the nav links.
     var ctx = canv.getContext("2d");
     var thisbin
@@ -73,161 +51,10 @@ function UpdateActagram(){
     }
 }
 
-NextImgUrl = ""
-flagsstr = ""
-SaveResp = ""
-function UpdatePix(){
-    if (!piclist.length) return;
-    index = pic_mouseindex >= 0 ? pic_mouseindex : pic_index
-    var n = prefix+piclist[index]
-    document.getElementById("this").innerHTML = n.substring(5,7)+":"+n.substring(7,9)+":"+n.substring(9,11)
-    var imgname = subdir+n
-    var url = pixpath+imgname;
-    flagsstr = ""
-    if (AdjustBright){
-        flagsstr = "b";
-        url = "tb.cgi?"+imgname+(ShowBigOn?"$1":"$2")
-    }
-    if (!document.getElementById("view").complete){
-        NextImgUrl = url;
-    }else{
-        document.getElementById("view").src = url
-    }
-    if (ShowBigOn) flagsstr = flagsstr + "e";
-    if (flagsstr != "") flagsstr = flagsstr +","
-    var nch = "#"+flagsstr+prefix+piclist[index]
-
-    UpdateActagram()
-    if (SaveResp){
-        document.getElementById("save").innerHTML = "Save"
-        SaveResp = ""
-    }
-
-    if ((pic_mouseindex < 0 || pic_mouseindex == pic_index)
-         && (nch != currenthash)){
-        if (nch.substring(0,5) == currenthash.substring(0,5) || currenthash == ""){
-            // If only image# changed, don't fill up the browser history.
-            // But... when scrubbing thru a lot of images on iPad, history.replacestate ends up
-            // failing, so I moved it late in the processing so it doesn't cause other stuff to fail.
-            // I should make it only call on pictouchend (or mouse up) 
-            // to not overwhelm history.replacestate mechaism.
-            history.replaceState({}, imgname, nch)
-        }else{
-            location.hash = nch
-            document.title = imgname
-        }
-        currenthash = nch
-    }
-}
-
-function DoNext(dir){
-    if (pic_index+dir < 0 || pic_index+dir >= piclist.length){
-        PlayStop()
-        return 0
-    }else{
-        pic_index += dir
-        UpdatePix();
-        return 1
-    }
-}
-
-ScrollDir = 0
-ScrollTimer = 0
-function ScrollMoreTimer()
-{
-    ScrollTimer = 0
-    var img = document.querySelector('img')
-    if (!document.getElementById("view").complete) return;
-
-    if (ScrollDir){
-        if (DoNext(ScrollDir)){
-            ScrollTimer = setTimeout(ScrollMoreTimer,isSavedDir?400:100)
-        }
-    }
-}
-
-function SetIndex(index)
-{
-    pic_index = index
-    UpdatePix()
-}
-
-function PlayStart(dir)
-{
-    ScrollDir = dir
-    DoNext(ScrollDir)
-    ScrollTimer = setTimeout(ScrollMoreTimer, 400)
-}
-function PlayStop()
-{
-    ScrollDir = 0
-    document.getElementById("play").innerHTML="Play"
-    clearTimeout(ScrollTimer)
-    ScrollTimer = 0
-}
-
-function PlayButtonClick()
-{
-    if (ScrollDir){
-        PlayStop()
-    }else{
-        if (pic_index >= piclist.length-1) pic_index = 0
-        PlayStart(1)
-        document.getElementById("play").innerHTML="Stop"
-    }
-}
-
-function PrevNextDirLinkUpdate()
-{
-    if (PrevDir) document.getElementById("prevdir").href = "view.cgi?"+PrevDir+"/#"+flagsstr
-    if (NextDir) document.getElementById("nextdir").href = "view.cgi?"+NextDir+"/#"+flagsstr
-}
-
-
-DragActive = false
-xref = 0;
-ref_index = 0;
-MouseIsDown = 0
 
-TouchDebounce = false; // Touch and mouse events arrive out of order on iPad, so "debounce" to avoid turning
-                        // single taps into double taps.
 
 
 
-
-function SizeImage()
-{
-    document.getElementById("big").innerHTML= ShowBigOn?"Smaller":"Enlarge"
-    if (ShowBigOn){
-        vc.width = vc.naturalWidth;
-        vc.height = vc.naturalHeight;
-        ShwW = vc.width;
-        ShwH = vc.height;
-        return;
-    }
-    maxw = 950; maxh = 650
-    //maxw = 600; maxh = 350
-
-    ShwW = maxw
-    if (ShwW > window.innerWidth-15) ShwW = window.innerWidth-15;
-    if (piclist.length == 0){
-        return;
-    }
-    if (vc.naturalWidth > 0){
-        ShwH = Math.round(ShwW*vc.naturalHeight/vc.naturalWidth)
-        if (ShwH > maxh){
-            ShwH = maxh;
-            ShwW = Math.round(ShwH*vc.naturalWidth/vc.naturalHeight)
-        }
-    }else{
-        console.log("Unknown width")
-        ShwW = 320; ShwH = 240
-    }
-    vc.width = ShwW
-    vc.height = ShwH
-}
-
-
 // Fill bins for actagram (a sort of motion time histogram)
 ActBins = []
 ActNums = []
@@ -245,51 +72,4 @@ for (a=0;a<piclist.length;a++){
     if (max_bin < ActBins[bin]) max_bin = ActBins[bin];
 }
 
-pic_index=0
-currenthash = "x"
-// Read hash and figure out which image to load with what settings.
-// Used for direct links to iamge, page reload, and back button URL changes.
-function ReadHash(){
-    var pct = location.hash.replace("%20", " ");
-    if (currenthash == pct) return;
-    currenthash = pct
-
-    if (pct){
-        var ci = pct.indexOf(",");
-        var flags = ""
-        if (ci > 0 && ci < 5){
-            flags=pct.substring(0,ci)
-            pct = pct.substring(ci)
-        }
-        var nab = flags.indexOf("b") >= 0
-        if (nab != AdjustBright){
-            AdjustBright = nab;
-            UpdBrBt();
-        }
-        var lsb = ShowBigOn;
-        ShowBigOn = flags.indexOf("e") >= 0
-        if (lsb != ShowBigOn && LastWidth !=0) SizeImage();
-
-        // Figure out index in picture list based on URL after '#'
-        var m = pct.substring(prefix.length+1)
-        //if (m.substring(m.length-4) == ".jpg") m = m.substring(0,m.length-4)
-        for (pic_index=0;pic_index<piclist.length-1;pic_index++){
-            if (piclist[pic_index] >= m) break;
-        }
-        if (pct == "first") pic_index = 0;
-        if (pct == "last") pic_index = piclist.length-1
-        //console.log("big:"+ShowBigOn+"   Bright:"+AdjustBright);
-    }else{
-        pic_index = 0
-        AdjustBright = ShowBigOn = false;
-    }
-    UpdatePix();
-}
-
 UpdateActagram()
-window.onhashchange = ReadHash
-ReadHash();
-function DbgAdd(msg){
-//  dbg = (dbg+" "+msg)
-//  document.getElementById("dbg").innerHTML = dbg
-}