var map;
var baseIcon;
var gmarkers = [];
var htmls = [];
var to_htmls = [];
var from_htmls = [];
var i = 0;
var sidebar_html = "";

function SetupMap(center, zoom)
{



    // this variable will collect the html which will eventualkly be placed in the sidebar


    // arrays to hold copies of the markers and html used by the sidebar
    // because the function closure trick doesnt work there


    map = new GMap2(document.getElementById('map'));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    //set to 7 after testing
    map.setCenter(center, zoom);



    // Create a base icon for all of our markers that specifies the
    // shadow, icon dimensions, etc.
    baseIcon = new GIcon();
    baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    baseIcon.iconSize = new GSize(20, 34);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GPoint(9, 34);
    baseIcon.infoWindowAnchor = new GPoint(9, 2);
    baseIcon.infoShadowAnchor = new GPoint(18, 25);

}
// Creates a marker whose info window displays the letter corresponding
// to the given index.
function createMarker(point, foreLetter, html, n)
{
    // Create a lettered icon for this point using our icon class
    var letter = foreLetter;
    var icon = new GIcon(baseIcon);
    icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
    var marker = new GMarker(point, icon);

    // The info window version with the "to here" form open
    to_htmls[i] = html + 'Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' +
           '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
           '<input type="text" SIZE=40 MAXLENGTH=90 name="saddr" id="saddr" value="" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT"><br /> <br />' +
           '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() +
                   "(" + name + ")" + '"/>';
    // The info window version with the "to here" form open
    from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' +
           '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
           '<input type="text" SIZE=40 MAXLENGTH=90 name="daddr" id="daddr" value="" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT"><br /> <br />' +
           '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
                  "(" + name + ")" + '"/>';
    // The inactive version of the direction info
    html = html + 'Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <a href="javascript:fromhere(' + i + ')">From here</a> <br /> <br />';

    GEvent.addListener(marker, "click", function()
    {
        marker.openInfoWindowHtml(html);
    });
    // save the info we need to use later for the sidebar
    gmarkers[i] = marker;
    htmls[i] = html;
    // add a line to the sidebar html
    sidebar_html += letter + ': <a href="javascript:myclick(' + i + ')">' + n + '</a><br />';
    i++;

    return marker;
}

// functions that open the directions forms
function tohere(i)
{
    gmarkers[i].openInfoWindowHtml(to_htmls[i]);
}
function fromhere(i)
{
    gmarkers[i].openInfoWindowHtml(from_htmls[i]);
}


// This function picks up the click and opens the corresponding info window
function myclick(i)
{
    gmarkers[i].openInfoWindowHtml(htmls[i]);
}