// For more information on the use of this script, please visit the tutorial at 24ways
// http://24ways.org/2007/unobtrusively-mapping-microformats-with-jquery

jQuery(function($) {
    // First create a div to host the map
    var themap = $('<div id="themap"></div>').css({
        'width': '620px',
        'height': '240px'
    }).insertBefore('h3.head');

    // Now initialize the map
    var mapstraction = new Mapstraction('themap','google');
    mapstraction.addControls({
        zoom: 'small',
        map_type: true
    });

    // Set center of map
    mapstraction.setCenterAndZoom(
        new LatLonPoint(47.275502, -116.666564),
        7 // Zoom level 
    );

    // Geocode each hcard and add a marker
    $('.vcard').each(function() {
        var hcard = $(this);
        var latitude = hcard.find('.geo .latitude').text();
        var longitude = hcard.find('.geo .longitude').text();
        var marker = new Marker(new LatLonPoint(latitude, longitude));
        marker.setInfoBubble(
            '<div class="bubble">' + hcard.html() + '</div>'
        );
        mapstraction.addMarker(marker);
    });
});