<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
#map {
        width: 400px;
        height: 400px;
        border: 0px;
        padding: 0px;
        //position: absolute;
     }
div.event_map_info h1 {
	font-size: small;
}
div.event_map_info li {
	font-size: x-small;
}
    </style>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
	<!-- -->
	<link rel="stylesheet" href="http://svn.openlayers.org/trunk/openlayers/theme/default/style.css" />
	<link rel="stylesheet" href="http://svn.openlayers.org/trunk/openlayers/theme/default/framedCloud.css" />
	<!-- -->
    <script type="text/javascript">
        <!--
        var map;

        function init(){
            map = new OpenLayers.Map('map',
                    { maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                      numZoomLevels: 19,
                      maxResolution: 156543.0399,
                      units: 'm',
                      projection: new OpenLayers.Projection("EPSG:900913"),
                      displayProjection: new OpenLayers.Projection("EPSG:4326"),
					  //controls: [],
                    });

            var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik (updated weekly)");

            // var layerTah = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");

            // map.addLayers([layerMapnik,layerTah]);
            map.addLayer(layerMapnik);

			OpenLayers.Feature.prototype.popupClass = OpenLayers.Popup.FramedCloud;

			var pois = new OpenLayers.Layer.GML( "My Points", "./textfile.txt",
					{ format: OpenLayers.Format.Text,
						projection: new OpenLayers.Projection("EPSG:4326")}
				);

            map.addLayer(pois);

			// add the popups
			selectControl = new OpenLayers.Control.SelectFeature(pois,
					{	onSelect: onFeatureSelect,
						onUnselect: onFeatureUnselect,
						toggle: true});

			map.addControl(selectControl);
			selectControl.activate();   

			// we don't need the layerswitch control
            //map.addControl(new OpenLayers.Control.LayerSwitcher());

            var lonLat = new OpenLayers.LonLat(12.128275, 54.082004).transform(map.displayProjection,  map.projection);
            map.setCenter (lonLat, 12);
        }

        function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }

        function onFeatureSelect(feature) {
            selectedFeature = feature;
			var content = '<div class="event_map_info">';
			content += '<h1>' + feature.attributes.title + '</h1>';
			/* the description contains six attributes:
			 *  time/date
			 *  place
			 *  address
			 *  organisation
			 *  details
			 *  url
			 */
			var items = feature.attributes.description.split('#', 6);
			content += '<ul>';
			content += '<li>Wann: ' + items[0] + '</li>';
			content += '<li>Ort: ' + items[1] + '</li>';
			content += '<li>Adresse: ' + items[2] + '</li>';
			content += '<li>Veranstalter: ' + items[3] + '</li>';
			content += '<li>Details: ' + items[4] + '</li>';
			content += '<li><a href="' + items[5] + '" title="mehr Informationen">mehr ...</a></li>';
			content += '</ul></div>';
            // do naive protection against Javascript.
            if (content.search("<script") != -1) {
                content = "Content contained Javascript! Escaped content below.<br />" + content.replace(/</g, "&lt;");
            }
            popup = new OpenLayers.Popup.FramedCloud("event", 
                                     feature.geometry.getBounds().getCenterLonLat(),
                                     new OpenLayers.Size(100,100),
                                     content,
                                     null, true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }

        function onFeatureUnselect(feature) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }


        // -->
    </script>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>