///////////////////////////////////////////////////////////////////////////////////////
// to do
// small window				done
// directions  show-hide	done
// context menu
// styles in windows		done
// back to original map		done
// paths
// tooltips (4, 5,6)		done
// multiple search
///////////////////////////////////////////////////////////////////////////////////////
	var mapshort=1;
	var ln1=41.10729;
	var ln2=25.76456;
    var i = 0;
    var rep=0;
 	var htmls = [];
	var to_htmls = [];
    var from_htmls = [];

 	var htmlsen = [];
	var to_htmlsen = [];
    var from_htmlsen = [];

    var side_bar_html = "";
    var gmarkers = [];
    var gmarkersVisible = [];
    var gpolylines = [];
    var numLines =0;

    var map = null;
	var    ov = null;
	var ovcontrol = null;
	var gdir=null;
	var contextmenu = null;
	
	var cluster = null;
////////////////////////////////////////////////////////////////////////
      // === Array for decoding the failure codes ===
      var reasons=[];
/*      reasons[G_GEO_SUCCESS]            = "Success";
      reasons[G_GEO_MISSING_ADDRESS]    = "Missing Address: The address was either missing or had no value.";
      reasons[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address:  No corresponding geographic location could be found for the specified address.";
      reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address:  The geocode for the given address cannot be returned due to legal or contractual reasons.";
      reasons[G_GEO_BAD_KEY]            = "Bad Key: The API key is either invalid or does not match the domain for which it was given";
      reasons[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";
      reasons[G_GEO_SERVER_ERROR]       = "Server error: The geocoding request could not be successfully processed.";
      reasons[G_GEO_BAD_REQUEST]        = "A directions request could not be successfully parsed.";
      reasons[G_GEO_MISSING_QUERY]      = "No query was specified in the input.";
      reasons[G_GEO_UNKNOWN_DIRECTIONS] = "The GDirections object could not compute directions between the points.";
*/
function startMap()
{
    map = null;
	ov = null;
	ovcontrol = null;
	gdir=null;
	contextmenu = null;

}
/////////////////////////////////////////////////////////////////////
function initMap()
{
//alert(G_GEO_SUCCESS);
      // Display the map, with some controls and set the initial location
      var mpObj = document.getElementById("map");
//      alert(mpObj);
//try{
      if (mpObj==null)
      {
      setTimeout("initMap();", 100);
      return;
      }
//      alert(map);
      map = new GMap2(mpObj);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
	  map.addControl(new GScaleControl());
	//map.addControl(GSmallZoomControl3D());
	setControls();

	initDirections();

	createMarkers();
	createPolylines();

	addOverview();
	addContextMenu();


	addClusterMarker();
	addHTMLControl();
	
//}catch(err){alert(err);};
}
function resizeMap()
{
	var valChange=0;
	if (mapshort==1)
	{
		parent.document.getElementById("left").style.display="none";
//		parent.document.getElementById("footer").style.marginLeft="243px";
		parent.document.getElementById('top').style.marginLeft='243px';
		parent.document.getElementById("mapdiv").style.width="940px";
		parent.document.getElementById("FRAME2").style.width="940px";
        $("map").style.width="918px";
		parent.document.getElementById("mapdiv").style.height="660px";
		parent.document.getElementById("FRAME2").style.height="658px";
		$("map").style.height="638px";
//		map.setCenter(new GLatLng(ln1,ln2), 9);

		if ($('directions').style.display!="none")
		{
				$("map").style.width="708px";
		        $("directions").style.height="610px";
		        $("legend").style.marginLeft="710px";
		}

	}
	if (mapshort==0)
	{
		parent.document.getElementById("left").style.display="block";
//		parent.document.getElementById("footer").style.marginLeft="0px";
		parent.document.getElementById('top').style.marginLeft='0px';


		parent.document.getElementById("mapdiv").style.width="680px";
		parent.document.getElementById("FRAME2").style.width="678px";
		if ($('directions').style.display!="none")
		{
				$("map").style.width="448px";
		        $("directions").style.height="610px";
		        $("legend").style.marginLeft="450px";
		}
		else
		{
		        $("map").style.width="658px";		
		}
		parent.document.getElementById("mapdiv").style.height="660px";
		parent.document.getElementById("FRAME2").style.height="658px";
		$("map").style.height="638px";
		

		mapshort=1;
		valChange=1;
	}
	if (mapshort==1 && valChange==0)
	{
		mapshort=0;
	}
	if (ovcontrol !=null)
	{
      map.removeControl(ovcontrol);
      map.addControl(ovcontrol);
    }
    

}
/////////////////////////////////////////////////////////////////////////////
function setControls()
{
$('directions').style.display="none";
        $("mapfoot").style.display="none";
       $("map").style.width="658px";
	map.setCenter(new GLatLng(ln1,ln2), 9);
	map.setMapType(G_HYBRID_MAP );
	map.setZoom(9);

	if (gdir)
	{
	gdir.clear();
	}
        map.closeInfoWindow();
}
//////////////////////////////////////////////////////////////////////////////
function initDirections()
{
      gdir=new GDirections(map, document.getElementById("directions"));


      // === catch Directions errors ===
      GEvent.addListener(gdir, "error", function() {
        var code = gdir.getStatus().code;
        var reason="Code "+code;
        if (reasons[code]) {
          reason = reasons[code]
        }

        alert("Δυστυχώς δε βρέθηκε διαδρομή, παρακαλώ προσπαθήστε με διαφορετικά ή κοντινά σημεία, "+reason);
        resetControls();
      });
}
/////////////////////////////////////////////////////////////////////////////
function resetControls()
{
        $("legend").style.display="none";
		$('directions').style.display="none";
        document.getElementById("mapfoot").style.display="none";
       if (mapshort==1)
       {
	       $("map").style.width="658px";
       }
       else
       {
//        alert(mapshort);
       		$("map").style.width="918px";
       	}

	if (map.getZoom()<9)
	{
	map.setCenter(new GLatLng(ln1,ln2), 9);
	}
	if (gdir)
	{
	gdir.clear();
	}
	if (ovcontrol !=null)
	{
      map.removeControl(ovcontrol);
      map.addControl(ovcontrol);
    }
}

//////////////////////////////////////////////////////////////////////////////
function createMarkers()
{
//alert('createmarkers '+gmarkers.length);
	new Ajax.Request('data.php',
	{     method:'get',
	 onFailure: function()
	 {
	 alert('Something went wrong...')
	 },
	onSuccess: function(transport)
	{
	 var response = transport.responseText || "no response text";
          var xmlDoc = GXml.parse(transport.responseText);

          // obtain the array of markers and loop through it
          var xmlDoc = GXml.parse(transport.responseText);
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");

//alert(markers.length);
          for (i = 0; i < markers.length; i++)
          {

            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var style = parseFloat(markers[i].getAttribute("style"));
            var cat = parseFloat(markers[i].getAttribute("category"));
			var catStr = ""+cat;
			if (cat<10) catStr = "0"+catStr;
			catStr =catStr +".PNG";
			//alert(catStr);
            var point = new GLatLng(lat,lng);
   //         if (i==1) alert(markers[i].getElementsByTagName("image")[0].childNodes[0].nodeValue);
			var link = markers[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
			var image = markers[i].getElementsByTagName("image")[0].childNodes[0].nodeValue;
            var label = markers[i].getElementsByTagName("label")[0].childNodes[0].nodeValue;
            var labelen = markers[i].getElementsByTagName("labelen")[0].childNodes[0].nodeValue;
            var htmlText = markers[i].getElementsByTagName("html")[0].childNodes[0].nodeValue;
            var htmlTexten = markers[i].getElementsByTagName("htmlen")[0].childNodes[0].nodeValue;
//			var imageIcon = markers[i].getElementsByTagName("icon")[0].childNodes[0].nodeValue;

			//			alert('');
//			if (i==1) alert('            :'+htmlText);
			var icon = getIcon(catStr);//new GIcon();

			if (cat==15) htmlText = htmlText+'<BR/><BR/>'+'Η Θέση του ξενώνα για τους χρήστες GPS είναι <b>   N '+lat+'  E  '+lng+'</b>';
			if (cat==15) htmlTexten = htmlTexten+'<BR/><BR/>'+'Η Θέση του ξενώνα για τους χρήστες GPS είναι <b>   N '+lat+'  E  '+lng+'</b>';
            var html = getHTML(style, label,link, image,htmlText) ;
            var htmlen = getHTML(style, labelen,link, image,htmlTexten) ;

			htmls[i]=html;

		// directions
		// directions
		        // The info window version with the "to here" form open
        to_htmls[i] = html + '<div class="directions">Οδηγίες : <b>Πως να έρθετε <\/b> - <a href="javascript:fromhere(' + i + ')">Πως να φύγετε <\/a>' +
           '<br>Από εδώ:<form action="javascript:getDirections()">' +
           '<input class="inputdirections" style="font:11px verdana;width:110px;" type="text"  name="saddr" id="saddr" value="" />' +
           '<input class="dirsub"  value="Λήψη Οδηγιών" TYPE="SUBMIT"><br>' +
           '(Μέσω):<BR>'+
           '<input class="inputdirections" style="font:11px verdana;width:110px;" type="text"  name="maddr" id="maddr" value="" /><BR>' +
           'Πεζοπορία <input type="checkbox" name="walk" id="walk" /> &nbsp; Όχι Εθνική Οδος <input type="checkbox" name="highways" id="highways" />' +
           '<input type="hidden" id="daddr" value="'+label+"@"+ point.lat() + ',' + point.lng() +
           '"/></div>';
        // The info window version with the "from here" form open
        from_htmls[i] = html + '<div class="directions">Οδηγίες : <a href="javascript:tohere(' + i + ')">Πως να έρθετε<\/a> - <b>Πως να φύγετε<\/b>' +
           '<BR/>Εως Εδώ:<form action="javascript:getDirections()">' +
           '<input class="inputdirections" style="font:11px verdana;width:110px;" type="text"  name="daddr" id="daddr" value="" />' +
           '<input class="dirsub" value="Λήψη Οδηγιών" TYPE="SUBMIT"><BR>' +
           '<BR>(Μέσω):<BR>'+
           '<input class="inputdirections" style="font:11px verdana;width:110px;" type="text"  name="maddr" id="maddr" value="" /><BR>' +
           'Πεζοπορία<input type="checkbox" name="walk" id="walk" /> &nbsp; Όχι Εθνική Οδος <input type="checkbox" name="highways" id="highways" />' +
           '<input type="hidden" id="saddr" value="'+label+"@"+ point.lat() + ',' + point.lng() +
           '"/></div>';
        // The inactive version of the direction info
        html = html + '<div style="width:234px" class="directions">Οδηγίες:'+
        '<a href="javascript:tohere('+i+')">Πως να έρθετε <\/a> - <a href="javascript:fromhere('+i+')">Πως να φύγετε <\/a></div>';

///////////////ENGLISH
		        // The info window version with the "to here" form open
        to_htmlsen[i] = htmlen + '<div class="directions">Οδηγίες : <b>Πως να έρθετε <\/b> - <a href="javascript:fromhere(' + i + ')">Πως να φύγετε <\/a>' +
           '<br>Από εδώ:<form action="javascript:getDirections()">' +
           '<input class="inputdirections" style="font:11px verdana;width:110px;" type="text"  name="saddr" id="saddr" value="" />' +
           '<input class="dirsub"  value="Λήψη Οδηγιών" TYPE="SUBMIT"><br>' +
           '(Μέσω):<BR>'+
           '<input class="inputdirections" style="font:11px verdana;width:110px;" type="text"  name="maddr" id="maddr" value="" /><BR>' +
           'Πεζοπορία <input type="checkbox" name="walk" id="walk" /> &nbsp; Όχι Εθνική Οδος <input type="checkbox" name="highways" id="highways" />' +
           '<input type="hidden" id="daddr" value="'+label+"@"+ point.lat() + ',' + point.lng() +
           '"/></div>';
        // The info window version with the "from here" form open
        from_htmlsen[i] = htmlen + '<div class="directions">Οδηγίες : <a href="javascript:tohere(' + i + ')">Πως να έρθετε<\/a> - <b>Πως να φύγετε<\/b>' +
           '<BR/>Εως Εδώ:<form action="javascript:getDirections()">' +
           '<input class="inputdirections" style="font:11px verdana;width:110px;" type="text"  name="daddr" id="daddr" value="" />' +
           '<input class="dirsub" value="Λήψη Οδηγιών" TYPE="SUBMIT"><BR>' +
           '<BR>(Μέσω):<BR>'+
           '<input class="inputdirections" style="font:11px verdana;width:110px;" type="text"  name="maddr" id="maddr" value="" /><BR>' +
           'Πεζοπορία<input type="checkbox" name="walk" id="walk" /> &nbsp; Όχι Εθνική Οδος <input type="checkbox" name="highways" id="highways" />' +
           '<input type="hidden" id="saddr" value="'+label+"@"+ point.lat() + ',' + point.lng() +
           '"/></div>';
        // The inactive version of the direction info
        htmlen = htmlen + '<div style="width:234px" class="directions">Οδηγίες:'+
        '<a href="javascript:tohere('+i+')">Πως να έρθετε <\/a> - <a href="javascript:fromhere('+i+')">Πως να φύγετε <\/a></div>';

            if (style==3 && rep==1) {rep=2;alert(html);}

            // create the marker
//            if (i%10==0) alert(i+' '+html);
//if (i>1) continue;
//alert(i+' '+html);
            var marker = createMarker(point,label,icon, html,cat);
            map.addOverlay(marker);
            
               
            marker.hide();  
            

            
            
            
	}// end of markers





	 }// end of function
	 });
//alert(xenones);
}
///////////////////////////////////////////////////////////////////////////
function createPolylines()
{
	new Ajax.Request('data.php',
	{     method:'get',
	 onFailure: function()
	 {
	 alert('Something went wrong...')
	 },
	onSuccess: function(transport)
	{
	 var response = transport.responseText || "no response text";
          var xmlDoc = GXml.parse(transport.responseText);

          // obtain the array of markers and loop through it
          var xmlDoc = GXml.parse(transport.responseText);

          // ========= Now process the polylines ===========
          var lines = xmlDoc.documentElement.getElementsByTagName("line");
          // read each line
          numLines=lines.length;
//alert("FOUND "+numLines);
          for (var a = 0; a < numLines; a++)
          {
            // get any line attributes
            var colour = lines[a].getAttribute("colour");
            var width  = parseFloat(lines[a].getAttribute("width"));
            var txt  = lines[a].getAttribute("html");
            var title  = lines[a].getAttribute("name");
            var video  = lines[a].getAttribute("video");
            // read each point on that line
            var points = lines[a].getElementsByTagName("point");
            var pts = [];
            for (var i = 0; i < points.length; i++)
            {
               pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                                   parseFloat(points[i].getAttribute("lng")));
            }
            var polyline = new GPolyline(pts,colour,width,1);
//            alert(pts.length+polyline);
            map.addOverlay(polyline);
    			polyline.hide();
//			
            gpolylines.push(polyline);

			var tx =getHTMLLine(7, title,"default", video,txt);
		addPolylineListener(polyline, tx);
          }
//          	 alert(gpolylines.length+' '+numLines);

	 }// end of function
	 });
//	 alert(gpolylines.length+' '+numLines);
}
////////////////////////////////////////////////////////////
function addPolylineListener(pol, html)
{
            GEvent.addListener(pol, "click", function(para) {
//            			alert(pol.getLength()+" "+html);
          map.openInfoWindowHtml(para,html);
        }
        );
}
//////////////////////////////////////////////////////////////////////////////
function createMarker(point,name,icon, html, cat)
{
        var marker = new GMarker(point, {icon:icon,title:name, zIndexProcess:importanceOrder});
                marker.mycategory = cat;
                marker.myname = name;
                marker.importance=0;
               function importanceOrder (marker,b) {
//                       return -GOverlay.getZIndex(marker.getPoint().lat());
        return GOverlay.getZIndex(marker.getPoint().lat()) + marker.importance*1000000;
      }

        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
//	alert(name);
        // save the info we need to use later for the side_bar
        gmarkers.push(marker);
        htmls[i] = html;
        return marker;
      }
      
/////////////////////////////////////////////////////////////////////
function addClusterMarker()
{
		if (gmarkers.length==0)
		{
		setTimeout("addClusterMarker();", 100);
		return;
		}
		cluster=new ClusterMarker(map,
		{
			clusterMarkerTitle:'Click to see info about %count locations' ,
			intersectPadding:-1,
			borderPadding:-1,
			clusterMarkerClick:myClusterClick,
			markers:gmarkersVisible
		});
		
		cluster.removeMarkers();
//		alert(gmarkersVisible.length);
		cluster.addMarkers(gmarkersVisible);
/////////////////////////////////////////
try{
		cluster.refresh(true);					//throws error
//		cluster.fitMapToMarkers();			//throws error
}catch(err){}

		function myClusterClick(args) 
		{
			cluster.defaultClickAction=function()
			{
				map.setCenter(args.clusterMarker.getLatLng(), map.getBoundsZoomLevel(args.clusterMarker.clusterGroupBounds))
				delete cluster.defaultClickAction;
			}
			var h = 50+args.clusteredMarkers.length*25;
			var html='<div style="background-color:#eeeeee;padding-left:10px;border:3px outset #86000B;padding-top:1px; height:'+h+'px; overflow:auto; width:210px"><span style="font-style:italic;font-weight:normal; font-size:14px">'+args.clusteredMarkers.length+'&nbsp;Τοποθεσίες:</span><BR/><br/><table>';
			for (i=0; i<args.clusteredMarkers.length; i++) 
			{
				html+='<tr><td><a class="cluster" href="javascript:cluster.triggerClick('+args.clusteredMarkers[i].index+')">'+args.clusteredMarkers[i].getTitle()+'</a><br style="height:20px"/></td></tr>';
			}
			html+='</table></div>';
			//	args.clusterMarker.openInfoWindowHtml(html);
			map.openInfoWindowHtml(args.clusterMarker.getLatLng(), html);

		map.setCenter(args.clusterMarker.getLatLng(), map.getBoundsZoomLevel(args.clusterMarker.clusterGroupBounds))
		map.setZoom(14);
		}
		//	create a ClusterMarker
}
/////////////////////////////////////////////////////////////////////
function removeClusterMarker()
{
		cluster.removeMarkers();
		cluster.addMarkers(gmarkersVisible);
		cluster.refresh(true);
//		cluster.fitMapToMarkers();
}

/////////////////////////////////////////////////////////////////////

function addOverview()
{
try
{
      //  ======== Add a map overview ==========
      //  ======== save a reference to the control =========
      ovcontrol = new GOverviewMapControl(new GSize(150,150));
      map.addControl(ovcontrol);

}catch(err){alert(err);}

      //  ======== Cause the overview to be positioned AFTER IE sets its initial position ========
//      setTimeout("positionOverview(508,254);",5000);

      //  ======== change the overview map type AFTER the overview finisges initializing =====
//      setTimeout("setOverviewZoom()",100);


}
//////////////////////////////////////////////////////////////////////////
function setOverviewZoom()
{
//alert('ovcontrol='+ovcontrol);
if (ovcontrol)
{
 ovmap = ovcontrol.getOverviewMap();
 if (ovmap!=null)
 {
//alert('ovmap='+ovmap);
//	ovmap.setMapType(G_SATELLITE_MAP);
//	alert('ovmap='+ovmap);
//	ovmap.setZoom(10);


	}
	else
	{
	setTimeout("setOverviewZoom()",1000);
	}
	}
	else
	{
	setTimeout("setOverviewZoom()",1000);
	}
}
////////////////////////////////////////////////////////////////////////////
      //  ======== A function to adjust the positioning of the overview ========
      function positionOverview(x,y) {
        var omap=document.getElementById("map_overview");
		alert(ovmap);
        omap.style.left = x+"px";
        omap.style.top = y+"px";
        // == restyling ==
        omap.firstChild.style.border = "1px solid gray";

        omap.firstChild.firstChild.style.left="4px";
        omap.firstChild.firstChild.style.top="4px";
        omap.firstChild.firstChild.style.width="190px";
        omap.firstChild.firstChild.style.height="190px";
      }

///////////////////////////////////////////////////////////////////////
// ===== request the directions =====
function getDirections()
      {
//        $('mapprint').innerHTML='<a href=\"javascript:printMap(2);">Εκτύπωση οδηγιών</a>';

$('directions').innerHTML='<BR><span style="padding:5px;font-weight:bold;font: 12px Verdana;">Αναζητούνται οδηγίες κατεύθυνσης, παρακαλώ περιμένετε...</span>';
        // ==== Set up the walk and avoid highways options ====
        var opts = {};
        if (document.getElementById("walk").checked) {
           opts.travelMode = G_TRAVEL_MODE_WALKING;
        }
        if (document.getElementById("highways").checked) {
           opts.avoidHighways = true;
        }
        opts.getSteps=true;
        
        opts.locale="el";
		        // ==== set the start and end locations ====
        var saddr = document.getElementById("saddr").value;
        var daddr = document.getElementById("daddr").value;
        var maddr = document.getElementById("maddr").value;

		saddr = getCoordinates(saddr);
		daddr = getCoordinates(daddr);
		maddr = getCoordinates(maddr);
//        alert(saddr);

//	       $("legend").style.width="200px";
    	    $("directions").style.width="210px";
 		if (mapshort==1)
		{
		$("map").style.width="448px";
        $("directions").style.height="610px";
        }
        else
        {
		$("map").style.width="708px";
        $("directions").style.height="610px";
        }


        document.getElementById("legend").style.display="block";
        $("directions").style.display="block";

	if (ovcontrol !=null)
	{
      map.removeControl(ovcontrol);
      map.addControl(ovcontrol);
    }

        map.closeInfoWindow();
	if (maddr=='')
	{
		var route = "from: "+saddr+" to: "+daddr;
//		alert(route);
	  gdir.load(route, opts);
	}
	else
	{
//             var route = 'from: 47.400000,-122.210000 to:47.470000,-122.330000   ' +
 //           ' to: 47.400000,-122.210000';
             var route = 'from: '+saddr+' to:'+maddr +
            ' to: '+daddr;
//            alert(route);
       //gdir.load("from: "+saddr+" to: "+maddr+" to: "+daddr, opts);
    gdir.load(route, opts);
    }
//setTimeout("positionOverview(508,254);",5000);
      GEvent.addListener(gdir,"load", function()
      {
        setTimeout('customPanel(map,"map",gdir,$("directions"))', 100);
      });

      }

 ///////////////////////////////////////////////////////////////////
       // ============ custom direction panel ===============
      function customPanel(map,mapname,dirn,div)
      {
        var html = "";
        // ===== local functions =====

        // === waypoint banner ===
        function waypoint(point, type, address) {
          var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
          html += '<table id="dirwaypoint" width="165px" style="border: 1px solid silver; margin: 10px 0px; background-color: rgb(238, 238, 238); border-collapse: collapse; color: rgb(0, 0, 0);">';
          html += '  <tr style="cursor: pointer;">';
          html += '    <td style="padding: 1px; vertical-align: middle; ">';
          html += '      <a class="mapprint" href="javascript:resetControls();"><img style="border:0px" width="24px" src="images/arrow.png"/>&nbsp;Πίσω στον Χάρτη</a>';
          html += '    <\/td>';
          html += '  <\/tr>';
          html += '  <tr style="cursor: pointer;">';
          html += '    <td  style="padding: 1px; vertical-align: middle; ">';
          html += '      <a class="mapprint" href="javascript:printMap(\'map\');"><img style="border:0px" width="24px" src="images/print.png"/>&nbsp;Εκτύπωση οδηγιών</a>';
          html += '    <\/td>';
          html += '  <\/tr>';
          html += '  <tr style="cursor: pointer;" onclick='+target+'>';
          html += '    <td style="vertical-align: middle; width: 100%;">';
          html +=        address;
          html += '    <\/td>';
          html += '  <\/tr>';
          html += '<\/table>';
        }

        // === route distance ===
        function routeDistance(dist) {
          html += '<div style="text-align: right; padding-bottom: 0.3em;">' + dist + '<\/div>';
        }

        // === step detail ===
        function detail(point, num, description, dist) {
          var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
          html += '<table id="dirdetail" style="width:165px; margin: 0px; padding: 0px; border-collapse: collapse;">';
          html += '  <tr style="cursor: pointer;" onclick='+target+'>';
          html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.2em 2px; vertical-align: top; text-align: right;">';
          html += '      <a style="font-size:9px;" href="javascript:void(0)"> '+num+'. <\/a>';
          html += '    <\/td>';
          html += '    <td class="directionsdesc">';
          html +=        description;
          html +=        ' ('+dist+')';
          html += '    <\/td>';
          html += '  <\/tr>';
          html += '<\/table>';
        }

        // === Copyright tag ===
        function copyright(text) {
          html += '<div style="font-size: 0.86em;">' + text + "<\/div>";
        }


        // === read through the GRoutes and GSteps ===

        for (var i=0; i<dirn.getNumRoutes(); i++) {
          if (i==0) {
            var type="play";
          } else {
            var type="pause";
          }
          var route = dirn.getRoute(i);
          var geocode = route.getStartGeocode();
          var point = route.getStep(0).getLatLng();
          // === Waypoint at the start of each GRoute
          waypoint(point, type, geocode.address);
          routeDistance(route.getDistance().html+" (about "+route.getDuration().html+")");

          for (var j=0; j<route.getNumSteps(); j++) {
            var step = route.getStep(j);
            // === detail lines for each step ===
            detail(step.getLatLng(), j+1, step.getDescriptionHtml(), step.getDistance().html);
          }
        }

        // === the final destination waypoint ===
//        var geocode = route.getEndGeocode();
 //       var point = route.getEndLatLng();
  //      waypoint(point, "stop", geocode.address);

        // === the copyright text ===
        copyright(dirn.getCopyrightsHtml());
//alert(''+html);

        // === drop the whole thing into the target div
        div.innerHTML = html;

      } // ============ end of customPanel function ===========



/////////////////////////////////////////////////////////////////////
      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }

/////////////////////////////////////////////////////////////////////
      // functions that open the directions forms
      function tohere(i) {
        gmarkers[i].openInfoWindowHtml(to_htmls[i]);
      }
      function fromhere(i) {
        gmarkers[i].openInfoWindowHtml(from_htmls[i]);
      }

/////////////////////////////////////////////////////////////////////
function getIcon(catStr)
{
	var icon = new GIcon();
	icon.image = 'images/'+catStr;
	icon.shadow = 'images/'+catStr;
//	alert(icon.image);
	if (catStr=='15.PNG' || catStr=='09.PNG' || catStr=='10.PNG' || catStr=='05.PNG')
	{
		icon.iconSize = new GSize(24, 24);
		icon.shadowSize = new GSize(24, 24);
	}
	else
	{
		icon.iconSize = new GSize(16,16);
		icon.shadowSize = new GSize(16,16);
	}
	icon.iconAnchor = new GPoint(6, 20);
	icon.infoWindowAnchor = new GPoint(6, 1);
	icon.infoShadowAnchor = new GPoint(13, 13);
	return icon;
}

///////////////////////////////////////////////////////////////////////////
      function show(category)
      {
        for (var i=0; i<gmarkers.length; i++)
        {
          if (gmarkers[i].mycategory == category)
          {
            gmarkers[i].show();
            gmarkersVisible.push(gmarkers[i]);
          }
        }
      }
///////////////////////////////////////////////////////////////////////////

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category)
          {
 //           GLog.write(gmarkers[i].myname +' '+gmarkers[i].mycategory +' '+category);
            gmarkers[i].hide();
            gmarkersVisible.pop(gmarkers[i]);
          }
        }
        // == close the info window, in case its open on a marker that we just hid
        map.closeInfoWindow();
      }
///////////////////////////////////////////////////////////////////////////

      // == a checkbox has been clicked ==
      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }
      }
///////////////////////////////////////////////////////////////////////////
      // == a checkbox has been clicked ==
      function boxclickMany(box,cat1, cat2, cat3)
      {
        if (box.checked) {
          show(cat1);
          show(cat2);
          show(cat3);
        } else {
          hide(cat1);
          hide(cat2);
          hide(cat3);
        }
      }

//////////////////////////////////////////////////////////////////////////
	function printMap(v)
	{
	var con = "directions";
	if (v==2) con ="maptable";
var DocumentContainer = document.getElementById(con);
        var WindowObject = window.open('', "TrackHistoryData",
                              "width=640,height=525,top=200,left=250,toolbars=no,scrollbars=yes,status=no,resizable=no");

	var newDiv = WindowObject.document.createElement('div');
	newDiv.innerHTML=document.getElementById(con).innerHTML;
//alert('22');
 var p = newDiv.getElementsByTagName('td');
// alert(p.length);
 	var t = newDiv.getElementsByTagName('table');
// 	 alert(t.length);
   for(i=0;i<t.length;i++)
   {
 	t[i].style.width='600px';
   }

   for(i=0;i<p.length;i++)
   {
      p[i].style.fontSize = "16px";
   }

        WindowObject.document.writeln(newDiv.innerHTML);
        WindowObject.document.close();


        WindowObject.focus();
        WindowObject.print();
        WindowObject.close();

	}