// Variablen
    var map = null, popup = null;
    var projektion = new OpenLayers.Projection("EPSG:900913");
    var displayProjektion = new OpenLayers.Projection("EPSG:4326");
    var selectControl, selectControls, aktSelectControl;
    var layer, markers, marker, feature, poppup;
    var ol_wms, ol_gml, ol_gml0, ol_gml1, ol_gml2, ol_gml3, ol_gml4, ol_gml5,ol_gml6,ol_gml7
    var osm_Mapnik, osm_Tah, goo_phys, goo_norm, goo_sat, goo_hybr;
    
            var box_extents = [
                [10.5, 54.29, 10.6, 54.30]
            ];

    
// ==================== 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 ====================
    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);
    }
    function onFeatureUnselect(feature) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        feature.popup = null;
    }
    function onPopupClose(evt) {
        selectControls[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(layer) {
        selectControl = new OpenLayers.Control.SelectFeature(layer,
            {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
        map.addControl(selectControl);
        selectControl.activate();   
    }
*/
    function addControls_select(){
        selectControls = {
                ol_gml0: new OpenLayers.Control.SelectFeature(ol_gml0,
                    {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}
                ),
                ol_gml1: new OpenLayers.Control.SelectFeature(ol_gml1,
                    {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}
                ),
                ol_gml2: new OpenLayers.Control.SelectFeature(ol_gml2,
                    {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}
                ),
                ol_gml3: new OpenLayers.Control.SelectFeature(ol_gml3,
                    {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}
                ),
                ol_gml4: new OpenLayers.Control.SelectFeature(ol_gml4,
                    {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}
                ),
                ol_gml5: new OpenLayers.Control.SelectFeature(ol_gml5,
                    {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}
                ),
                ol_gml6: new OpenLayers.Control.SelectFeature(ol_gml6,
                    {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}
                ),
                ol_gml7: new OpenLayers.Control.SelectFeature(ol_gml7,
                    {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}
                )
        };
            
        for(var key in selectControls) {
                map.addControl(selectControls[key]);
        }
    }
    function toggleSelectControl(element) {
        if (aktSelectControl == element) return;
        if (popup != null) {
            map.removePopup(popup);
            popup = null;
        }
        $('ol_gml0').style.border = "0";
        $('ol_gml1').style.border = "0";
        $('ol_gml2').style.border = "0";
        $('ol_gml3').style.border = "0";
        $('ol_gml4').style.border = "0";
        $('ol_gml5').style.border = "0";
        $('ol_gml6').style.border = "0";
        $('ol_gml7').style.border = "0";
        if (element != "ol_gml5") document.getElementById("poizoom").options[0].selected = "selected";
        for(key in selectControls) {
            var control = selectControls[key];
            var lay = eval(key);
            if(element == key) {
                control.activate();
                lay.setVisibility(true);
                aktSelectControl = element;
            } else {
                control.deactivate();
                lay.setVisibility(false);
           }
        }
    }


    function p_extent(name) {
        if (name == "0") return;
        var b;
        toggleSelectControl('ol_gml5');
        switch (name){
          case "p1":
            b = new OpenLayers.LonLat(10.206,54.336);
            break;
          case "p2":
            b = new OpenLayers.LonLat(10.319,54.434);
            break;
          case "p3":
            b = new OpenLayers.LonLat(10.221,54.337);
            break;
          case "p4":
            b = new OpenLayers.LonLat(10.59,54.293);
            break;
        }
        $('ol_gml5').style.border = "2px solid #ff0000";
        b = b.transform(displayProjektion, projektion);
        map.setCenter(b, map.numZoomLevels-2);
//        $('test').innerHTML = b;
    }

    function g_extent(layer) {
        if (layer == "0") return;
        var b, s;
        toggleSelectControl(layer);
        switch (layer){
          case "ol_gml0":
            b = new OpenLayers.Bounds(10.2,54.3,10.38,54.44);
            s = "2px solid #ff0000";
            break;
          case "ol_gml1":
            b = new OpenLayers.Bounds(10.21,54.31,10.26,54.34);
            s = "2px solid #0FF00E";
            break;
          case "ol_gml2":
            b = new OpenLayers.Bounds(10.30,54.43,10.38,54.44);
            s = "2px solid #0000ff";
            break;
          case "ol_gml3":
            b = new OpenLayers.Bounds(10.22,54.32,10.29,54.36);
            s = "2px solid #FF01F1";
            break;
          case "ol_gml4":
            b = new OpenLayers.Bounds(10.22,54.3,10.29,54.36);
            s = "2px solid #00FFFF";
            break;
          case "ol_gml5":
            b = new OpenLayers.Bounds(10.22,54.29,10.62,54.45);
            s = "2px solid #FF0000";
            break;
          case "ol_gml6":
            b = new OpenLayers.Bounds(10.19,54.33,10.26,54.37);
            s = "2px solid #ff0000";
            break;
          case "ol_gml7":
            b = new OpenLayers.Bounds(10.16,54.30,10.19,54.33);
            s = "2px solid #0000ff";
            break;
        }
        $(layer).style.border = s;
        map.zoomToExtent(b.transform(displayProjektion, projektion));
    }

              
// ==================== INIT ====================
    function init_goog(strecke){

        var lon = 10.25;  //9.25;
        var lat = 54.32; //54.25;

// 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);
        var bounds_3t = bounds_3.transform(displayProjektion, projektion);

        init_1();

        var options_goog = {
          maxExtent: bounds,
//    restrictedExtent: bounds,   // um die Wiederholung zu vermeiden?
//          restrictedExtent:  bounds_3t,
          numZoomLevels: 19,
          maxResolution: 156543.0399,   //156543.0399,   beo Google/OSM:512*250=1:22T,   512*200=1:27T; bei basic nicht!! 512*280=1:25T, MaxE=1:406M
          units: 'm',
          projection: projektion,
          displayProjection: displayProjektion,
          controls: []
        }

        map = new OpenLayers.Map('map', options_goog);
        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: 3, prefix: '<b>Mausposition</b><br />lon, lat: '}));
        addControls_history();

        osm_Mapnik = new OpenLayers.Layer.OSM.Mapnik(" OpenStreetMap: Mapnik");
        osm_Tah = new OpenLayers.Layer.OSM.Osmarender(" OpenStreetMap: Tiles@Home");
        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 } );
        goo_hybr = new OpenLayers.Layer.Google( " Google: Hybrid",         { type: G_HYBRID_MAP,    'sphericalMercator': true } );

        map.addLayers([goo_hybr,goo_norm,goo_phys,goo_sat]);
        map.addLayers([osm_Mapnik,osm_Tah]);

        var formatOptions = {
                extractStyles: true, 
                extractAttributes: true
              }
 
        ol_wms = new OpenLayers.Layer.WMS( " OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0",
            {layers: 'basic'},
            { singleTile: true }
        );
        map.addLayer(ol_wms);

        ol_gml = new OpenLayers.Layer.GML(" Skike Strecken Grau", "./data/skike_l_900913.kml", 
            {
              format: OpenLayers.Format.KML, formatOptions: formatOptions,
//geht nicht?              styleMap:new OpenLayers.StyleMap({fillOpacity: 0.5, fillColor: '#FF0000', strokeWidth: 9, strokeColor: '#FF0000', pointRadius: 3}),
              displayInLayerSwitcher: false
            }
        );
        ol_gml0 = new OpenLayers.Layer.GML(" Skike Strecken Gesamt", "./data/skike_lp_900913.kml", 
            {
              format: OpenLayers.Format.KML, formatOptions: formatOptions,
              visibility: true
            }
        );
        ol_gml1 = new OpenLayers.Layer.GML(" Strecke 1", "./data/skike_lp_nr1_900913.kml", 
            {
              format: OpenLayers.Format.KML, formatOptions: formatOptions,
              visibility: false
            }
        );
        ol_gml2 = new OpenLayers.Layer.GML(" Strecke 2", "./data/skike_lp_nr2_900913.kml", 
            {
              format: OpenLayers.Format.KML, formatOptions: formatOptions,
              visibility: false
            }
        );
        ol_gml3 = new OpenLayers.Layer.GML(" Strecke 3", "./data/skike_lp_nr3_900913.kml", 
            {
              format: OpenLayers.Format.KML, formatOptions: formatOptions,
              visibility: false
            }
        );
        ol_gml4 = new OpenLayers.Layer.GML(" Strecke 4", "./data/skike_lp_nr4_900913.kml", 
            {
              format: OpenLayers.Format.KML, formatOptions: formatOptions,
              visibility: false
            }
        );
        ol_gml6 = new OpenLayers.Layer.GML(" Strecke 5", "./data/skike_lp_nr5_900913.kml", 
            {
              format: OpenLayers.Format.KML, formatOptions: formatOptions,
              visibility: false
            }
        );
        ol_gml7 = new OpenLayers.Layer.GML(" Strecke 6", "./data/skike_lp_nr6_900913.kml", 
            {
              format: OpenLayers.Format.KML, formatOptions: formatOptions,
              visibility: false
            }
        );
        ol_gml5 = new OpenLayers.Layer.GML(" POIs", "./data/skike_poi_900913.kml", 
            {
              format: OpenLayers.Format.KML, formatOptions: formatOptions,
              visibility: false
            }
        );

        map.addLayers([ol_gml,ol_gml0,ol_gml1,ol_gml2,ol_gml3,ol_gml4,ol_gml5,ol_gml6,ol_gml7]);

// TEST
        markers = new OpenLayers.Layer.Markers( "Markers" , { displayInLayerSwitcher: false });
//        var size = new OpenLayers.Size(100,50);
//        var offset = new OpenLayers.Pixel(-(size.w/4), -(size.h/2));
//        hk_icon = new OpenLayers.Icon('./ol/img/hierklicken.png',size,offset);

        var boxes  = new OpenLayers.Layer.Boxes( "Boxes" );
        for (var i = 0; i < box_extents.length; i++) {
            ext = box_extents[i];
            bounds = new OpenLayers.Bounds(ext[0], ext[1], ext[2], ext[3]).transform(displayProjektion, projektion);
            box = new OpenLayers.Marker.Box(bounds);
            box.events.register("click", box, function (e) {
                this.setBorder("yellow");
            });
            boxes.addMarker(box);
        }

//        map.addLayers([markers,boxes]);
       
        addControls_select();
// auf Gesamt-Strecken einstellen, falls keine $_GET-Variable 's'
        if (strecke == "ol_gml") { strecke = "ol_gml0"; }
        g_extent(strecke);
/*
        toggleSelectControl(strecke);
        $(strecke).style.border = "2px solid #ff0000";
        map.zoomToExtent(bounds_3t);
*/
    }