var map = null;
var centerPin;
var routeShapeLayer;

var startLatLng 
var tiffanysLocation;

function displayUsingVE( str )
{
    var s = new String( str );
    var strings = s.split( "~" );
    
    var gig = new Object();
    
    gig.club = strings[ 0 ];
    gig.street = strings[ 1 ];
    gig.city = strings[ 2 ];
    gig.prov = strings[ 3 ];
    gig.idToFind = strings[ 4 ]; // id pointing to this row.
    
    tiffanysLocation = gig.street + ", " + gig.city + ", " + gig.prov;
    
    window.top.gig = gig;

    var table = document.getElementById( "table" );
    var nRows = table.rows.length;
    var dataCell_1 = null;
    var dataCell_2 = null;
    var flag = false;
    var i= 0;
    
    for( i = 0 ; i < nRows && false == flag ; i++ )
        if ( table.rows[ i ].id == "mapRow" )
        {
		if ( map != null )
		{
			map.Dispose();
			map = null;
		}
            table.deleteRow( i );
            nRows--;
            flag = true;
        }
    
    flag = false;
    for( i = 0 ; i < nRows && false == flag ; i++ )
    {
        if ( table.rows[ i ].id == window.top.gig.idToFind )
        {
            flag = true;

            table.insertRow(  i + 1 );
 	    table.rows[ i + 1 ].className = "MapRow";
            table.rows[ i + 1 ].id = "mapRow";
            table.rows[ i + 1 ].vAlign = "top";
            dataCell_1 = table.rows[ i + 1 ].insertCell( 0 );
            dataCell_2 = table.rows[ i + 1 ].insertCell( 1 );
            if ( null  != dataCell_1 )
            {
                dataCell_1.colSpan = "3";
                dataCell_2.colSpan = "2";
                dataCell_2.innerHTML = "<div class=\"latLngClass\" id=\"llDisplay\">Position</div>" +
                                       "<br/>" +
                                       "<div class=\"mapClass\" id=\"mapID\"/>";
                dataCell_1.innerHTML =  "<div class=\"routeInput\" id=\"ri\"> " +
                                        " <div id=\"routeID\"/></div>" +
                                      
                                         "<p style=\"color: 000000;\">Kilometers:  <input  type=\"checkbox\" name=\"metric\" id=\"metric\" value=\"Kilometres\" /></p>" +  
                                         "<p style=\"color: 000000;\">Reverse Directions: <input  type=\"checkbox\" name=\"reverse\" id=\"reverse\" value=\"Reverse\" /></p>" +
                                         "<p style=\"color: 000000;\">Address:  <input type=\"text\" name=\"address\" id=\"address\" /></p>" +
                                        "<p style=\"color: 000000;\">City:  <input  type=\"text\" name=\"city\" id=\"city\" /></p>" +
                                         "<p style=\"color: 000000;\">State / Prov: <select id=\"state\"/></p>" +
                                                                      
                                     "<p  style=\"color: 000000;\"><br/><input style=\"margin: 10px 10px 10px 10px; padding: 10px 10px 10px 10px; float: left; clear: both;\"  type=\"button\" value=\"Get Directions\" name=\"Get Directions\" onclick=\"WDir()\" />" +
                                     "</p>" + "</div>";
                                     
                                     
                
                var lst = getStateProvList();
                var textToAdd;
                var optionToAdd;
            
                var dropDownList = document.getElementById( 'state' );
              
                while ( lst.length > 0 )
                {
                    optionToAdd = document.createElement( 'option' );
                    optionToAdd.text =  lst.pop();
                    try
                    {
                        dropDownList.add( optionToAdd, null );
                    }
                    catch( ex )
                    {
                       dropDownList.add( optionToAdd );
                    }
                } 
                                                              
                try
                {
                    map = new VEMap( 'mapID' );
                    map.LoadMap();
		    routeShapeLayer = new VEShapeLayer();
	            map.AddShapeLayer( routeShapeLayer );
                    map.Find( null,                             // what
                              tiffanysLocation,              // where
                              VEFindType.Businesses,
                              routeShapeLayer,
                              0, // start index
                              1, // number of results returned
                              true, // show results -- inserts pushpins
                              false, // create results -- results sent to callback functions
                              true, // use disambiguation
                              true, // best map view -- map is recentered
                              gigFindCallback // callback function 
                        );
                }
                catch( e )
                {
                    alert( e.message );
                }
            }
            else
                alert( "data cell is null" );
        }
    }
        
    return;
}

function reverseDirections()
{
    return( document.getElementById( "reverse" ).checked );
}

function gigFindCallback( shapeLayer, vefindresultsArray, arrayOfVePlace, trueIfMore, errorString )
{
    if (  null == errorString )
    {
        var place = arrayOfVePlace[ 0 ];

        startLatLng = place.LatLong;
        var pin = new VEShape( VEShapeType.Pushpin, startLatLng );


        pin.SetTitle( window.top.gig.club );
        pin.SetDescription( window.top.gig.street + ", " + window.top.gig.city );
 
        map.AddShape( pin );
        var latLngDiv = document.getElementById( "llDisplay" );
        var latLngText = positionAsString( startLatLng );
        latLngDiv.innerHTML = latLngText;
        
    } else
    
        alert( "E:  " + errorString );
        
    return;
}

function getFromAddress()
{   
    var rv = "";

    var txtAddress = document.getElementById( "address" ).value;
    var txtCity = document.getElementById( "city" ).value;
    var dboxState = document.getElementById( "state" );
    var txtProv;
    if ( dboxState.selectedIndex >= 0  )
    {
        txtProv = dboxState.options[ dboxState.selectedIndex ].text;
        rv = txtAddress + ", " + txtCity + ", " + txtProv;
    }
    else
        rv = txtAddress + ", " + txtCity;
    
    return( rv );
}


function WDir()
{
    var locations = new Array();
    
    if ( reverseDirections() )
    {
        locations[ 0 ] = tiffanysLocation;
        locations[ 1 ] = getFromAddress();
    }
    else
    {
        locations[ 0 ] = getFromAddress();
        locations[ 1 ] = tiffanysLocation;
    }


    var roptions = new VERouteOptions();
    roptions.DrawRoute      = true;

	roptions.RouteColor = new VEColor( 0xff, 0x33, 0xcc, 1.0 );

     // So the map does change:
     roptions.SetBestMapView = true;

     // Show the disambiguation dialog
     roptions.ShowDisambiguation = true;

    roptions.RouteMode = VERouteMode.Driving;;
    roptions.RouteCallback = getWRoute;
    roptions.DistanceUnit = document.getElementById( "metric" ).checked ? VERouteDistanceUnit.Kilometer : VERouteDistanceUnit.Mile;  
    map.GetDirections( locations, roptions );
	 
    return;
}

function getWRoute( route )
{
      var legs     = route.RouteLegs;
      var turns    = "Total Distance: " + route.Distance.toFixed(1) + " " + getDistanceUnit();
                     turns += "<br/>";
          turns +=  "Total Time: " + secondsToHMS( route.Time );
                     turns += "<br/>";
                  
      var numTurns = 0;
      var leg      = null;
      
      var arrayOfCenters = new Array();
      // Get intermediate legs 
      for(var i = 0; i < legs.length; i++)
      {
        // Get this leg so we don't have to derefernce multiple times               
        leg = legs[i];  // Leg is a VERouteLeg object
                        // Unroll each intermediate leg
         var turn = null;  // The itinerary leg
         
         turns += "<table id=\"routeTable\">";
         
         var className;
         var k;
         var hint;
         for(var j = 0; j < leg.Itinerary.Items.length; j ++)               
         { 
            turns += "<tr>";
         
            turn = leg.Itinerary.Items[j];  // turn is a VERouteItineraryItem object 
            numTurns++; 
            
            className = ( numTurns % 2 ) ? "listOdd" : "listEven";
            
            turns += "<td class=\"" + className + "\">" + j + "</td>";
            
            turns += "<td class=\"" + className + "\">" + turn.Text + "</td>";
            
            turns += "<td class=\"" + className + "\">" + turn.Distance.toFixed(1) + " " + getDistanceUnit() + "</td>";
           
            turns += "<td class=\"" + className + "\">" + secondsToHMS( turn.Time ) + "</td>";
           
            turns += "<td class=\"" + className + "\"> <input type=\"button\" value=\"Zoom\" onclick=\"map.SetCenterAndZoom( new VELatLong( " 
                                            + turn.LatLong.Latitude + "," + turn.LatLong.Longitude + "), 16 );\" />" +"</td>";

            arrayOfCenters[ j ] = turn.LatLong;
            
            turns += "</tr>";
            
            if ( turn.Hints != null )
            {
                turns += "<tr><td class=\"" + className + "\" ></td><td class=\"" + className + "\" colSpan=\"4\">";
                for( k = 0 ; k < turn.Hints.length ; k++ )
                {
                    hint =  turn.Hints[ k ];
                    
                    if ( VERouteHintType.Landmark == hint.Type )
                        turns += "Landmark:  ";
                    else if (  VERouteHintType.NextIntersection == hint.Type )
                        turns += "Next Intersection:  ";
                    else if ( VERouteHintType.PreviousIntersection == hint.Type )
                        turns += "Prev Intersection:  ";
                    turns += hint.Text;
                    turns += "<br/>";
                }
                turns += "</td></tr>";
            }
         } 
         
         turns += "</table>";
    }
    var d = document.getElementById( "routeID" );
    d.innerHTML = turns;
     
    return;
}

function getDistanceUnit()
{
   return(  document.getElementById( "metric" ).checked ? "Km" : "mi" );
}