/* The following js script needs to be called by the trigger and defined in the 
	body of the html
	
	The point is to allow both the target and the call back script to be set dynamically
	
<script language="javascript" type ="text/javascript">
function monkeyDo() {
	var iscript = 'internal_request.php?action=get_products&id=' + document.form_category_select.select_category_select.selectedIndex;
	var target = 'product_cage';
	callServer(iscript, target);
}
</script>
			<form name="form_category_select">

				<select name="select_category_select" onChange="callServer('internal_request', '?id=4');">
					<option>Audio</option>
					<option>Games</option>
					<option>Internet</option>

				</select>
			</form>
			<div id = "product_cage"></div>
*/

/* create the XMLHttpRequest object... */

function getXMLHTTP() {
	try {
		request_o = new ActiveXObject("Microsoft.XMLHTTP");
	}
	catch(ex) {
		//either this is not IE, or it is a version of IE which does not support XMLHTTP
		var notIECompatibleXMLHTTP=true;
	}
	if(notIECompatibleXMLHTTP==true) {
		try {
			request_o = new XMLHttpRequest();
		}
		catch(ex) {
			//we can't use AJAX because this browser is not compatible.
			request_o = false;
		}
	}
	return request_o;
}

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

/* Function called to get the product categories list */
/* Takes the following vars
		int_scr	:	remote script called
		targetDiv :	id of object where the server script should display
*/
function callServer(int_scr, targetDiv){
	var internal_script = int_scr;

	/* 
		Call the server now. 
		param 1 : get (like post or header too)
		param 2 : url of script to call
		param 3 : whether this is asychronous or not (which it alwasy should be) 
	*/
	http.open('get', internal_script, true);
	/* Define a function to call once a response has been received. This will be our
		handleProductCategories function that we define below. */
	http.onreadystatechange = function() { handleDataStream(targetDiv); } 
	/* Send the data. We use something other than null when we are sending using the POST
		method. */
	http.send(null);
}

/* Function called to handle the list that was returned from the internal_request.php file.. */
function handleDataStream(targetDiv){
	/* 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){ //Finished loading the response
		/* 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;
		/* And now we want to change the product_categories <div> content.
			we do this using an ability to get/change the content of a page element 
			that we can find: innerHTML. */
		document.getElementById(targetDiv).innerHTML = response;
	}
}