$(function(){
    // get the map div
    var canvas = $("#map-canvas");
    
    function createMarker(index){
        // marker icon
        var markerIcon = new GIcon();
        markerIcon.image = "/media/images/map-pin_icon.png";
        markerIcon.shadow = "/media/images/map-pin-shadow_icon.png";
        markerIcon.iconSize = new GSize(38, 28);
        markerIcon.shadowSize = new GSize(38, 28);
        markerIcon.iconAnchor = new GPoint(25, 26);
        markerIcon.infoWindowAnchor = new GPoint(17, 7);
        // options for the markers
        var markerOptions = {
            title: points[index].title,
            icon: markerIcon
        };
        // create the marker
        var marker = new GMarker(points[index].point, markerOptions);
        // tell the marker what to do when clicked
        GEvent.addListener(marker, "click", function() {
            var html = '<div class="infoBubbleContent"><b>' + points[index].title + "</b><br />" + points[index].content + '</div>';
            marker.openInfoWindowHtml(html, {
                maxTitle: "<h2>" + points[index].title + "</h2>",
                maxContent: points[index].maxContent,
                maxWidth: 400
            });
            //var infoWindow = GMap2.getInfoWindow();
            //console.log(infoWindow);
        });
        return marker;
    }
    
    if(canvas.length > 0 && points && GBrowserIsCompatible()){
        $(document).bind("unload", GUnload);
        var map = new GMap2(document.getElementById("map-canvas"));
        map.setCenter(center, zoomLevel);
        map.setMapType(G_PHYSICAL_MAP);
        map.setUIToDefault();
        
        var polyPoints = [];
        for(var i = 0; i < points.length; i++){
            var marker = createMarker(i);
            map.addOverlay(marker);
            polyPoints.push(marker.getLatLng());
        }
        
        var polyLine = new GPolyline(polyPoints, "#CF4425", 2, 1);
        //map.addOverlay(polyLine);
    }
});