From da0725178228e4f87fb1e786f3c0d53139da8613 Mon Sep 17 00:00:00 2001
From: mpomery <bob_george33@hotmail.com>
Date: Wed, 3 Dec 2014 19:20:00 +0800
Subject: [PATCH] Moving JS out of the archive page

---
 www/archive.html | 382 ++---------------------------------------------
 www/archive.js   | 333 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 347 insertions(+), 368 deletions(-)
 create mode 100644 www/archive.js

diff --git a/www/archive.html b/www/archive.html
index 8558d42..77d54d8 100644
--- a/www/archive.html
+++ b/www/archive.html
@@ -6,367 +6,14 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
   <title>UCC Webcams @ Loading...</title>
-  <noscript>
-   <meta http-equiv="refresh" content="0;URL=http://www.ucc.asn.au/cgi-bin/webcam.py">
-  </noscript>
   <link rel="stylesheet" href="http://planet.ucc.asn.au/planet.css" type="text/css" media="screen" />
-  <link rel="stylesheet" href="http://webcam.ucc.asn.au/webcam-overrides.css" type="text/css" media="screen" />
-  <link rel="icon" type="image/png" href="http://planet.ucc.asn.au/icon.png" />
-  <link rel="SHORTCUT ICON" type="image/png" href="http://planet.ucc.asn.au/icon.png" />
-  <script type="text/javascript">
-var d;
-var months = new Array ("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
-var days = new Array ("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
-
-function windowOnload()
-{
-	// set the initial date from the server
-        // get an XML HTTP Request object
-        var req = false;
-        try
-        {
-                req = new XMLHttpRequest ();
-        }
-        catch (e)
-        {
-                try
-                {
-                        req = new ActiveXObject ("Microsoft.XMLHTTP");
-                }
-                catch (e)
-                {
-                }
-        }
-
-        if (req)
-        {
-                req.onreadystatechange = function ()
-                {
-                        if (req.readyState == 4)
-                        {
-				d = new Date (Date.parse (req.getResponseHeader ("Date")));
-	
-				if (location.hash.length > 0)
-				{
-					d.setTime (location.hash.substring(1, location.hash.length));
-				}
-				else
-				{
-					d.setMinutes(d.getMinutes() - 1);
-				}
-				setupPage();
-				setDate();
-                        }
-
-                };
-
-		var timestamp = new Date ();
-                req.open ("HEAD", "index.html?" + timestamp.getTime (), true);
-                req.send ("");
-        }
-}
-
-function setDateNow()
-{
-	// get a new date from the server
-        // get an XML HTTP Request object
-        var req = false;
-        try
-        {
-                req = new XMLHttpRequest ();
-        }
-        catch (e)
-        {
-                try
-                {
-                        req = new ActiveXObject ("Microsoft.XMLHTTP");
-                }
-                catch (e)
-                {
-                }
-        }
-
-        if (req)
-        {
-                req.onreadystatechange = function ()
-                {
-                        if (req.readyState == 4)
-                        {
-				d = new Date (Date.parse (req.getResponseHeader ("Date")));
-	
-				d.setMinutes(d.getMinutes() - 1);
-				setDate();
-				alignSelects();
-                        }
-
-                };
-
-		var timestamp = new Date ();
-                req.open ("HEAD", "index.html?" + timestamp.getTime (), true);
-                req.send ("");
-        }
-}
-
-function setupPage()
-{
-	var form;
-	var i;
-
-	document.getElementById("nav-dayname").firstChild.data = days[d.getDay()];
-	form = document.getElementById("nav-day");
-	for (i = 0; i < 31; i++)
-	{
-		form[i] = new Option(i+1,i+1,(d.getDate() == i+1));
-	}
-	form = document.getElementById("nav-month");
-	for (i = 0; i < 12; i++)
-	{
-		form[i] = new Option(months[i],i,(d.getMonth() == i));
-	}
-	form = document.getElementById("nav-year");
-	for (i = 2003; i < d.getFullYear() + 1; i++)
-	{
-		form[i-2003] = new Option(i,i,(d.getFullYear() == i));
-	}
-	form = document.getElementById("nav-hour");
-	for (i = 0; i < 24; i++)
-	{
-		form[i] = new Option(zPad(i.toString()),i,(d.getHours() == i));
-	}
-	form = document.getElementById("nav-minute");
-	for (i = 0; i < 60; i++)
-	{
-		form[i] = new Option(zPad(i.toString()),i,(d.getMinutes() == i));
-	}
-}
-
-function alignSelects()
-{
-	var form;
-	var i;
-	
-	form = document.getElementById("nav-day");
-	for (i = 0; i < 31; i++)
-	{
-		if (d.getDate() == i+1)
-		{
-			form[i].selected = true;
-		}
-		else
-		{
-			form[i].selected = false;
-		}
-	}
-	form = document.getElementById("nav-month");
-	for (i = 0; i < 12; i++)
-	{
-		if (d.getMonth() == i)
-		{
-			form[i].selected = true;
-		}
-		else
-		{
-			form[i].selected = false;
-		}
-	}
-	form = document.getElementById("nav-year");
-	for (i = 2003; i < d.getFullYear() + 1; i++)
-	{
-		if (d.getFullYear() == i)
-		{
-			form[i-2003].selected = true;
-		}
-		else
-		{
-			form[i-2003].selected = false;
-		}
-	}
-	form = document.getElementById("nav-hour");
-	for (i = 0; i < 24; i++)
-	{
-		if (d.getHours() == i)
-		{
-			form[i].selected = true;
-		}
-		else
-		{
-			form[i].selected = false;
-		}
-	}
-	form = document.getElementById("nav-minute");
-	for (i = 0; i < 60; i++)
-	{
-		if (d.getMinutes() == i)
-		{
-			form[i].selected = true;
-		}
-		else
-		{
-			form[i].selected = false;
-		}
-	}
-}
-
-function navDate()
-{
-	d.setDate(document.getElementById("nav-day").value);
-	d.setMonth(document.getElementById("nav-month").value);
-	d.setFullYear(document.getElementById("nav-year").value);
-	d.setHours(document.getElementById("nav-hour").value);
-	d.setMinutes(document.getElementById("nav-minute").value);
-
-	setDate();
-}
-
-function zPad(str)
-{
-	if (str.length == 1)
-	{
-		str = "0" + str;
-	}
-	return str;
-}
-
-function setAlt (img, text)
-{
-	var lines = img.alt.split ("\n");
-	if (lines.length > 0)
-	{
-		img.alt = lines[0] + "\n" + text;
-	}
-	else
-	{
-		img.alt += "\n" + text;
-	}
-}
-
-function updateWebcam (webcamid, webcamurl)
-{
-        var img = document.getElementById (webcamid);
-
-        // get an XML HTTP Request object
-        var req = false;
-        try
-        {
-                req = new XMLHttpRequest ();
-        }
-        catch (e)
-        {
-                try
-                {
-                        req = new ActiveXObject ("Microsoft.XMLHTTP");
-                }
-                catch (e)
-                {
-                }
-        }
-
-        if (req)
-        {
-                req.onreadystatechange = function ()
-                {
-                        if (req.readyState == 4)
-                        {
-                                if (req.status == 200 || req.status == 304)
-				{
-					//img.parentNode.style.backgroundColor = "transparent";
-					img.style.display = 'inline';
-					//setAlt (img, "");
-                                }
-				else
-				{
-					img.style.display = 'none';
-					//img.parentNode.style.backgroundColor = "darkred";
-					//setAlt (img, "(status " + req.status + ")");
-				}
-                        }
-
-                };
-
-                req.open ("HEAD", webcamurl, true);
-                req.send ("");
-        }
-
-        // set the image
-        img.setAttribute ("src",webcamurl);
-}
-
-
-function setDate()
-{
-	window.location.hash = d.getTime();
-	//document.getElementById("timeremaining").firstChild.data = "loading...";
-
-	var timeString = days[d.getDay()]+" "+d.getDate()+" "+months[d.getMonth()]+" "+d.getFullYear()+", "+zPad(d.getHours().toString())+":"+zPad(d.getMinutes().toString());
-	document.title = "UCC Webcams @ "+timeString;
-	document.getElementById("header").firstChild.data = "UCC Webcams @ "+timeString;
-	document.getElementById("timeindex").firstChild.data = d.getTime();
-	document.getElementById("timeindex").href = "#"+d.getTime();
-
-	document.getElementById("nav-dayname").firstChild.data = days[d.getDay()];
-
-	var image = d.getFullYear()+zPad((d.getMonth()+1).toString())+"/"+zPad(d.getDate().toString())+"/"+zPad(d.getHours().toString())+"/"+zPad(d.getMinutes().toString())+".jpg";
-	updateWebcam ("webcam1", "/archive/colour/" + image);
-	//updateWebcam ("webcam1-datetime", "/archive/colour/" + image);
-	updateWebcam ("webcam2", "/archive/colour1/" + image);
-	updateWebcam ("webcam3", "/archive/colour3/" + image);
-	updateWebcam ("webcam4", "/archive/bw/" + image);
-	updateWebcam ("uvc1", "/archive/uvc1/" + image);
-	updateWebcam ("ipcamera1", "/archive/ipcamera1/" + image);
-	updateWebcam ("ipcamera2", "/archive/ipcamera2/" + image);
-	updateWebcam ("ipcamera3", "/archive/ipcamera3/" + image);
-	updateWebcam ("ipcamera4", "/archive/ipcamera4/" + image);
-	updateWebcam ("ipcamera5", "/archive/ipcamera5/" + image);
-	updateWebcam ("ipcamera6", "/archive/ipcamera6/" + image);
-	//setTimeout("clearText()",1000);
-}
-
-function setMinutes(mins)
-{
-	d.setMinutes(d.getMinutes() + mins);
-	setDate();
-	alignSelects();
-}
-
-function setHours(hours)
-{
-	d.setHours(d.getHours() + hours);
-	setDate();
-	alignSelects();
-}
-
-function setDays(days)
-{
-	d.setDate(d.getDate() + days);
-	setDate();
-	alignSelects();
-}
-
-function clearText()
-{
-	document.getElementById("timeremaining").firstChild.data = "";
-}
- </script>
-<style>
-.camera {
-	margin: 4px;
-	/*padding: 20px;*/
-	margin-left: auto;
-	margin-right: auto;
-	display: inline-block;
-	font-size: 0;
-}
-.header {
-	background: none;
-}
-</style>
+  <link rel="stylesheet" href="webcam-overrides.css" type="text/css" media="screen" />
+  <script type="text/javascript" src="archive.js"></script>
  </head>
  <body onload="windowOnload()">
 <div class="header">
 <img alt="Planet UCC" id="pucc_logo"
      src="//www.ucc.asn.au/images/ucc_logo.gif" />
-<!--<img src="http://planet.ucc.asn.au/cam_collage.jpg" alt="UCC Webcam Collage" id="pucc_banner1" />
-<img src="http://planet.ucc.asn.au/cam_collage.gif" alt="UCC Webcam Collage" id="pucc_banner2" />-->
 <div id="globalnav-wrapper">
  <ul id="portal-globalnav">
 
@@ -402,20 +49,19 @@ function clearText()
   <div class="navMenu">
     <a href="index.html">Live</a>
     <a href="http://webcam.ucc.asn.au/clubroom-schematic.png">Map</a>
-    <a href="index-nojs.php" title="Non-Javascript Webcam Page">Web0 Version</a>
   </div>
   <div class=camSection>
-     <div class="camera"><img id="webcam4" alt="BW Webcam" /></div>
-     <div class="camera"><img id="webcam3" alt="Webcam 3" /></div>
-     <div class="camera"><img id="webcam2" alt="Webcam 1" /></div>
-     <div class="camera"><img id="uvc1" alt="UVC 1" /></div>
-     <div class="camera"><img id="webcam1" alt="Webcam 2" /></div>
-     <div class="camera"><img id="ipcamera1" alt="IPCamera1" /></div>
-     <div class="camera"><img id="ipcamera2" alt="IPCamera2" /></div>
-     <div class="camera"><img id="ipcamera3" alt="IPCamera3" /></div>
-     <div class="camera"><img id="ipcamera4" alt="IPCamera4" /></div>
-     <div class="camera"><img id="ipcamera5" alt="IPCamera5" /></div>    
-     <div class="camera"><img id="ipcamera6" alt="IPCamera6" /></div>    
+     <div class="camera" id="webcam4"><img alt="BW Webcam" /></div>
+     <div class="camera" id="webcam3"><img alt="Webcam 3" /></div>
+     <div class="camera" id="webcam2"><img alt="Webcam 1" /></div>
+     <div class="camera" id="uvc1"><img alt="UVC 1" /></div>
+     <div class="camera" id="webcam1"><img alt="Webcam 2" /></div>
+     <div class="camera" id="ipcamera1"><img alt="IPCamera1" /></div>
+     <div class="camera" id="ipcamera2"><img alt="IPCamera2" /></div>
+     <div class="camera" id="ipcamera3"><img alt="IPCamera3" /></div>
+     <div class="camera" id="ipcamera4"><img alt="IPCamera4" /></div>
+     <div class="camera" id="ipcamera5"><img alt="IPCamera5" /></div>    
+     <div class="camera" id="ipcamera6"><img alt="IPCamera6" /></div>    
   </div>
   <div class="nav">
   <table width="100%">
@@ -485,7 +131,7 @@ days
       </form></div>
 </div>
 <div class="footer">
-  <p>Copyright 1993-2011, The University Computer Club Inc.
+  <p>Copyright 1993-2014, The University Computer Club Inc.
   &lt;<a href="mailto:webmasters@ucc">webmasters@ucc</a>&gt;<br />
   Written to be <a href="http://www.w3c.org/">specifications compliant</a>.
   </p>
diff --git a/www/archive.js b/www/archive.js
new file mode 100644
index 0000000..f78181d
--- /dev/null
+++ b/www/archive.js
@@ -0,0 +1,333 @@
+var d;
+var months = new Array ("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
+var days = new Array ("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
+
+function windowOnload()
+{
+	// set the initial date from the server
+        // get an XML HTTP Request object
+        var req = false;
+        try
+        {
+                req = new XMLHttpRequest ();
+        }
+        catch (e)
+        {
+                try
+                {
+                        req = new ActiveXObject ("Microsoft.XMLHTTP");
+                }
+                catch (e)
+                {
+                }
+        }
+
+        if (req)
+        {
+                req.onreadystatechange = function ()
+                {
+                        if (req.readyState == 4)
+                        {
+				d = new Date (Date.parse (req.getResponseHeader ("Date")));
+	
+				if (location.hash.length > 0)
+				{
+					d.setTime (location.hash.substring(1, location.hash.length));
+				}
+				else
+				{
+					d.setMinutes(d.getMinutes() - 1);
+				}
+				setupPage();
+				setDate();
+                        }
+
+                };
+
+		var timestamp = new Date ();
+                req.open ("HEAD", "index.html?" + timestamp.getTime (), true);
+                req.send ("");
+        }
+}
+
+function setDateNow()
+{
+	// get a new date from the server
+        // get an XML HTTP Request object
+        var req = false;
+        try
+        {
+                req = new XMLHttpRequest ();
+        }
+        catch (e)
+        {
+                try
+                {
+                        req = new ActiveXObject ("Microsoft.XMLHTTP");
+                }
+                catch (e)
+                {
+                }
+        }
+
+        if (req)
+        {
+                req.onreadystatechange = function ()
+                {
+                        if (req.readyState == 4)
+                        {
+				d = new Date (Date.parse (req.getResponseHeader ("Date")));
+	
+				d.setMinutes(d.getMinutes() - 1);
+				setDate();
+				alignSelects();
+                        }
+
+                };
+
+		var timestamp = new Date ();
+                req.open ("HEAD", "index.html?" + timestamp.getTime (), true);
+                req.send ("");
+        }
+}
+
+function setupPage()
+{
+	var form;
+	var i;
+
+	document.getElementById("nav-dayname").firstChild.data = days[d.getDay()];
+	form = document.getElementById("nav-day");
+	for (i = 0; i < 31; i++)
+	{
+		form[i] = new Option(i+1,i+1,(d.getDate() == i+1));
+	}
+	form = document.getElementById("nav-month");
+	for (i = 0; i < 12; i++)
+	{
+		form[i] = new Option(months[i],i,(d.getMonth() == i));
+	}
+	form = document.getElementById("nav-year");
+	for (i = 2003; i < d.getFullYear() + 1; i++)
+	{
+		form[i-2003] = new Option(i,i,(d.getFullYear() == i));
+	}
+	form = document.getElementById("nav-hour");
+	for (i = 0; i < 24; i++)
+	{
+		form[i] = new Option(zPad(i.toString()),i,(d.getHours() == i));
+	}
+	form = document.getElementById("nav-minute");
+	for (i = 0; i < 60; i++)
+	{
+		form[i] = new Option(zPad(i.toString()),i,(d.getMinutes() == i));
+	}
+}
+
+function alignSelects()
+{
+	var form;
+	var i;
+	
+	form = document.getElementById("nav-day");
+	for (i = 0; i < 31; i++)
+	{
+		if (d.getDate() == i+1)
+		{
+			form[i].selected = true;
+		}
+		else
+		{
+			form[i].selected = false;
+		}
+	}
+	form = document.getElementById("nav-month");
+	for (i = 0; i < 12; i++)
+	{
+		if (d.getMonth() == i)
+		{
+			form[i].selected = true;
+		}
+		else
+		{
+			form[i].selected = false;
+		}
+	}
+	form = document.getElementById("nav-year");
+	for (i = 2003; i < d.getFullYear() + 1; i++)
+	{
+		if (d.getFullYear() == i)
+		{
+			form[i-2003].selected = true;
+		}
+		else
+		{
+			form[i-2003].selected = false;
+		}
+	}
+	form = document.getElementById("nav-hour");
+	for (i = 0; i < 24; i++)
+	{
+		if (d.getHours() == i)
+		{
+			form[i].selected = true;
+		}
+		else
+		{
+			form[i].selected = false;
+		}
+	}
+	form = document.getElementById("nav-minute");
+	for (i = 0; i < 60; i++)
+	{
+		if (d.getMinutes() == i)
+		{
+			form[i].selected = true;
+		}
+		else
+		{
+			form[i].selected = false;
+		}
+	}
+}
+
+function navDate()
+{
+	d.setDate(document.getElementById("nav-day").value);
+	d.setMonth(document.getElementById("nav-month").value);
+	d.setFullYear(document.getElementById("nav-year").value);
+	d.setHours(document.getElementById("nav-hour").value);
+	d.setMinutes(document.getElementById("nav-minute").value);
+
+	setDate();
+}
+
+function zPad(str)
+{
+	if (str.length == 1)
+	{
+		str = "0" + str;
+	}
+	return str;
+}
+
+function setAlt (img, text)
+{
+	var lines = img.alt.split ("\n");
+	if (lines.length > 0)
+	{
+		img.alt = lines[0] + "\n" + text;
+	}
+	else
+	{
+		img.alt += "\n" + text;
+	}
+}
+
+function updateWebcam (webcamid, webcamurl)
+{
+		var div = document.getElementById (webcamid);
+        var img = div.getElementsByTagName('img')[0];
+
+        // get an XML HTTP Request object
+        var req = false;
+        try
+        {
+                req = new XMLHttpRequest ();
+        }
+        catch (e)
+        {
+                try
+                {
+                        req = new ActiveXObject ("Microsoft.XMLHTTP");
+                }
+                catch (e)
+                {
+                }
+        }
+
+        if (req)
+        {
+                req.onreadystatechange = function ()
+                {
+                        if (req.readyState == 4)
+                        {
+                                if (req.status == 200 || req.status == 304)
+				{
+					//img.parentNode.style.backgroundColor = "transparent";
+					div.style.display = 'inline';
+					//setAlt (img, "");
+                                }
+				else
+				{
+					div.style.display = 'none';
+					//img.parentNode.style.backgroundColor = "darkred";
+					//setAlt (img, "(status " + req.status + ")");
+				}
+                        }
+
+                };
+
+                req.open ("HEAD", webcamurl, true);
+                req.send ("");
+        }
+
+        // set the image
+        img.setAttribute ("src",webcamurl);
+}
+
+
+function setDate()
+{
+	window.location.hash = d.getTime();
+	//document.getElementById("timeremaining").firstChild.data = "loading...";
+
+	var timeString = days[d.getDay()]+" "+d.getDate()+" "+months[d.getMonth()]+" "+d.getFullYear()+", "+zPad(d.getHours().toString())+":"+zPad(d.getMinutes().toString());
+	document.title = "UCC Webcams @ "+timeString;
+	document.getElementById("header").firstChild.data = "UCC Webcams @ "+timeString;
+	document.getElementById("timeindex").firstChild.data = d.getTime();
+	document.getElementById("timeindex").href = "#"+d.getTime();
+
+	document.getElementById("nav-dayname").firstChild.data = days[d.getDay()];
+
+	var image = d.getFullYear()+zPad((d.getMonth()+1).toString())+"/"+zPad(d.getDate().toString())+"/"+zPad(d.getHours().toString())+"/"+zPad(d.getMinutes().toString())+".jpg";
+	updateWebcam ("webcam1", "/archive/colour/" + image);
+	//updateWebcam ("webcam1-datetime", "/archive/colour/" + image);
+	updateWebcam ("webcam2", "/archive/colour1/" + image);
+	updateWebcam ("webcam3", "/archive/colour3/" + image);
+	updateWebcam ("webcam4", "/archive/bw/" + image);
+	updateWebcam ("uvc1", "/archive/uvc1/" + image);
+	updateWebcam ("ipcamera1", "/archive/ipcamera1/" + image);
+	updateWebcam ("ipcamera2", "/archive/ipcamera2/" + image);
+	updateWebcam ("ipcamera3", "/archive/ipcamera3/" + image);
+	updateWebcam ("ipcamera4", "/archive/ipcamera4/" + image);
+	updateWebcam ("ipcamera5", "/archive/ipcamera5/" + image);
+	updateWebcam ("ipcamera6", "/archive/ipcamera6/" + image);
+	//setTimeout("clearText()",1000);
+}
+
+function setMinutes(mins)
+{
+	d.setMinutes(d.getMinutes() + mins);
+	setDate();
+	alignSelects();
+}
+
+function setHours(hours)
+{
+	d.setHours(d.getHours() + hours);
+	setDate();
+	alignSelects();
+}
+
+function setDays(days)
+{
+	d.setDate(d.getDate() + days);
+	setDate();
+	alignSelects();
+}
+
+function clearText()
+{
+	document.getElementById("timeremaining").firstChild.data = "";
+}
\ No newline at end of file
-- 
GitLab