var stop,pause,pauseValue,count,animate,prevNext,lastLocation; 
pauseValue=0;
prevNext=0;
var mgr ;
function displayData()  // class 
{
this.speed=0; 
this.time='';
this.ignition='';
this.lat=0;
this.lon=0;
}
var arrayObj=new Array();  //point array
var mm;


function Animation()
{

   // for(j=0;j<markers.length;j++)
  mgr.clearMarkers();
  var marker;
  var point;
  var bounds;
 if(GBrowserIsCompatible())
  {

  var count;  
  map.clearOverlays(); 
  function MoveMarker()
    {    
     if(pause==1)
      {     
        pauseValue=count;           
        return;
      }
      marker=markers[count];
     
      point = marker.getPoint();
      bounds=map.getBounds();
     // alert(bounds.getSouthWest().lat()+' ' +bounds.getSouthWest().lng()+' '+bounds.getNorthEast().lat()+' ' +bounds.getNorthEast().lng());
      if(stop==1)                   
        return;            
              map.clearOverlays();     
      if(bounds.containsLatLng(point))   
       {            
        var newBounds=new GLatLngBounds(new GLatLng(bounds.getSouthWest().lat()+.005,bounds.getSouthWest().lng()+.005),new GLatLng(bounds.getNorthEast().lat()-.005,bounds.getNorthEast().lng()-.005)) ;
        if( newBounds.containsLatLng(point))
          {
            map.addOverlay(marker); 
          }
        else  
          {
             map.panTo(point);
             map.addOverlay(marker);  
          }     
       }
      else
       {    
         map.panTo(point);
         map.addOverlay(marker);   
       } 
       DisplayInfoDiv(arrayObj[count]);        
        prevNext=count;
        count+=1;      
      if(count<markers.length )         
         setTimeout(MoveMarker, 3000 );
      else   
      {   
         document.getElementById("Button_animate").value="Play";
         document.getElementById("Button_Stop").disabled=true;
         pauseValue=0;
      }       
   }  
       
  if(markers.length!=0)
   {
   if(pauseValue==0) // means if it is the initial play...
     {   
       marker=markers[0];
       count=0;
       map.setCenter(marker.getPoint(),  14);
     }
   else if(pauseValue>=markers.length)
       count=0;
   else
       count=pauseValue;
       
   MoveMarker();      
   }
 }
}

//********************************************//
function DisplayInfoDiv(markerDetails)
{
   var newDiv= document.getElementById("divInformation");
  var str="<table id=\"abc1\" border=\"1\" width=\"100%\">\n <style type=\"text/css\">"
+"table {font-size: 90%; }"
+"</style>"
+"<tr><td width=\"30%\" align=\"center\" style=\"color:White; background-color:#4FADDA; height: 15px\">GMTTime</td>"
+"<td width=\"10%\" align=\"center\" style=\"color:White; background-color:#4FADDA; height: 15px\">Ignition</td>"
+"<td width=\"20%\" align=\"center\" style=\"color:White; background-color:#4FADDA; height: 15px\">Speed</td>"
+"<td width=\"40%\" align=\"center\" style=\"color:White; background-color:#4FADDA; height: 15px\">Lat/Long</td>"
+"</tr></table>"

  +" <table id=\"abc2\"  border=\"0\" width=\"100%\" > \n <style type=\"text/css\">"
+"table {font-size: 90%; }"
+"</style>"
  +"<td width=\"30%\" align=\"center\" style=\"color:Black; height: 23px\">"+markerDetails.time+"</td>"
+"<td width=\"10%\" align=\"center\" style=\"color:Black; height: 23px\">"+markerDetails.ignition+"</td>"
+"<td width=\"20%\" align=\"center\" style=\"color:Black; height: 23px\">"+markerDetails.speed+" km/hr</td>"
+"<td width=\"40%\" align=\"center\" style=\"color:Black; height: 23px\">"+markerDetails.lat+" , "+markerDetails.lon+"</td></table>"

 newDiv.innerHTML = str;  
 
}
//********************************************//
//********************************************//
function GoogleAnimation_Prev() 
 {
  if(prevNext!=0)
    {
     prevNext-=1;
     StepMove();
    }
 }
 //********************************************//
 
function GoogleAnimation_Last()
 {
     prevNext=markers.length-1;
     StepMove();
     pauseValue=markers.length;
 }
function GoogleAnimation_First()
{
     prevNext=0
     StepMove();
    pauseValue=0;
 }
 function StepMove()
 {
  mgr.clearMarkers();
  map.clearOverlays(); 
  marker=markers[prevNext];
  point = marker.getPoint();
  bounds=map.getBounds();
//  if(bounds.containsLatLng(point))         
//      map.addOverlay(marker);        
//  else
//   {    
//      map.panTo(point);
//      map.addOverlay(marker);   
//   }    
   if(bounds.containsLatLng(point))   
       {            
        var newBounds=new GLatLngBounds(new GLatLng(bounds.getSouthWest().lat()+.005,bounds.getSouthWest().lng()+.005),new GLatLng(bounds.getNorthEast().lat()-.005,bounds.getNorthEast().lng()-.005)) ;
        if( newBounds.containsLatLng(point))
          {
            map.addOverlay(marker); 
          }
        else  
          {
             map.panTo(point);
             map.addOverlay(marker);  
          }     
       }
   else
      {    
         map.panTo(point);
         map.addOverlay(marker);   
      } 
   DisplayInfoDiv(arrayObj[prevNext]);
  if (prevNext!=markers.length-1)  
      pauseValue=prevNext+1;
 }
//********************************************//
function GoogleAnimation_Stop() 
{
 map.clearOverlays(); 
 stop=1; 
 pauseValue=0; 
 prevNext=0;
 document.getElementById("Button_animate").value="Play";
 document.getElementById("Button_Stop").disabled=true;
 document.getElementById("Button_Prev").disabled=false;
 document.getElementById("Button_Next").disabled=false;
 document.getElementById("Button_Last").disabled=false;
 document.getElementById("Button_First").disabled=false;
 map.setCenter(markers[0].getPoint(),  14);
 map.addOverlay(markers[0]);  
  DisplayInfoDiv(arrayObj[0]);
}
//********************************************//
function GoogleAnimation_Next()
 {
   if(prevNext<markers.length-1)
    {
     prevNext+=1;
     StepMove();
    }
 }
//********************************************//