Index: trunk/src/cptms/cptms_map.html
===================================================================
--- trunk/src/cptms/cptms_map.html	(revision 304)
+++ trunk/src/cptms/cptms_map.html	(revision 305)
@@ -4,5 +4,5 @@
 <!-- Launch with  python -m CGIHTTPServer 8080  -->
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
-    <title>CPTMS Map v0.5.6</title> 
+    <title>CPTMS Map v0.6.0</title> 
     <style>
         @font-face {
@@ -36,4 +36,8 @@
            font-size: large;
         }
+        /*img.resize {
+          max-width:auto;
+          max-height:500px;
+        }*/
       #search-input {
         background-color: #17263c;  /* #CD853F;  /*#E6E6FA; /* lavender */
@@ -126,4 +130,6 @@
   <body>
     <!-- 
+         Version 6.0 Adds speed-dependent images to infowindow for cctv icons
+         Version 5.8 Adds an infowindow with a static image for all cctv icons
          Version 5.7 integrates CCTV icons and button (but empty click handler)
          Version 5.6 integrates CMS features
@@ -200,5 +206,6 @@
 var blueFlag = "images/CPTMSImages/icon_cmsBlue.png";
 var yellowFlag = "images/CPTMSImages/icon_cmsYellow.png";
-var cctvIcon = "images/CPTMSImages/icon_cctvBlue.png";
+var cctvIcon = "images/CPTMSImages/icon_cctvCyan.png";
+var cctvIconWhite = "images/CPTMSImages/icon_cctvWhite.png";
 var messageList;
 var cms_info;
@@ -578,4 +585,5 @@
     loadJSON(kCCTVfile, function(response)
     {
+        var imgTag = '<IMG WIDTH="700" SRC="images/CPTMSImages/';
         // Parse JSON string into object
         cctv_info = JSON.parse(response);
@@ -587,4 +595,12 @@
             var currLong = Number(cctv.location.longitude);
             var locationInfo = cctv.location.locationName;
+            var imgIcon = cctvIcon
+            if ((typeof map.data.getFeatureById(cctv.location.nearVDS)) == "undefined")
+            {
+                imgIcon = cctvIconWhite;
+            }
+
+            var vdsResult = map.data.getFeatureById(cctv.location.nearVDS)
+            //console.log("building "+locationInfo+" near "+cctv.location.nearVDS + " found "+vdsResult); 
             cctvList[i] = new google.maps.Marker(
             {
@@ -595,5 +611,5 @@
                 },
                 map: map,
-                icon: cctvIcon,
+                icon: imgIcon,
                 title: "#"+i+" " +locationInfo,
                 cctvid: "" + i,
@@ -602,11 +618,25 @@
                 nearVDS: cctv.location.nearVDS
             });
+            cctvList[i].info=new google.maps.InfoWindow({
+                content: locationInfo
+            });
+        
             cctvList[i].setVisible(false); // initially hidden
-            google.maps.event.addListener(cctvList[i], 'click',
+            cctvList[i].addListener('click',
                 function()
                 {
-                    // fetch the sequential msg #
                     cctvIndex = this.index;
-                    alert("here will be the view of cctv: " + cctvIndex);
+                    //console.log(this.title + " is looking for " + this.nearVDS);
+                    currentFeature = map.data.getFeatureById(this.nearVDS);
+                    currentColor = currentFeature.getProperty("color");
+                    var imgDir = "CCTVFast/";
+                    if (currentColor == "red" || currentColor == "yellow")
+                    {
+                        imgDir = "CCTVSlow/"
+                    }
+                    //console.log(currentFeature.getId() +  ' ' + currentColor + " " + cctvIndex);
+                    this.info.setContent('<div>' + this.location + "&nbsp;nearVDS:" 
+         + this.nearVDS + "&nbsp;" + currentColor + "<BR>"+ imgTag + imgDir + cctvIndex + '.jpg">' + "</div>");
+                    this.info.open(map, this);
                 });
         }
@@ -615,12 +645,19 @@
 
 
-
+// Center justify message text in a 16 column field
+function justifyText(message)
+{
+    var kBlanks = "                ";
+    var padLen = (16 - message.length)/2;
+    var padding = kBlanks.substring(0,padLen);
+    return padding + message;
+}
 
 function handleSubmit()
 {
     // recover the user's response
-    var response1 = document.getElementById('msgcontent1').value;
-    var response2 = document.getElementById('msgcontent2').value;
-    var response3 = document.getElementById('msgcontent3').value;
+    var response1 = justifyText(document.getElementById('msgcontent1').value.trim());
+    var response2 = justifyText(document.getElementById('msgcontent2').value.trim());
+    var response3 = justifyText(document.getElementById('msgcontent3').value.trim());
     var newMsg = response1+response2+response3;
     if (newMsg.length == 0)
@@ -710,5 +747,5 @@
         getMessage(1); // load the current message file
         setCMSmarkers();
-        setCCTVmarkers();
+        var startTime = setTimeout(setCCTVmarkers, 3000);
 
         // Start a timer to refresh the map every 10 seconds
