Index: trunk/webapps/visualizer/index.html
===================================================================
--- trunk/webapps/visualizer/index.html	(revision 516)
+++ trunk/webapps/visualizer/index.html	(revision 528)
@@ -48,7 +48,8 @@
     <button id="cmsButton" class="unstyled-button"><img id="cmsBtnImg" src="images/btnReady_CMS.png"></button>-->
     <button id="vdsButton" class="unstyled-button"><img id="vdsBtnImg" src="images/btnDepressed_VDS.png"></button>
-    <p id="time">Time</p>
+    <p id="time">00:00:00</p>
     <button id="start" >Beginning</button>
     <button id="forward" >Next</button>
+	<button id="backward" >Back</button>
     <script  src="../common/js/fileutils.js"></script>
     <script  src="../common/js/revision_number.dat"></script>
@@ -95,4 +96,6 @@
     var filters = []; //array to hold markers for visualizer
     var times = []; //array to hold times of each traffic event
+    times[0] = "00:00:00";
+    var diff_arr = []; // array to hold difference in target markers
     var index = -1; //to index into above array
 
@@ -154,4 +157,8 @@
 
         updateVDSlayer();
+        setTimeout(function() {
+            buildDiff();
+            updateVDSlayer();
+        }, 3000);
 
         // Listen for zoom changes and move the vds dots so as to keep a nice
Index: trunk/webapps/visualizer/js/vdsLayer.js
===================================================================
--- trunk/webapps/visualizer/js/vdsLayer.js	(revision 516)
+++ trunk/webapps/visualizer/js/vdsLayer.js	(revision 528)
@@ -60,5 +60,5 @@
         // go adjust the marker coordinates so dots don't overlap
         adjustCoords(calcDistanceFactor());
-    }
+    } 
 
     // magic formula controls distance between dots proportionate to zoom factor
@@ -114,4 +114,18 @@
     }
 
+    function storePrev(marker, targetMarkers) 
+    {
+        target = marker.id;
+        newColor = marker.properties.color;
+        // see if new color is different than current color
+        currentFeature = map.data.getFeatureById(target);
+        currentColor = currentFeature.getProperty("color");
+        // if a new color is desired then assign it to the feature's color property
+        if (currentColor != newColor)
+        {
+            targetMarkers.push({"id" : currentFeature.getId(),
+                "properties" : {"color" : currentColor}});
+        }
+    }
 
     // Load the highways dynamic json file and update the map
@@ -178,10 +192,45 @@
     // updates color for each marker based on color in filters array
     function updateVDS(forwards) { 
-        index++;
-        if  (filters[index] !== undefined){
-            filters[index].forEach(function(item){
-                item.marker.properties.color = item.color;
-                updateMarker(item.marker);
-            });
+		if (forwards) {
+            index++;
+            if (index >= filters.length) 
+            {
+                index = filters.length - 1;
+            }
+            if  (filters[index] !== undefined) {
+                filters[index].forEach(function(item){
+                    item.marker.properties.color = item.color;
+                    updateMarker(item.marker);
+                });
+            }
+        }
+		else {
+            if  (diff_arr[index] !== undefined) {
+                diff_arr[index].forEach(function(item){
+                    updateMarker(item);
+                });
+            }
+            index--; 
+            if (index < -1)
+            {
+                index = -1;
+            }
+        }
+    }
+
+    function buildDiff() 
+    {
+        for (var i = 0; i <= filters.length; i++)
+        {
+            if  (filters[i] !== undefined)
+            {
+                var targetMarkers = new Array();
+                filters[i].forEach(function(item){
+                    item.marker.properties.color = item.color;
+                    storePrev(item.marker, targetMarkers);
+                    updateMarker(item.marker);
+                });
+                diff_arr.push(targetMarkers);
+            }
         }
     }
@@ -230,15 +279,28 @@
     var forward = document.getElementById('forward');
     map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(forward)
+	var backward = document.getElementById('backward');
+	map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(backward)
     forward.title = 'Click to see the next event';
-    console.log(times);
+    //console.log(diff_arr);
     forward.addEventListener('click', function() {
         updateVDS(1);
-        if (i < times.length)
-            time.innerHTML = times[i++];
+        if (i < times.length - 1)
+        {
+            ++i;
+            time.innerHTML = times[i];
+        }
     });
+	backward.addEventListener('click', function() {
+        updateVDS(0);
+        if (i > 0)
+        {
+            --i;
+            time.innerHTML = times[i];
+        }
+	});
     start.addEventListener('click', function() {
         updateVDSlayer();
         i = 0;
-        time.innerHTML = "Time"
+        time.innerHTML = "00:00:00";
     });
 }