var mainXML;
var counter = 0;
var currSelection;

function setBoxes(){
	if (window.ActiveXObject){ // code for IE
		var doc   = new ActiveXObject("Microsoft.XMLDOM");
		doc.async = "false";
		doc.loadXML(xmlText);
	}else{ // code for Mozilla, Firefox, Opera, etc.
		var parser = new DOMParser();
		var doc    = parser.parseFromString(xmlText,"text/xml");
	}
	mainXML = doc.documentElement;
	createFirstBox(mainXML);
}

function createFirstBox(mainXML){
	var nodes = mainXML.childNodes;
	var newSelect = document.createElement("select");
	newSelect.id  = counter;
	newSelect.className  = "formSelect";
	newSelect.onchange = function(){ 
		if((currSelection==this.value)&&(navigator.userAgent.toLowerCase().indexOf("safari")!=-1)){ //check because safari does two runs --> onchange and onblur...
			currSelection = "";
			return false;
		}else{
			currSelection = this.value;
			setSelect(this);
		}
	}
	newSelect.options[0] = new Option("- selecteer -",-1);
	for(var i=0; i<nodes.length; i++){
		newSelect.options[i+1] = new Option(nodes[i].attributes.getNamedItem("name").value,nodes[i].attributes.getNamedItem("id").value);
	}	
	document.getElementById("productGroepSelect").appendChild(newSelect);
}

function setSelect(obj){
	var selOption = obj.value;
	var selOptionId = obj.id;
	document.getElementById("pgi").value = selOption;
	removeHigher(parseInt(selOptionId)+1,counter);
	if(selOption!=-1){
		var XMLNodeList = selectSingleNode(mainXML, '//xmlItem[@id=' + selOption + ']');  
		var nodes 		= XMLNodeList.childNodes;
		if(nodes.length>0){
			counter += 1;
			var newSelect = document.createElement("select");
			newSelect.id  = counter;
			newSelect.className  = "formSelectSmall";
			newSelect.style.margin  = "4px 0px 0px 0px";
			newSelect.style.width   = "352px"
			newSelect.onchange   = function(){ 
				if((currSelection==this.value)&&(navigator.userAgent.toLowerCase().indexOf("safari")!=-1)){ //check because safari does two runs --> onchange and onblur...
					currSelection = "";
					return false;
				}else{
					currSelection = this.value;
					setSelect(this);
				}
			}
			newSelect.style.display = "block";
			newSelect.options[0] = new Option("- selecteer -",-1);
			for(var i=0; i<nodes.length; i++){
				newSelect.options[i+1] = new Option(nodes[i].attributes.getNamedItem("name").value,nodes[i].attributes.getNamedItem("id").value);
			}	
			document.getElementById("productGroepSelect").appendChild(newSelect);
		}
		if(counter!=0){ handleRemoveBtn(counter); }
	}else{
		if(selOptionId!=0){
			counter -= 1;
			var selectToDel = document.getElementById(parseInt(selOptionId));
			selectToDel.parentNode.removeChild(selectToDel);
			document.getElementById(parseInt(selOptionId)-1).selectedIndex = 0;
			document.getElementById("pgi").value = document.getElementById(parseInt(selOptionId)-1).value;
			handleRemoveBtn(counter);
		}
		if(counter==0){ document.getElementById("removeSelectBtn").style.display = "none"; }
	}
}

function removeHigher(iCurrId,iCurrMax){
	for(i=iCurrId; i<=iCurrMax; i++){
		var selectToDel = document.getElementById(i);
		selectToDel.parentNode.removeChild(selectToDel);
		counter -= 1;
	}
	if(counter==0){ document.getElementById("removeSelectBtn").style.display = "none"; }
}

function handleRemoveBtn(iCurrId){
	var objSelect = document.getElementById(iCurrId);
	
	var xPos = objSelect.offsetLeft;
	var yPos = objSelect.offsetTop;
	var tempEl = objSelect.offsetParent;
	while (tempEl != null) {
		xPos   += tempEl.offsetLeft;
		yPos   += tempEl.offsetTop;
		tempEl =  tempEl.offsetParent;
	}
	
	document.getElementById("removeSelectBtn").style.left = xPos + objSelect.offsetWidth + "px";
	document.getElementById("removeSelectBtn").style.top  = yPos + "px";
	document.getElementById("removeSelectBtn").style.display = "block";
	
	document.getElementById("actualButton").onclick = function(){ 
		objSelect.selectedIndex = 0;
		setSelect(objSelect);
	}
}

function selectSingleNode(xmlDoc, elementPath){
	if(window.ActiveXObject){
		return xmlDoc.selectSingleNode(elementPath);
	}else{
		var xpe = new XPathEvaluator();
		var nsResolver = xpe.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement);
		var results    = xpe.evaluate(elementPath,xmlDoc,nsResolver,XPathResult.FIRST_ORDERED_NODE_TYPE, null);
		return results.singleNodeValue; 
	}
}