// coding: utf-8
    var map, GpxFile, minLat, maxLat, minLng, maxLng, polyline1;
    polyline1 = new Array(0);
    pts = new Array(0);
    
    // Encoding work is done by a PolylineEncoder object.
    function encodeData(pathData) {
        var verySmall  = 0.00001;
        var numLevels  = 18;
        var zoomFactor  = 2;
        var polylineEncoder = new PolylineEncoder(numLevels, zoomFactor, verySmall);
        var  thisPathResults, PathResults;
        var i, latLngs;
        
        pathResults = new Array(0);
        if(pathData.length > 0) {
            minLat = maxLat = pathData[0]['lat'];
            minLng = maxLng = pathData[0]['lon'];
        }
        latLngs = new Array(0);
        
        for(i=0; i<pathData.length; i++) {           
            latLngs.push(new PolylineEncoder.latLng(pathData[i]['lat'],pathData[i]['lon']));
            pts.push({ele:pathData[i]['ele'],lat:pathData[i]['lat'],lon:pathData[i]['lon']});
            if(1*pathData[i]['lat'] < 1*minLat) {
                minLat = pathData[i]['lat'];
            }
            if(1*pathData[i]['lat'] > 1*maxLat) {
                maxLat = pathData[i]['lat'];
            }
            if(1*pathData[i]['lon'] < 1*minLng) {
                minLng = pathData[i]['lon'];
            }
            if(1*pathData[i]['lon'] > 1*maxLng) {
                maxLng = pathData[i]['lon'];
            }
           // unencoded
            //pathResults.push(new GLatLng(pathData[i]['lat'],pathData[i]['lon']));
        }
        var encoded = polylineEncoder.dpEncode(latLngs);
        //unencoded
       // return pathResults;
       //console.log(ele);
        return encoded;
    }
    
    var pointOnMap;
    function showPoint(lat, lng) {
        if (pointOnMap) {
           map.removeOverlay(pointOnMap);
        }
        pointOnMap = new GMarker(new GLatLng(lat, lng)); //, pointIcon);
        map.addOverlay(pointOnMap);
    }
    function initialize(){
        
        $('#map_canvas').show();
        map = new google.maps.Map2(document.getElementById("map_canvas"));
        map.addControl(new google.maps.SmallMapControl());

        
        $.post(GpxFile,function(data){
            var track = $.xml2json(data);
            var myTrack = track.trk.trkseg.trkpt;
            var pathResults = encodeData(myTrack);
            var sw = new google.maps.LatLng(minLat, minLng);
            var ne = new google.maps.LatLng(maxLat, maxLng);
            var latCenter = (1*minLat + 1*maxLat)/2;
            var lngCenter = (1*minLng + 1*maxLng)/2;
            var bounds = new google.maps.LatLngBounds(sw, ne);
            var mapZoomLevel = map.getBoundsZoomLevel(bounds);
            var mapCenter = new google.maps.LatLng(latCenter, lngCenter)
            map.setCenter(mapCenter, mapZoomLevel);
            var plinData = {
                color: "#0000ff",
                weight: 4,
                opacity: 0.8,
                points: pathResults['encodedPoints'],
                levels: pathResults['encodedLevels'],
                zoomFactor: 2, 
                numLevels: 18
            };
            polyline1.push( new google.maps.Polyline.fromEncoded(plinData));
           // polyline1.push( new GPolyline(pathResults,"#ff0000",4));
            //polyline1.push( new GPolyline(pathResults,"#00ff00",2));
            map.addOverlay(polyline1[0]);
           // map.addOverlay(polyline1[1]);
           drawElevationProfile(pts);
            
        },'xml');
        
    }
    function drawElevationProfile(pts){
        var height_table = '';
        var maxEle = 0;
        var minEle = 0;
        var distance = 1;
        for(var i = 0; i < pts.length; ++ i){
            if(pts[i].ele > maxEle){
                maxEle = pts[i].ele;
            }
            if(pts[i].ele < minEle){
                minEle = pts[i].ele;
            }
        }
        maxEle = Math.round(maxEle);
        minEle = Math.round(minEle);
        var tempDist = 0;
         var currentPoint = 0;
         var heightScale = (maxEle - (minEle))/200;
         if (heightScale ==0)heigthScale = 1;
         var oldDelta = -1;
         var step = 10; 
         if (maxEle - minEle <100) step = 10;
         else if (maxEle - minEle <200) step = 25;
         else if (maxEle - minEle <400) step = 50;
         else if (maxEle - minEle <800) step = 100;
         else if (maxEle - minEle <1600) step = 250;
         else if (maxEle - minEle <3000) step = 500;
         else step = 1000;
         var count=0;
         var heightPix;
         var divHeight;
         for (var o= (minEle +step) - (minEle%step); o < maxEle; o+=step) {
             heightPix = 200 - Math.round((o-minEle) /heightScale);
             divHeight = Math.round(step/heightScale);
             height_table +="<div class=\""+(count++%2 == 0 ? "interval_odd" : "interval_even")+"\"style=\"top:"+heightPix+"px; height:"+divHeight+"px;\">&nbsp;</div>";  
             height_table +="<div  class=\"interval_desc\"style=\"top:"+heightPix+"px; height:"+divHeight+"px;\">"+o+"m</div>"; 
         }
         height_table +="<div class=\""+(count%2 == 0 ? "interval_odd" : "interval_even") +"\" style=\"height:"+heightPix+"px;top:0px\">&nbsp;</div>";  
 
         height_table +="<div class=\"heightDiv\" >";
         //for (var o=0; o < 768; ++o) {
         for (var o=0; o < pts.length; o++) {
      	      var delta = (distance * (o)) /  768;
              var image;
              var color;
              var clazz =  (oldDelta != -1 && Math.ceil(delta) > Math.ceil(oldDelta)) ? "heightPxMarker" : "heightPx";
              oldDelta = delta;
              /*while (delta >= tempDist && (currentPoint+1)<pts.length) {
                  tempDist += points[currentPoint].distanceToNext/1000;  	
                  currentPoint ++;
              }*/
              currentPoint ++;
              //debugger;
              //~ var height=pts[currentPoint].ele - minEle;
              var height=pts[o].ele - minEle;
	      height= Math.round(height/heightScale)+24;		                
              //~ height_table += "<img src=\"/i/1x1.gif\" class=\""+clazz+"\" height=\""+height+"\" width=\"1\" onmouseover=\"showPoint("+pts[currentPoint].lat+","+ pts[currentPoint].lng+");\"/>" ;
              height_table += "<img src=\"/i/1x1.gif\" class=\""+clazz+"\" height=\""+height+"\" width=\"1\" onmouseover=\"showPoint("+pts[o].lat+","+ pts[o].lon+");\" alt=\"\"/>" ;
         }
         height_table+="</div>";
         $('#alert').html(height_table);
         $('#alertwrapper').fadeIn('slow');
    }   
    
    $(function(){
        /*
        $('.topnavi ul').supersubs({ 
            minWidth:    12,   // minimum width of sub-menus in em units 
            maxWidth:    27,   // maximum width of sub-menus in em units 
            extraWidth:  .5     // extra width can ensure lines don't sometimes turn over 
                               // due to slight rounding differences and font-family 
        }).superfish({ 
            delay:       800,                            // one second delay on mouseout 
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
            speed:       'slow',                         // faster animation speed 
            autoArrows:  true                           // disable generation of arrow mark-up 
                                     // disable drop shadows dropShadows: true   
        });*/
        // alle gpx - Links hübschen
        $('a[href$=gpx]').addClass('gpx radius').each(function(){
             $(this).attr('href','/download.php?f=' + $(this).attr('href'));
             GpxFile = $(this).attr('href');
        }).wrap('<div class="gpxBar radius"></div>').after('<a href="javascript:initialize();" class="gpx radius">map</a>');
        $('#alertwrapper').draggable();

    });

    
    if(google.maps) window.onunload = google.maps.Unload();