// 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 or onClick event of the list, passing the list
// itself (object), its selected index (selected) and its AJAX source
// (requestUrl)
function onClickOnChange(object, selected, requestUrl) {
	try {
		var count;
		count = 0;
		if(selected == null) {
			throw new exception;
		}
		
		for (var i = 0; i < object.options.length; i++) {
			if (object.options[ i ].selected) {
				count++;
			}
		}
		
		if (count <= 1) {
			selected = encodeURIComponent(selected);
		} else {
			selected = '0';
		}
		requestUrl += selected;
		CreateXmlHttpObj();
		
		// verify XmlHttpObj variable was successfully initialized
		if(XmlHttpObj) {
			// assign the StateChangeHandler function (defined below in this file)
			// to be called when the state of the XmlHttpObj changes
			// receiving data back from the server is one such change
			XmlHttpObj.onreadystatechange = StateChangeHandler;
			// define the iteraction with the server -- true for as asynchronous.
			XmlHttpObj.open("GET", requestUrl,  true);
			// send request to server, null arg  when using "GET"
			XmlHttpObj.send(null);
		}
	} catch(e) {
	}
}

// this function called when state of  XmlHttpObj changes
// we're interested in the state that indicates data has been
// received from the server
function StateChangeHandler() {
	// state == 4 indicates receiving response data from server is completed
	//document.getElementById("loadingImg").style.visibility = "visible";
	if(XmlHttpObj.readyState == 4) {
		//setTimeout('document.getElementById("loadingImg").style.visibility = "hidden"', 1000);
		// To make sure valid response is received from the server, 200 means response received is OK
		if(XmlHttpObj.status == 200) {
			if(XmlHttpObj.responseXML.getElementsByTagName('subcats').length > 0) {
				PopulateDetails(XmlHttpObj.responseXML, 'subcats', 'subcat');
				if(XmlHttpObj.responseXML.getElementsByTagName('materials').length > 0) {
					PopulateDetails(XmlHttpObj.responseXML, 'materials', 'material');
				}
			}
		}
		else {
			alert("problem retrieving data from the server, status code: " + XmlHttpObj.status);
		}
	}
}

function PopulateDetails(xml, top, child) {
	var theList = document.getElementById(top);
	var multipleNew = "";
	for (var count = theList.options.length-1; count >-1; count--) {
		theList.options[count] = null;
	}
	
	var nodes = xml.getElementsByTagName(child);
	var idValue;
	var textValue; 
	var optionItem;
	for (var count = 0; count < nodes.length; count++) {
   		textValue = GetInnerText(nodes[count]);
		idValue = nodes[count].getAttribute("id");
		
		// IE is rubbish
		
		
		optionItem = new Option( textValue, idValue,  false, false);
		if (textValue == 'Renaissance' || textValue == 'Baroque' || textValue == 'Rococo' || textValue == 'Neo Classical' || textValue == 'Regency' || textValue == 'Victorian') {
			optionItem.style.color = "red";
		}
		theList.options[theList.length] = optionItem;
		
		
		switch(textValue) {
			case 'Renaissance' :
				aExtras = new Array("... Elizabethan","... Jacobean","... Tudor","... Gothic");
				for(var x = 0; x < aExtras.length; x++) {
					optionItem = new Option(aExtras[x], idValue, false, false);
					theList.options[theList.length] = optionItem;
				}
				break;
			case 'Baroque' :
				aExtras = new Array("... Mannerist","... Bolection");
				for(var x = 0; x < aExtras.length; x++) {
					optionItem = new Option(aExtras[x], idValue, false, false);
					theList.options[theList.length] = optionItem;
				}
				break;
			case 'Rococo' :
				aExtras = new Array("... Louis XV");
				for(var x = 0; x < aExtras.length; x++) {
					optionItem = new Option(aExtras[x], idValue, false, false);
					theList.options[theList.length] = optionItem;
				}
				break;
			case 'Neo Classical' :
				aExtras = new Array("... Georgian","... Adam","... Palladian");
				for(var x = 0; x < aExtras.length; x++) {
					optionItem = new Option(aExtras[x], idValue, false, false);
					theList.options[theList.length] = optionItem;
				}
				break;
			case 'Regency' :
				aExtras = new Array("... Louis XVI","... Directorie","... French Empire","... George IV");
				for(var x = 0; x < aExtras.length; x++) {
					optionItem = new Option(aExtras[x], idValue, false, false);
					theList.options[theList.length] = optionItem;
				}
				break;
			case 'Victorian' :
				aExtras = new Array("... William IV","... George IV","... Arts and Crafts","... Art Nouveau","... Art Deco");
				for(var x = 0; x < aExtras.length; x++) {
					optionItem = new Option(aExtras[x], idValue, false, false);
					theList.options[theList.length] = optionItem;
				}
				break;
		}
		
		if(count == 1) {
			multipleNew = "<< More Options";
		}
	}
	document.getElementById('new'+top).innerHTML = multipleNew;
}

function GetInnerText(node) {
	 return (node.textContent || node.innerText || node.text) ;
}