Index: trunk/src/cptms/cms_demo.html
===================================================================
--- trunk/src/cptms/cms_demo.html	(revision 298)
+++ trunk/src/cptms/cms_demo.html	(revision 299)
@@ -65,5 +65,11 @@
            float: left;
        }
-    </style>
+      #hideButton {
+        font-size: 40px;
+        margin-right: 9px;
+        background-color: #fff;
+        color: #47476b;
+        cursor: pointer;
+      }    </style>
   </head>
   <body>
@@ -82,181 +88,213 @@
     </div>
     <div id="map"></div>
+    <!--The div element where the show/hide button appears -->
+    <div id="hideButton">&#128065;</div>
+
     <script>
-    var centerPoint = {lat: 33.693385, lng: -117.798937};
-      var map;
-    var kMapStartupFile = "cmsStatusD12.json";
-    //var src="http://git.tokomak.net:8888/raw-attachment/ticket/75/dyer1.txt"
-    //var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/cms_two_signs.kml";
-    //      var src = "https://www.arb.ca.gov/smp/met/kml/faa.kml";
-    //      var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/la_airports.kml"
-    //      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
-    var blueFlag = "icon_cmsBlue.png";
-    var yellowFlag = "icon_cmsYellow.png";
-    var messageList;
-      function initMap() {
-        map = new google.maps.Map(document.getElementById('map'), {
-          center: centerPoint,
-          zoom: 11,
-          /* mapTypeId: 'terrain', */
-          mapTypeControl: false,
-          streetViewControl: false 
-        });
-        getMessage(1);  // load the current message file
-        setMarkers();
-      }
-
-     var cms_info;
-     var markerList = [];
-
-          
-     function setMarkers()
-     {
-        var simpleImage = "";
-
-        loadcmsJSON(function(response)
+var centerPoint = {
+    lat: 33.693385,
+    lng: -117.798937
+};
+var map;
+var kMapStartupFile = "cmsStatusD12.json";
+//var src="http://git.tokomak.net:8888/raw-attachment/ticket/75/dyer1.txt"
+//var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/cms_two_signs.kml";
+//      var src = "https://www.arb.ca.gov/smp/met/kml/faa.kml";
+//      var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/la_airports.kml"
+//      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
+var blueFlag = "icon_cmsBlue.png";
+var yellowFlag = "icon_cmsYellow.png";
+var messageList;
+var cms_info;
+var markerList = [];
+var showing = true;
+
+function initMap()
+{
+    map = new google.maps.Map(document.getElementById('map'),
+    {
+        center: centerPoint,
+        zoom: 11,
+        /* mapTypeId: 'terrain', */
+        mapTypeControl: false,
+        streetViewControl: false
+    });
+    initButton();
+    getMessage(1); // load the current message file
+    setMarkers();
+}
+// Initialize the center button (to re-center the map)
+function initButton()
+{
+    var hideBtnDiv = document.getElementById('hideButton');
+    map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(hideBtnDiv)
+    hideBtnDiv.title = 'Click to toggle cms view';
+
+    // Setup the click event listeners: reset center location and zoom factor
+    hideBtnDiv.addEventListener('click', function() {
+            showing = !showing;
+            for (var i = 0; i < markerList.length; i++)
+            {
+                markerList[i].setVisible(showing);
+            }
+    });
+}
+function setMarkers()
+{
+    var simpleImage = "";
+    loadcmsJSON(function(response)
+    {
+        // Parse JSON string into object
+        cms_info = JSON.parse(response);
+        console.log(cms_info.data[0].cms);
+        // Process each new marker 
+        for (var i = 0; i < cms_info.data.length; i++)
         {
-            // Parse JSON string into object
-            cms_info = JSON.parse(response);
-            console.log(cms_info.data[0].cms);
-            // Process each new marker 
-            for (var i = 0; i < cms_info.data.length; i++) 
+            var cms = cms_info.data[i].cms;
+            var currLat = Number(cms.location.latitude);
+            var currLong = Number(cms.location.longitude);
+            // load a yellow flag if there's currently no message
+            if (messageList[i] == "||")
+                simpleImage = yellowFlag;
+            else
+                simpleImage = blueFlag;
+            var directionCode = cms.location.direction.charAt(0);
+            var rolloverText = " " + directionCode + " " + cms.location
+                .route + " " + cms.location.postmile + " " + cms
+                .location.locationName
+            markerList[i] = new google.maps.Marker(
             {
-              var cms = cms_info.data[i].cms;
-              var currLat = Number(cms.location.latitude);
-              var currLong = Number(cms.location.longitude);
-              // load a yellow flag if there's currently no message
-              if (messageList[i] == "||")
-                 simpleImage = yellowFlag;
-              else
-                 simpleImage = blueFlag;
-              var directionCode = cms.location.direction.charAt(0);
-              var rolloverText = " "+ directionCode + " "+cms.location.route + " "+ cms.location.postmile + " " + cms.location.locationName
-              markerList[i] = new google.maps.Marker(
-              {
-                position: {lat: currLat, lng: currLong},
+                position:
+                {
+                    lat: currLat,
+                    lng: currLong
+                },
                 map: map,
                 icon: simpleImage,
                 title: rolloverText,
-                label: ""+i
-              });
-              console.log("built: "+markerList[i].id+" "+markerList[i].title);
- //           }
- //           for (var i = 0; i < markerList.length; i++) 
- //           {
-              google.maps.event.addListener(markerList[i], 'click', function () {
-                  //var content = event.featureData.infoWindowHtml;
-                  var cmsName = document.getElementById('cms-name');
-                  cmsName.innerHTML = this.getTitle(); // put sign name in display
-                  cmsName.style.display = 'block'
-                  var cmsMsg = document.getElementById('cms-message');
-                  cmsMsg.style.display = 'block'
-                  cmsID = Number(this.getLabel());
-                  getMessage(cmsID);  // note: this is async
-                  document.getElementById('cmsID').value=cmsID ;
-                  var userInput = document.getElementById('userinput');
-                  userInput.style.display = 'block'
+                label: "" + i
+            });
+            google.maps.event.addListener(markerList[i], 'click',
+                function()
+                {
+                    var cmsName = document.getElementById('cms-name');
+                    cmsName.innerHTML = this.getTitle(); // put sign name in display
+                    cmsName.style.display = 'block'
+                    var cmsMsg = document.getElementById('cms-message');
+                    cmsMsg.style.display = 'block'
+                    cmsID = Number(this.getLabel());
+                    getMessage(cmsID); // note: this is async
+                    document.getElementById('cmsID').value = cmsID;
+                    var userInput = document.getElementById('userinput');
+                    userInput.style.display = 'block'
                 });
-             }            
-        });
-     }
-     function loadcmsJSON(callback) {   
-
-        var xobj = new XMLHttpRequest();
-            xobj.overrideMimeType("application/json");
-        xobj.open('GET', kMapStartupFile, true); 
-        xobj.onreadystatechange = function () {
-              if (xobj.readyState == 4 && xobj.status == "200") {
-                callback(xobj.responseText);
-              }
-        };
-        // We want ajax to ignore any cached responses
-        xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT')
-        xobj.send(null);  
-     }
-        function handleSubmit()
+        }
+    });
+}
+
+function loadcmsJSON(callback)
+{
+    var xobj = new XMLHttpRequest();
+    xobj.overrideMimeType("application/json");
+    xobj.open('GET', kMapStartupFile, true);
+    xobj.onreadystatechange = function()
+    {
+        if (xobj.readyState == 4 && xobj.status == "200")
         {
-            // hide the display
-            document.getElementById('cms-message').style.display = 'none'
-            document.getElementById('userinput').style.display = 'none'
-            document.getElementById('cms-name').style.display = 'none'
-            // recover the user's response
-            var response1 = document.getElementById('msgcontent1').value;
-            var response2 = document.getElementById('msgcontent2').value;
-            var response3 = document.getElementById('msgcontent3').value;
-            saveMessage(response1+"|"+response2+"|"+response3);
-        }
-        function handleCancel()
+            callback(xobj.responseText);
+        }
+    };
+    // We want ajax to ignore any cached responses
+    xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT')
+    xobj.send(null);
+}
+
+function handleSubmit()
+{
+    // hide the display
+    document.getElementById('cms-message').style.display = 'none'
+    document.getElementById('userinput').style.display = 'none'
+    document.getElementById('cms-name').style.display = 'none'
+    // recover the user's response
+    var response1 = document.getElementById('msgcontent1').value;
+    var response2 = document.getElementById('msgcontent2').value;
+    var response3 = document.getElementById('msgcontent3').value;
+    saveMessage(response1 + "|" + response2 + "|" + response3);
+}
+
+function handleCancel()
+{
+    // hide the display
+    document.getElementById('cms-message').style.display = 'none'
+    document.getElementById('userinput').style.display = 'none'
+    document.getElementById('cms-name').style.display = 'none'
+}
+
+function handleClear()
+{
+    document.getElementById('msgcontent1').value = "";
+    document.getElementById('msgcontent2').value = "";
+    document.getElementById('msgcontent3').value = "";
+    document.getElementById('msgcontent1').focus();
+}
+
+function loadJSON(inFile, callback)
+{
+    var xobj = new XMLHttpRequest();
+    xobj.overrideMimeType("application/json");
+    xobj.open('GET', inFile, true);
+    xobj.onreadystatechange = function()
+    {
+        if (xobj.readyState == 4 && xobj.status == "200")
         {
-            // hide the display
-            document.getElementById('cms-message').style.display = 'none'
-            document.getElementById('userinput').style.display = 'none'
-            document.getElementById('cms-name').style.display = 'none'
-        }
-        function handleClear()
-        {
-            document.getElementById('msgcontent1').value="";
-            document.getElementById('msgcontent2').value="";
-            document.getElementById('msgcontent3').value="";
-            document.getElementById('msgcontent1').focus();
-        }
-
-     function loadJSON(inFile,callback) {   
-
-        var xobj = new XMLHttpRequest();
-        xobj.overrideMimeType("application/json");
-        xobj.open('GET', inFile, true); 
-        xobj.onreadystatechange = function () {
-              if (xobj.readyState == 4 && xobj.status == "200") {
-                callback(xobj.responseText);
-              }
-        };
-        // We want ajax to ignore any cached responses
-        xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT')
-        xobj.send(null);  
-     }
-     // retrieve the current cms message file
-     function getMessage(cmsID)
-     {
-        loadJSON("messagefile.txt",function(response)
-        {
-            // Parse JSON string into object
-            messageList = JSON.parse(response);
-            // select a message from json for the given cmsID
-            console.log("get by cmsID="+cmsID);
-            var cmsSign = document.getElementById('msgcontent1');
-            //cmsSign.innerHTML = messageList[cmsID];
-            messageparts = messageList[cmsID].split("|");
-            cmsSign.value = messageparts[0];
-            document.getElementById('msgcontent2').value = messageparts[1];
-            document.getElementById('msgcontent3').value = messageparts[2];
-            cmsSign.style.display = 'block'
-            cmsSign.focus();
-        });
-     }
-    // Save an updated cms message to the file
-    // NB: cms id's are one-based, json array is zero-based.
-    function saveMessage(outMessage,cmsID) 
-    {
-      var cmsID = document.getElementById('cmsID').value;
-      console.log("Saving " + outMessage + " for cmsID " + cmsID)
-      messageList[cmsID] =  outMessage;
-      if (outMessage.length < 4)
-       markerList[cmsID].setIcon(yellowFlag);
-      else
-       markerList[cmsID].setIcon(blueFlag);
-      var xhttp = new XMLHttpRequest();
-      xhttp.open("GET", "/cgi-bin/saveMessage.py?msg="+JSON.stringify(messageList), true);
-      xhttp.send();
-
-// Using POST might be a better idea ... haven't tried this yet
-//      var xhr = new XMLHttpRequest();
-//      xhr.open("POST", "/cgi-bin/saveMessage.py?", true);
-//      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
-
-      // send the collected data as JSON
-//      xhr.send(JSON.stringify(messageList));
-    }
-
-    </script>
+            callback(xobj.responseText);
+        }
+    };
+    // We want ajax to ignore any cached responses
+    xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT')
+    xobj.send(null);
+}
+// retrieve the current cms message file
+function getMessage(cmsID)
+{
+    loadJSON("http://localhost:8080/messagefile.txt", function(response)
+    {
+        // Parse JSON string into object
+        messageList = JSON.parse(response);
+        // select a message from json for the given cmsID
+        console.log("get by cmsID=" + cmsID);
+        var cmsSign = document.getElementById('msgcontent1');
+        //cmsSign.innerHTML = messageList[cmsID];
+        messageparts = messageList[cmsID].split("|");
+        cmsSign.value = messageparts[0];
+        document.getElementById('msgcontent2').value = messageparts[1];
+        document.getElementById('msgcontent3').value = messageparts[2];
+        cmsSign.style.display = 'block'
+        cmsSign.focus();
+    });
+}
+// Save an updated cms message to the file
+// NB: cms id's are one-based, json array is zero-based.
+function saveMessage(outMessage, cmsID)
+{
+    var cmsID = document.getElementById('cmsID').value;
+    console.log("Saving " + outMessage + " for cmsID " + cmsID)
+    messageList[cmsID] = outMessage;
+    // Change icon if something was saved
+    if (outMessage == "||")
+        markerList[cmsID].setIcon(yellowFlag);
+    else
+        markerList[cmsID].setIcon(blueFlag);
+    var xhttp = new XMLHttpRequest();
+    xhttp.open("GET", "http://localhost:8080/cgi-bin/saveMessage.py?msg=" + JSON
+        .stringify(messageList), true);
+    xhttp.send();
+    // Using POST might be a better idea ... haven't tried this yet
+    //      var xhr = new XMLHttpRequest();
+    //      xhr.open("POST", "/cgi-bin/saveMessage.py?", true);
+    //      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+    // send the collected data as JSON
+    //      xhr.send(JSON.stringify(messageList));
+}    </script>
     <script async defer
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&callback=initMap">
