/* ajax.js 
   Uses XMLHttpRequest to retrieve contents of PhoneDirectory.xml 
	 and displays an HTML table containing the data. 
	 
	 Author: Jeff Woodman, jeff.woodman@sanctumvoid.net

	 This script may be used for commercial and personal purposes, in whole or part.
	 */

	// a global variable to hold the XmlHttpRequest object
	var xmlHttp;

	// a global variable to hold the target HTML element for the phone list.
	var target;
	var targetID;
	/* Instantiates the XmlHttpRequest object. Connects to the datasource
	   and receives an XML object containing the phone directory contents.
	   Passes execution to BuildGrid() once the data has loaded. */
	function doRequest(targetid)
	{
		target = document.getElementById(targetid);
		targetID = targetid;
		/* using "object sniffing" to detect major browsers:
		   true on window.XMLHttpRequest denotes a Gecko browser,
		   and true on window.ActiveXObject indicates MS Internet Explorer. */
		if (window.XMLHttpRequest)
		{
			// instantiate the object
			xmlHttp = new XMLHttpRequest();

			/* Assign the onload event-handling function. This function is called
			   when the data has completely loaded into the xmlHttp object. */
			xmlHttp.onload = BuildGrid;
		}
		else if (window.ActiveXObject)
		{
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			xmlHttp.onreadystatechange = BuildGrid;
		}
		else
		{
			return false;
		}

		//Open the connection to the data source:
		xmlHttp.open("GET", "PhoneDirectory.xml", true);

		/* Set the Content-Type HTTP header for the request.
		   MUST BE "appication/x-www-form-urlencoded charset=utf-8" */
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");

		// send the "GET" request.
		xmlHttp.send(null);
	}


	function BuildGrid(){
		/* Both Gecko and IE browsers will end up at this function once the data has loaded. */
		if (window.XMLHttpRequest || (xmlHttp.readyState == 4 && xmlHttp.status == 200))
		{
			var html = "";
			// create an array of "DirectoryEntry" XML elements.
			var DirectoryEntries = xmlHttp.responseXML.documentElement.getElementsByTagName("DirectoryEntry");

			html += "<form><input class=\"button\" type=\"button\" value=\"Close Phone Book\" onclick=\"ResetPhoneBook('" + targetID + "');\" /></form>";
			/* If the array consists of one or more "DirectoryEntry" elements,
			   loop through the array and write out an HTML table containing the data. */
			if (DirectoryEntries.length){
				html += "<table border=\"1\" cellpadding=\"3\" cellspacing=\"0\">";

				/* Create a header row consisting of the names of XML elements 
				   inside a single DirectoryEntry element. */
				html += "<tr>";
				for (var i=0; i<DirectoryEntries[0].childNodes.length; i++){
					if (DirectoryEntries[0].childNodes[i].nodeType == 1)
					{
						html += "<th>" + DirectoryEntries[0].childNodes[i].nodeName + "</th>";
					}
				}
				html += "</tr>";

				/* For each DirectoryElement, write the contents of its 
				   child nodes (elements) to an HTML table row. */
				for (var i = 0; i < DirectoryEntries.length; i++)
				{
					// Copy the current DirectoryEntry in the loop to a variable for ease of use.
					var entry = DirectoryEntries[i];
					/* In the onmouseover and onmouseout attributes, there is javascript 
					   to change the background color of the row. */
					html += "<tr style=\"cursor:pointer\" onmouseover=\"this.style.backgroundColor='#ccc'\" onmouseout=\"this.style.backgroundColor='';\">";

					// Loop through DirectoryEntry's child elements and print TD tags containing the data.
					for (var e = 0; e < entry.childNodes.length; e++)
					{
						// Copy the current child to a variable for ease of use.
						var entryChild = entry.childNodes[e];
						// Filter XML element for nodeType==1 for pretty output in Gecko browsers.
						if (entryChild.nodeType == 1)
						{
							// If it's the EmailAddress node, write a "mailto:" link as well.
							if (entryChild.nodeName == "EmailAddress")
							{
								html += "<td><a href=\"mailto:" + entryChild.firstChild.nodeValue + "\">" + entryChild.firstChild.nodeValue + "</a></td>";
							}
							else
							{
								html += "<td>" + entryChild.firstChild.nodeValue + "</td>";
							}
						}
						}
					html += "</tr>";
				}
				html += "</table>";

				// Select the HTML element to place the table inside of.
				var target = document.getElementById("PhoneGrid");

				//Write the string of HTML inside of the target element.
				target.innerHTML = html;
			}
		}
	}
	function ResetPhoneBook(targetid){
		target = document.getElementById(targetid);
		target.innerHTML = "<form><input class=\"button\" type=\"button\" value=\"Open Phone Book\" onclick=\"this.value='Loading...';doRequest('" + targetid + "');\" /></form>";
	}