var map;
var layer_mapnik;
var layer_tah;
var layer_markers;

function drawmap() {
    OpenLayers.Lang.setCode('de');
    // Neues Projekt    
    var proj4326 = new OpenLayers.Projection("EPSG:4326");
    var projmerc = new OpenLayers.Projection("EPSG:900913");
    
    // Position und Zoomstufe der Karte
    var lon = 8.4820;
    var lat = 53.326;
    var zoom = 16;
    var lonlat = new OpenLayers.LonLat(lon, lat);
    
    // Neue Karte
    var map = new OpenLayers.Map("map", {
			controls: [
				new OpenLayers.Control.KeyboardDefaults(),
				new OpenLayers.Control.MouseDefaults(),
				//new OpenLayers.Control.LayerSwitcher(),
				new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.MousePosition(),
                new OpenLayers.Control.ScaleLine(),
                // Überblick erzeugen (unten rechts)
                new OpenLayers.Control.OverviewMap()

                ],
			maxExtent:
                new OpenLayers.Bounds(-20037508.34,-20037508.34,
                                       20037508.34, 20037508.34),
			numZoomLevels: 18,
            maxResolution: 156543,
            units: 'm',
            projection: projmerc,
            displayProjection: proj4326
    } );
    
    // Mapnik Layer
    var mapnik_layer = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
    // TAH Layer (optional)
    var tah_layer = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");
    // Mitglieder     
    var layer_mitglieder = new OpenLayers.Layer.Markers("Mitglieder", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayInLayerSwitcher: true });
        
	// Verbindungen zeichnen, hier: Stadtbuslinie
	var stadtbus = new OpenLayers.Layer.GML("Weg", "/stadtbus422.gpx", {
		format: OpenLayers.Format.GPX,
		style: {strokeColor: "#df0000", strokeWidth: 3, strokeOpacity: 0.7},
    	projection: new OpenLayers.Projection("EPSG:4326")
	});
    // map.addLayer(stadtbus);

		// Layer hinzufügen
    map.addLayers([mapnik_layer, tah_layer, stadtbus, layer_mitglieder]);

    // Karte wählen, zentrieren
    lonlat.transform(proj4326, projmerc);
    map.setCenter(lonlat, zoom);
	
    // Icon definieren 
    var size = new OpenLayers.Size(40, 75);
    var offset = new OpenLayers.Pixel(-20, -38);
    var brommy = new OpenLayers.Icon('/grafik/brommykarte.png', size, offset);

    // Icon definieren 
    var size = new OpenLayers.Size(48, 48);
    var offset = new OpenLayers.Pixel(-24, -48);
    var fahne = new OpenLayers.Icon('/grafik/fahne48.png', size, offset);

    
    // Markierung definieren
    var mlonlat = new OpenLayers.LonLat(8.48578, 53.32556);    
    var touristinfo = new OpenLayers.Marker(mlonlat.transform(proj4326, projmerc), brommy);

    // Markierungen definieren und  hinzufügen
    var markers = new OpenLayers.Layer.Markers("BrakeVerein");
    markers.addMarker(touristinfo);
    map.addLayer(markers);

    
function addMarker(layer, lon, lat, popupContentHTML, symbol) {

    // Icon definieren 
    if(symbol=='fahne') {
    var size = new OpenLayers.Size(30, 30);
    var offset = new OpenLayers.Pixel(-15, -15);
    var icon = new OpenLayers.Icon('/grafik/fahne30.png', size, offset);
    }else if(symbol=='haltestelle') {
    var size = new OpenLayers.Size(25, 25);
    var offset = new OpenLayers.Pixel(-12, -12);
    var icon = new OpenLayers.Icon('/grafik/haltestelle25.png', size, offset);
    }        
    var ll = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
    var feature = new OpenLayers.Feature(layer, ll);
    feature.closeBox = false;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.Anchored, {'autoSize': true, 'closeBox': 'false', 'displayClass': 'kasten', 'contentDisplayClass': 'infokasten', 'closeOnMove': 'true' } );
    //feature.popupClass = OpenLayers.Class(OpenLayers.Popup.Anchored, { minSize: new OpenLayers.Size(150, 100) });
    feature.data.popupContentHTML = popupContentHTML;
    feature.data.overflow = "hidden";
        
    var marker = new OpenLayers.Marker(ll, icon);
    marker.feature = feature;

    var markerClick = function(evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        OpenLayers.Event.stop(evt);
    };
    marker.events.register("mousedown", feature, markerClick);
    layer.addMarker(marker);
}
 
    // Mitglieder
    //    addMarker(layer_mitglieder, 8.48490, 53.32665, '<img src="/grafik/logo_fischercafe.jpg" /><p><a href="http://www.fischercafe.de">Fischercafe</a><br />Breite Straße 6<br />Tel. (0 44 01) 69 54 74</p>', 'fahne');
//    addMarker(layer_mitglieder, 8.47722, 53.32618, '<img src="/grafik/logo_orgatech.jpg" /><p><a href="http://www.orgatech.de">orgatech GmbH</a><br />Breite Straße 73<br />Tel. (0 44 01) 505 88-0</p>', 'fahne');
//    addMarker(layer_mitglieder, 8.47760, 53.32620, '<img src="/grafik/logo_ducdalben.jpg" /><p><a href="http://www.ducdalben.de">DucDalben</a><br />Breite Straße 71<br />Tel. (0 44 01) 63 96</p>', 'fahne');

    // Haltestellen
    addMarker(layer_mitglieder, 8.47840, 53.32580, '<p><a href="http://www.stadtbus-brake.de">Kath. Kirche</a><br />Linie 422<br />Abfahrt Richtung Süden:<br />08:30 Uhr<br />09:30 Uhr<br />10:30 Uhr</p>', 'haltestelle');
    addMarker(layer_mitglieder, 8.48129, 53.32390, '<p><a href="http://www.stadtbus-brake.de">St.-Bernhard Hospital</a><br />Linie 422 famila über Bahnhof: 6:34, 7:04, 7:34, 8:04, 10:37, 12:05, 13:27, 14:06, 14:36, 17:02, 17:24, 17:57, 18:32, 19:32</p>', 'haltestelle');
    addMarker(layer_mitglieder, 8.48076, 53.32883, '<p><a href="http://www.stadtbus-brake.de">Bahnhof Brake</a><br />Linie 422, 440</p>', 'haltestelle');
    addMarker(layer_mitglieder, 8.47658, 53.33642, '<p><a href="http://www.stadtbus-brake.de">Paul-Prodek-Straße</a><br />Linien 422, 440</p>', 'haltestelle');
    
}