var cloudmadeTiles = new CM.Tiles.CloudMade.Web({key: '3c812ffec41955e6b432403f8d438499',
                                                        styleId: 4});
    var map = new CM.Map('mapDiv', cloudmadeTiles);
    map.setCenter(new CM.LatLng(42.211639, -70.960480), 12);
    map.addControl(new CM.LargeMapControl());
    var markersOnMap=[];
    
    function zoomTo(lat, lng){
    
      map.setCenter(new CM.LatLng( parseFloat(lat), parseFloat(lng) ), 14);     
    
    }


    function plotBigMarkers(markerArray){
      var pointArray = [];
      $.each(markerArray, 
             function( intIndex, objValue ){
               if (objValue && objValue !=null && objValue.lat != null && objValue.lng != null && objValue.hdg != null){
                 var myMarkerLatLng = new CM.LatLng( parseFloat(objValue.lat), parseFloat(objValue.lng) );
                 pointArray[intIndex] = myMarkerLatLng;


                 var myMarker = createMarker( myMarkerLatLng, objValue.date + " <br/> " + objValue.spd + " MPH", false, parseFloat(objValue.hdg),parseFloat(objValue.spd) );
                 lastMarker = objValue;
               }
               if (myMarker && myMarker != null){
                 map.addOverlay(myMarker);
                 markersOnMap.push(myMarker);
               }
             }
      );
      if(pointArray.length>1){
        map.zoomToBounds(new CM.LatLngBounds(pointArray));
      } else if(pointArray[0]) {

        map.setCenter(pointArray[0] ,14);
      }  
    
    }


    function plotMarkers(who, when){
      document.getElementById('loading').style.visibility = 'visible';


      var pointArray = [];
      $.get("/allen/readdbJson.php", { id: who, when: when, rnd: Math.random() },
        function(data){
          var theMarkers = eval('(' + data + ')');
          var markerArray = theMarkers.markers["marker"];
          var lastMarker;
  
          $.each(markersOnMap,
                 function( intIndex, curMarker){

                 map.removeOverlay(curMarker);
               }
          );    
          markersOnMap=[];
          $.each(markerArray, 
                 function( intIndex, objValue ){
                   if (objValue && objValue !=null && objValue.lat != null && objValue.lng != null && objValue.hdg != null){
                     var myMarkerLatLng = new CM.LatLng( parseFloat(objValue.lat), parseFloat(objValue.lng) );
                     pointArray[intIndex] = myMarkerLatLng;
  
                     
                     var myMarker = createMarker( myMarkerLatLng, objValue.date + " <br/> " + objValue.spd + " MPH", true, parseFloat(objValue.hdg), parseFloat(objValue.spd) );
                     lastMarker = objValue;
                   }
                   if (myMarker && myMarker != null){
                     map.addOverlay(myMarker);
                     markersOnMap.push(myMarker);
                   }
                 }
            );
             map.removeOverlay(markersOnMap.pop());        
             var myMarkerLatLng = new CM.LatLng( parseFloat(lastMarker.lat), parseFloat(lastMarker.lng) );      
             myMarker = createMarker(myMarkerLatLng, lastMarker.date + " <br/> " + lastMarker.spd + " MPH", false, parseFloat(lastMarker.hdg));
             map.addOverlay(myMarker);
             markersOnMap.push(myMarker);
             if(pointArray.length>1){
               map.zoomToBounds(new CM.LatLngBounds(pointArray));
             } else {

               map.setCenter(myMarkerLatLng,14)
             }  
             document.getElementById('loading').style.visibility = 'hidden';


        });
        
        showStops(who,when);
        
    }