// declare a global  XMLHTTP Request object
var XmlHttpObj;

// create an instance of XMLHTTPRequest Object, varies with browser type, try for IE first then Mozilla
function CreateXmlHttpObj()
{
	// try creating for IE (note: we don't know the user's browser type here, just attempting IE first.)
	try
	{
		XmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e)
	{
		try
		{
			XmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
		} 
		catch(oc)
		{
			XmlHttpObj = null;
		}
	}
	// if unable to create using IE specific code then try creating for Mozilla (FireFox) 
	if(!XmlHttpObj && typeof XMLHttpRequest != "undefined") 
	{
		XmlHttpObj = new XMLHttpRequest();
	}
}

// called from onChange of the textbox
function ThumbChange(txtInput) 
{
    // url of page that will send xml data back to client browser
    var requestUrl;
    requestUrl = "/_ajax/thumb" + encodeURIComponent(txtInput) + ".xml";
	CreateXmlHttpObj();
	
	// verify XmlHttpObj variable was successfully initialized
	if(XmlHttpObj)
	{
		XmlHttpObj.onreadystatechange = StateChangeHandlerCountry;
		XmlHttpObj.open("GET", requestUrl,  true);
		XmlHttpObj.send(null);	
	}
}
function StateChangeHandlerCountry()
{
	// state ==4 indicates receiving response data from server is completed
	if(XmlHttpObj.readyState == 4)
	{
		// To make sure valid response is received from the server, 200 means response received is OK
		if(XmlHttpObj.status == 200)
		{			
			PopulateThumbList(XmlHttpObj.responseXML.documentElement);
		}
		else
		{
			alert("problem retrieving data from the server, status code: " + XmlHttpObj.status);
		}
	}
}

// populate the contents of the town dropdown list
function PopulateThumbList(thumbNode)
{
    var thumbDiv = document.getElementById("dynamicContent");
	var ajaxNodes = thumbNode.getElementsByTagName('thumb');
	var imageUrl;
	var thumbDetails;
	
	// populate the table with data from the xml doc
	
	// set up table - could convert to use XSLT
	strBuilder="<div>";

	for (var count = 0; count < ajaxNodes.length; count++)
	{
		imageUrl = ajaxNodes[count].getAttribute("imageUrl");
		thumbDetails = GetInnerText(ajaxNodes[count]);
		strBuilder=strBuilder + "<img src='" + imageUrl + "' alt='' style='margin-left: -10px;'><br clear='all' />";
		strBuilder=strBuilder + "" + thumbDetails + "";
	}
	strBuilder=strBuilder + "</div>";
	thumbDiv.innerHTML=strBuilder;
}
// returns the node text value 
function GetInnerText (node)
{
	 return (node.textContent || node.innerText || node.text) ;
}