/* AJAX us Asynchronous JavaScript and XML (not the actual markup langauge but the protecal behind it)
		buttons here correstpond to calls to the server for content.  Not the full new page but the area of content needed.
		
*/

function changePage(page, targetID)
	{
		fetchData(page, null, targetID);	
	}
	

function filterData(pageRequest, targetID)
	{
		//alert("hit");	<-- this just to test
		
		var object = document.getElementById(targetID);
		
		/*if(pageRequest.readyState ==0)
			{
				object.innerHTML +="<h4>Uninitialized...</h4>";	
			}
		
		if(pageRequest.readyState ==1)
			{
				object.innerHTML +="<h4>Loading...</h4>";	
			}
		
		if(pageRequest.readyState ==2)
			{
				object.innerHTML +="<h4>Loaded...</h4>";	
			}
		
		if(pageRequest.readyState ==3)
			{
				object.innerHTML +="<h4>Interactive but still loading</h4>";	
			}
			*/
		if(pageRequest.readyState ==4)
			{
				//object.innerHTML +="complete";
				
				if(pageRequest.status == 200)
					{
						object.innerHTML = pageRequest.responseText;					
					} else if (pageRequest.status == 404)
						{
							object.innerHTML ="Not Found";
							// you could also switch to a 404.html
							//changePage('files/404.html','content');
						} else {
							object.innerHTML = "Sorry, there seems to be some kind of error loading this page.";	
						}
			}
	}