var XMLHttpRequestObject = false; 
var lastMenu = "m2";

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function getData(dataID) 
{
	var url = "Scripts/servicesData.php";	  
	if(XMLHttpRequestObject) 
	{

		XMLHttpRequestObject.open("POST", url); 
		XMLHttpRequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		XMLHttpRequestObject.onreadystatechange = function() 
		{	 
			
			if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) 
			{
				var xmlDocument =  XMLHttpRequestObject.responseXML;
				displayData(xmlDocument)
			} 

		} 
		XMLHttpRequestObject.send("id=" + dataID); 
	}
	

	origHTML = (document.getElementById(lastMenu).innerHTML);												////  Remove the colour from the previous menu item ///
	newHTML = origHTML.replace('<a href="#" style="color: rgb(254, 124, 2);">', '<a href="#">');
	newHTML = newHTML.replace('<A style="COLOR: #fe7c02"', '<A');
	
	document.getElementById(lastMenu).innerHTML=newHTML;

	origHTML = document.getElementById("m"+dataID).innerHTML;											//// Change the colour of the clicked menu item ///
	newHTML = origHTML.replace('#"', '#" style="color:#fe7c02;"');	
	document.getElementById("m"+dataID).innerHTML = (newHTML);
	
	lastMenu = ("m"+dataID);																			//// Set the clicked menu item to be lastMenu ///
	

}

function displayData(xmlDocument) {

var xmlDataNode;
var idNode, descriptionNode, photoNode, titleNode;
var idText, descriptionText, photoText, titleText;

xmlDataNode = xmlDocument.documentElement;
idNode = xmlDataNode.firstChild;
descriptionNode = idNode.nextSibling;
photoNode = descriptionNode.nextSibling;
titleNode = photoNode.nextSibling;

idText = idNode.firstChild.nodeValue;
descriptionText = descriptionNode.firstChild.nodeValue;
photoText = photoNode.firstChild.nodeValue;
titleText = titleNode.firstChild.nodeValue;

document.getElementById("servicesSwapDetails").innerHTML="<pre id='preID' ><h3>"+titleText+"</h3><br />"+descriptionText+"</pre>";
//document.getElementById("magicBoxContainer").innerHTML="<img src='images/services"+photoText+".jpg' />";

//document.getElementById("servicesSwapPhoto").innerHTML="<a href='images/services/"+photoText+"'><img style='width:100px; height:100px; border:0px' src='images/services/"+photoText+"' /></a>";
}