/* The variable http will hold our new XMLHttpRequest object. */
var http = createRequestObject(); 

function createRequestObject() {
	var oRequest; //declare the variable to hold the object.
	var cBrowser = navigator.appName; //find the browser name
	if(cBrowser == "Microsoft Internet Explorer") {
		// Create the Request object for IE 
		oRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}else {
		// Create the Request object for other browsers
		oRequest = new XMLHttpRequest();
	}
	return oRequest;
}

// Function used to handle request for file lists
function loadPage(pageName) {
	document.getElementById('content').innerHTML = "loading page...";

	http.open('get', '/inc/' + pageName + '.php');

	/* Define a function to call once a response has been received. This will be our
		handleProductCategories function that we define below. */
	http.onreadystatechange = handleLoad; 

	http.send(null);
}

// Function used to handle the request when it is sent from the server
function handleLoad() {
	/* Make sure that the transaction has finished. The XMLHttpRequest object 
		has a property called readyState with several states:
		0: Uninitialized
		1: Loading
		2: Loaded
		3: Interactive
		4: Finished */
	if(http.readyState == 4) {
		/* We have got the response from the server-side script,
			let's see just what it was. using the responseText property of 
			the XMLHttpRequest object. */
		var response = http.responseText;

		document.getElementById('content').innerHTML = response;
	}else {
		document.getElementById('content').innerHTML = '<div style="text-align: center; width: 100%; padding: 25px 0px 25px 0px">loading <img src="./image/loading.gif" /></div>';
	}
}