Index: trunk/webapps/cptms/CameraDisplay.html
===================================================================
--- trunk/webapps/cptms/CameraDisplay.html	(revision 616)
+++ trunk/webapps/cptms/CameraDisplay.html	(revision 628)
@@ -30,4 +30,6 @@
 var routeCameras = {};  // for each route, a list of cameras on that route
 var cameraDict = {};    // for each cameraid, the associated nearVDS and locationName properties
+
+// Extracts VDS and CCTV data and builds a lookup dictionary that maps route to camera id's and adds routes to drop down list
 function init()
 {
@@ -66,5 +68,5 @@
 }
 
-// Build a lookup dictionary that maps route to camera id's
+// Takes in a CCTV location and builds a lookup dictionary that maps route to camera id's
 function buildDict(cctvItem)
 {
@@ -94,4 +96,5 @@
   removeOptions(document.getElementById(cameraselect));  
   fillOptions(currentRoute, cameraselect);
+  showView(cameraselect); //show default first image from camera dropdown for the selected route
 }
 
@@ -128,61 +131,68 @@
 }
 
-// Display the image requested from a camera dropdrown box
+// Display the image requested from a camera dropdown box
 function showView(cameraselect)
 {
-    var quadrant = cameraselect.charAt(1)  // extract numeric part of camera identifier
-    var imgElement = document.getElementById("img"+quadrant)    
-    var e = document.getElementById(cameraselect);
-    // if no camera was selected
-    if (e.selectedIndex == -1)
-    {
-        imgElement.src="" // remove the image
-    }
-    else
-    {
-        var chosenCamera = e.options[e.selectedIndex].value;
-        nearvds = cameraDict[chosenCamera].nearVDS
-        // Search for the vds that is nearest
-        var idx = 0; 
-        while (idx < vdsList.features.length && vdsList.features[idx].id != nearvds)
-        {
-            idx++;
-        }
-        // If we found the nearVDS
-        if (idx < vdsList.features.length)
-        {
-            // Obtain color and convert to speed
-            var foundVDS = vdsList.features[idx]
-            var color =  foundVDS.properties['color']
-            var speed = "freeflow"
-            if (color == "yellow")
-            {
-                speed = "slow"
-            }
-            if (color == "red")
-            {
-                speed = "stopped"
-            }
-            // construct filename
-            var filename =  chosenCamera + "-day-"+speed+".jpg"
-            //console.log("Found " + foundVDS.id + " " + foundVDS.properties['color'] + " " + filename)
-            // Load the desired image
-            var preload = new Image();
-            preload.onload = function() {
-                if (imgElement) 
-                { 
-                    imgElement.src = preload.src; // image
-                    imgElement.title=chosenCamera // tooltip
-                }
-            };
-            // if couldn't load show as unavailable
-            preload.onerror = function() {
-                if (imgElement) { imgElement.src = "images/CCTV/video_unavailable.jpg" }
-            };
-            // attempt to load the image
-            preload.src = "images/CCTV/"+filename;  
-    //Reference: https://www.daniweb.com/programming/web-development/threads/272293/javascript-test-for-file-existence
-        }
-    }
+    var quadrant = "";
+    // if route dropdown box is selected, then view image
+    if (typeof cameraselect === 'string')
+    {
+      quadrant = cameraselect.charAt(1)  // extract numeric part of camera identifier
+      var chosenRoute = document.getElementById('R' + quadrant);
+      var imgElement = document.getElementById("img"+quadrant)    
+      var e = document.getElementById(cameraselect);
+      // if no camera was selected
+      if (e.selectedIndex == -1)
+      {
+          imgElement.src="" // remove the image
+      }
+      else
+      {
+          var chosenCamera = e.options[e.selectedIndex].value;
+          nearvds = cameraDict[chosenCamera].nearVDS
+          // Search for the vds that is nearest
+          var idx = 0; 
+          while (idx < vdsList.features.length && vdsList.features[idx].id != nearvds)
+          {
+              idx++;
+          }
+          // If we found the nearVDS
+          if (idx < vdsList.features.length)
+          {
+              // Obtain color and convert to speed
+              var foundVDS = vdsList.features[idx]
+              var color =  foundVDS.properties['color']
+              var speed = "freeflow"
+              if (color == "yellow")
+              {
+                  speed = "slow"
+              }
+              if (color == "red")
+              {
+                  speed = "stopped"
+              }
+              // construct filename
+              var filename =  chosenCamera + "-day-"+speed+".jpg"
+              //console.log("Found " + foundVDS.id + " " + foundVDS.properties['color'] + " " + filename)
+              // Load the desired image
+              var preload = new Image();
+              preload.onload = function() {
+                  if (imgElement) 
+                  { 
+                      imgElement.src = preload.src; // image
+                      imgElement.title=chosenCamera // tooltip
+                  }
+              };
+              // if couldn't load show as unavailable
+              preload.onerror = function() {
+                  if (imgElement) { imgElement.src = "images/CCTV/video_unavailable.jpg" } 
+              };
+              // attempt to load the image
+              preload.src = "images/CCTV/"+filename;  
+      //Reference: https://www.daniweb.com/programming/web-development/threads/272293/javascript-test-for-file-existence
+          }
+      }
+    }
+   //console.log("empty");
 }
 // Execute periodically to reload the vds list with current data
@@ -197,5 +207,6 @@
         for (var quadrant of views)
         {
-            showView(quadrant);
+            //console.log(quadrant.id);
+            showView(quadrant.id);
         }
     });