var map;
var gmarkers = [];
var side_bar_html = "";
var bounds;
var rules = {
		'#map' : function(el) {
			el.style.height = '540px';
			el.style.width  = '540px';
			if (GBrowserIsCompatible()) {
				map = new GMap2($("map"));
				map.addControl(new GSmallMapControl());
    			map.addControl(new GMapTypeControl());
				map.setCenter(new GLatLng(53.588,10.0),14);
				map.setMapType(G_NORMAL_MAP);
				bounds = new GLatLngBounds();
				points.each(function(item) {
					var point = new GLatLng(item.lat,item.lng);
     			    var marker = createMarker(point,item.name,item.html);
      				map.addOverlay(marker);
      				bounds.extend(point);
				});
				map.setZoom(map.getBoundsZoomLevel(bounds));
				map.setCenter(bounds.getCenter());				
			}	
		}
	};
	Event.observe(window, 'load', init_app);
	Event.observe(window, 'unload',GUnload);

function init_app(event) {
	Behaviour.register(rules);
	Behaviour.apply(rules); 
    $("side_bar").innerHTML = side_bar_html;
}

 function createMarker(point,name,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml('<div width="100"><font size="2">' +html+'</font></div>',{maxWidth:100});
        });
        gmarkers[i] = marker;
        // add a line to the side_bar html
        side_bar_html += '<dt><a href="javascript:myclick(' + i + ')">' + name + '</a></dt><dd>'+html+'</dd>';
        i++;
        return marker;
      }
 // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }