/* 	
	------------------------------------------------------------------------------
	/framework/classes/js/dropdownbox.js
	
	Een dropdownbox. Of een combobox. Of hoe noem je zo'n kloteding.
	
  ------------------------------------------------------------------------------
*/

function DropDownBox(_id, _value) {

	// standard properties
	this.id = _id;	
	
	//this.containerElementId = "C_" + this.id;
	//this.containerElement = document.getElementById(this.containerElementId);
	this.formElementId = "F_" + this.id;
	this.formElement = document.getElementById(this.formElementId);
	//this.errorElementId = "E_" + this.id;
	//this.errorElement = document.getElementById(this.errorElementId);
	//this.busyElementId = "B_" + this.id;
	//this.busyElement = document.getElementById(this.busyElementId);
	
	// appearance
	this.width = 0;
	this.visible = true;
	
	// events
	this.onclick = "";
	this.onchange = "";
	this.onblur = "";
	this.ondatabind = null;
	
	// extra properties
	this.error = "";
	this.dataSource = "";
	this.dataParams = "";
	this.displayMember = "";
	this.valueMember = "";
	this.numDataRows = 0;
	this.tag = "";
	
	// add an optional item
	this.addOptionalItem = false;
	this.optionalValue = "";
	this.optionalDisplay = "";
	
	// voor bij meerdere apps op de pagina
	this.appName = "";
	this.appType = "";
	
	// methods
	this.show = DropDownBox_show;
	this.hide = DropDownBox_hide;
	
	this.registerEvents = DropDownBox_registerEvents;
	this.addEvent = DropDownBox_addEvent;
	this.getEventName = DropDownBox_getEventName;
	
	this.getError = DropDownBox_getError;
	this.setError = DropDownBox_setError;
	this.clearError = DropDownBox_clearError;
	
	this.showBusy = DropDownBox_showBusy;
	this.hideBusy = DropDownBox_hideBusy;
	
	this.getSelectedValue = DropDownBox_getSelectedValue;
	this.setSelectedValue = DropDownBox_setSelectedValue;
	
	this.getSelectedDisplay = DropDownBox_getSelectedDisplay;
	this.setSelectedDisplay = DropDownBox_setSelectedDisplay;
	
	this.dataClear = DropDownBox_dataClear;
	this.dataBind = DropDownBox_dataBind;
	this.addOption = DropDownBox_addOption;
	
	this.focus = DropDownBox_focus;
	
	//this.handleXmlResponse = DropDownBox_handleXmlResponse;
	this.render = DropDownBox_render;
	this.destroy = DropDownBox_destroy;
	
	this.getType = DropDownBox_getType;
	
	this.setEnabled = DropDownBox_setEnabled;
	this.setDisabled = DropDownBox_setDisabled;
	
	
}

function DropDownBox_setEnabled() {
	debug.write("Setting " + this.id + " to enabled");
	this.formElement.disabled = false;
}

function DropDownBox_setDisabled() {
	debug.write("Setting " + this.id + " to disabled");
	this.formElement.disabled = true;
}

function DropDownBox_getType() {
	return "DropDownBox";
}

function DropDownBox_destroy() {
	// TODO
	debug.write("Destroyin' myself: " + this.id);
	page.removeControl(this);
	
	/*if (this.containerElement) {
		if (this.containerElement.parentNode) {
			debug.write("really destroying");
			this.containerElement.parentNode.removeChild(this.containerElement);
		}
	}
	this.containerElement.removeChild(this.formElement);
	this.containerElement.removeChild(this.busyElement);
	this.containerElement = null;
	this.formElement = null;
	this.busyElement = null;
	*/
}

function DropDownBox_render() {
	// TODO
	debug.write("rendering " + this.id + " in " + this.parentElement.id + " with value " + this.value + " and datasource " + this.dataSource);
	/*debug.write("rendering " + this.id + " in " + this.parentElement.id + " with value " + this.value + " and tag " + this.tag);
		$this->html .= 	"  <select id=\"F_$this->id\" style=\"float:left;width: 80%;display: block;\" class=\"fw_dropdownbox\" name=\"F_$this->id\">\n";
		
		if (is_string($this->dataSource)) {
			// dan is het een sql waarde
			$rs = $db->query($this->dataSource);
			if ($db->getNumRows($rs)) {
				while($row = $db->fetchArray($rs)) {
					$this->html .= "<option value=\"" . $row[$this->valueMember] . "\">" . trim($row[$this->displayMember]) . "</option>\n";
				}
			}
			$db->freeResult($rs);
		}
		elseif (is_array($this->dataSource)) {
			// een associatieve array van waarden
			foreach($this->dataSource as $value=>$display) {
				$this->html .= "<option value=\"" . $value . "\">" . $display . "</option>\n";
			}   
		}
		
		$this->html .=    "  </select>";
		$this->html .= 	"  <img id=\"B_$this->id\" style=\"float:left;margin-left: 5px;margin-top: 3px;display:none;\" src=\"" .  getLayoutRoot(). "/img/fw_icon_busy.gif\"alt=\"\">";
		$this->html .= 	"  <img id=\"E_$this->id\" style=\"float:left;margin-left: 5px;margin-top: 3px;display:none;\" src=\"" .  getLayoutRoot(). "/img/fw_icon_error.gif\"alt=\"\">";
		$this->html .= "</div>";
		*/
	
	
	/*
	this.containerElement = document.createElement("div");
	if (this.width != "") {
		this.containerElement.style.width = this.width;
	}
	if (this.visible == false) {
		this.containerElement.style.display = "none";
	}
	//this.containerElement.style.backgroundColor ="yellow"
	this.containerElement.id = "I_" + this.id;
	*/
	
	
	this.formElement = document.createElement("select");
	this.formElement.id = "F_" + this.id;
	/*if ((document.all) && (!window.opera))
		this.formElement.style.styleFloat = "left";
	else
		this.formElement.style.cssFloat = "left";
		*/
	//this.formElement.style.width = "80%";
	//this.formElement.style.display = "block";
	this.formElement.className = "fw_dropdownbox";
	this.formElement.style.display = "none";
		
	//this.formElement.type = this.type;
	//this.formElement.value = this.value;

	
	
	/*this.busyElement = document.createElement("img");
	this.busyElement.src = layoutroot + "/img/fw_icon_busy.gif";
	if ((document.all) && (!window.opera))
		this.busyElement.style.styleFloat = "left";
	else
		this.busyElement.style.cssFloat = "left";
	
	this.busyElement.style.marginTop = "3px";
	this.busyElement.style.marginLeft= "5px";
	this.busyElement.style.display = "none";
	this.busyElement.id = "B_" + this.id;
	*/
	//this.containerElement.appendChild(this.formElement);
	//this.containerElement.appendChild(this.busyElement);
	this.parentElement.appendChild(this.formElement);
	
	this.registerEvents();
	this.dataBind();
	
}




function DropDownBox_focus() {
	if (this.formElement) {
		this.formElement.focus();
	}
}

function DropDownBox_hide() {
	if (this.formElement) {
		this.visible = false;
		this.formElement.style.display = "none";
	}
}

function DropDownBox_show() {
	if (this.formElement) {
		this.visible = true;
		this.formElement.style.display = "block";
	}
}

function DropDownBox_addOption(value, display) {
	//debug.write("Adding " + value + " - " + display);
	
	var opt = document.createElement("option");
	opt.setAttribute("value", value);
	opt.innerHTML = display;
	this.formElement.appendChild(opt);
	
	this.numDataRows++;
	//debug.write("NumDataRows is now " + this.numDataRows);
}



function DropDownBox_dataClear() {
	this.formElement.innerHTML = "";
}

function DropDownBox_dataBind() {
	debug.write("Databind for " + this.id);
	
	
	if (isArray(this.dataSource)) {
		
		this.dataClear();
		
		if (this.addOptionalItem) {
			this.addOption(this.optionalValue, this.optionalDisplay);
		}
		
		for (key in this.dataSource) {
			// for some reason, to get all fancy stuff going, prototype.js breaks the simple associative array
			if (String(this.dataSource[key]).indexOf(") {") == -1) {
				//debug.write("adding option " + key + " - " + this.dataSource[key]);
				this.addOption(key, this.dataSource[key]);
			}
			
		}
	}
	else if (this.dataSource != "") {
		debug.write("Starting xml request for " + this.id, "DropDownBox_dataBind");
		oXmlRequest = new XmlRequest();
		if (this.appName != "") {
			oXmlRequest.appName = this.appName;
			oXmlRequest.appType = this.appType;
		}
		oXmlRequest.functionName	= this.dataSource;
		oXmlRequest.params 			= this.dataParams;	
		oXmlRequest.callingObject   = this.id;
		oXmlRequest.onsuccess 		= DropDownBox_handleXmlResponse;
		oXmlRequest.start();
	}
	var ddb = this;
	
	
	var onDataBind = this.ondatabind;
	
	function DropDownBox_handleXmlResponse(oXmlResponse) {
		debug.write("Handling xml response for " + oXmlResponse.callingObject, "DropDownBox_handleXmlResponse");
		if (oXmlResponse.statusCode != "2000") {
			debug.write(oXmlResponse.responseText);
		}
		else {
			//debug.write("Got valid XmlResponse = " + oXmlResponse.status + ", datarows: " + oXmlResponse.numDataRows);
			ddb.dataClear();
			if (ddb.addOptionalItem) {
				ddb.addOption(ddb.optionalValue, ddb.optionalDisplay);
			}
		
			obj = eval(oXmlResponse.callingObject);
			if (obj) {
				/*
				for(i=oXmlResponse.data.length-1; i>=0; i--) {
					obj.addOption(oXmlResponse.data[i][obj.valueMember], oXmlResponse.data[i][obj.displayMember]); 
				}
				*/
				
				for(i=0; i<oXmlResponse.data.length; i++) {
					obj.addOption(oXmlResponse.data[i][obj.valueMember], oXmlResponse.data[i][obj.displayMember]); 
				}
			}
			
			if (onDataBind) {
				debug.write("Executing databind function: " + onDataBind);
				onDataBind(oXmlResponse);
			}
		}
		
		
	}
	
	
	
	
}
function DropDownBox_getSelectedValue() {
	if (this.formElement.options) {
		if (this.formElement.options.length > 0) {
			return this.formElement.options[this.formElement.selectedIndex].value;
		}
		else {
			return "";
		}
	}
	else {
		return "";
	}
}

function DropDownBox_getSelectedDisplay() {
	if (this.formElement.options && this.formElement.selectedIndex >=0) {
		return this.formElement.options[this.formElement.selectedIndex].innerHTML;
	}
}

function DropDownBox_setSelectedValue(newValue) {
	
	if (this.formElement) {
		debug.write("Setting " + this.id + " to " + newValue, "DropDownBox_setSelectedValue");
		found = false
		for(i = 0; i< this.formElement.options.length && found == false; i++) {
			//debug.write("Checking " + this.formElement.options[i].value + " - " + this.formElement.options[i].innerHTML, "dropdownbox.js");
			if (this.formElement.options[i].value == newValue) {
				found = true;
				debug.write("Value found...", "DropDownBox_setSelectedValue");
				this.formElement.selectedIndex = i;
			}
		}
	}
	
}
function DropDownBox_setSelectedDisplay(newDisplay) {
	
	if (this.formElement) {
		debug.write("Setting " + this.id + " to " + newDisplay, "DropDownBox_setSelectedDisplay");
		found = false
		for(i = 0; i< this.formElement.options.length && found == false; i++) {
			//debug.write("Checking " + this.formElement.options[i].value + " - " + this.formElement.options[i].innerHTML, "dropdownbox.js");
			if (this.formElement.options[i].innerHTML == newDisplay) {
				found = true;
				debug.write("Value found...", "DropDownBox_setSelectedDisplay");
				this.formElement.selectedIndex = i;
			}
		}
	}
	
}
function DropDownBox_showBusy() {
	if (this.busyElement) {
		this.busyElement.style.display = "block";
	}
}
function DropDownBox_hideBusy() {
	if (this.busyElement) {
		this.busyElement.style.display = "none";
	}
}


function DropDownBox_getError() {
	return this.error;	
}

function DropDownBox_clearError() {
	this.setError("");	
}

function DropDownBox_setError(msg) {
	this.error = msg;
	
	if (msg && msg.length > 0) {
		this.formElement.className = "fw_dropdownbox_error";
		//this.highlight();
		page.hasErrors = true;
		//this.focus();
	}
	else
		this.formElement.className = "fw_dropdownbox";

	// TODO: create nice errorElement
}


function DropDownBox_getEventName(whichevent) {
	//alert("eval dit " + eval("this." + whichevent));
	return (eval("this.on" + whichevent));
	
}

function DropDownBox_registerEvents() {
	if (this.formElement) {
		if (this.onclick.length > 0) {
			this.addEvent('click');
		}
		
		if (this.onchange.length > 0) {
			this.addEvent('change');
		}
		
		if (this.onblur.length > 0) {
			this.addEvent('blur');
		}
		
		
	}
	
}
	
function DropDownBox_addEvent(eventtype) {
	
	//W3C
	if(this.formElement.addEventListener) {
		//alert('W3C event added');
		this.formElement.addEventListener(eventtype, handle_event, false);
	}

	//Microsoft
	else if(this.formElement.attachEvent){
		//alert("MS event added");
		this.formElement.attachEvent("on" + eventtype, handle_event);
	}
}