var sidebar_html = "";
      var gmarkers = [];
      var htmls = [];
	  // arrays to hold variants of the info window html with get direction forms open
      var to_htmls = [];
      var from_htmls = [];
      var i = 0;
	     
		 var map = new GMap2(document.getElementById("mygmap"));
     	 map.addControl(new GLargeMapControl());
     	 map.addControl(new GMapTypeControl());
	 	 map.addControl(new GOverviewMapControl());
     	 map.setCenter(new GLatLng(39.8555297623457,-98.3303635104984), 3);
	 
 function showMeApt(mycapiton, myurl)
	  {
		//  alert(mycapiton);
		  GB_showPage(mycapiton, myurl, '');
	  }

	  function showMe() {
	 
      if (GBrowserIsCompatible()) {
		// create the map

		  
		  
        if (document.getElementById("Session").value=="True")
			{
				var qs = new Querystring();
				var mysession=qs.get('mysession');
				ShowMySearch(mysession);
			}
			else
			{
				if (document.getElementById("state").value=="")
				{	
					readdataStateXML();
					loadStateSelectData();
				}else{
					showState(document.getElementById("state").value);
				}
			}
		 }
		 else
		 	{
			alert ("ERROR!");
     	 }
   	 }
	//populate state select  
	 function loadStateSelectData()
 	{
 	 var target = document.getElementById("state");	
 	 loadXmlData("StateXML.asp",target);
 	}
	
	function loadCitySelectData()
 	{
  	var target = document.getElementById("city");	
 	 var deptList = document.getElementById("state");	
 	 clearList(target);
 	 var file = "CityXML.asp?State=" + deptList.value
  	loadXmlData(file,target);
   }

	
	function loadXmlData(url, object)
	{
  // create the object, careful to the MSFT/Other method
		if (window.XMLHttpRequest)
		{
			xmlHttpRequest = new XMLHttpRequest();
		}
		else if (window.ActiveXObject)
		{
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}

  		// executing the request, passing the targetted object
		xmlHttpRequest.open("GET", url, true);
		xmlHttpRequest.onreadystatechange = function () {processRequestChange(object)};
		xmlHttpRequest.send(null);
	}

 	 /**
 	 * Handle the events of the XMLHttpRequest Object
 	 */
	function processRequestChange(object)
	{
		if (xmlHttpRequest.readyState == 4)
		{
   		if(xmlHttpRequest.status == 200)
			{
			if (object.id == "city" )
    			{
					copyCityData();
    			}
			else if (object.id == "state" )
	 			{
     				copyStateData();
    			}
   			}
   			else
   			{
   			alert("Error loading page\n"+ xmlHttpRequest.status +":"+ xmlHttpRequest.statusText);
   			}
   			// end of the request, change the status zone
			document.getElementById('statuszone').style.visibility = 'hidden';
  			 document.getElementById("statuszone").innerHTML = ""
 		}
		else
		{
   		// Indicates that the client is *busy*
		document.getElementById('statuszone').style.visibility = 'visible';
   		document.getElementById("statuszone").innerHTML = "<span class='loading'>Loading...</span>"
		}
	}
	  //imports data to states list
	  function copyStateData()
	  { 
  		 var list = document.getElementById("state");	
  		 clearList(list);
 		 addElementToList(list, "--", "--- Select State ---" );
  	     var items = xmlHttpRequest.responseXML.getElementsByTagName("marker");
 		 for (var i=0; i<items.length; i++)
  			{
				var dname = items[i].firstChild.nodeValue;
 				addElementToList(list, dname, dname);
			}
 		}
	  // Import City Data
	  function copyCityData()
 	  {
 	  var list = document.getElementById("city");	
 	  var items = xmlHttpRequest.responseXML.getElementsByTagName("marker");
 	  clearList(list);
  	  if (items.length > 0)
  		{
  		for (var i=0; i<items.length; i++)
		   {
  			var node = items[i].firstChild.nodeValue;
		    addElementToList(list, node, node);
  		   }
 		}
  	else
  	{
   		alert("No data");
  	}
 	}
	  
	  
	  //Clear All Elements
	  function clearList(list)
 	  {
 		while (list.length > 0)
 		{
   		list.remove(0);
  		}
 	  }


 	// Add a new element to a selection list
	 function addElementToList(list, value, label)
 	 {
  		var option = document.createElement("option");
  		option.value = value;
  		var labelNode = document.createTextNode(label);
  		option.appendChild(labelNode);
  		list.appendChild(option);
 	}
   	
	
	 // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point, {title:name});
		// The info window version with the "to here" form open
        to_htmls[i] = html + '<br />Directions: <strong>To here</strong> - <a href="javascript:fromhere(' + i + ')">From here</strong>' +
           '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
           '<input type="text" size=40 maxlenghth=40 name="saddr" id="saddr" value="" /><br />' +
           '<input value="Get Directions" type="submit" />' +
           '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
                  // "(" + name + ")" + 
           '"/>';
        // The info window version with the "to here" form open
        from_htmls[i] = html + '<br />Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <strong>From here</strong>' +
           '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
           '<input type="text" SIZE=40 maxlenghth=40 name="daddr" id="daddr" value="" /><br />' +
           '<input  value="Get Directions" type="submit" />' +
           '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
                  // "(" + name + ")" + 
           '"/>';
        // The inactive version of the direction info
        html = html + '<br />Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a>';
		
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        gmarkers[i] = marker;
        htmls[i] = html;
       // sidebar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
        i++;
        return marker;
      }


      // 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 showsearchbox(){
		 document.getElementById('searchbox').style.display = 'block'; 
		 document.getElementById('panel').style.display = 'none'; 
		 document.getElementById('showresultslink').style.visibility = 'visible'; 
	  }
	  
	  function showresults(){
	 	 document.getElementById('showresultslink').style.visibility = 'hidden';
		 document.getElementById('searchbox').style.display = 'none'; 
		 document.getElementById('panel').style.display = 'block'; 
	 }
	 
	 function StartPage(){
		 document.getElementById('statuszone').style.visibility = 'visible';
	 	 document.getElementById("statuszone").innerHTML = "<span class='loading'>Loading...</span>"
		 document.getElementById("panel").innerHTML = "";
		 document.ASForm.reset();
		 document.getElementById('showresultslink').style.display = 'block';
		 document.getElementById('panel').style.display = 'none'; 
		 document.getElementById('showresultslink').style.visibility = 'hidden'; 
	     readdataStateXML();
	   //  loadDepartmentData();
	    map.setCenter(new GLatLng(39.8555297623457,-98.3303635104984), 3);
	 }
	 
	  // A function to read the data of states
      function readdataStateXML() {
	    document.getElementById('statuszone').style.visibility = 'visible';
	    document.getElementById("statuszone").innerHTML = "<span class='loading'>Loading States...</span>";
        var request = GXmlHttp.create();
        request.open("GET", "StateXML.asp", true);
        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            var xmlDoc = request.responseXML;
            // obtain the array of markers and loop through it
            var markers = xmlDoc.documentElement.getElementsByTagName("marker");
            
            // hide the info window, otherwise it still stays open where the removed marker used to be
            map.getInfoWindow().hide();
            
            map.clearOverlays();
            
            // empty the array
            gmarkers = [];

            // reset the sidebar
            sidebar_html="";
            for (var j = 0; j < markers.length; j++) {
              // obtain the attribues of each marker
              var lat = parseFloat(markers[j].getAttribute("lat"));
              var lng = parseFloat(markers[j].getAttribute("lng"));
			  var point = new GLatLng(lat,lng);
			  var statename = markers[j].firstChild.nodeValue;
              var myid = parseFloat(markers[j].getAttribute("myid"));
			  var label =statename;
			  var popwindow="";
			  
			 	popwindow = '<h2>' + statename + '</h2>' + myid + ' Apartments<br /><a href="javascript:showState(';
				popwindow += "'" + statename+ "')";
				popwindow += '"';
				popwindow += " title='Apartments in " +statename +"'>Search for apartments in <strong>"+statename +"</strong></a>";
				popwindow += '<br /><a onclick="map.closeInfoWindow(); return false;">Close</a>';
              
			  // create the marker
              var marker = createMarker(point,label,popwindow);
              map.addOverlay(marker);
            }
            // put the assembled sidebar_html contents into the sidebar div
			document.getElementById("statuszone").innerHTML ="DONE!";
            document.getElementById("message").innerHTML = "Please click on a marker to see State Apartment info";
			document.getElementById("statuszone").innerHTML ="";
			document.getElementById('statuszone').style.visibility = 'hidden';
			
          }
		  
     	}
       request.send(null);
      }

	  // A function to read the data of cities on clicked states
      function showState(statename) {
		document.getElementById('statuszone').style.visibility = 'visible';
	    document.getElementById("statuszone").innerHTML = "<span class='loading'>Loading City Info...</span>";
        var request = GXmlHttp.create();
//alert ("MapXML.asp?State="+statename);
        request.open("GET", "MapXML.asp?State="+statename, true);
        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            var xmlDoc = request.responseXML;
            // obtain the array of markers and loop through it
            var markers = xmlDoc.documentElement.getElementsByTagName("marker");
            
            // hide the info window, otherwise it still stays open where the removed marker used to be
            map.getInfoWindow().hide();
            
            map.clearOverlays();
            
            // empty the array
            gmarkers = [];

            // reset the sidebar
            sidebar_html="";
            for (var j = 0; j < markers.length; j++) {
              // obtain the attribues of each marker
              var lat = parseFloat(markers[j].getAttribute("lat"));
              var lng = parseFloat(markers[j].getAttribute("lng"));
			  var point = new GLatLng(lat,lng);
			  var cityname = markers[j].firstChild.nodeValue;
              var myid = parseFloat(markers[j].getAttribute("myid"));
			  var label =cityname;
			  var popwindow="";
			  
			 	popwindow = '<h2>' + cityname + ', ' + statename + '</h2>' + myid + ' Apartments<br /><a href="javascript:showApartments(';
				popwindow += "'" + statename+ "', '"+cityname +"','')";
				popwindow += '"';
				popwindow += " title='Apartments in " +cityname +"'>Search for apartments in <strong>"+cityname +"</strong></a>";
				popwindow += '<br /><a onclick="map.closeInfoWindow(); return false;">Close</a>';
              
			  // create the marker
              var marker = createMarker(point,label,popwindow);
              map.addOverlay(marker);
            }
            // put the assembled sidebar_html contents into the sidebar div
			
			document.getElementById("statuszone").innerHTML ="DONE!";
			map.setCenter (new GLatLng(lat,lng), 6);
            document.getElementById("message").innerHTML = "Please click on a marker to see City Apartment info";
			document.getElementById("statuszone").innerHTML ="";
			document.getElementById('statuszone').style.visibility = 'hidden';
          }
		  
     	}
       request.send(null);
      }

	  // A function to read the data of apartments and show tham on map
      function showApartments(statename, cityname, mysearchstring) {
        document.getElementById('statuszone').style.visibility = 'visible';
	    document.getElementById("statuszone").innerHTML = "<span class='loading'>Loading Apartments Info...</span>";
        var request = GXmlHttp.create();
		 // ===== Start with an empty GLatLngBounds object =====     
        var bounds = new GLatLngBounds();
		var html ="";
        request.open("GET", "SearchMapXML.asp?State="+statename+"&city="+cityname+mysearchstring, true);
        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            var xmlDoc = request.responseXML;
            // obtain the array of markers and loop through it
            var markers = xmlDoc.documentElement.getElementsByTagName("marker");
            if (markers.length==0)
			{
			document.getElementById("statuszone").innerHTML ="";
			alert ("Sorry No Apartments found");
			}
			else
			{
            // hide the info window, otherwise it still stays open where the removed marker used to be
            map.getInfoWindow().hide();
            
            map.clearOverlays();
            
            // empty the array
            gmarkers = [];

            // reset the sidebar
            sidebar_html="";
			
            for (var j = 0; j < markers.length; j++) {
              // obtain the attribues of each marker
              var lat = parseFloat(markers[j].getAttribute("lat"));
              var lng = parseFloat(markers[j].getAttribute("lng"));
			  var point = new GLatLng(lat,lng);
			  
			  var zip = markers[j].getAttribute("zip");
			  var street = markers[j].getAttribute("street").replace("&apos;","'");
			  var image = markers[j].getAttribute("image");
			  var myIcon = "<img src='"+ image + "'align='left' alt='Apartment Image' width='60' height='60' class='imagefeatured'/>"
			  var mystate = markers[j].getAttribute("state");
              var town = markers[j].getAttribute("city").replace("&apos;","'");
			  var price = markers[j].getAttribute("bdr");
			  var notes = markers[j].getAttribute("notes").replace("&apos;","'");
			  var fromwebsite = markers[j].getAttribute("fromwebsite");
			  
			  
			  var propertyname = markers[j].firstChild.nodeValue.replace("&apos;","'");
              var myid = parseFloat(markers[j].getAttribute("myid"));
			  var label =propertyname;
			  var popwindow="";
			  
				popwindow = '<h2>' + propertyname + '</h2>' + myIcon + "<div style='width:200px;height:60px;'>"+ street + "<br />" + town + ", " + mystate + " " + zip + "<br/><span class='propertyprice'>"+ price + "</span></div>";
				popwindow += "<a href=";
				popwindow += '"javascript:showMeApt(';
				popwindow += "'"+propertyname+"', 'http://" +document.domain + "/ShowDetails.asp?PropertyID=" + myid + "')";
				popwindow += '">';
				popwindow += " More Details...</a>";
				popwindow += '<br /><a onclick="map.closeInfoWindow(); return false;">Close</a>';
                
			 	

			 	//popwindow = '<h2>' + propertyname + '</h2>' + myIcon + "<div style='width:200px;height:60px;'>"+ street + "<br />" + town + ", " + mystate + " " + zip + "<br/><span class='propertyprice'>"+ price + "</span></div>"
				//popwindow += "<a href='ShowDetails.asp?PropertyID=" + myid + "';\" title='Apartment Details'>" + " More Details...</a>";
				//popwindow += '<br /><a onclick="map.closeInfoWindow(); return false;">Close</a>';
                
				html += "<div class='list' id='myapt" +i+ "' onmouseover=\"this.style.background='#E8E8E8'\" onmouseout=\"this.style.background='transparent'\" ><a href=\"javascript:myclick(" + i + ")\" title=\"" + notes + "\">" + "<h2>" + propertyname + "</h2></a>" + town + ", " + mystate + " " + zip + "<br /><span class='propertyprice'>"+ price + "</span></div>";
			  // create the marker
              var marker = createMarker(point,label,popwindow);
              map.addOverlay(marker);
			  // ==== Each time a point is found, extent the bounds ato include it =====
              bounds.extend(point);
            }
            // put the assembled sidebar_html contents into the sidebar div
			document.getElementById("statuszone").innerHTML ="DONE!";
			 // ===== determine the zoom level from the bounds =====
          	 map.setZoom(map.getBoundsZoomLevel(bounds));
	         // ===== determine the centre from the bounds ======
          	var clat = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat()) /2;
          	var clng = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng()) /2;
          	map.setCenter(new GLatLng(clat,clng));
            document.getElementById("message").innerHTML = "Please click on a marker to see Apartment info or you list on right";
			document.getElementById("statuszone").innerHTML ="";
			document.getElementById('statuszone').style.visibility = 'hidden';
			document.getElementById("searchbox").style.display = "none";
			document.getElementById("panel").style.display = "block";
			document.getElementById("panel").innerHTML = "<div class='list' id='myapt'><h2>We found these apartments</h2><a href='javascript:showsearchbox();'>Refine Your Search</a></div>" + html + ""
          }
		  }
		  
     	}
       request.send(null);
      }
	
	// A function to read the data of apartments and show tham on map - SEARCH BASED ON SESSION
      function ShowMySearch(mysearchsessionid) {
        document.getElementById('statuszone').style.visibility = 'visible';
	    document.getElementById("statuszone").innerHTML = "<span class='loading'>Loading Apartments Info...</span>";
        var request = GXmlHttp.create();
		 // ===== Start with an empty GLatLngBounds object =====     
        var bounds = new GLatLngBounds();
		var html ="";
        request.open("GET", "SearchSessionXML.asp?SessionID="+mysearchsessionid, true);
        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            var xmlDoc = request.responseXML;
            // obtain the array of markers and loop through it
            var markers = xmlDoc.documentElement.getElementsByTagName("marker");
            if (markers.length==0)
			{
			document.getElementById("statuszone").innerHTML ="";
			alert ("Sorry No Apartments found");
			}
			else
			{
            // hide the info window, otherwise it still stays open where the removed marker used to be
            map.getInfoWindow().hide();
            
            map.clearOverlays();
            
            // empty the array
            gmarkers = [];

            // reset the sidebar
            sidebar_html="";
			
            for (var j = 0; j < markers.length; j++) {
              // obtain the attribues of each marker
              var lat = parseFloat(markers[j].getAttribute("lat"));
              var lng = parseFloat(markers[j].getAttribute("lng"));
			  var point = new GLatLng(lat,lng);
			  
			  var zip = markers[j].getAttribute("zip");
			  var street = markers[j].getAttribute("street").replace("&apos;","'");
			  var image = markers[j].getAttribute("image");
			  var myIcon = "<img src='"+ image + "'align='left' alt='Apartment Image' width='60' height='60' class='imagefeatured'/>"
			  var mystate = markers[j].getAttribute("state").replace("&apos;","'");
              var town = markers[j].getAttribute("city").replace("&apos;","'");
			  var price = markers[j].getAttribute("bdr");
			  var notes = markers[j].getAttribute("notes").replace("&apos;","'");
			  var fromwebsite = markers[j].getAttribute("fromwebsite");
			  
			  
			  var propertyname = markers[j].firstChild.nodeValue.replace("&apos;","'");
              var myid = parseFloat(markers[j].getAttribute("myid"));
			  var label =propertyname;
			  var popwindow="";
			  popwindow = '<h2>' + propertyname + '</h2>' + myIcon + "<div style='width:200px;height:60px;'>"+ street + "<br />" + town + ", " + mystate + " " + zip + "<br/><span class='propertyprice'>"+ price + "</span></div>";
				popwindow += "<a href=";
				popwindow += '"javascript:showMeApt(';
				popwindow += "'"+propertyname+"', 'http://" + document.domain + "/ShowDetails.asp?PropertyID=" + myid + "')";
				popwindow += '">';
				popwindow += " More Details...</a>";
				popwindow += '<br /><a onclick="map.closeInfoWindow(); return false;">Close</a>';
          
			 //	popwindow = '<h2>' + propertyname + '</h2>' + myIcon + "<div style='width:200px;height:60px;'>"+ street + "<br />" + town + ", " + mystate + " " + zip + "<br/><span class='propertyprice'>"+ price + "</span></div>"
			//	popwindow += "<a href='ShowDetails.asp?PropertyID=" + myid + "';\" target=_blank title='Apartment Details'>" + " More Details...</a>";
			//	popwindow += '<br /><a onclick="map.closeInfoWindow(); return false;">Close</a>';
                
				html += "<div class='list' id='myapt" +i+ "' onmouseover=\"this.style.background='#E8E8E8'\" onmouseout=\"this.style.background='transparent'\" ><a href=\"javascript:myclick(" + i + ")\" title=\"" + notes + "\">" + "<h2>" + propertyname + "</h2></a>" + town + ", " + mystate + " " + zip + "<br /><span class='propertyprice'>"+ price + "</span></div>";
			  // create the marker
              var marker = createMarker(point,label,popwindow);
              map.addOverlay(marker);
			  // ==== Each time a point is found, extent the bounds ato include it =====
              bounds.extend(point);
            }
            // put the assembled sidebar_html contents into the sidebar div
			document.getElementById("statuszone").innerHTML ="DONE!";
			 // ===== determine the zoom level from the bounds =====
          	 map.setZoom(map.getBoundsZoomLevel(bounds));
	         // ===== determine the centre from the bounds ======
          	var clat = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat()) /2;
          	var clng = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng()) /2;
          	map.setCenter(new GLatLng(clat,clng));
            document.getElementById("message").innerHTML = "Please click on a marker to see Apartment info or you list on right";
			document.getElementById("statuszone").innerHTML ="";
			document.getElementById('statuszone').style.visibility = 'hidden';
			document.getElementById("searchbox").style.display = "none";
			document.getElementById("panel").style.display = "block";
			document.getElementById("panel").innerHTML = "<div class='list' id='myapt'><h2>We found these apartments</h2><a href='javascript:showsearchbox();'>Refine Your Search</a></div>" + html + ""
          }
		  }
		  
     	}
       request.send(null);
      }
	
	
	// make a search string and call show apartments
	function SearchByForm(){
		var msg;
	  	msg = ""; 
		if (document.getElementById("state").value == "") 
  		{
    		msg += "\t - State\n";
		}
		if (document.getElementById("state").value == "--") 
  		{
    		msg += "\t - State\n";
		}
		if (document.getElementById("city").value == "") 
  		{
    		msg += "\t - City\n";
  		} 
		if (msg !="" ){
			alert ("Please select following:\n" + msg);
		}else{
		 var list1 = document.getElementById("state").value;	
		 var list2 = document.getElementById("city").value;
		 var list3 = document.getElementById("PricedFrom").value;
		 var list4 = document.getElementById("PricedTo").value;
		 var list5 = document.getElementById("BathRooms").value;
		 var list6 = "";
		 var searchstring = "";
		 if (list3!=""){searchstring = "&PricedFrom=" + list3;};
		 if (list4!=""){searchstring += "&PricedTo="  + list4;};
		 if (list5!=""){searchstring += "&BathRooms=" + list5;};
		
		 if (document.ASForm.Bedrooms[0].checked){
			list6 += document.ASForm.Bedrooms[0].value
		 }
		 if (document.ASForm.Bedrooms[1].checked){
			if (list6!="") {list6 += ", ";};
			list6 += document.ASForm.Bedrooms[1].value
		 }
		 if (document.ASForm.Bedrooms[2].checked){
			if (list6!="") {list6 += ", ";};
			list6 += document.ASForm.Bedrooms[2].value
		 }
		 if (document.ASForm.Bedrooms[3].checked){
			if (list6!="") {list6 += ", ";};
			list6 += document.ASForm.Bedrooms[3].value
		 }
		 if (document.ASForm.Bedrooms[4].checked){
			if (list6!="") {list6 += ", ";};
			list6 += document.ASForm.Bedrooms[4].value
		 }
		 if (document.ASForm.Bedrooms[5].checked){
			if (list6!="") {list6 += ", ";};
			list6 += document.ASForm.Bedrooms[5].value
		 }
		 if (document.ASForm.Bedrooms[6].checked){
			if (list6!="") {list6 += ", ";};
			list6 += document.ASForm.Bedrooms[6].value
		 }
		 if (list6!=""){
		 searchstring += "&Bedrooms=" + list6;
		 }
		// alert (searchstring);
		 document.getElementById("panel").innerHTML = "";
		 showApartments(list1,list2, searchstring);
	   }
	 }