// is 0 until the user clicked one elem of the result list
// so that the result list is not hidden when the user clicks on a <li> event
// inside the result list. If the user clicks on a <li> event inside the 
// result list, ynNamepickerCick is set to 1, then the onclick of the div is 
// executed and does NOT hide the the div, but resets the ynNamepickerClick again to 0.  
var ynNamepickerClick = 0;  
// which elem of the result list is selected
// -1 = no elem selected
var ynNamepickerSelectedElem = -1;
var ynNamepickerEnabled = false;
// helper to react on 2nd backspace key, not on the first
var ynNamepickerBspFlag = 0;
// the input field in which the result should be stored
var ynNamepickerTargetElem;
// dialog opened first time?
var ynNamepickerInitialized = false;
// only one name allowed? Set in the custom control. 
var ynNamepickerRestrictToOneName = false;
// modal dialog - blend out background?
var ynNamepickerModal = true;
// custom offset for position
var ynNamepickerOffsetX = 0;
var ynNamepickerOffsetY = 0;
var ynNamepickerResultPanelID = "";

/*
	There is a div 'ynNamepickerResultBox' in which search results are
	displayed -> connect onclick and onkeyup events of this div to our functions. 
	
	There is another div 'ynNamepickerDisplayBox which contains the 
	selected names -> connect the onkeyup event of this div to a function. 
	
*/

/* 
	opens and inits the dialog
*/
function ynNamepicker(targetElem) {
	ynNamepickerTargetElem = targetElem;
	var inputField = dojo.query("[id$='ynNamepickerNames']")[0];
	inputField.value = targetElem.value;

	if (!ynNamepickerInitialized) {
		var elem = dojo.query("[id$='ynNamepickerInput']")[0];
		dojo.connect(elem, "onclick", null, function(e) {
			elem = dojo.query("[id$='ynNamepickerQ']")[0];
			elem.focus();		
		});
		elem = dojo.byId("ynNamepickerDialog");
		dojo.connect(elem, "onclick", null, function(e) {
			ynNamepickerHideResult();		
		});
		elem = dojo.byId("ynNamepickerDisplayBox");
		dojo.connect(elem, "onkeypress", null, function(e) {
			ynNamepickerHandleKey(e);
		});
	}
	ynNamepickerRefreshDisplay();
	
	dojo.byId("ynNamepickerResultNotFound").style.display = "none";
	dojo.byId("ynNamepickerResultBox").style.display = "none";
	if (ynNamepickerModal) {
		elem = dojo.byId("ynNamepickerBackground");
		elem.style.display = '';
	} 
	elem = dojo.byId("ynNamepickerDialog");
	var pos=dojo.coords(targetElem, true);
	elem.style.top = (pos.y-10+ynNamepickerOffsetY)+"px";
	elem.style.left = (pos.x+pos.w+ynNamepickerOffsetX)+"px";
	elem.style.display = '';
	pos = dojo.coords(elem, true);
	if (pos.x+pos.w >= window.innerWidth) elem.style.left = (window.innerWidth - pos.w)+"px";
	elem = dojo.query("[id$='ynNamepickerQ']")[0];
	elem.value = "";
	elem.focus();
	ynNamepickerInitialized = true;
}
/*
	OK button -> copy names to target field, close dialog
*/
function ynNamepickerOK() {
	if (!c_ynNamepickerOK_pre()) return false;
	var inputField = dojo.query("[id$='ynNamepickerNames']")[0];
	ynNamepickerTargetElem.value = inputField.value;
	ynNamepickerClose();
	c_ynNamepickerOK_post();
}

/*
	close dialog
*/
function ynNamepickerCancel() {
	if (!c_ynNamepickerCancel_pre()) return false;
	ynNamepickerClose();
	c_ynNamepickerCancel_post();
}

/* internal - closes the dialog */
function ynNamepickerClose() {
	var elem = dojo.byId("ynNamepickerDialog");
	dojo.style(elem, {display:'none'});	
	elem = dojo.byId("ynNamepickerBackground");
	elem.style.display = 'none'; 
}

/*
	Hide the result box, set selectedElem index to -1. 
*/
function ynNamepickerHideResult() {
	dojo.style(dojo.byId('ynNamepickerResultBox'), {display: 'none'});
	ynNamepickerSelectedElem = -1;
}

/*
	Escape -> hide result box. 
	Up/down: select an element in a box. 
	Enter -> add a name to the list of elemens in the displayBox.
	backspace -> remove the last name element 
*/
function ynNamepickerHandleKey(e) {
		var elem;
		var elems;
		
		elems = dojo.query("li.ynNamepickerLi");
		//console.log("key="+e.keyCode+" selectedElem="+ynNamepickerSelectedElem+" elems.length="+elems.length);
		if (e.keyCode == dojo.keys.ENTER) {
			dojo.stopEvent(e);
			//console.log("Enter html="+dojo.byId("ynNamepickerResultBox").style.display);
			if (dojo.byId("ynNamepickerResultBox").style.display=="none") {
				// result not displayed yet? -> trigger partial refresh to execute search
				var inputField = dojo.query("[id$='ynNamepickerQ']")[0];
				if (inputField.value != "") {
//					alert("id "+elem.id);
					dojo.style("ynNamepickerLoading", {display:''});
//					elem = dojo.query("[id$='ynNamepickerResultPanel']")[0];
					XSP.partialRefreshPost(ynNamepickerResultPanelID);
				}
			} else {
				// otherwise, select an entry of the result list 
				if (ynNamepickerSelectedElem > -1) {
					elems = dojo.query("li.ynNamepickerLi");
					ynNamepickerAddName(elems[ynNamepickerSelectedElem]);
				}
			}
		}
		if (e.keyCode == dojo.keys.ESCAPE) {
			ynNamepickerHideResult();
		}
		if (e.keyCode == dojo.keys.DOWN_ARROW) {
			if (ynNamepickerSelectedElem < (elems.length-1)) {
				ynNamepickerSelectedElem++;
				dojo.addClass(elems[ynNamepickerSelectedElem], "ynNamepickerResultActive");
				if (ynNamepickerSelectedElem > 0) dojo.removeClass(elems[ynNamepickerSelectedElem-1], "ynNamepickerResultActive");
			} else {
				dojo.removeClass(elems[ynNamepickerSelectedElem], "ynNamepickerResultActive");
				ynNamepickerSelectedElem = 0;
				dojo.addClass(elems[ynNamepickerSelectedElem], "ynNamepickerResultActive");
			}
		}
		if (e.keyCode == dojo.keys.UP_ARROW) {
			if (elems && ynNamepickerSelectedElem < 1) {
				if (ynNamepickerSelectedElem == 0) dojo.removeClass(elems[ynNamepickerSelectedElem], "ynNamepickerResultActive");
				ynNamepickerSelectedElem = elems.length-1;
				dojo.addClass(elems[ynNamepickerSelectedElem], "ynNamepickerResultActive");
			} else {
				dojo.removeClass(elems[ynNamepickerSelectedElem], "ynNamepickerResultActive");
				dojo.addClass(elems[ynNamepickerSelectedElem-1], "ynNamepickerResultActive");
				ynNamepickerSelectedElem--;				
			}
		}
		if (e.keyCode == dojo.keys.BACKSPACE) {
			// if field is already empty, remove the last element of the name list
			if (e.target.value == "") {
				if (ynNamepickerBspFlag == 0) ynNamepickerBspFlag = 1;
				else {
					ynNamepickerRemoveLast();
				}			
			} 
		}
		if (e.target.value != "") ynNamepickerBspFlag = 0;
		//console.log("after selectedElem="+ynNamepickerSelectedElem+" elems.length="+elems.length);
}

/*
	Adds a name to the list.
	The display box contains a <ul>, adding an element means adding
	the name to the edit field 'ynNamepickerNames' (comma seperated)
	and building a <li> list of that names into the display box. 
*/
function ynNamepickerAddName(e) {
	//console.log("restrictToOneName "+ynNamepickerRestrictToOneName);
	ynNamepickerClick = 1;
	var newname = e.id;
	var nameElem = dojo.query("[id$='ynNamepickerNames']")[0];			
	var v = nameElem.value;
	if (typeof v != "undefined" && v != "" && !ynNamepickerRestrictToOneName) {
		if (v.indexOf(newname) == -1) v = v + ", "+newname; else { ynNamepickerHighlightName(newname); return; }
	} else { 
		v = newname;
	}
	// v = v.split(",");
	nameElem.value = v;
	var inputField = dojo.query("[id$='ynNamepickerQ']")[0];
	inputField.value = ""; 
	ynNamepickerBspFlag = 1;
	ynNamepickerHideResult();
	ynNamepickerRefreshDisplay();
	ynNamepickerFocus();
}	

/* highlights a name in the display box */
function ynNamepickerHighlightName(n) {
	var elem = dojo.byId("ynN"+n);
	var a1 = dojo.animateProperty({
		node: elem,
		duration:500,
		properties:{
			backgroundColor:'#FF8080'
		}
	});
	var a2 = dojo.animateProperty({
		node: elem,
		duration:500,
		properties:{
			backgroundColor:'#eff2f7'
		}
	});
	dojo.fx.chain([a1,a2]).play();
	console.log("hightlight end");
	 
}

/*
	Gets all names from the ynNamepickerNames edit field,
	creates an array out of the string, iterates through the array
	and created <li> elements
*/
function ynNamepickerRefreshDisplay() {
	var nameElem = dojo.query("[id$='ynNamepickerNames']")[0];			
	var elem = dojo.byId("ynNamepickerDisplay");
	var v = nameElem.value;
	if (v == "") {
		elem.innerHTML = ""; 
		return;
	}
	v = v.split(",");
	var html = "";
	var displayName;
	for (i = 0; i < v.length; i++) {
		// display CN names if we have abbreviated names 
		if (v[i].indexOf("/") > 0) {
			displayName = (v[i].indexOf("/")?v[i].substring(0, v[i].indexOf("/")) : v[i]);
		} else {
			displayName = v[i];
		}
		html += '<li id="ynN'+dojo.trim(v[i])+'">'+displayName+'<span onClick="ynNamepickerRemovename(\''+v[i]+'\')" class="ynNamepickerRemover">x</span></li>';
	}
	elem.innerHTML = html;
}
	
/*
	Remove a name from the ynNamepickerNames field and rebuild the <li> list
	in the displayBox.
*/
function ynNamepickerRemovename(n) {
	var nameElem = dojo.query("[id$='ynNamepickerNames']")[0];			
	var v = ynNamepickerGetNames(); 
	v = v.split(",");
	v.splice(dojo.indexOf(v, n), 1);
	nameElem.value = v.join(",");
	ynNamepickerRefreshDisplay();
}

/* removes last element of the names list */	
function ynNamepickerRemoveLast() {
	var v = ynNamepickerGetNames();
	if (v != "") {
		v = v.split(",");
		ynNamepickerRemovename(v[v.length-1]);
	}
}

/* returns the comma seperated list of names */	
function ynNamepickerGetNames() {
	var nameElem = dojo.query("[id$='ynNamepickerNames']")[0];			
	return nameElem.value;
}

	
/* sets focus to the input field */
function ynNamepickerFocus() {
	var elem = dojo.query("[id$='ynNamepickerQ']")[0];
	elem.focus();
}