// JavaScript Document

////    *****  Xml-file should look something like this:  *******
////    **********************************************************
////    <?xml version="1.0" ?>
////    <response>
////    	<memberobject>
////    		Nickname
////    	</memberobject>
////    </response>
////    **********************************************************


var MemberSuggest = {

// Initializing variables. Don't change these!
	suggested_opt : new Array(),
	suggested_val : new Array(),
	selected_opt : 0,
	selected_val : "",
	timer : 0,
	
// Options
	xmlfile : "/lib/data_fetch/memberSuggest.php",
	xmlvalue1 : "memberobject",
	searchform : "search_form", // name of searchform
	searchbox : "nick", // id of searchbox
	searchfield_height : 20, // Int
	suggestdiv_width : 172, // Int
	do_autofocus : true, // true/false
	do_autosubmit : false, // true/false
	
	
	autofocus : function() {
		if (MemberSuggest.do_autofocus) getEl(MemberSuggest.searchbox).focus();
	},
	
	clear_cache : function() {
		delete MemberSuggest.suggested_opt;
		delete MemberSuggest.suggested_val;
		MemberSuggest.suggested_opt = new Array();
		MemberSuggest.suggested_val = new Array();
		MemberSuggest.selected_opt = 0;
		MemberSuggest.selected_val = "";
	},
	
	getMembers : function(str) // Call this function to use method!!!
	{ 
		if (str=="") {
			clearTimeout(MemberSuggest.timer);
			MemberSuggest.hide_suggestions();
		} else  {
			clearTimeout(MemberSuggest.timer);
			MemberSuggest.timer = setTimeout('MemberSuggest.fetchSuggestion(\''+str+'\');',500);
		}
		
	},
	
	fetchSuggestion : function(str)
	{
		var el = getEl(MemberSuggest.searchbox);
		var txtHintTry = getEl("txtHint");
		if (!txtHintTry) {
			var txtHint = document.createElement('div');
			txtHint.id = "txtHint";
			txtHint.style.position = "absolute";
			txtHint.style.backgroundColor = "#FFFFFF";
			txtHint.style.borderStyle = "solid";
			txtHint.style.borderColor = "#AAAAAA";
			txtHint.style.borderWidth = "1px";
			txtHint.style.textAlign = "left";
			txtHint.style.fontSize = "10px";
			txtHint.style.left = (findPosX(el)+1)+"px";
			txtHint.style.top = (findPosY(el)+MemberSuggest.searchfield_height)+"px";
			txtHint.style.display = "block";
			txtHint.style.width = MemberSuggest.suggestdiv_width+"px";
			txtHint.innerHTML = '<span class="result_string" style="font-size:10px;">H&auml;mtar f&ouml;rslag...</span>';
			document.body.appendChild(txtHint);
		}
	
		var url = MemberSuggest.xmlfile;
		url += "?keyword="+str;
		
		sendRequest(url,MemberSuggest.stateChanged);
	},

	select_one_suggestion : function(id) {
		MemberSuggest.deselect_all();
		
		var tr = getEl("sugg_tr_"+id);
		if (tr) tr.style.background = "#EEEEEE";
		var span = getEl("sugg_span_"+id);
		if (span) span.style.color = "#222222";
				
		MemberSuggest.selected_val = MemberSuggest.suggested_val[id];
		MemberSuggest.selected_opt = id;
	},
		
	out_suggestion : function(ctrl) {
		
		if (ctrl=="mouse") 
		{
			MemberSuggest.selected_opt = 0;
			MemberSuggest.selected_val = "";	
		}
		MemberSuggest.deselect_all();
		
	},
	
	deselect_all : function() {
		
		 for (x in MemberSuggest.suggested_opt)
			{	
				var tr = getEl("sugg_tr_"+x);
				if (tr) tr.style.backgroundColor = "#FFFFFF";
				var span = getEl("sugg_span_"+x);
				if (span) span.style.color = "#000000";
			}
			
	},
	
	change_suggestion : function(dir) {
		
		if (dir=="up") {
			var new_opt = MemberSuggest.selected_opt - 1; 
			if ( new_opt == 0 ) 
			{ 
				getEl(MemberSuggest.searchbox).focus(); 
				MemberSuggest.selected_opt = 0;
				MemberSuggest.selected_val = "";
			}
			else 
			{
			MemberSuggest.select_one_suggestion(new_opt);
			}
		}
		else if (dir=="down") {
			if ( MemberSuggest.selected_opt == 0 ) 
			{ 
				getEl(MemberSuggest.searchbox).blur();
				var new_opt = 1; 
				MemberSuggest.select_one_suggestion(new_opt);
			}
			else if ( MemberSuggest.selected_opt >= (MemberSuggest.suggested_opt.length-1) ) 
			{
				// Do nothing
			}
			else 
			{ 
				var new_opt = MemberSuggest.selected_opt + 1; 
				MemberSuggest.select_one_suggestion(new_opt);
			}
		}
		
	},

	choose_suggestion : function(val) {

		var el = getEl(MemberSuggest.searchbox);
		el.value = MemberSuggest.selected_val;
		MemberSuggest.hide_suggestions();
		MemberSuggest.autofocus();
		//if ( MemberSuggest.do_autosubmit ) { document.forms[MemberSuggest.searchform].submit(); }
		
	},
	
	hide_suggestions : function() {
		
		var el = getEl('txtHint');
		if (el) {
			el.style.display = "none";
			el.parentNode.removeChild(el);
		}
		MemberSuggest.clear_cache();
		
	},
	
	stateChanged : function(req) { 

		 var xmlDoc=req.responseXML.documentElement;
		 var newdiv = "";
		 var l = xmlDoc.getElementsByTagName(MemberSuggest.xmlvalue1).length;
		 MemberSuggest.clear_cache();

		 newdiv += '<table border="0" cellpadding="2" cellspacing="0" style="width:100%">';
		 for ( x=1 ; x<=l ; x=x+1 ) {	
			var cur_xml_obj = x-1;
			var nick = xmlDoc.getElementsByTagName(MemberSuggest.xmlvalue1)[cur_xml_obj].childNodes[0].nodeValue;
			newdiv += '<tr><td onmouseover="MemberSuggest.select_one_suggestion(\'' + x + '\'); this.style.cursor=\'pointer\'" ';
			newdiv += 'onmouseout="MemberSuggest.out_suggestion(\'mouse\');" onclick="MemberSuggest.choose_suggestion();" ';
			newdiv += 'id="sugg_tr_'+x+'" class="td_result" style="border-bottom:dotted 1px #EEEEEE;">';
			newdiv += '<span class="result_string" id="sugg_span_'+x+'">';
			newdiv += xmlDoc.getElementsByTagName(MemberSuggest.xmlvalue1)[cur_xml_obj].childNodes[0].nodeValue;
			newdiv += '</span></td></tr>';
			MemberSuggest.suggested_opt[x] = x;
			MemberSuggest.suggested_val[x] = nick;
		 }
		 newdiv += '</table>';
		 var container = getEl("txtHint");
		 if (container) container.innerHTML=newdiv;
		 
		 if (l<1) MemberSuggest.hide_suggestions();	

	 
	},
	
	handleKeyUp : function(e) {

	  e = (!e) ? window.event : e; // get the event
	  target = (!e.target) ? e.srcElement : e.target; // get the event's target
	  if (target.nodeType == 3) target = target.parentNode;
	  
	  var code; 
	  code = (e.charCode) ? e.charCode :
		   ((e.keyCode) ? e.keyCode :
		   ((e.which) ? e.which : 0));
		   
	  if ( (code < 13 && code != 8) || 
			(code >=14 && code < 32) || 
			(code >= 33 && code <= 46 && code != 38 && code != 40) || 
			(code >= 112 && code <= 123) ) 
		{
		  // Do nothing
		}
		else 
		{
			
			if (code == 13 && MemberSuggest.selected_val != "")
			{
				// Enter key
				MemberSuggest.choose_suggestion();
			}
			else if (code == 38)
			{
				// Arrow up key
				MemberSuggest.change_suggestion("up");
			}
			else if (code == 40)
			{
				// Arrow down key
				MemberSuggest.change_suggestion("down");
			}
		}	   
	}

};

window.onload = function() { 
	var el = getEl("nick");
	if (el) {
		el.onkeyup = function () { MemberSuggest.getMembers(el.value); }
		el.onblur = function () { var ht = setTimeout('MemberSuggest.hide_suggestions();',200); }
	}
}