var icons = {
  probenraum: new OpenLayers.Icon('./kartenmaterial/icon/notes.png',
  new OpenLayers.Size(20, 20),
  new OpenLayers.Pixel(-8, -16)),
  chef: new OpenLayers.Icon('./kartenmaterial/icon/boss.png',
  new OpenLayers.Size(20, 20),
  new OpenLayers.Pixel(-8, -16))
};
var map;
var lonLat;
var proj4326;
var projmerc;

function getTileURL(bounds) {
  var res = this.map.getResolution();
  var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
  var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
  var z = this.map.getZoom();
  var limit = Math.pow(2, z);
  if (y < 0 || y >= limit) {
    return null;
  }
  else {
    x = ((x % limit) + limit) % limit;
    var url = this.url;
    var path = z + "/" + x + "/" + y + ".png";
    if (url instanceof Array) {
      url = this.selectUrl(path, url);
    }
    return url+path;
  }
}

function load(gpxfile, lat, lon, zoom) {
  proj4326 = new OpenLayers.Projection("EPSG:4326");
  projmerc = new OpenLayers.Projection("EPSG:900913");
  lonLat = new OpenLayers.LonLat(lon, lat);

  var mapDiv = document.getElementById("map");
  map = new OpenLayers.Map ("map", {
    controls:[
      new OpenLayers.Control.Navigation(),
      new OpenLayers.Control.PanZoom(),
      //new OpenLayers.Control.PanZoomBar(),
      new OpenLayers.Control.Attribution(),
      new OpenLayers.Control.LayerSwitcher(),
      //new OpenLayers.Control.Permalink('Permalink'),
      //new OpenLayers.Control.ScaleLine(),
      //new OpenLayers.Control.MousePosition(),
      //new OpenLayers.Control.Scale()
    ],
    maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
    maxResolution:156543.0399,
    units:'m',
	projection: new OpenLayers.Projection("EPSG:900913"), // Kartenprojektion
    displayProjection: new OpenLayers.Projection("EPSG:4326")
  } );
  
//Basiskarten wählen
  var layerMapnik1 = new OpenLayers.Layer.TMS("Landkarte (Mapnik)",
    "http://tile.openstreetmap.org/",
    { numZoomLevels: 18, type: 'png', getURL: getTileURL, 
    displayOutsideMaxExtent: true});
    
  map.addLayers([layerMapnik1]);  

  lonLat.transform(proj4326, projmerc);

  map.addControl(new OpenLayers.Control.LayerSwitcher());
  map.setCenter (lonLat, zoom);
  OpenLayers.loadURL("./kartenmaterial/gpx/poi.gpx", "", null, showMarker, errload);
}

var selectControl;
var markerlist = [];

function showTrack(req) {
  var layerStyle = OpenLayers.Util.extend({},
    OpenLayers.Feature.Vector.style['dummy']);
  layerStyle.fillOpacity = 0.2;
  layerStyle.graphicOpacity = 1;
  var styleGreen = {
    strokeColor: "#ff00ff",
    strokeWidth: 3,
    pointRadius: 6,
    pointerEvents: "visiblePainted"
  };
  //var point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);
  //var pointFeature = new OpenLayers.Feature.Vector(point, null, styleGreen);
  //alert("showTrack"+req+typeof(req.responseText)+req.responseText.length);
  var xml = OpenLayers.Format.XML.prototype.read(req.responseText);
  var gpx = xml.documentElement.getElementsByTagName("gpx");
  var trk = xml.getElementsByTagName("trk");
  var trkseg = xml.getElementsByTagName("trkseg"); 
  var trkname = xml.getElementsByTagName("name"); 
  alert (trkname.nodeValue);
  
  var vectorLayer = new OpenLayers.Layer.Vector("test",
    {style: layerStyle, numZoomLevels:18});
 var lineFeature = new Array();
 for(var j=0; j<trkseg.length; j++)
 {
  
  var trkpt = trkseg[j].getElementsByTagName("trkpt");  
  var points = [];
  for (var i = 0; i < trkpt.length; i++) {
    var lon = parseFloat(trkpt[i].getAttribute("lon"));
    var lat = parseFloat(trkpt[i].getAttribute("lat"));
    var ll = new OpenLayers.LonLat(lon, lat);
    ll.transform(proj4326, projmerc);
    points.push(new OpenLayers.Geometry.Point(ll.lon, ll.lat));    
  }
 
  lineFeature.push(new OpenLayers.Feature.Vector(
    new OpenLayers.Geometry.LineString(points), null, styleGreen));
  lineFeature[j].myData = "my own Data";  
 }
 
  map.addLayer(vectorLayer);  
  for(var i=0; i<lineFeature.length; i++)
  	vectorLayer.addFeatures([lineFeature[i]]);
  selectControl = new OpenLayers.Control.SelectFeature(vectorLayer,
    {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});  

}

function showMarker(req) {
  var layerStyle = OpenLayers.Util.extend({},
    OpenLayers.Feature.Vector.style['dummy']);
  layerStyle.fillOpacity = 0.2;
  layerStyle.graphicOpacity = 1;
  
  var styleGreen = {
    strokeColor: "#000000",
    strokeWidth: 3,
    pointRadius: 6,
    pointerEvents: "visiblePainted"
  };
  
  var xml = OpenLayers.Format.XML.prototype.read(req.responseText);  
  var gpx = xml.documentElement.getElementsByTagName("gpx");
  var trk = xml.getElementsByTagName("trk");
  var gpx_name = xml.getElementsByTagName("name");
  var trkseg = trk[0].getElementsByTagName("trkseg");
  var trkpt = trkseg[0].getElementsByTagName("trkpt");
  var vectorLayer = new OpenLayers.Layer.Vector("Track",
    {style: layerStyle, numZoomLevels:18});
  var points = [];
  
  for (var i = 0; i < trkpt.length; i++) {
    var lon = parseFloat(trkpt[i].getAttribute("lon"));
    var lat = parseFloat(trkpt[i].getAttribute("lat"));
    var ll = new OpenLayers.LonLat(lon, lat);
    ll.transform(proj4326, projmerc);
    points.push(new OpenLayers.Geometry.Point(ll.lon, ll.lat));
    nName = trkpt[i].getElementsByTagName("name");
    nSym = trkpt[i].getElementsByTagName("sym");
    nDesc = trkpt[i].getElementsByTagName("desc");
    nLink = trkpt[i].getElementsByTagName("link");
    var name = "";
    if (nName.length > 0) {
      var sym = null;
      var desc = "";
      var link = null;
      name = nName[0].firstChild.nodeValue;
      if (nSym.length > 0 && nSym[0].firstChild != null) {
        sym = nSym[0].firstChild.nodeValue;
      }
      if (nDesc.length > 0 && nDesc[0].firstChild != null) {
        desc = nDesc[0].firstChild.nodeValue;
      }
      if (nLink.length > 0 && nLink[0].firstChild != null) {
        link = nLink[0].firstChild.nodeValue;
      }
      markerlist.push({lat: lat, lon: lon, name: name, sym: sym,
        desc: desc, link: link});
    }
  }

  var markers = new OpenLayers.Layer.Markers(gpx_name[0].firstChild.nodeValue);
  map.addLayer(markers);
  
  for (var i = 0; i < markerlist.length; i++) {
    if (icons[markerlist[i].sym]) {
      img = icons[markerlist[i].sym].clone();      
    } else {
      img = OpenLayers.Marker.defaultIcon();
    }
    var ll = new OpenLayers.LonLat(markerlist[i].lon, markerlist[i].lat);
    ll.transform(proj4326, projmerc);
    marker = new OpenLayers.Marker(
      new OpenLayers.LonLat(ll.lon, ll.lat), img);
    marker.size = new OpenLayers.Size(10, 10);
    markers.addMarker(marker);
    markerlist[i].marker = marker;
    marker.index = i;
    marker.events.register('mousedown', marker, showPopup);
  }
  selectControl = new OpenLayers.Control.SelectFeature(vectorLayer,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
  //map.addControl(selectControl);
  //selectControl.activate();	
}

var popup = null;

function showPopup(evt) {
//  alert("This.name "+this.name+": EVT "+evt);
  if (!this) return;
  if (popup)
    popup.destroy();
  var i = this.index;
  var height = 150;
  var html = "<h2>"+markerlist[i].name+"</h2>\n"+
	 "<div>"+markerlist[i].desc+"</div>\n";
	 
  if (markerlist[i].link != null) {
    html += "<div class=\"popup\"><img src=\""+markerlist[i].link+"\"/></div>"
    height = 350;
  }
  popup = new OpenLayers.Popup.FramedCloud("blub"+i,
    this.lonlat, new OpenLayers.Size(450, height),
    html, this, true, popupClose);
  map.addPopup(popup);
}

function popupClose() {
  popup.destroy();
  popup = null;
}

var selectedFeature;

function onFeatureSelect(feature) {
  selectedFeature = feature;
  //feature.style.strokeColor = "#ff0000";
  popup = new OpenLayers.Popup.AnchoredBubble("chicken",
    feature.geometry.getBounds().getCenterLonLat(),
    new OpenLayers.Size(250, 75),
    "<div>"+feature.myData+"</div>",
    null, true, onPopupClose);
  feature.popup = popup;
  map.addPopup(popup);
}

function onFeatureUnselect(feature) {
  map.removePopup(feature.popup);
  feature.popup.destroy();
  feature.popup = null;
  //feature.style.strokeColor = "#00ff00";
}

function onPopupClose(evt) {
  //alert("unselect" + selectedFeature);
  selectControl.unselect(selectedFeature);
}

function errload(req) {
  alert(req.responseText);
}