// this variable will collect the html which will eventualkly be placed in the sidebar
var sidebar_html = "";

// arrays to hold copies of the markers and html used by the sidebar
// because the function closure trick doesnt work there
var gmarkers = [];
var htmls = [];

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

function display_map() {
    if (GBrowserIsCompatible()) {
        var i = 0;


        // Create a marker whose info window displays the given number.
        function createMarker(lat, lon, store, address) {

            var point  = new GPoint(lat, lon);
            var marker = new GMarker(point);

            store   = store.replace(/ /g, "&nbsp;");
            address = address.replace(/ /g, "&nbsp;");

            var marker_html = "<div style='whitespace:nowrap;'><strong>" + store + "</strong><br />" + address + "</div>";

            // Show this marker's index in the info window when it is clicked.
            GEvent.addListener(marker, 'click', function() {
                marker.openInfoWindowHtml(marker_html);
            });

            // save the info we need to use later for the sidebar
            gmarkers[i] = marker;
            htmls[i] = marker_html;

            // add a line to the sidebar html
            sidebar_html += '<li><a href="javascript:myclick(' + i + ')">' + store + '</a></li>';
            i++;

            map.addOverlay(marker);

            // add tooltip to markers
            store = store.replace(/&nbsp;/g, " ");
            store = store.replace(/&amp;/g, "&");
            var topElement = marker.iconImage;
            if (marker.transparentIcon) {topElement = marker.transparentIcon;}
            if (marker.imageMap) {topElement = marker.imageMap;}
            topElement.setAttribute("title", store);
        }


            
        var map = new GMap(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.centerAndZoom(new GPoint(-122.70363, 38.45325), 5);


        sidebar_html += "<div style='float:left;'><h2>Santa Rosa</h2><ol>";

        createMarker(-122.71992, 38.47034, "Albertsons", "150 Bicentennial Way");
        createMarker(-122.68617, 38.44256, "Albertsons", "915 Village Court");
        createMarker(-122.71799, 38.45879, "Community Market", "1899 Mendocino Avenue");
        createMarker(-122.74184, 38.44680, "G&amp;G Supermarket", "1211 West College Avenue");
        createMarker(-122.67371, 38.47474, "Oliver's Market", "560 Montecito Center");
        createMarker(-122.70261, 38.45419, "Pacific Market", "1465 Town And Country Drive");
        createMarker(-122.71752, 38.46367, "Safeway", "2300 Mendocino Avenue");
        createMarker(-122.75303, 38.45216, "Safeway", "1799 Marlow Road");
        createMarker(-122.69121, 38.45095, "Safeway", "2751 4th Street");
        createMarker(-122.66873, 38.42584, "Safeway", "2785 Yulupa Avenue");
        createMarker(-122.65192, 38.46573, "Safeway", "100 Calistoga Road");
        createMarker(-122.73153, 38.47277, "Trader Joe's", "3225 Cleveland Avenue");
        createMarker(-122.71215, 38.41756, "Trader Joe's", "2100 Santa Rosa Ave");
        createMarker(-122.67484, 38.44237, "Whole Foods Market", "1181 Yulupa Avenue");

        sidebar_html += "</ol></div><div style='float:left;'><h2>Sebastopol</h2><ol>";


        createMarker(-122.84015, 38.40721, "Albertsons", "776 Gravenstein Highway North");
        createMarker(-122.84561, 38.42098, "Andy's Market", "691 Gravenstein Highway North");
        createMarker(-122.83807, 38.40558, "Fiesta Market", "550 Gravenstein Highway North");
        createMarker(-122.81713, 38.39067, "Fircrest Market", "998 Gravenstein Highway South");
        createMarker(-122.82719, 38.40443, "Safeway", "406 North Main Street");
        createMarker(-122.82415, 38.40379, "Whole Foods Market", "6910 McKinley Avenue");


        sidebar_html += "</ol></div>";





        document.getElementById("maplinks").innerHTML = sidebar_html;
    }
    else
    {
          alert("Sorry, the Google Maps API is not compatible with this browser");
    }
}

setTimeout("display_map()", 1000);
