var map;

function initMap()
{
    if (GBrowserIsCompatible())
    {
        var lat = parseFloat($("#" + latId).val());
        var lng = parseFloat($("#" + lngId).val());
    
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(lat, lng), 16);
        map.setUIToDefault();

        map.addMapType(G_SATELLITE_3D_MAP);

        addMarker();
    }
}


function addMarker()
{
    eval("var icons = new Array(" + $("#" + iconsId).val() + ");");
    eval("var lats  = new Array(" + $("#" + latsId).val() + ");");
    eval("var lngs  = new Array(" + $("#" + lngsId).val() + ");");
    eval("var infos = new Array(" + $("#" + infosId).val() + ");");

    for (var i = 0; i < icons.length; i++)
    {
        var lat = lats[i];
        var lng = lngs[i];

        var point = new GLatLng(lat, lng);

        var customIcon = new GIcon();
        customIcon.image = icons[i];
        customIcon.iconSize = new GSize(20, 34);
        customIcon.iconAnchor = new GPoint(10, 34);
        customIcon.infoWindowAnchor = new GPoint(10, 0);

        var name = i;
        var info = infos[i].replace(/&#34;\[\[/g, "\"");
        info = info.replace(/\]\]&#34;/g, "\"");
        var ci = "<div class=\"misinfo\" style=\"height: 100px;\">" + info + "</div>";

        var marker = createMarker(point, name, ci, i, customIcon);

        map.addOverlay(marker);
    }
}

var gmarkers = [];
var htmls = [];
var to_htmls = [];
var from_htmls = [];

// A function to create the marker and set up the event window
function createMarker(point, name, html, i, customIcon)
{
    var marker = new GMarker(point, customIcon);

    // The info window version with the "to here" form open
    to_htmls[i] = html +
           '<br />' +
           '<b>Directions:</b> <b>To here</b> - <a href="javascript:void(0);" onclick="fromhere(' + i + ');">From here</a>' +
           '<div style="padding-top: 3px;">' +
           '    Start address:<br />' +
           '    <form action="http://maps.google.com/maps" method="get" target="_blank">' +
           '        <div style="padding-left: 20px;">' +
           '            <input type="text" size="40" maxlength="48" name="saddr" id="saddr" value="" class="textbox" /><br />' +
           '            <div style="padding-top: 3px; padding-bottom: 3px; text-align: right;">' +
           '                <input value="Get Directions" type="submit" class="button" />' +
           '            </div>' +
           '            <input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + '"/>' +
           '        </div>' +
           '    </form>' +
           '</div>';

    // The info window version with the "from here" form open
    from_htmls[i] = html +
           '<br />' +
           '<b>Directions:</b> <a href="javascript:void(0);" onclick="tohere(' + i + ');">To here</a> - <b>From here</b>' +
           '<div style="padding-top: 3px;">' +
           '    End address:<br />' +
           '    <form action="http://maps.google.com/maps" method="get" target="_blank">' +
           '        <div style="padding-left: 20px;">' +
           '            <input type="text" size="40" maxlength="48" name="daddr" id="daddr" value="" class="textbox" /><br />' +
           '            <div style="padding-top: 3px; padding-bottom: 3px; text-align: right;">' +
           '                <input value="Get Directions" type="submit" class="button" />' +
           '            </div>' +
           '            <input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() + '"/>' +
           '        </div>' +
           '    </form>' +
           '</div>';

    // The inactive version of the direction info
    html = html +
           '<br />' +
           '<b>Directions:</b> <a href="javascript:void(0);" onclick="tohere(' + i + ');">To here</a> - <a href="javascript:void(0);" onclick="fromhere(' + i + ');">From here</a>';

    marker.openInfoWindowHtml("<div class=\"markerwindow\">" + html + "</div>");

    GEvent.addListener(marker, "click", function()
    {
        marker.openInfoWindowHtml("<div class=\"markerwindow\">" + html + "</div>");
    });

    gmarkers[i] = marker;
    htmls[i] = html;

    return marker;
}

// functions that open the directions forms
function tohere(i)
{
    gmarkers[i].openInfoWindowHtml("<div class=\"markerwindow\">" + to_htmls[i] + "</div>");
}
function fromhere(i)
{
    gmarkers[i].openInfoWindowHtml("<div class=\"markerwindow\">" + from_htmls[i] + "</div>");
}