var gmap;
$( loadmaps );

function loadmaps() {
    if (GBrowserIsCompatible()) {
        var ff_latlon = new GLatLng(40.720572, -74.002885);
        gmap = new GMap2(document.getElementById("mapContainer"));
        gmap.setCenter(ff_latlon, 15);
        gmap.addControl(new GSmallMapControl());
        //gmap.addControl(new GMapTypeControl());

        var ff_pin = new GLatLng(40.720572, -74.001485);
        var marker = new GMarker(ff_pin, getIcon('red'));
        var html = $('#ff_infowindow').html();
        gmap.addOverlay(marker);
        marker.bindInfoWindow(html);

        GEvent.trigger(marker, "click");  // show the infowindow

        $('a.mapLink').bind('click', showNeighbor);
        //geocoder.getLatLng('447 Broadway, New York, NY', function(p) { console.log(p) } );
    }
}



function getIcon(color) {
    if (!color) color = 'red';

    // Create our "tiny" marker icon
    var tinyIcon = new GIcon();
    tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_"+color+".png";
    tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    tinyIcon.iconSize = new GSize(12, 20);
    tinyIcon.shadowSize = new GSize(22, 20);
    tinyIcon.iconAnchor = new GPoint(6, 20);
    tinyIcon.infoWindowAnchor = new GPoint(5, 1);
    return tinyIcon;
}



showNeighbor = function () {
    var latlon = $(this).attr('rel').split(',');
    var gpoint = new GLatLng(parseFloat(latlon[1]), parseFloat(latlon[0]));
    gmap.setCenter(gpoint, 15);

    if (!this.marker) {
         var marker = new GMarker(gpoint, getIcon('purple'));
         var html = $(this).next().html();
         gmap.addOverlay(marker);
         marker.bindInfoWindow(html);
         this.marker = marker;
    }
    GEvent.trigger(this.marker, "click");  // show the infowindow
    $(this).blur();
    return false;
}