var mapPoints=[];

mapPoints[0] = {};
mapPoints[0].Lat=45.77085;
mapPoints[0].Lon=-84.72433;
mapPoints[0].Title="Mackinac City";

mapPoints[1] = {};
mapPoints[1].Lat=42.99694;
mapPoints[1].Lon=-86.15139;
mapPoints[1].Title="Dutton Park";

function showList()
{
    var routeList="";
    var CPText="";
    for (var i=0; i<mapPoints.length; i++)
    {
        if (i==0)
            CPText="Start";
        else if (i==mapPoints.length-1)
            CPText="Finish";
        else
            CPText="Check Point " + (i+1).toString();
        
        routeList+="<li><a class='mapPointHeader' href='JavaScript:ShowPoint(" + i + ");'>"+ CPText +"<div class='mapPointTitle'>"+mapPoints[i].Title + "</div><br/></a></li>";        
    }
    
    $('#routeList').html(routeList);
    
    //show first and last point
    map.entities.clear(); 
    var pushpinStart = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(mapPoints[0].Lat, mapPoints[0].Lon)); 
    var pushpinEnd = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(mapPoints[mapPoints.length-1].Lat, mapPoints[mapPoints.length-1].Lon)); 
    map.entities.push(pushpinStart);
    map.entities.push(pushpinEnd);
    
}

function ShowPoint(loc)
{
    map.entities.clear(); 
    var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(mapPoints[loc].Lat, mapPoints[loc].Lon)); 
    map.entities.push(pushpin);
    map.setView({zoom: 12, center: new Microsoft.Maps.Location(mapPoints[loc].Lat, mapPoints[loc].Lon)});
}