// Variablen
    var map = null, popup = null;
    var displayProjektion = new OpenLayers.Projection("EPSG:4326");
    var projektion_900913 = new OpenLayers.Projection("EPSG:900913");
    var projektion_4326 = new OpenLayers.Projection("EPSG:4326");
    var projektion_31467 = new OpenLayers.Projection("EPSG:31467");
    var osm_Mapnik, osm_Tah, goo_phys, goo_norm, goo_sat, goo_hybr;
    
    // position stimmt nur ca;  in poi-kml ist sie 4-stellig
    var poi = [
        [10.218, 54.333],
        [10.236, 54.318],
        [10.226, 54.334]
    ];
    
    // welcher Layer ist aktiv?
    var aktSelectControl = -1;  
    // Controls zur Auswahl des Layers und Anzeige der Atrribute im Popup
    var selControl = [];  
    // OL-GML-Layers (Linien und Punkte in EINER KML-Datei)
    var GMLStyle_l = [], GMLLyr = [];  
    
    // Felder für Layername in Layerswitcher und Layer-Datenquelle
    var gml_namen = [
        [" 1,8 km", "./data/skike_lp_nr7_4326.kml"],
        [" 6 km", "./data/skike_lp_nr8_4326.kml"],
        [" 10,75 km", "./data/skike_lp_nr1_4326.kml"],
        [" 21,1km", "./data/skike_lp_nr9_4326.kml"],
        [" Standorte", "./data/herbstlauf_pois_4326.kml"]   //pois
    ];
    // Ausdehnungen der Layer
    var gml_extents = [
        [10.213,54.330,10.222,54.335],
        [10.211,54.319,10.230,54.335],
        [10.211,54.313,10.258,54.337],
        [10.211,54.313,10.258,54.337],
        [10.211,54.313,10.258,54.337]
    ];
    // Farben der Layer
    var gml_colors = [
        "#00FF00",
        "#00FFFF",
        "#FF00FF",
        "#0000FF",
        "#FFFF00"
    ];
    var select_color = "#FF0000";
    
    // array für Zeichen_layer
    var Style_zeichen, lyr_zeichen = [];
    // Zeichen auf Karte wie Pfeile etc; Felder: x, y, x_4326, y_4326, winkel, symbolnr
    var zeichen = [
        [[0,1,2,3], 1137757.9998950697, 7233676.6928605, 10.220654010772707, 54.334048739109846, 80, 1],            // 0-3
        [[0,1,2,3], 1137752.0282522356, 7233583.53523229, 10.220600366592407, 54.33356080415362, 260, 1],            // 0-3
        [[0,1,2,3], 1137533.4661245132, 7233486.794618374, 10.218636989593506, 54.333054096340035, 190, 1],            // 0-3
        [[0,1,2,3], 1137559.7413529826, 7233474.851332714, 10.218873023986818, 54.33299153938688, 10, 1],            // 0-3
        [[0,1,2,3], 1137757.9998950697, 7233558.454332382, 10.220654010772707, 54.33342943606074, 80, 1],            // 0-3
        [[0,1,2,3], 1137789.052437806, 7233702.968088969, 10.220932960510252, 54.33418636074298, 260, 1],            // 0-3
        [[0,3], 1137423.5878963685, 7233496.349246913, 10.217649936676025, 54.3331041418341, 300, 1],            // 0,3
        [[0,3], 1137126.2000832378, 7233326.754590433, 10.214978456497192, 54.33221582526072, 220, 1],            // 0,3
        [[0,3], 1137168.0015830756, 7233053.253348627, 10.21535396575928, 54.33078321796539, 130, 1],            // 0,3
        [[3], 1137193.082482978, 7233074.751262834, 10.215579271316527, 54.33089582645963, 310, 1],            // 3
        [[3], 1137194.276811545, 7233342.280861801, 10.21559000015259, 54.33229715081542, 40, 1],            // 3
        [[3], 1137459.4177533723, 7233437.827147143, 10.217971801757814, 54.33279761222718, 120, 1],            // 3
        [[1,2], 1137482.1099961412, 7233198.961433781, 10.218175649642944, 54.331546447277624, 170, 1],            // 1,2
        [[0,1,2], 1137520.3285102784, 7233197.767105219, 10.218518972396849, 54.33154019135725, 350, 1], 
        [[1,2], 1137386.563710798, 7232801.2500210395, 10.217317342758179, 54.32946317317946, 220, 1],
        [[3],1137386.563710798, 7232801.2500210395, 10.217317342758179, 54.32946317317946, 220, 2],
        [[1,2], 1137181.1391973102, 7232257.830523153, 10.215471982955933, 54.326616486906445, 170, 1],
        [[3], 1137181.1391973102, 7232257.830523153, 10.215471982955933, 54.326616486906445, 170, 2],
        [[1,2], 1137312.515339657, 7231036.032399323, 10.216652154922484, 54.320215415608644, 130, 1],
        [[3], 1137312.515339657, 7231036.032399323, 10.216652154922484, 54.320215415608644, 130, 2],
        [[1], 1137797.4127377737, 7231487.488597576, 10.221008062362673, 54.322580736865696, 0, 1],
        [[1], 1138043.4444225323, 7232355.765465633, 10.223218202590942, 54.32712953063573, 40, 1],
        [[1], 1138400.5486640024, 7233204.9330766145, 10.226426124572754, 54.3315777268653, 50, 1],
        [[1,2], 1138367.1074641324, 7233232.402633652, 10.226125717163086, 54.3317216126622, 230, 1],
        [[3], 1138367.1074641324, 7233232.402633652, 10.226125717163086, 54.3317216126622, 230, 2],
        [[1], 1138525.9531635153, 7233525.013132515, 10.227552652359009, 54.33325427795078, 340, 1],
        [[1,2], 1138515.2042064143, 7233450.964761383, 10.227456092834474, 54.332866425195014, 160, 1],
        [[3], 1138515.2042064143, 7233450.964761383, 10.227456092834474, 54.332866425195014, 160, 2],
        [[1], 1138462.6537494755, 7233720.883017471, 10.226984024047852, 54.33428019341058, 0, 1],
        [[1,2], 1138361.1358212985, 7233786.571088643, 10.22607207298279, 54.33462424469317, 260, 1],
        [[3], 1138361.1358212985, 7233786.571088643, 10.22607207298279, 54.33462424469317, 260, 2],
        [[1,2], 1138367.1074641324, 7233686.247489034, 10.226125717163086, 54.334098783393365, 140, 1],
        [[3], 1138367.1074641324, 7233686.247489034, 10.226125717163086, 54.334098783393365, 140, 2],
        [[1,2], 1137864.295137514, 7233031.755434434, 10.221608877182007, 54.330670609162866, 240, 1],
        [[3], 1137864.295137514, 7233031.755434434, 10.221608877182007, 54.330670609162866, 240, 2],
        [[2], 1137931.177537254, 7229974.274303449, 10.222209692001343, 54.314651994380014, 110, 1],
        [[3], 1137931.177537254, 7229974.274303449, 10.222209692001343, 54.314651994380014, 110, 2],
        [[2], 1139083.7046042061, 7229910.974889411, 10.232563018798828, 54.314320293087775, 60, 1],
        [[3], 1139083.7046042061, 7229910.974889411, 10.232563018798828, 54.314320293087775, 60, 2],
        [[2], 1140452.405141747, 7231296.396026887, 10.244858264923097, 54.321579559282185, 50, 1],
        [[3], 1140452.405141747, 7231296.396026887, 10.244858264923097, 54.321579559282185, 50, 2],
        [[2], 1141282.4634956657, 7233350.641161766, 10.252314805984495, 54.33234094143209, 340, 1],
        [[3], 1141282.4634956657, 7233350.641161766, 10.252314805984495, 54.33234094143209, 340, 2],
        [[2], 1139402.5903315388, 7234025.436802002, 10.235427618026732, 54.33587531599923, 270, 1],
        [[3], 1139402.5903315388, 7234025.436802002, 10.235427618026732, 54.33587531599923, 270, 2],
        // Steigung anzeigen ist nicht so gut, weil die Grafiken immer von der Strecke überdeckt werden
        //[[2,3], 1139012.0448901989, 7229896.642946607, 10.231919288635256, 54.31424519053716, 45, 99],
        //[[2,3], 1139033.542804401, 7229903.808918011, 10.232112407684326, 54.314282741829615, 45, 99],
        [[0,1,3], 1137602.737181387, 7233704.162417534, 10.219259262084961, 54.33419261626081, 0, 3],   //laufen walken
        [[2], 1137602.737181387, 7233704.162417534, 10.219259262084961, 54.33419261626081, 0, 4],   //laufen walken skaten
        [[4], 1137547.7980673146, 7233814.040645678, 10.21876573562622, 54.33476811983043, 0, 5],        // Parkplatz
        [[0,1,2,3,4], 1137655.2876383257, 7233681.470174768, 10.219731330871582, 54.334073761259226, 0, 0]    // Start,Ziel
    ];
    // verwendete Symbole; Felder: Datei, Breite, Höhe, x-offset, y-offset
    var symbole = [
        ["./bilder/start.png",64,64,0,-64],
        ["./bilder/pfeil.png",11,16,0,-16],
        ["./bilder/dpfeil.png",11,28,0,-16],
        ["./bilder/laufen_walken.gif",64,32,-64,-40],
        ["./bilder/laufen_walken_skaten.gif",96,32,-96,-40],
        ["./bilder/parkplatz.jpg",19,19,-19,-19]
    ];

    // create a lookup table with different symbolizers 
    var lookup = {
        0: {externalGraphic: symbole[0][0], graphicWidth: symbole[0][1], graphicHeight: symbole[0][2], graphicXOffset: symbole[0][3], graphicYOffset: symbole[0][4]},
        1: {externalGraphic: symbole[1][0], graphicWidth: symbole[1][1], graphicHeight: symbole[1][2], graphicXOffset: symbole[1][3], graphicYOffset: symbole[1][4]},
        2: {externalGraphic: symbole[2][0], graphicWidth: symbole[2][1], graphicHeight: symbole[2][2], graphicXOffset: symbole[2][3], graphicYOffset: symbole[2][4]},
        3: {externalGraphic: symbole[3][0], graphicWidth: symbole[3][1], graphicHeight: symbole[3][2], graphicXOffset: symbole[3][3], graphicYOffset: symbole[3][4]},
        4: {externalGraphic: symbole[4][0], graphicWidth: symbole[4][1], graphicHeight: symbole[4][2], graphicXOffset: symbole[4][3], graphicYOffset: symbole[4][4]},
        5: {externalGraphic: symbole[5][0], graphicWidth: symbole[5][1], graphicHeight: symbole[5][2], graphicXOffset: symbole[5][3], graphicYOffset: symbole[5][4]}
    }
    

// ==================== Fenstergroesse zu Anfang bestimmen, um map-Fenster anzupassen ====================
    var fenster_x,fenster_y;
    var x, y;
    if (self.innerHeight) // all except Explorer
    {
  	x = self.innerWidth;
  	y = self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientHeight)
  	// Explorer 6 Strict Mode
    {
  	x = document.documentElement.clientWidth;
  	y = document.documentElement.clientHeight;
    }
    else if (document.body) // other Explorers
    {
  	x = document.body.clientWidth;
  	y = document.body.clientHeight;
    }
    fenster_x = x;
    fenster_y = y;

// ==================== Funktionen für map und layer ====================
            OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
                defaultHandlerOptions: {
                    'single': true,
                    'double': false,
                    'pixelTolerance': 0,
                    'stopSingle': false,
                    'stopDouble': false
                },

                initialize: function(options) {
                    this.handlerOptions = OpenLayers.Util.extend(
                        {}, this.defaultHandlerOptions
                    );
                    OpenLayers.Control.prototype.initialize.apply(
                        this, arguments
                    ); 
                    this.handler = new OpenLayers.Handler.Click(
                        this, {
                            'click': this.onClick,
                            'dblclick': this.onDblclick 
                        }, this.handlerOptions
                    );
                }, 

                onClick: function(evt) {
                    var LL = map.getLonLatFromPixel(new OpenLayers.Pixel(evt.xy.x, evt.xy.y));
                    
                    LL.transform(map.getProjectionObject(), projektion_4326);
                    document.getElementById("klickp").innerHTML = '<b>Klickposition</b><br />lon, lat: ' + runde(LL.lon,4) + ', ' + runde(LL.lat,4);
                    
                    // Erfassung
                   /*
                    document.getElementById("klickp").innerHTML = '[[], ' + LL.lon + ', ' + LL.lat;   
                    LL.transform(map.getProjectionObject(), projektion_4326);
                    document.getElementById("klickp").innerHTML += ', ' + LL.lon + ', ' + LL.lat + ', , 1],';   
             */
                },

                onDblclick: function(evt) {  
                    document.getElementById("klickp").innerHTML = evt.xy;
                }   

            });

    function init_1(){    
      // avoid pink tiles
      OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
      OpenLayers.Util.onImageLoadErrorColor = "transparent";
    }
    
    
    // Vor- Zurück-Icons
    function addControls_history(){
      var nav = new OpenLayers.Control.NavigationHistory();
      // parent control must be added to the map
      map.addControl(nav);
      var panel = new OpenLayers.Control.Panel(
          {div: document.getElementById("panel")}
      );
      panel.addControls([nav.previous, nav.next]);
      map.addControl(panel);
    }
    
    // select-Controls
    function onFeatureUnselect(feature) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        feature.popup = null;
    }
    function onPopupClose(evt) {
        selControl[aktSelectControl].unselect(selectedFeature);
    }
    function onFeatureSelect(feature) {
        selectedFeature = feature;
        var content ="";
        if (feature.attributes.title) content += "<h1>"+feature.attributes.title + "</h1>";
        if (feature.attributes.name) content += "<h1>"+feature.attributes.name + "</h1>";
        if (feature.attributes.description) content += feature.attributes.description;
        // Since KML is user-generated, 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("chicken", 
                                 feature.geometry.getBounds().getCenterLonLat(),
                                 new OpenLayers.Size(100,100), content,
                                 null, true, onPopupClose);
        feature.popup = popup;
        map.addPopup(popup);
    }
    function addControls_select(){
        for(var i=0;i<gml_namen.length;i++) {
            selControl[i] = new OpenLayers.Control.SelectFeature(GMLLyr[i],
                {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
            map.addControl(selControl[i]);
        }
    }
    
    // Umschalten bei Klick auf Layer-Extent-Symbol
    function toggleSelectControl(strecke) {
    
        var i;
        // Strecke ist schon aktiv
        if (aktSelectControl == strecke) return;
        
        //  evtl popup schließen
        if (popup != null) {
            map.removePopup(popup);
            popup = null;
        }
        
        // Rahmenfarben um Extentsymbol setzen  Achtung: letzter layer sind pois, also keine Rahmenfarbe!
        for(i=0;i<gml_namen.length-1;i++) $('ol_gml' + i).style.border = "0";
        if (strecke != gml_namen.length-1) {
            $('ol_gml' + strecke).style.border = "2px solid " + gml_colors[strecke];
            $('poizoom').options[0].selected = "selected";
        }

        //wenn es ein aktives select control gibt, dann dieses deaktivieren
        if (aktSelectControl > -1) {  
                selControl[aktSelectControl].deactivate();
                GMLLyr[aktSelectControl].setVisibility(false);
                lyr_zeichen[aktSelectControl].setVisibility(false);
        }
        // select control aktivieren 
        selControl[strecke].activate();
        GMLLyr[strecke].setVisibility(true);
        lyr_zeichen[strecke].setVisibility(true);
        aktSelectControl = strecke;
        
    }

    // Zoom auf POI
    function p_zoom(nr) {
    
        if (nr == "0") return;
        // da die POI-Nummern bei 1 beginnen in index.php, alle POINummern eins tiefer setzen
        nr--;
        // pois sind immer letzter GML-Layer; diesen also aktivieren
        toggleSelectControl(gml_namen.length-1);  
        // Zoomen
        var LL = new OpenLayers.LonLat(poi[nr][0],poi[nr][1]).transform(projektion_4326, map.getProjectionObject());
        map.setCenter(LL, map.numZoomLevels-3);
        
    }
    
    // Zoom auf Strecke
    function g_extent(strecke) {
    
        // bei fehlender oder falscher $_GET-Variable strecke auf 0 setzen
        if (strecke < 0 || strecke >= gml_namen.length) strecke = 0;  
        // GML-Layer für die Strecke aktivieren
        toggleSelectControl(strecke);
        // Zoomen
        var e = gml_extents[strecke];
        var b = new OpenLayers.Bounds(e[0],e[1],e[2],e[3]).transform(projektion_4326, map.getProjectionObject());
        map.zoomToExtent(b);
        
    }

              
// ==================== INIT ====================
    function init(strecke){
     
        // da bei init() auch 0 als Rückmeldung möglich ist, alle StreckenNummern eins tiefer setzen
        strecke--;

        init_1();
        var lon = 10.25;  //9.25;
        var lat = 54.32; //54.25;

        // Extent
        // Extent (Welt)  in 900913   1136832.86731291,7231421.14823408 
        var bounds = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
        // Extent (S-H)  in Grad
        var bounds_2 = new OpenLayers.Bounds(7.7,53.4,11.4,55.15);
        // Extent (Gebiet)  in Grad
        var bounds_3 = new OpenLayers.Bounds(10.2,54.3,10.38,54.44);

        // Map
        var options_sphmerc = {
          maxExtent: bounds,
          numZoomLevels: 19,
          maxResolution: 156543.0399,   //156543.0399,   bei Google/OSM:512*250=1:22T,   512*200=1:27T; bei basic nicht!! 512*280=1:25T, MaxE=1:406M
          units: 'm',
          projection: projektion_900913,
          displayProjection: displayProjektion,
          controls: []
        }
        map = new OpenLayers.Map('map', options_sphmerc);
        
        var clickControl = new OpenLayers.Control.Click({
            handlerOptions: {
                "single": true, "double": false, "stopDouble": false
            }
        })
        map.addControl(clickControl);
        clickControl.activate();

        //var bounds_3t = bounds_3.transform(displayProjektion, map.getProjectionObject());
        
        // Map controls
        var layerswitcher = new OpenLayers.Control.LayerSwitcher();
        map.addControl(layerswitcher);
        //layerswitcher.maximizeControl();
        map.addControl(new OpenLayers.Control.PanZoomBar({ zoomWorldIcon: 'true' }));
        map.addControl(new OpenLayers.Control.Navigation());
        map.addControl(new OpenLayers.Control.KeyboardDefaults({slideFactor: 100}));
        map.addControl(new OpenLayers.Control.MousePosition({element:document.getElementById('mausp'), numDigits: 4, prefix: '<b>Mausposition</b><br />lon, lat: '}));
        addControls_history();

        // Layer Basis
        goo_hybr = new OpenLayers.Layer.Google( " Google: Hybrid",         { type: G_HYBRID_MAP,    'sphericalMercator': true } );
        map.addLayers([goo_hybr]);
        goo_phys = new OpenLayers.Layer.Google( " Google: Topographisch",  { type:G_PHYSICAL_MAP,   'sphericalMercator': true } );
        goo_norm = new OpenLayers.Layer.Google( " Google: Strassenkarte",  { type: G_NORMAL_MAP,    'sphericalMercator': true } );
        goo_sat  = new OpenLayers.Layer.Google( " Google: Satellitenbild", { type: G_SATELLITE_MAP, 'sphericalMercator': true } );
        map.addLayers([goo_norm,goo_phys,goo_sat]);

        osm_Mapnik = new OpenLayers.Layer.OSM.Mapnik(" OpenStreetMap: Mapnik");
        osm_Tah = new OpenLayers.Layer.OSM.Osmarender(" OpenStreetMap: Osmarender");
        map.addLayers([osm_Mapnik,osm_Tah]);

        // Layer GML
        // Attribute aus KML lesen
        var formatOptions = {
                extractAttributes: true
        }
 
        // alle Strecken-Layer aus Array einlesen und die zugehörigen Styles erstellen
        for(var i=0;i<gml_namen.length-1;i++) {
        
            GMLStyle_l[i] = new OpenLayers.StyleMap({
                "default": new OpenLayers.Style({
                    strokeColor: gml_colors[i],
                    strokeLinecap: "round",  // butt | round | square
                    strokeDashstyle: "solid",    // dot | dash | dashdot | longdash | longdashdot | solid
                    strokeWidth: 4,
                    pointRadius: 10, 
                    //fillColor: select_color,
                    externalGraphic: "./bilder/ylw-pushpin.png",
                    graphicYOffset: -15
                }),
                "select": new OpenLayers.Style({
                    //fillColor: select_color,
                    strokeColor: select_color,
                    strokeWidth: 10
               })
            });
            
            GMLLyr[i]= new OpenLayers.Layer.GML(gml_namen[i][0], gml_namen[i][1], 
                {
                    format: OpenLayers.Format.KML, formatOptions: formatOptions,
                    styleMap: GMLStyle_l[i],
                    projection: new OpenLayers.Projection("EPSG:4326"),
                    visibility: false
                }
            );
            map.addLayer(GMLLyr[i]);
            
        }
        
        // POI-Layer aus Array einlesen und den zugehörigen Style erstellen
        for(var i=gml_namen.length-1;i<gml_namen.length;i++) {
        
            GMLStyle_l[i] = new OpenLayers.StyleMap({
                "default": new OpenLayers.Style({
                    pointRadius: 15, 
                    externalGraphic: "./bilder/marker.png"
                }),
                "select": new OpenLayers.Style({
                    pointRadius: 20, 
                    externalGraphic: "./bilder/marker.png"
                })
            });
            
            GMLLyr[i]= new OpenLayers.Layer.GML(gml_namen[i][0], gml_namen[i][1], 
                {
                  format: OpenLayers.Format.KML, formatOptions: formatOptions,
                  styleMap: GMLStyle_l[i],
                  projection: new OpenLayers.Projection("EPSG:4326"),
                  visibility: false
                }
            );
            map.addLayer(GMLLyr[i]);
            
        }

        // selControls zu den GML-Layer hinzufügen
        addControls_select();
        
        
        // Style für Zeichen-Layer
        Style_zeichen = new OpenLayers.StyleMap({
            "default": new OpenLayers.Style({
                //externalGraphic: "./bilder/marker.png",
                graphicHeight: 16,
                graphicWidth: 11,
                graphicXOffset: 0,
                graphicYOffset: -16,
                rotation: "${winkel}"
            })
        });
        
        // add rules from the above lookup table, with the keyes mapped to the "symbol" property of the features, for the "default" intent
        Style_zeichen.addUniqueValueRules("default", "symbol", lookup);
        
        // alle  Zeichen-Layer erstellen
        for(var i=0;i<gml_namen.length;i++) {
        
            lyr_zeichen[i] = new OpenLayers.Layer.Vector(" Zeichen" + i,
                {
                    displayInLayerSwitcher: false,
                    visibility: false,
                    styleMap: Style_zeichen
                }
            );
            map.addLayer(lyr_zeichen[i]);
            
        }
        
        // Features für Zeichenlayer 
        var features = [];
        for(var i=0;i<lyr_zeichen.length;i++) {
            features[features.length] = [];
        }

        // jedes Zeichen aus array in das entsprechende features-array schieben
        for(var i = 0; i < zeichen.length; i++){
            for(var j = 0; j < zeichen[i][0].length; j++){
                var lyrnr = zeichen[i][0][j];
            //alert('i: ' + i + ', j: ' + j + ', lyrnr: ' + lyrnr);
                var a = 1;   // Anfang der Koordinaten im array
                features[lyrnr].push(
                    new OpenLayers.Feature.Vector(
                        new OpenLayers.Geometry.Point(zeichen[i][1], zeichen[i][2]), {winkel: zeichen[i][5], symbol: zeichen[i][6]}
                    )
                );
            }
        }
        
        // Zeichenlayer aus features-array füllen
        for(var i=0;i<lyr_zeichen.length;i++) {
            lyr_zeichen[i].addFeatures(features[i]);
        }

        // auf Strecke zoomen
        g_extent(strecke);

    }