added autoScroll + pan to selected vehicle

- when expanding a selected payload, the list will
  automatically scroll it into view
- when expanding map is pan to the selected vehicle
- changed the color of the little arrow to light grey
- updated TODO

Author: rossengeorgiev

TODO

@@ -1,18 +1,27 @@
+* on expand scroll to item on list
+
+* add functionality to select which balloon to follow
+
+* adjust colors and fonts of the template to be more slick
+
+* make the global tamplate to landscape, so it fits anything
+  that is not a phone in portrait mode. This way the app
+  can be run by desktop browsers as well as handhelds
+
 * functionality of menu icons
   - home (HAB list)
   - perhas a screen with current location? if phone allows
   - just a list of all chase cars
   - just a list of all stations
+ 
+ New idea: Have just home and help icon
+  - home is just the regular screen
+  - help cotains credits and useful info
 
 * resize elements with javascript, so app displays correctly on any browser/mobile/tablet
 
-* adjust top and bottom padding with javascript based on browser
-    iPhone safari's addressbar and bottom bar cover part of the web page.
-    At least on iOS 4.1, maybe fixed on newer version
-
 * add rotation animation to arrow in vehicle list
 
-* add functionality to select which balloon to follow
 
 
 

css/main.css

@@ -71,7 +71,7 @@ header > div,
 .header i {
     float: right;
     font-weight: normal;
-    color: #000;
+    color: #aaa;
 }
 .header i:after { content: "▼"; }
 

js/app.js

@@ -28,12 +28,24 @@ $(window).ready(function() {
     $('#main').on('click', '.row .header', function() {
         var e = $(this).parent();
         if(e.hasClass('active')) {
+            // collapse data for selecte vehicle
             e.removeClass('active');
-            e.find('.data').slideUp();
+            e.find('.data').hide();
+
+            listScroll.refresh();
         } else {
+            // expand data for select vehicle
             e.addClass('active');
-            e.find('.data').slideDown();
+            e.find('.data').show();
+
+            listScroll.refresh();
+            
+            // auto scroll when expanding an item
+            var eName = "." + e.parent().attr('class') + " ." + e.attr('class').match(/vehicle\d+/)[0];
+            listScroll.scrollToElement(eName);
+            
+            // pan to selected vehicle
+            panTo(parseInt(e.attr('class').match(/vehicle(\d+)/)[1]));
         }
-        listScroll.refresh();
     });
 });

js/tracker.js

@@ -495,8 +495,9 @@ function updateVehicleInfo(index, position) {
   //var container = $('vehicle' + index);
   var elm = $('.vehicle' + index);
   if (elm.length == 0) {
-    $('.portrait').append('<div class="row vehicle'+index+'"></div>');
-    $('.landscape').append('<div class="row vehicle'+index+'"></div>');
+    var active = (index == 0) ? 'active' : '';
+    $('.portrait').append('<div class="row '+active+' vehicle'+index+'"></div>');
+    $('.landscape').append('<div class="row '+active+' vehicle'+index+'"></div>');
 
   }