// === Create a custom Control ===
var labelContainer;

function LabelControl() {  }
LabelControl.prototype = new GControl();
LabelControl.prototype.initialize = function(map) {
    labelContainer = document.createElement("div");
    labelContainer.style.overflow="auto";
    labelContainer.style.backgroundColor = "#eeeeee";
    labelContainer.style.border = "1px solid black";
    labelContainer.style.height="200px";
    labelContainer.style.width="130px";
    labelContainer.style.paddingLeft="5px";
    
    map.getContainer().appendChild(labelContainer);
    return labelContainer;
}

LabelControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 33));
}

var gmarkers = [];
var side_bar_html = "";
var lastlinkid;

function createMarker(point,name,html,icon) {
    var marker = new GMarker(point, { icon: icon });
    var linkid = "link"+(gmarkers.length);
    html = "<span class=\"map\"><b>" + name + "</b><br />" + html + "</span>";
    //html = "<b>" + name + "</b><br />" + html + "";
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
        document.getElementById(linkid).style.background="#d3dde4";
        lastlinkid=linkid;
    });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
    side_bar_html += '<div id="'+linkid+'"><a href="javascript:myclick(' + (gmarkers.length-1) + ')">&#8226;' + name + '<\/a><br><\/div>';
    return marker;
}

// === This function picks up the click and opens the corresponding info window ===
function myclick(i) {
    GEvent.trigger(gmarkers[i], "click");
}

function initialize() {
    if (GBrowserIsCompatible()) {
        // === Create the map ===
        var map = new GMap2(document.getElementById("map"));
        map.setMapType(G_SATELLITE_MAP);
        map.setCenter(new GLatLng(33.539574, -117.777435), 15);
        map.addControl(new LabelControl());
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());

        // custom icons
        var baseIcon = new GIcon(G_DEFAULT_ICON);
        baseIcon.iconSize=new GSize(32,32);
        baseIcon.shadowSize=new GSize(56,32);
        baseIcon.iconAnchor=new GPoint(16,32);
        baseIcon.infoWindowAnchor=new GPoint(16,2);
        var hotelIcon = new GIcon(baseIcon, "http://maps.google.com/mapfiles/ms/micons/flag.png", null, "http://maps.google.com/mapfiles/ms/micons/flag.shadow.png");
        var placeIcon = new GIcon(baseIcon, "http://maps.google.com/mapfiles/ms/micons/blue.png", null, "http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png");         

        // === Plot the markers ===
        // first place is the hotel, get's a special icon
        {
            var point = new GLatLng(places[0].coordinates[1], places[0].coordinates[0]);
            var marker = createMarker(point, places[0].name, places[0].description, hotelIcon);
            map.addOverlay(marker);
        }
        for (var i=1; i<places.length; i++) {
            var point = new GLatLng(places[i].coordinates[1], places[i].coordinates[0]);
            var marker = createMarker(point, places[i].name, places[i].description, placeIcon);
            map.addOverlay(marker);
        }
        
        // === put the assembled side_bar_html contents into the custom control ===
        labelContainer.innerHTML = side_bar_html;
        
        // Remove sidebar highlights when the info window closes
        GEvent.addListener(map,"infowindowclose", function() {
            document.getElementById(lastlinkid).style.background="#eeeeee";
        });
  } else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
  }
};