//this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
//arrays to hold copies of the markers and html used by the side_bar
//because the function closure trick doesnt work there
var gmarkers = [];

//global "map" variable
var map = null;
//A function to create the marker and set up the event window function


//This function picks up the click and opens the corresponding info window
function myclick(i) {
	

	google.maps.event.trigger(gmarkers[i], "click");
}



function createMarker(latlng, name, html,img,mid) {

	var url ='pathUrl'+mid;
	var baseUrl = document.getElementById('baseUrl').value;
	var pathUrl = document.getElementById(url).value;
	var id = document.getElementById('id').value;
	var contentString ="<div class='map_head'><a href='"+pathUrl+"'>"+html+"</a></span>"+"<br>"+"<span style='color:#37B3E6; padding-top:5px;'>" +name+ "</span>&nbsp;&nbsp;<span class='map_head'><a href='"+id+"' class='thickbox'></a></div>";
	var path    =  baseUrl+"images/"+img+".png";
	var marker = new google.maps.Marker({
	position: latlng,
	map: map,
	icon: path,
	zIndex: Math.round(latlng.lat()*-100000)<<5
});

google.maps.event.addListener(marker, 'click', function() {
		infowindow.setContent(contentString);
		infowindow.open(map,marker);
});
	//	save the info we need to use later for the side_bar
	gmarkers.push(marker);
	//	add a line to the side_bar html
	side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
	return marker;
}

function initialize() {
//create the map

	//alert(document.getElementById('xmlvar').innerHTML);
    var  doc = document.getElementById('xmlvar').innerHTML;  
    if(navigator.appName=='Microsoft Internet Explorer')
	{		
		//alert(text);
	     // xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  
		 // xmlDoc.async = "false";  
		 // xmlDoc.loadXML(doc);  
	     // apps = xmlDoc.documentElement.getElementsByTagName("marker");
	     // alert(apps.length);
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.async = "false";
		xmlDoc.loadXML(doc);				
		var markers = xmlDoc.getElementsByTagName("marker");
		 //alert(xmlDoc.getElementsByTagName("MARKER").length);
	//	alert(markers);	
	
	}
	else
	{
		parser = new DOMParser();
		xmlDoc = parser.parseFromString(doc, "text/xml");
		// var xmlDoc = xmlParse(doc);
		
	}
	var markers = xmlDoc.getElementsByTagName("marker");
	
	if(markers.length>0)
	{	
		/*document.getElementById('map_canvas2').style.display='block';*/	

	var myOptions = {
						zoom: 9,
						center: new google.maps.LatLng(17.316554,78.340759),
						mapTypeControl: true,
						mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
						navigationControl: true,
						mapTypeId: google.maps.MapTypeId.ROADMAP
					}
	map = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);

	google.maps.event.addListener(map, 'click', function() {
			infowindow.close();
	});
	
	var j=1;
	for (var 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 point = new google.maps.LatLng(lat,lng);
		 var html = markers[i].getAttribute("name");
		 var label = markers[i].getAttribute("label");
		 var mid = markers[i].getAttribute("id");
		 // create the marker
		 var marker = createMarker(point,label,html,"marker_"+j,mid);
		 j++;
	}
	map.setCenter(point,30);
	//map.zoomTo(20);
	//map.panTo(marker.getLatLng());

	// put the assembled side_bar_html contents into the side_bar div
	
	}
	
	/*else
	{	
		
		var img="<img src='http://dialmeguru.com/images/masket.png'>";
	
		document.getElementById('macimage').style.display='block';	
		document.getElementById('map_canvas2').style.display='none';
		document.getElementById('macimage').innerHTML=img;	
		
	}*/
	
	
}


/////



var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

/*function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var London = new google.maps.LatLng(51.501957, -0.124540);
  var myOptions = {
    zoom:14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: London
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}*/

function calclistRoute() {
	 clearDiv();
  var toaddress = document.getElementById("start").value;
	var fromaddress = document.getElementById("end").value;
	//alert(toaddress);
	//alert(fromaddress);
	
	
	 var directionsService = new google.maps.DirectionsService();
	   var directionsDisplay = new google.maps.DirectionsRenderer();

	   var myOptions = {
	     zoom:7,
	     mapTypeId: google.maps.MapTypeId.ROADMAP
	   }

	   var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	   directionsDisplay.setMap(map);
	   directionsDisplay.setPanel(document.getElementById("map-merchant"));

	   var request = {
			   
	       origin: toaddress,
	       destination: fromaddress,
	       travelMode: google.maps.DirectionsTravelMode.DRIVING
	   };
	  //alert(request);

	   directionsService.route(request, function(response, status) {
	      if (status == google.maps.DirectionsStatus.OK) {

	    	  
	    	//alert("hi");
	        //Display the distance:
	        /* document.getElementById('distance').innerHTML += 
	            response.routes[0].legs[0].distance.value + " meters";

	         // Display the duration:
	        document.getElementById('duration').innerHTML += 
	           response.routes[0].legs[0].duration.value + " seconds";*/

	         directionsDisplay.setDirections(response);
	      }
	   });

	   /*document.getElementById('merchantmap').style.display="none";*/
	   document.getElementById('map_canvas').style.display="block";
	   
	   document.getElementById('map-merchant').style.display="block";
	
	   
}
function clearDiv()
{
	  
	  document.getElementById('map-merchant').innerHTML="";
}