Index: trunk/src/cptms/cms_demo.html
===================================================================
--- trunk/src/cptms/kmldemo1.html	(revision 294)
+++ trunk/src/cptms/cms_demo.html	(revision 295)
@@ -7,4 +7,8 @@
     <title>KML Click Demo</title>
     <style>
+        @font-face {
+          font-family: GreenLights;
+          src: url('GreenLights.otf');
+        }
       html, body {
         height: 370px;
@@ -14,23 +18,32 @@
       #map {
        height: 560px;
-       width: 500px;
+       width: 100%;
        overflow: hidden;
-       float: left;
        border: thin solid #333;
        }
-      #cms-message {
-       height: 90px;
-       width: 250px;
+      #cms-name {
+       height: 30px;
+       width: 350px;
        overflow: hidden;
-       float: left;
        background-color: #ECECFB;
        border: thin solid #333;
        border-left: none;
        }
+      #cms-message {
+       height: 90px;
+       width: 550px;
+       overflow: hidden;
+       float: left;
+       border: thin solid #333;
+       border-left: none;
+       font-family: GreenLights;
+       font-size: xx-large;
+       background-color: black;
+       color: GoldenRod;
+       }
       #userinput {
        height: 90px;
-       width: 250px;
+       width: 175px;
        overflow: hidden;
-       float: left;
        background-color: #ECECFB;
        border: thin solid #333;
@@ -40,14 +53,18 @@
   </head>
   <body>
-    <div id="map"></div>
+    <div id="cms-name"  style="display: none;"></div>
     <div id="cms-message"  style="display: none;"></div>
     <div id="userinput"    style="display: none;">
-    <input id='userReply' type='text' />
+    <input id='userReply' type='text' /> 
+    <input id='cmsID' value="" type='hidden'/>
     <button onclick="handleSubmit();">Submit</button>
     </div>
+    <div id="map"></div>
     <script>
     var centerPoint = {lat: 33.693385, lng: -117.798937};
       var map;
-var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/cms_single_dyer_rd.kml";
+//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"
@@ -62,17 +79,22 @@
         var kmlLayer = new google.maps.KmlLayer(src, {
           suppressInfoWindows: true,
-          preserveViewport: true,  // false for zoom to placemarks
+          preserveViewport: false,  // false for zoom to placemarks
           map: map
         });
         kmlLayer.addListener('click', function(event) {
           // grab description from kml file
-          var content = event.featureData.infoWindowHtml;
-          var cmsMsg = document.getElementById('cms-message');
-          cmsMsg.innerHTML = content;  // assign current msg to display
-          cmsMsg.style.display = 'block'
+          var feature = event.featureData;
+          //var content = event.featureData.infoWindowHtml;
+          var cmsName = document.getElementById('cms-name');
+          cmsName.innerHTML = feature.name; // put sign name in display
+          cmsName.style.display = 'block'
+          cmsID = feature.id
+          getMessage(cmsID);  // note: this is async
           var userReply = document.getElementById('userReply');
-          userReply.value = "";  // clear the response area
+          userReply.value = ""  // clear the response area
+          document.getElementById('cmsID').value=cmsID ;
           var userInput = document.getElementById('userinput');
           userInput.style.display = 'block'
+          console.log("clicked on: "+feature.id+" - " + feature.name);
         });
       }
@@ -82,8 +104,60 @@
             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 response = document.getElementById('userReply').value;
-            alert("Message update: " + response);
+            saveMessage(response);
         }
+
+     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);  
+     }
+     var messageList;
+     // retrieve the current cms message file
+     function getMessage(cmsID)
+     {
+        loadJSON("messagefile.txt",function(response)
+        {
+            // Parse JSON string into object
+            messageList = JSON.parse(response);
+            // TODO: select a message from json for the given cmsID
+            console.log("get by cmsID="+cmsID);
+            var cmsSign = document.getElementById('cms-message');
+            if (cmsSign.length==0) cmsSign = " ";
+            cmsSign.innerHTML = messageList[cmsID];
+            cmsSign.style.display = 'block'
+        });
+     }
+    // 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;
+      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>
     <script async defer
