addLoadEvent("loadRelatedDropdowns");
function loadRelatedDropdowns(){
	var el = new Array();
	
	var form = document.getElementById("__fbform");
	
	el = getRelatedDropdownControls(form);
	
	for(var i = 0; i < el.length; i++){
		
		var o = new RelatedDropDowns(el[i]);
		_controls.add(o);
		
	}
	
}

function getRelatedDropdownControls(el){
	var arr = new Array();
	var tmpArr;
	var children = el.childNodes;
	for(var i = 0; i < children.length; i++){
		if(children[i].tagName && children[i].tagName.toLowerCase() == "relateddropdowns"){
			arr[arr.length] = children[i];
		}
		else{
			tmpArr = getRelatedDropdownControls(children[i]);
			if(tmpArr)
				for(var j = 0; j < tmpArr.length; j++)
					arr[arr.length] = tmpArr[j];
		}
	}
	
	return arr;
}

function RelatedDropDowns(el){
	this.type = "relateddropdowns";
	this.id = "";
	this.el = null;
	this.name = "";
	this.cssclass = "";
	this.style = "";
	this.text = "";
	this.lists = "";
	this.nodes = new Array();
	
	this.load(el);
	
	this.render();
}


RelatedDropDowns.prototype.load = function(el){
	this.el = el;
	this.id = el.attributes["id"].value;
	this.name = el.attributes["name"].value;
	if (el.attributes["style"])
		this.style = el.attributes["style"].value;
	this.cssclass = el.attributes["cssclass"].value;
	this.text = el.attributes["text"].value;
	this.lists = el.attributes["lists"].value;
	var a = this.lists.split(";");
	
	for(var i = 0; i < a.length; i++){
		var aa = a[i].split(":");
		
		if(aa.length > 0){
			this.nodes[this.nodes.length] = {text:aa[0], children: new Array()};
			
			for(var j = 1; j < aa.length; j++){
				this.nodes[this.nodes.length-1].children[this.nodes[this.nodes.length-1].children.length] = aa[j];
			}
				
		}
	}
}

RelatedDropDowns.prototype.render = function(){
	
	var container = document.createElement("span");
	this.el.parentNode.insertBefore(container, this.el);
	var thisHTML = "";
	//thisHTML += "<input type=\"hidden\" id=\"" + this.id + "\" name=\"" + this.name + "\" value=\"\" />";
	
	thisHTML += "<select class=\"" + this.cssclass + "\" id=\"" + this.id + "_parent\" onchange=\"javascript: rdd_populateChildren('" + this.id + "');\">";
	
	thisHTML += "<option>" + this.text + "</option>";
	
	for(var i = 0; i < this.nodes.length; i++)
		thisHTML += "<option>" + this.nodes[i].text + "</option>"
	
	thisHTML += "</select><div style=\"font-size:1px;height:3px;\"></div>";
	
	thisHTML += "<select name=\"" + this.name + "\" class=\"" + this.cssclass + "\" id=\"" + this.id + "\">";
	thisHTML += "<option>-- Select --</option>";
	thisHTML += "</select>";
	
	container.innerHTML = thisHTML;
	this.el.parentNode.removeChild(this.el);
}

RelatedDropDowns.prototype.populateChildren = function(index){
	var child = document.getElementById(this.id);
	
	child.innerHTML = "";
	
	if(index >= 0){
		child.options[child.options.length] = new Option(this.text, this.text);
		//alert(this.nodes[index].children.leng);
		for(var i = 0; i < this.nodes[index].children.length; i++)
			child.options[child.options.length] = new Option(this.nodes[index].children[i], this.nodes[index].children[i]);
	}
}

function rdd_populateChildren(id){
	var o = _controls.getControlById(id);
	o.populateChildren(document.getElementById(id + "_parent").selectedIndex-1);	
}