Index: /trunk/webapps/dynamicdata/caddetails.csv
===================================================================
--- /trunk/webapps/dynamicdata/caddetails.csv	(revision 551)
+++ /trunk/webapps/dynamicdata/caddetails.csv	(revision 616)
@@ -1,115 +1,18 @@
-00:01:00, CAD Log, Incident #187, Detail: STALLED DOT SB SR-55 AT I-405
-00:03:00, CAD Log, Incident #187, Detail: CELLULAR 911 RPT DOT HT  2ND VEH OVER THE SIDE  UNVERIFIED
-00:03:30, CAD Log, Incident #187, Detail: DUPLICATE CALL
-00:04:30, CAD Log, Incident #187, Detail: DUPLICATE CALL
-00:05:00, CAD Log, Incident #187, Detail: DOT HIT BY VEH  VEH OVER SIDE.2ND VEH LANDED NB 405 BELOW  LG COLLISION OCCUR. REQ 2 1141 CODE 2 UNITS ASSIST
-00:05:30, CAD Log, Incident #187, Detail: DUPLICATE CALL
-00:06:00, CAD Log, Incident #187, Detail: 14-17 14-9 ENRT ASSIST 1183 1125
-00:06:30, CAD Log, Incident #187, Detail: DUPLICATE CALL
-00:07:00, CAD Log, Incident #187, Detail: DOT DRIVER UNINJURED  #2 3 LNS BLCKD SB 55.14-14 MVNG TO 405 ASSESS DMG
-00:10:00, CAD Log, Incident #188, Detail: 9-9 ENRT FRM I405 @ IRVINE CTR
-00:12:00, CAD Log, Incident #187, Detail: 14-14 1097  MULTIPLE 1144 NB 405 AT 55 OVERPASS  6 VEH TCBLOCKING 3 INSIDE LNS NB 405. DRVR AND PSSNGR IN VEH 1144  2 OTHER FATALS  MULT INJR  REQ CRNR AND SIGALERT
-00:12:30, CAD Log, Incident #187, Detail: 1039 CRNR
-00:13:00, CAD Log, Incident #187, Detail: 14-17 1097  PARAMEDICS 1097. 1184 SB 55 FOR DOT 1125
-00:14:00, CAD Log, Incident #188, Detail: 9-9  FD  PARAMEDICS 1097.  TC SEMI W/TOMATOES AND VEH ON NB-5 #3 4 5 LNSTRCK ON FIRE  REQ CT CLNUP  UNITS 1184
-00:14:00, CAD Log, Incident #187, Detail: REQ MAIT  REQ 14-S UNIT  REQ TMT
-00:17:00, CAD Log, Incident #187, Detail: 14-9 1097  ASSIST 1184
-00:18:00, CAD Log, Incident #187, Detail: TRAFFIC BACKING SB 55 REQ TMT MEDIUM DUTY 1185
-00:19:00, CAD Log, Incident #187, Detail: 4 1144'S  2 1180'S  4 1181'S
-00:20:00, CAD Log, Incident #188, Detail: 9-15 9-19 ENRT FOR 1184
-00:21:00, CAD Log, Incident #187, Detail: 1039 SABLAN TOWING
-00:22:00, CAD Log, Incident #187, Detail: 14-S3 1097 NB 405 @ 55MAIT ETA 15
-00:24:00, CAD Log, Incident #188, Detail: 1141 1097  TRCK STLL FIRE  2 1180 IN VEH  UNK IN TRCK
-00:25:00, CAD Log, Incident #188, Detail: REQUEST 1185 BIG RIG AND 1185 ROT  ISSUE SIG ALERT
-00:27:00, CAD Log, Incident #187, Detail: CRNR 1097  INJURED TRANSPORTED
-00:30:00, CAD Log, Incident #188, Detail: 9-15 1097  ADVS PD TO DIRECT TRAFFIC OFF AT LAKE FOREST 
-00:31:00, CAD Log, Incident #188, Detail: 1039 COLLEGE OAK BIG RIG  CYCLE TOW FOR ROT
-00:32:00, CAD Log, Incident #188, Detail: 9-19 1097 ASSISTNG 1184
-00:35:00, CAD Log, Incident #187, Detail: MAIT 1097 STARTING INVESTIGATION SB SR55
-00:37:00, CAD Log, Incident #187, Detail: MED DUTY 1185 1097  AWAIT FINISH MAIT BEFORE TOW VEH
-00:38:00, CAD Log, Incident #188, Detail: 1039 PD  SENDING 2 UNITS ASST 1184
-00:40:00, CAD Log, Incident #187, Detail: CRNR CONFIRMED FOUR FATAL  PREP TO TRANSPORT
-00:42:00, CAD Log, Incident #188, Detail: 1180S TRANSPORTED
-00:43:00, CAD Log, Incident #188, Detail: 9-9 FIRE OUT
-00:44:00, CAD Log, Incident #188, Detail: LAKE FOREST ONRAMP CLOSED  DIRECTING TRAFFIC OFF LAKE FOREST OFFRAMP
-00:47:00, CAD Log, Incident #187, Detail: MAIT FINISHED W/ INVESTIGATION SB SR-55 AT I-405  PREP DOT TRCK FOR TOW
-00:48:00, CAD Log, Incident #188, Detail: 1 1144 IN TRCK  REQ CRNR
-00:50:00, CAD Log, Incident #188, Detail: 9-9 1039 CRNR  ETA 15
-00:51:00, CAD Log, Incident #188, Detail: CT 1097  STRTNG CLNUP OF TOMATOES
-00:53:00, CAD Log, Incident #188, Detail: 1185 ROT 1097
-00:54:00, CAD Log, Incident #187, Detail: MAIT STARTING INVESTIGATION NB 405 TO TAKE 30 MIN
-00:55:00, CAD Log, Incident #187, Detail: CLNUP NRLY FNSHD DOT RDY TO BE TWD  SB SR-55 LNS OPN IN 5
-00:56:00, CAD Log, Incident #188, Detail: WTNSSES  JOHN/BETTY JONES SAW TOMATO TRUCK LOSE CONTROL  FLIP OVER  VEH HIT  TRCK IMM CAUGHT FIRE
-00:59:00, CAD Log, Incident #188, Detail: BIG RIG 1185 1097
-01:02:00, CAD Log, Incident #187, Detail: 14-17 1097 DOT TRCK TWD  SB SR-55 OPN
-01:03:00, CAD Log, Incident #187, Detail: MAIT PARTIAL CMPLT  PICS TKN  NEED MSRMNTS  INTERVIEWS
-01:05:00, CAD Log, Incident #188, Detail: CT #3 LN ALMOST CLEARED OF TOMATOES
-01:07:00, CAD Log, Incident #188, Detail: CRNR 1097
-01:08:00, CAD Log, Incident #187, Detail: REQ 6 ROT 1185
-01:09:00, CAD Log, Incident #188, Detail: VEH TOWED  #3 LN CLEARED  OPENING
-01:10:00, CAD Log, Incident #187, Detail: MAIT NEARLY COMPLETE  FINISHING INTERVIEWS  TOW ETA 10
-01:12:00, CAD Log, Incident #188, Detail: 1144 CNFRMD  #3 LN OPN  FULL OPNNG 20 MIN
-01:15:00, CAD Log, Incident #188, Detail: CT NRLY FNSHD CLNUP  TRCK BEING PRPRD FOR 1185
-01:16:30, CAD Log, Incident #187, Detail: MAIT FINISHED INVESTIGATION 1098  START CLEANUP WHEN 1185S ARRIVE
-01:19:00, CAD Log, Incident #187, Detail: 1185 1097 PARTIAL OPENING IN 15
-01:20:00, CAD Log, Incident #188, Detail: CT 98 TOMATOES  LNS OPN IN 10
-01:23:00, CAD Log, Incident #189, Detail: CELLULAR 911 RPT SUICIDE BMBR AT I-405 @ JEFFREY  UNVERIFIED1039 IRV PD  PD ENRT  28-24 ENRT FROM I-405 @ IRVINE CNTR.
-01:24:00, CAD Log, Incident #188, Detail: TRCK TWD  FD SPRYNG LNS  LNS OPN IN 5
-01:25:00, CAD Log, Incident #189, Detail: 28-24 1097  PD 1097
-01:29:00, CAD Log, Incident #189, Detail: 28-19 ENRT FROM I-5 AT SND CYN  28-13 ENRT FROM I-5 AT 133SHUT DWN NB I-405 AT SND CYN OFFR
-01:30:00, CAD Log, Incident #187, Detail: OPN #2 3 LNS  FULL OPN IN 5
-01:31:00, CAD Log, Incident #188, Detail: ALL LNS CLR  9-15 OPENING LAKE FOREST ONRAMP9-9 9-15 9-19 1098
-01:31:00, CAD Log, Incident #189, Detail: 28-11 ENRT FROM I405 AT BRISTOL  28-07 ENRT FROM SR55 AT DYER28-11 28-07 TO SHT DWN SB I405 AT CULVER OFFR
-01:32:00, CAD Log, Incident #189, Detail: PD CLOSING JEFFREY AND UNIV DR  SENDING NEGOTIATOR  REQ SIGALERT
-01:35:00, CAD Log, Incident #187, Detail: VEH TWD  LNS OPN  14-S  14-9  14-14 1098
-01:36:00, CAD Log, Incident #189, Detail: 28-13 1097  10-23 28-19 B4 CLOSING NB LNS  1039 DOT FOR SIGN TRUCKS
-01:37:00, CAD Log, Incident #189, Detail: 28-11 1097  CLSNG DWN SB LNS AT CULVER DR OFFR
-01:38:00, CAD Log, Incident #189, Detail: 28-13  28-19 SHUTTING DWN NB 405 LNS AT SAND CYN ST OFFR
-01:40:00, CAD Log, Incident #189, Detail: 28-07 1097 ASSTNG 28-11 CLSNG SB LNS AT CULVER OFFR
-01:41:00, CAD Log, Incident #189, Detail: 28-S4 1097 I5 JEFFREY AVE ASSIST
-01:43:00, CAD Log, Incident #189, Detail: PD STTNG DETOURS  SB TRFFC OFF AT CULVER AVE  NB TRFFC OFF AT SAND CYN
-01:44:00, CAD Log, Incident #189, Detail: NEGOTIATOR 1097
-01:45:00, CAD Log, Incident #189, Detail: NB LNS SHUT DOWN
-01:46:00, CAD Log, Incident #189, Detail: SUSP WON'T ALLOW NEGOTIATOR NEAR HIM
-01:47:00, CAD Log, Incident #189, Detail: 28-07 SB LNS SHUT DOWN
-01:50:00, CAD Log, Incident #189, Detail: SUSP IS CALMING DOWN.  BOMB SQD 1097
-01:53:00, CAD Log, Incident #190, Detail: 9-22 ENRT FROM 57 @ CHAPMAN
-01:58:00, CAD Log, Incident #190, Detail: 9-22 1097 2 VEH TC  VEH VS TANKER TRK  BLKNG #3 4UNID LIQUID LEAKING FROM TNKR  NEED TO CLOSE NB LANES  REQ UNITS
-01:59:00, CAD Log, Incident #190, Detail: 9-23  9-26 ENRT TO ASSIST 9-22
-02:00:00, CAD Log, Incident #190, Detail: 1141  FD 1097  TRCK DRVR 1180 UNCONCIOUS  2 1181S  LIQUID LEAKING INTO #2 LN. #2 3 4 BLKD AT THIS TIME
-02:01:00, CAD Log, Incident #189, Detail: NEGOTIATOR MAKING PROGRESS  SUSP MAY SURRENDER
-02:01:00, CAD Log, Incident #190, Detail: DONT HAVE TO SHUT THE FWY  LIQUID ID'D AS MILK.  #1 LN WILL REMAIN OPEN.ATTEMPTING TO CONTROL THE LEAK. REQ BIG RIG AND ROT 1185
-02:04:00, CAD Log, Incident #190, Detail: 9-23 1097  REQ TMT  TRAFFIC BACKING
-02:06:00, CAD Log, Incident #189, Detail: MAN TRIED TO DETONATE THE DEVICE  BOMB DIDNT ACTIVATE  PD APPRHNDNG
-02:08:00, CAD Log, Incident #189, Detail: SUSP IN CUSTODY  BOMB SQD INSPECTING BOMB
-02:11:00, CAD Log, Incident #190, Detail: PREPARING TO TRANSPORT VICTIMS  #1 LN OPN
-02:13:00, CAD Log, Incident #190, Detail: 9-26 1097 VICTIMS TRANSPORTED
-02:14:00, CAD Log, Incident #189, Detail: CODE A  BOMB DEFUSED  LNS BEING OPENED
-02:15:00, CAD Log, Incident #190, Detail: HOLE IN TANKER PLUGGED  FD WASHING DOWN RDWY
-02:16:00, CAD Log, Incident #189, Detail: SB LNS OPN 28-11 28-07 1098
-02:17:00, CAD Log, Incident #191, Detail: 911 CELLULAR CALL  RV FIRE SB-73 AT BEAR St  UNVERIFIED
-02:17:00, CAD Log, Incident #189, Detail: NB LNS OPN 28-13 28-19 1098
-02:18:00, CAD Log, Incident #189, Detail: 28-24  28-S4 1098 PD OPNNG OVRPASS
-02:19:00, CAD Log, Incident #191, Detail: 17-14 ENRT FROM 405 AT EUCLID
-02:20:00, CAD Log, Incident #190, Detail: 1185 ROT 1097
-02:21:00, CAD Log, Incident #190, Detail: BIG RIG 1185 1097  ONCE FD IS DONE  WILL START CLEANUP
-02:23:00, CAD Log, Incident #190, Detail: FD DONE  OPENING #2  STARTING CLEANUP
-02:24:00, CAD Log, Incident #191, Detail: RV ON FIRE ON RS  2 1181S  PARAMEDICS 1097  REQ UNIT TO ASSIST
-02:25:00, CAD Log, Incident #191, Detail: 17-16 ENRT FROM S-405 @ EUCLID TO ASSIST 17-14
-02:26:00, CAD Log, Incident #191, Detail: FD 1097  CLOSING RT LN  REQ TMT  TRAFFIC ADVISORY
-02:27:00, CAD Log, Incident #190, Detail: #2 LN OPN  FULL CLNUP IN 20
-02:29:00, CAD Log, Incident #191, Detail: 17-14 1097
-02:32:00, CAD Log, Incident #190, Detail: VEH READY TO BE TOWED  TRCK AND TNKR BEING UPRIGHTED
-02:33:00, CAD Log, Incident #191, Detail: VICTIMS TRANSPORTED  PASSERS BY RESCUED VICTIMS
-02:35:00, CAD Log, Incident #191, Detail: FIRE IS OUT  FD INVESTIGATING CAUSE OF FIRE
-02:37:00, CAD Log, Incident #190, Detail: VEH TOWED  TNKR UPRGHT  FULL OPENING IN 10
-02:39:00, CAD Log, Incident #191, Detail: REQ FLAT BED 1185  FD 98 IN 15
-02:41:00, CAD Log, Incident #191, Detail: 1039 1185 ENRT  ETA 10
-02:42:00, CAD Log, Incident #190, Detail: TANKER READY FOR TOW  FINISHING CLEANUP
-02:46:00, CAD Log, Incident #190, Detail: TANKER TOWED  RDWY CLR  OPENING LANES
-02:48:00, CAD Log, Incident #191, Detail: 1185 1097  INVESTIGATION NEARLY COMPLETE
-02:49:00, CAD Log, Incident #190, Detail: LNS OPN  9-22  9-23  9-26 10-98
-02:51:00, CAD Log, Incident #191, Detail: FD INVESTIGATION COMPLETE  SPRAYING RS  FIRE CAUSED BY KITCHEN FIRE
-02:54:00, CAD Log, Incident #191, Detail: RV READY FOR 1185  LN OPN IN 10
-02:58:00, CAD Log, Incident #191, Detail: RV TOWED  LANES OPEN IN 5
-03:01:00, CAD Log, Incident #191, Detail: 17-14  17-16 1098. LN OPN
+00:00:00, CAD Log, Incident #181, Detail: ENRT FROM NB 405 AT JEFFREY
+00:03:00, CAD Log, Incident #181, Detail: 14-13 10-97 1125  EMS 10-97  HAY TRK VS 2 VEH  #1 2 3 LNS BLCKD REQ ADDL UNITS
+00:04:00, CAD Log, Incident #181, Detail: 14-7 ENRT FROM SB 405 AT BROOKHURST 14-21 ENRT FROM 55 AT MACARTHUR
+00:05:00, CAD Log, Incident #181, Detail: 1144 IN HAY TRK  2 1181S  REQ CORONERREQ DOT TO REMOVE HAY SPILLED IN SB LANES
+00:07:00, CAD Log, Incident #181, Detail: 14-7 REQ 1185 BIG RIG AND 2 ROT 1185
+00:09:00, CAD Log, Incident #181, Detail: 10-39 COLLEGE OAK FOR BIG RIG AND CYCLE FOR ROT
+00:11:00, CAD Log, Incident #181, Detail: 14-21 1097 PROV 1184 TRF BACKING QUICKLY
+00:12:00, CAD Log, Incident #181, Detail: VEH KNOCKED HAY BALES ONTO VON KARMAN AVENUE ADV CITY
+00:15:00, CAD Log, Incident #181, Detail: 1181 TRANSPORTED REQ ETA FOR CORONERETA FOR CORONER 10
+00:18:00, CAD Log, Incident #181, Detail: 14-13 1185 1097  #3 LN WILL OPEN 5-10
+00:20:00, CAD Log, Incident #181, Detail: DOT 1097 TO REMOVE BALES
+00:23:00, CAD Log, Incident #181, Detail: CORONER 1097
+00:25:00, CAD Log, Incident #181, Detail: #3 LN CLEARED OPENING NOW
+00:28:00, CAD Log, Incident #181, Detail: CORONER CONFIRMED 1144  VEHS READY FOR TOW  HAY NEARLY CLEARED  ALL LANES OPEN IN 15
+00:30:00, CAD Log, Incident #181, Detail: WTNSSES  JOHN/BETTY JONES SAW HAY TRUCK LOSE CONTROL  FLIP OVER  2 VEH HIT
+00:32:00, CAD Log, Incident #181, Detail: HAY TRK READY FOR TOW  2 VEHS TOWED  DOT CLEARED HAY BALES  LANES OPEN IN 10
+00:36:00, CAD Log, Incident #181, Detail: LANES OPEN IN 5
+00:41:00, CAD Log, Incident #181, Detail: 14-13 14-7 14-21 1098  TRK TOWED  ALL LNS CLR
Index: /trunk/webapps/dynamicdata/highway_status.json
===================================================================
--- /trunk/webapps/dynamicdata/highway_status.json	(revision 564)
+++ /trunk/webapps/dynamicdata/highway_status.json	(revision 616)
Index: /trunk/webapps/CADviewer_prototype.html
===================================================================
--- /trunk/webapps/CADviewer_prototype.html	(revision 616)
+++ /trunk/webapps/CADviewer_prototype.html	(revision 616)
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>CAD Log Viewer Prototype</title>
+<style>
+body {
+    font-family: Arial;
+    background-color: ivory;
+}
+/* Style the tab */
+.tab {
+  overflow: hidden;
+  border: 1px solid #ccc;
+  background-color: #f1f1f1;
+}
+
+/* Style the buttons inside the tab */
+.tab button {
+  text-decoration: underline;
+  background-color: inherit;
+  float: left;
+  border: 1px solid #ccc;
+  outline: none;
+  cursor: pointer;
+  padding: 14px 16px;
+  transition: 0.3s;
+  font-size: 17px;
+}
+
+/* Change background color of buttons on hover */
+.tab button:hover {
+  background-color: #ddd;
+}
+
+/* Create an active/current tablink class */
+.tab button.active {
+  background-color: #ccc;
+}
+
+/* Style the tab content */
+.tabcontent {
+  display: none;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-top: none;
+}
+.timestamp {
+  font-family: monospace;
+  font-size: x-large;
+}
+th {
+  text-align: left;
+  background: #f1f1f1;
+}
+tr.d1 {
+	background: white;
+  color: black;
+}
+tr.d2 {
+  background: #f1f1f1;
+  color: black;
+}</style>
+<script  src="../common/js/fileutils.js"></script>
+<script>
+function switchTab(evt, cityName) {
+  var i, tabcontent, tablinks;
+  tabcontent = document.getElementsByClassName("tabcontent");
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = "none";
+  }
+  tablinks = document.getElementsByClassName("tablinks");
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].className = tablinks[i].className.replace(" active", "");
+  }
+  document.getElementById(cityName).style.display = "block";
+  evt.currentTarget.className += " active";
+}
+</script>
+<body>
+<h2>CAD Log Viewer</h2>
+<p>Select incident to view.</p>
+<div class="tab">
+  <button class="tablinks active" onclick="switchTab(event, '181')">181</button>
+  <button class="tablinks" onclick="switchTab(event, '182')">182</button>
+  <button class="tablinks" onclick="switchTab(event, '190')">190</button>
+</div>
+
+<div id="181" class="tabcontent" style="display:block">
+
+  <table width="100%">
+    <tr>
+      <th>Time</th>
+      <th>Author</th>
+      <th>Comment</th>
+    </tr>
+    <tr class="d1">
+      <td class="timestamp" width="10%">00:01:00</td>
+      <td width="15%">CHP</td>
+      <td>14-13 10-97 1125  EMS 10-97  HAY TRK VS 2 VEH  #1 2 3 LNS BLCKD REQ ADDL UNITS</td>
+    </tr>
+    <tr class="d2">
+      <td class="timestamp" width="10%">00:05:00</td>
+      <td>CHP</td>
+      <td>10-39 COLLEGE OAK FOR BIG RIG AND CYCLE FOR ROT</td>
+    </tr>
+  </table>
+</div>
+
+<div id="182" class="tabcontent">
+
+  <table width="100%">
+    <tr>
+      <th>Time</th>
+      <th>Author</th>
+      <th>Comment</th>
+    </tr>
+    <tr class="d1">
+      <td class="timestamp" width="10%">00:03:00</td>
+      <td width="15%">CHP</td>
+      <td>14-7 ENRT FROM SB 405 AT BROOKHURST</td>
+    </tr>
+    <tr class="d2">
+      <td class="timestamp" width="10%">00:30:00</td>
+      <td>Maria</td>
+      <td>REGION 30 SUPER ENROUTE FROM 55 AT DYER</td>
+    </tr>
+  </table>
+</div>
+
+<div id="190" class="tabcontent">
+
+  <table width="100%">
+    <tr>
+      <th>Time</th>
+      <th>Author</th>
+      <th>Comment</th>
+    </tr>
+    <tr class="d1">
+      <td class="timestamp" width="10%">00:03:00</td>
+      <td width="15%">CHP</td>
+      <td>14-21 1097 PROV 1184 TRF BACKING QUICKLY</td>
+    </tr>
+    <tr class="d2">
+      <td class="timestamp" width="10%">00:09:00</td>
+      <td>Jose</td>
+      <td>MAINTENANCE TRUCK REQUESTED</td>
+    </tr>
+    <tr class="d1">
+      <td class="timestamp" width="10%">00:12:00</td>
+      <td>Jose</td>
+      <td>CMS #131 ACTIVATED</td>
+    </tr>
+  </table>
+</div></body>
+</html>
+
+
Index: /trunk/webapps/cptms/CameraDisplay.html
===================================================================
--- /trunk/webapps/cptms/CameraDisplay.html	(revision 614)
+++ /trunk/webapps/cptms/CameraDisplay.html	(revision 616)
@@ -1,5 +1,6 @@
 <html>
 <head>
-<title>UI Prototype - CPTMS Camera Display Controller</title>
+<meta charset="UTF-8">
+<title>CPTMS Camera Display Controller V1</title>
 <style>
 .toprow {
@@ -18,5 +19,69 @@
 }
 </style>
+<script  src="../common/js/fileutils.js"></script>
 <script>
+/* Camera Controller for CPTMS
+ * @author jdalbey   Apr 2020
+ */
+var kVDSstatusFile = "../dynamicdata/highway_status.json"; // dynamic json data file 
+var kCCTVfile = "data_layers/cctv_locations_D12.gjson"; // CCTV locations
+var vdsList;
+var cctvList;
+var routeCameras = {};  // for each route, a list of cameras on that route
+var cameraDict = {};    // for each cameraid, the associated nearVDS and locationName properties
+function init()
+{
+    loadJSON(kVDSstatusFile, function(response)
+    {
+        // Parse JSON string into list of VDS's
+        vdsList = JSON.parse(response);
+
+    });
+    loadJSON(kCCTVfile, function(response)
+    {
+        // Parse JSON string into list of cctv's
+        cctvList = JSON.parse(response);
+        cctvList.features.forEach(buildDict);
+        // Build the route dropdowns using routeCameras keys
+        for (var quadrant = 1; quadrant <= 4; quadrant++)
+        {
+            routecombo = document.getElementById("R"+quadrant)
+            removeOptions(routecombo);
+            routecombo.add(document.createElement('option')); // an empty entry
+            // Get all the routes and sort them
+            var routeList =  Object.keys(routeCameras);
+            routeList.sort()
+            // Add all the routes to the route dropdown box
+            for (var route of routeList)
+            {
+                opt1 = document.createElement('option')
+                opt1.text = opt1.value = route
+                routecombo.add(opt1);
+            }
+        }
+    });
+
+    // Start a timer to refresh the traffic colors every 30 seconds
+    var myTimer = setInterval(updateVDSlist, 30000);
+}
+
+// Build a lookup dictionary that maps route to camera id's
+function buildDict(cctvItem)
+{
+    id = cctvItem.id
+    route = id.substring(3,6); // extract 3 character route number
+    if (route in routeCameras)
+    {
+        routeCameras[route].push(id); // add the camera id to the list for the route
+    }
+    else
+    {
+        routeCameras[route] = [id]; // special case for first occurrence of route
+    }
+    // Add a camera's info to the cameraDict
+    cameraDict[id] = {'nearVDS':cctvItem.properties["nearVDS"],
+                      'locationName':cctvItem.properties["locationName"]}
+}
+
 /* When a route is selected from the combobox, filter the
    list of cameras for just those on that route. */
@@ -30,5 +95,6 @@
   fillOptions(currentRoute, cameraselect);
 }
-// Remove all the options from a combo box
+
+// Helper: Remove all the options from a combo box
 function removeOptions(selectbox)
 {
@@ -41,106 +107,141 @@
 
 // Fill the selectbox with items from the lookup table that match route
+// route param may be empty if the first item in the combo box was chosen
 function fillOptions(route,cameraselect)
 {
-  var cameracombo = document.getElementById(cameraselect)
-  items = lookup[route];  // grab cameras from lookup table
-  // Create a new select OPTION for each camera
-  for (idx = 0; idx < items.length; idx++)
+  // IF the route is not empty
+  if (route.length > 0)
   {
-    opt1 = document.createElement('option')
-    opt1.text = opt1.value = items[idx]
-    cameracombo.add(opt1);
-  }
-}
-// A dictionary that maps routes to cameras on that route
-var lookup = {
-"5":["SB 5 N/O MAGNOLIA AVE (S/O 91)","NB 5 HARBOR BLVD","NB 5 RTE 22","NB 5 GRAND AVE","SB 5 17TH ST (7TH)","NB 5 BAKE PKWY (LAKE FOREST)","SB 5 ENTERPRISE ST /12-405 (235)","NB 5 ORTEGA HWY","NB 5 JUNIPERO SERRA RD ","NB 5 CROWN VALLEY PKWY (MV)","NB 5 N/O LA PAZ RD (S/O ALICIA)","NB 5 OSO PKWY O/C (MV)","NB 5 N/O OSO PKWY","NB 5 LA PAZ RD ( MV)","NB 5 ALICIA PKWY ON ( MV)","NB 5 ALICIA PKWY","NB 5 EL TORO RD","NB 5 NO EL TORO RD (CARLOTA)","NB 5 ALTON PKWY","NB 5 JEFFREY RD","NB 5 YALE AVE","NB 5 CULVER DR","NB 5 JAMBOREE RD","NB 5 TUSTIN RANCH RD","NB 5 S/O NEWPORT AVE","SB 5 22 FWY","NB 5 STATE COLLEGE BLVD","SB 5 ORANGEWOOD AVE","NB 5 KATELLA AVE","NB 5 WEST ST","NB 5 LINCOLN AVE","NB 5 EUCLID AVE","NB 5 BROOKHURST ST","NB 5 GILBERT ST","NB 5 MAGNOLIA AVE","NB 5 N/O ORANGETHORPE BLVD","NB 5 ANAHEIM BL","NB 5 MANCHESTER AVE (S/O STANTON)","WB 91 GILBERT ST","NB 5 N/O BEACH BLVD","NB 5 AVERY PKWY","NB 5 N/O YALE AVE","NB 5 S/O REDHILL AVE","NB 5 S/O ARTESIA BLVD","NB 5 CHRISTIANITOS RD","NB 5 PRESIDIO DR ON","NB 5 AVENIDA PALIZADA ON","NB 5 VIA HERMOSA","NB 5 S/O AVENIDA VAQUERO ON","NB 5 CAMINO DE ESTRELLA ON","NB 5 STONEHILL DR (CAPISTRANO/STONEHILL)","NB 5 AVENIDA AEROPUERTO","NB 5 VALLE RD ON (SAN JUAN CREEK)","NB 5 S/O ORTEGA HWY (SAN JUAN CREEK)","NB 5 73 FWY (NO LOC DESC)"],
-"22":["EB 22 7TH ST","WB 22 BROOKHURST ST","WB 22 EUCLID ST","WB 22 HARBOR BLVD","WB 22 CITY DRIVE","WB 22 CAMBRIDGE ST","EB 22 GLASSELL ST","WB 22 MAIN ST","EB 22 MAGNOLIA ST","WB 22 MAGNOLIA ST","WB 22 BEACH BLVD","EB 22 KNOTT AVE","WB 22 KNOTT AVE","EB 22 VALLEY VIEW AVE","EB 22 LOS ALISOS ST"],
-"55":["SB 55 DEL MAR AVE","NB 55 4TH ST","NB 55 MCFADDEN AVE","NB 55 EDINGER AVE","NB 55 WARNER AVE ","SB 55 @RTE405","SB 55 RTE 22 ","NB 55 CHAPMAN AVE ","NB 55 WALNUT ST","NB 55 COLLINS AVE","NB 55 KATELLA AVE","NB 55 S/O MEATS AVE","NB 55 17TH ST","NB 55 WILSON ST","NB 55 DEL MAR AVE EXT","NB 55 RTE 73","NB 55 N/O BAKER ST"],
-"57":["NB 57 BALL ROAD","NB 57 KATELLA AVE","NB 57 LINCOLN AVE","NB 57 ORANGETHORPE AVE","NB 57 IMPERIAL HWY","NB 57 LAMBERT ST","NB 57 CHAPMAN AVE (ORANGE)","NB 57 ORANGEWOOD AVE ON","NB 57 N/O WAGNER AVE","NB 57 S/O MIRALOMA OC","NB 57 NUTWOOD ST","NB 57 YORBA LINDA BLVD","NB 57 BASTANCHURY RD U/C","NB 57 ROLLING HILLS RD U/C","NB 57 S/O OF TONNER CYN RD","NB 57 N/O OF TONNER CYN RD"],
-"73":["NB 73 MAINLINE S/O BIRCH ST OC","NB 73 MAINLINE N/O CAMPUS DR OC","NB 73 MAINLINE N/O REDHILL AVE OC","NB 73 MAINLINE N/O PASEO DE COLINAS UC","NB 73 MAINLINE N/O CROWN VALLEY PKWY UC","SB 73 MAINLINE N/O GREENFIELD DR UC","SB 73 MAINLINE S/O MOULTON PKWY UC","SB 73 MAINLINE N/O MOULTON PKWY UC","NB 73 MAINLINE N/O LA PAZ RD UC","SB 73 MAINLINE AT ALICIA PKWY OC",
-"SB 73 AT ALICIA CREEK RD","SB 73 MAINLINE S/O LAGUNA HILLS DR OC","SB 73 MAINLINE N/O LAGUNA HILLS DR OC","SB 73 MAINLINE AT GLENWOOD DR OC","NB 73 OFF-RAMP EL ORO RD","SB 73 MAINLINE N/O EL TORO RD UC","NB 73 CD N/O LAGUNA CYN RD UC","SB 73 MAINLINE N/O LAGUNA CYN RD UC","SB 73 MAINLINE N/O LAGUNA CYN RD UC","SB 73 MAINLINE S/O MAINLINE TOLL PLAZA","SB 73 MAINLINE MAINLINE TOLL PLAZA","SB 73 MAINLINE N/O MAINLINE TOLL PLAZA","SB 73 MAINLINE N/O MAINLINE TOLL PLAZA","SB 73 MAINLINE N/O NEWPORT COAST DR","SB 73 MAINLINE S/O NEWPORT COAST DR","SB 73 MAINLINE S/O NEWPORT COAST DR","NB 73 MAINLINE S/O BISON AVE OC","SB 73 MAINLINE S/O BISON AVE OC","NB 73 MAINLINE S/O UNIVERSITY DR UC","NB 73 MAINLINE JAMBOREE RD"],
-"91":["WB 91 BEACH BLVD","WB 91 FROM NB 57 FWY","EB 91 SCALE HOUSE","EB 91 BROOKHURST ST","EB 91 HARBOR BLVD","WB 91 W/O 57 FWY","EB 91 RAYMOND AVE","WB 91 STATE COLLEGE BLVD","WB 91 WEST / KRAEMER BLVD","WB 91 KRAEMER BLVD","EB 91 E/O GLASSELL ST","EB 91 EUCLID AVE","EB 91 LEMON ST","WB 91 MAGNOLIA ST","WB 91 STANTON AVE"],
-"133":["NB 133 MAINLINE S/O MARINE WAY UC","NB 133 MAINLINE S/O TRABUCO RD OC","NB 133 MAINLINE N/O TRABUCO RD OC","NB 133 	MAINLINE N/O IRVINE BLVD OC","NB 133 	MAINLINE S/O TOLL PLAZA"],
-"241":["NB 241 MAINLINE N/O ANTONIO PKWY OC","NB 241 MAINLINE 530M N/O ANTONIO PKWY UC","NB 241 MAINLINE N/O SANTA MARGARITA PKWY UC","NB 241 MAINLINE 30M S/O MELINDA ROAD UC","NB 241 MAINLINE 50M S/O EL TORO ROAD UC","NB 241 MAINLINE 80M S/O PORTOLA PKWY UC","NB 241 MAINLINE 40M S/O LAKE FOREST DRIVE UC","NB 241 MAINLINE 310M N/O BAKE PKWY OC","NB 241 MAINLINE 80M S/O ALTON PKWY OC","NB 241 MAINLINE 780M S/O PORTOLA PKWY OC","NB 241 MAINLINE 750M S/O BEE CANYON ROAD","NB 241 MAINLINE 50M S/O BEE CANYON ROAD","NB 241 MAINLINE 800M S/O HAUL ROAD","NB 241 MAINLINE 180M N/O HAUL ROAD","NB 241 MAINLINE 500M S/O SOUTH CULVER DR","NB 241 MAINLINE 400M N/O SOUTH CULVER DR","NB 241 MAINLINE 600M S/O NORTH CULVER DR","NB 241 MAINLINE 430M N/O NORTH CULVER DR","NB 241 MAINLINE 1400M N/O NORTH CULVER DR","NB 241 MAINLINE 230M S/O SANTIAGO CANYON ROAD OC","NB 241 MAINLINE 900M N/O SANTIAGO CANYON ROAD OC","NB 241 MAINLINE 1700M N/O SANTIAGO CANYON ROAD OC","NB 241 MAINLINE 2600M N/O SANTIAGO CANYON ROAD OC","NB 241 MAINLINE 2000M S/O WINDY RIDGE TOLL PLAZA","NB 241 MAINLINE 920M S/O WINDY RIDGE TOLL PLAZA","NB 241 MAINLINE 600M N/O WINDY RIDGE TOLL PLAZA","NB 241 MAINLINE 1200M N/O WINDY RIDGE TOLL PLAZA","NB 241 MAINLINE 2300M N/O WINDY RIDGE TOLL PLAZA","NB 241 MAINLINE 1100M S/O STATE ROUTE 91","EB 91 TO SB 241 CONNECTOR",
-"NB 241 TO EB 91 CONNECTOR","NB 241 MAINLINE 40M N/O PORTOLA PKWY"],
-"261":["SB 261 MAINLINE 200M S/O 5 ","NB 261 MAINLINE 100M S/O BRYAN AVE OC","NB 261 MAINLINE 70M S/O IRVINE BLVD OC","NB 261 MAINLINE 370M N/O IRVINE BLVD NB TOLL PLAZA","NB 261 MAINLINE 80M S/O PORTOLA PKWY (WEST) OC","NB 261 MAINLINE 940M N/O PORTOLA PKWY (WEST) OC","NB 261 MAINLINE 1900M N/O PORTOLA PKWY (WEST) OC","NB 261 MAINLINE 1500M S/O HANDY CREEK RD","NB 261 MAINLINE 290 M N/O HANDY CREEK RD"],
-"405":["SB 405 N/O BRISTOL ST","NB 405 SEAL BEACH BLVD","NB 405 S/O 605 ","NB 405 S/O EUCLID ST","NB 405 BROOKHURST ST","NB 405 WARNER AVE","NB 405 S/O NEWLAND ST","NB 405 GOLDENWEST AVE"],
-"605":["NB 605 S/O KATELLA AVE"]
-};
+      var cameracombo = document.getElementById(cameraselect)
+      // grab cameras from lookup table
+      cameranames = routeCameras[route];
+      //console.log(cameranames.length + " cameras for route " + route);
+      // Create a new select OPTION for each camera
+      for (var idx = 0; idx < cameranames.length; idx++)
+      {
+        var opt1 = document.createElement('option')
+        opt1.value = cameranames[idx]
+        opt1.text = cameraDict[cameranames[idx]].locationName
+        cameracombo.add(opt1);
+      }
+   } 
+}
+
+// Display the image requested from a camera dropdrown 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
+        }
+    }
+}
+// Execute periodically to reload the vds list with current data
+function updateVDSlist()
+{
+    loadJSON(kVDSstatusFile, function(response)
+    {
+        // Reload the vds list with current data
+        vdsList = JSON.parse(response);
+        // Refresh each camera view
+        var views = document.getElementsByClassName("camcombo");
+        for (var quadrant of views)
+        {
+            showView(quadrant);
+        }
+    });
+    
+}
 </script>
 </head>
-<body>
-<div style="text-align: center">
+<body onload="init()">
+<div style="text-align: center; width:80%">
 CPTMS Camera Controller
 </div>
-<table>
+<table width="80%">
   <tr>
-    <td class="caption"><img src="images/CCTV/12-005-CCTV-0029-day-slow.jpg"/>
-  Choose Route
-  <select id="R1">
-    <option value="0"></option>
-    <option value="1">1</option>
-    <option value="2" selected>5</option>
-    <option value="3">73</option>
-    <option value="4">405</option>
-  </select>
-  Choose Camera
-  <select id="C1">
-    <option value="0"></option>
-    <option value="1" selected>SB 17th St</option>
-    <option value="2">NB 5 Ortega Hwy</option>
-    <option value="3">NB 5 Crown Valley Pkwy</option>
-    <option value="4">NB 5 Alicia Pkwy</option>
+    <td class="caption" width="50%"><img id="img1" src=""/><br>
+  Choose Route
+  <select id="R1" onchange='routechanged("R1","C1")'>
+    <option value="0"></option>
+  </select>
+  <br>Choose Camera
+  <select id="C1" class="camcombo" onchange='showView("C1")'>
   </select></td>
-    <td class="caption"><img src="images/CCTV/12-005-CCTV-0084-day-slow.jpg"/>
-  Choose Route
-  <select id="R2">
-    <option value="0"></option>
-    <option value="1">1</option>
-    <option value="2" selected>5</option>
-    <option value="3">73</option>
-    <option value="4">405</option>
-  </select>
-  Choose Camera
-  <select id="C2">
-    <option value="0"></option>
-    <option value="1">SB 17th St</option>
-    <option value="2" selected>NB 5 Ortega Hwy</option>
-    <option value="3">NB 5 Crown Valley Pkwy</option>
-    <option value="4">NB 5 Alicia Pkwy</option>
+    <td class="caption"><img  id="img2"src=""/><br>
+  Choose Route
+  <select id="R2" onchange='routechanged("R2","C2")'>
+    <option value="0"></option>
+  </select>
+  <br>Choose Camera
+  <select id="C2" class="camcombo" onchange='showView("C2")'>
   </select></td>
   </tr>
   <tr>
-    <td class="caption"><img src="images/CCTV/12-005-CCTV-0088-day-slow.jpg"/>
-  Choose Route
-  <select id="R3">
-    <option value="0"></option>
-    <option value="1">1</option>
-    <option value="2" selected>5</option>
-    <option value="3">73</option>
-    <option value="4">405</option>
-  </select>
-  Choose Camera
-  <select id="C3">
-    <option value="0"></option>
-    <option value="1">SB 17th St</option>
-    <option value="2">NB 5 Ortega Hwy</option>
-    <option value="3" selected>NB 5 Crown Valley Pkwy</option>
-    <option value="4">NB 5 Alicia Pkwy</option>
+    <td class="caption"><img id="img3" src=""/><br>
+  Choose Route
+  <select id="R3"  onchange='routechanged("R3","C3")'>
+    <option value="0"></option>
+  </select>
+  <br>Choose Camera
+  <select id="C3" class="camcombo" onchange='showView("C3")'>
   </select>
 </td>
-    <td class="caption">
+    <td class="caption"><img id="img4" src=""/><br>
   Choose Route
   <select id="R4" onchange='routechanged("R4","C4")'>
-    <option value="0" selected></option>
-    <option value="1">5</option>
-    <option value="2">22</option>
-    <option value="3">57</option>
-    <option value="4">73</option>
-  </select>
-  Choose Camera
-  <select id="C4">
-    <option value="0" selected></option>
+    <option value="0"></option>
+  </select>
+  <br>Choose Camera
+  <select id="C4" class="camcombo" onchange='showView("C4")'>
 </select>
 </td>