1 files changed, 42 insertions, 19 deletions

diff --git a/html/rrdui.js b/html/rrdui.js
index d5b80bb..fb0c109 100644
--- a/html/rrdui.js
+++ b/html/rrdui.js
@@ -65,15 +65,26 @@ function setupFrame()
 function displayCurrentPage()
 {
     var area = gdoc.getElementById("graphs");
+    var img;
 
     /* Hide all images not from this category */
     var i, images = area.getElementsByTagName("img");
     for(i = 0; i < images.length; i++)
     {
-        if(images.item(i)._category == categoryCurrent)
-            images.item(i).style.display = "inline";
-        else
-            images.item(i).style.display = "none";
+        img = images.item(i);
+        var vis = (img._category == categoryCurrent);
+
+        img.style.display = vis ? "inline" : "none";
+
+        if(vis != img._visible)
+        {
+            /* The graph needs reloading if now turning visible */
+            img._visible = vis;
+            if(vis)
+                reloadGraph(img, false);
+            else
+                img._loading = false;
+        }
     }
 
     var data = findCategoryData(categoryCurrent);
@@ -99,7 +110,7 @@ function displayCurrentPage()
 
         /* Make sure we don't already have this graph */
         var id = "graph-" + categoryCurrent + "-" + name;
-        var img = gdoc.getElementById(id);
+        img = gdoc.getElementById(id);
         if(img != null)
             continue;
 
@@ -130,8 +141,10 @@ function displayCurrentPage()
         img._tbeg = tbeg;
         img._tend = tend;
         img._tinterval = interval;
+        img._visible = true;
+        img._loading = false;
 
-        reloadGraph(img);
+        reloadGraph(img, false);
 
         img.onmousedown = function(evt)
             { actionGotoCancel(); return zoomGraphStart(evt || gwindow.event); }
@@ -148,8 +161,11 @@ function displayCurrentPage()
     }
 }
 
-function reloadGraph(img)
+function reloadGraph(img, force)
 {
+    if(!img._visible)
+        return;
+
     /* TODO: Move these into settings */
     /* TODO: We should encode colons properly */
     var GRAPH_COLOR_BACK = ":252424";
@@ -169,15 +185,17 @@ function reloadGraph(img)
     /* Size */
     uri += "&height=" + GRAPH_HEIGHT + "&width=" + GRAPH_WIDTH;
 
-    img._loading = true;
-    updateCursors(img);
+    if(force || img.getAttribute("src") != uri)
+    {
+        img._loading = true;
+        updateCursors(img);
 
-    /* HACK: The onload event for IMG is called with a strange event target */
-    img.onload = new Function("reloadedGraph('" + img.id + "');");
-    img.setAttribute("src", uri);
+        /* HACK: The onload event for IMG is called with a strange event target */
+        img.onload = new Function("reloadedGraph('" + img.id + "');");
+        img.setAttribute("src", uri);
 
-    var now = nowTime();
-    img._last = now;
+        img._last = nowTime();
+    }
 }
 
 function reloadedGraph(id)
@@ -216,7 +234,7 @@ function autoScroll(img)
             /* ... then scroll by X seconds to scroll the graph */
             img._tbeg += diff;
             img._tend += diff;
-            reloadGraph(img);
+            reloadGraph(img, false);
         }
     }
 }
@@ -351,7 +369,7 @@ function zoomGraphSelect(zoom)
     zoom._img._tend = Math.floor((end * ratio) + zoom._img._tbeg);
     zoom._img._tbeg = Math.floor((start * ratio) + zoom._img._tbeg);
 
-    reloadGraph(zoom._img);
+    reloadGraph(zoom._img, true);
 }
 
 function zoomGraphCancel(evt)
@@ -387,7 +405,7 @@ function zoomGraphOut(img)
         img._tend += factor;
     }
 
-    reloadGraph(img);
+    reloadGraph(img, true);
 }
 
 function zoomGraphMove(img, dir)
@@ -397,7 +415,7 @@ function zoomGraphMove(img, dir)
         factor = -factor;
     img._tbeg += factor;
     img._tend += factor;
-    reloadGraph(img);
+    reloadGraph(img, true);
 }
 
 function actionsDisplay(evt)
@@ -522,7 +540,7 @@ function actionGotoChange()
     times = sel.value.split(":");
     img._tbeg = nowTime() - times[0];
     img._tend = nowTime() - times[1];
-    reloadGraph(img);
+    reloadGraph(img, true);
 
     actionGotoCancel();
 }
@@ -640,6 +658,11 @@ function nowTime()
     return Math.floor((new Date()).getTime() / 1000);
 }
 
+function debug(msg)
+{
+   setTimeout(function() { throw new Error("[debug] " + msg); }, 0);
+}
+
 function makeEndpointURI()
 {
     /* TODO: This should use the scheme of the current URI */