// new vars
var bBrowserOk = window.ActiveXObject || window.XMLHttpRequest
var IE = ( navigator.appVersion.indexOf("MSIE") != -1 )
var IE50 = ( navigator.appVersion.indexOf("MSIE 5.0") != -1 )

//var searchUrl = "http://www.zorgkiezer.nl/v2/ajax/instellingen.php?q=";
var searchUrl;
var searchId;

var inputFocus = false;
var pCache = new Array(); // cache plaatsen
var resArray = new Array(); // stores results
var selectedSuggest;

var maxPlaatsen = 8;

/*
 * MAIN
 */

function loadSuggest(sURL, sID) {
	if (!sID) {
		sID = "ajaxSearch";
	}
	
	searchUrl = sURL;
	searchId = sID;
	
	document.write('<div id="'+ sID +'FrameBox" style="display: none;"><iframe id="'+ sID +'Frame" frameborder="0" border="0"></iframe></div>');
	document.write('<div id="'+ sID +'Box" style="display: none;"></div>');
}

/*
XML Request
Checks if we shouldask cache or XML serv
*/
function request(event) {
	if (!bBrowserOk) {
		return;
	}
	if ( event )
		if ( event.keyCode == 13 )
			return false;
	
	var letter = $F(searchId).substring(0,1);
	letter = letter.toLowerCase();
	
	if (!letter) {
		sbHide();
		return;
	}
	
	// check if we have it in cache
	if (!pCache[letter]) {
		reqXML();
	}
	if (!pCache[letter]) {
		return;
	}
	
	// create the result array
	createResArray();
	
	if (resArray.length > 0) {
		// display box
		sbShow();
		
		// update iframe height
		sbUpdate();
	} else {
		sbHide();
	}
}
function reqXML() {
	var letter = $F(searchId).substring(0,1);
	letter = letter.toLowerCase();
	
	oXMLHTTP = false;
	
	if ( window.ActiveXObject ) oXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");
	if ( window.XMLHttpRequest ) oXMLHTTP = new XMLHttpRequest();
	
	if (!oXMLHTTP) {
		return false;
	}
	
	oXMLHTTP.onreadystatechange = function() {
		if (oXMLHTTP.readyState == 4) {
			resp = oXMLHTTP.responseText;
			
			pCache[letter] = resp.split(";");
		}
	}
	
	oXMLHTTP.open("POST", searchUrl + letter, true);
	oXMLHTTP.send(null);
}
function createResArray() {
	var keyword = $F(searchId).toLowerCase();
	var letter = keyword.substr(0,1);
	var cache = pCache[letter];
	
	resArray = new Array();
	
	for (var i = 0; i < cache.length; i++) {
		if (cache[i].substr(0, keyword.length).toLowerCase() == keyword) {
			if (cache[i].toLowerCase() != keyword) {
				resArray.push(cache[i]);
			}
		}
	}
}

/*
 * Status changes
 */
function setFocus(state) {
	if (!state) {
		sbHide();
	}
	
	inputFocus = state;
}

/*
 * Result handlers
 */
function sbHide() {
	// reset results array
	resArray = new Array();
	
	// hide the root div
	$(searchId + 'Box').style.display = 'none';
	$(searchId + 'FrameBox').style.display = 'none';
	
	// remove all childs
	sbRemoveChilds();
}
function sbShow() {
	if (!sbAddChilds()) {
		// no childs to display
		return false;
	}
	
	// show the root div
	$(searchId + 'FrameBox').style.display = 'block';
	
	$(searchId + 'FrameBox').style.position = 'absolute';
	$(searchId + 'FrameBox').style.left = calculateOffsetLeft($(searchId)) +'px';
	$(searchId + 'FrameBox').style.top = (calculateOffsetTop($(searchId)) + $(searchId).offsetHeight) - 1 +'px';
	$(searchId + 'FrameBox').style.width = $(searchId).offsetWidth +'px';
	$(searchId + 'Frame').style.width = $(searchId).offsetWidth +'px';
	
	
	$(searchId + 'Box').style.display = 'block';
	
	// position and size
	$(searchId + 'Box').style.position = 'absolute';
	$(searchId + 'Box').style.left = calculateOffsetLeft($(searchId)) +'px';
	$(searchId + 'Box').style.top = (calculateOffsetTop($(searchId)) + $(searchId).offsetHeight) - 1 +'px';
	$(searchId + 'Box').style.width = ($(searchId).offsetWidth - 2) +'px';
	
	$(searchId + 'FrameBox').style.height = ($(searchId + 'Box').offsetHeight + 1) +'px';
	$(searchId + 'Frame').style.height = ($(searchId + 'Box').offsetHeight + 1) +'px';
	
	// other styles
	$(searchId + 'Box').style.border = '1px solid black';
}
function sbUpdate() {
	$(searchId + 'FrameBox').style.height = ($(searchId + 'Box').offsetHeight + 1) +'px';
	$(searchId + 'Frame').style.height = ($(searchId + 'Box').offsetHeight + 1) +'px';
}

function sbRemoveChilds() {
	while($(searchId + 'Box').firstChild) {
		$(searchId + 'Box').removeChild($(searchId + 'Box').firstChild);
	}
	
	selectedSuggest = false;
}
function sbAddChilds() { // seAddChilds(array results);
	// remove old childs
	sbRemoveChilds();
	
	for (childCnt = 0; childCnt <= ((resArray.length < maxPlaatsen) ? resArray.length : maxPlaatsen); childCnt++) {
		// append a child
		if (resArray[childCnt]) {
			sbAddChild(resArray[childCnt], (childCnt + 1));
		}
	}
	
	if (childCnt > 1) {
		// show box
		return true;
	} else {
		return false;
	}
}
function sbAddChild(content, childId) {
	// create the element
	var u = document.createElement('DIV');
	
	// set element properties
	u.className = 'suggestion';
	u.innerHTML = content;
	u.id = 'sb_' + childId;
	
	// set events
	u.onmouseover = seHover;
	u.onmouseout = seOut;
	u.onmousedown = seClick;
	
	// Append to root element
	$(searchId + 'Box').appendChild(u);
}


/* 
 * Suggestion box events
 */
var seHover = function(){
	this.className = 'suggestion_hover';
	selectedSuggest = this.id.substring(3);
}
var seOut = function(){
	this.className = 'suggestion';
	selectedSuggest = false;
}
var seClick = function(){
	$(searchId).value = this.innerHTML;
	sbHide();
}

/*
 * Position calculating
 */
function calculateOffsetLeft(r){
  return getPos(r, "offsetLeft");
}
function calculateOffsetTop(r){
  return getPos(r, "offsetTop");
}

function getPos(r,attr){
  var kb = 0;
  while(r) {
    kb += r[attr]; 
    r = r.offsetParent;
  }
  return kb;
}

/*
 * Key Events
 */
function keyPress(event) {
	if ( event.keyCode == 38 || event.keyCode == 40 ) {
		return false;
	}
	if ( event.keyCode == 13 && selectedSuggest > 0) {
		return false;
	}
}
function KeyDown(event) {
	if (!inputFocus) {
		return;
	}
	
	if ( event.keyCode == 40 ) scrollDown(1);
	if ( event.keyCode == 38 ) scrollUp(1);
}
function KeyUp(event) {
	if (!inputFocus) {
		return;
	}
	
	if ( event.keyCode == 13 ) ret();
	if ( event.keyCode == 27 ) ret();
	if ( event.keyCode == 9 ) ret();
	
	if ( event.keyCode == 38 || event.keyCode == 40 ) {
		return false;
	}
	
	if (event.keyCode != 13 && event.keyCode != 27 && event.keyCode != 9) {
		request();
	}
}
function ret(bEnter) {
	if ( !bBrowserOk ) return;
	
	if (selectedSuggest > 0) {
		$(searchId).value = document.getElementById('sb_' + selectedSuggest).innerHTML;
		
		selectedSuggest = false;
	}
	
	sbHide();
	$(searchId).focus();
}
function scrollDown(steps) {
	if ($(searchId + 'Box').style.display != 'block') {
		return;
	}
	
	if (selectedSuggest > 0) {
		selectedSuggest = parseInt(selectedSuggest);
		
		if (selectedSuggest == $(searchId + 'Box').childNodes.length) {
			return;
		}
		if (!$('sb_' + selectedSuggest)) {
			return;
		}
		
		// remove prev
		$('sb_' + selectedSuggest).className = 'suggestion';
		
		// next
		selectedSuggest = selectedSuggest + steps;
		if (!$('sb_' + selectedSuggest)) {
			return;
		}
		
		$('sb_' + selectedSuggest).className = 'suggestion_hover';
	} else {
		// first
		selectedSuggest = 1;
		$('sb_1').className = 'suggestion_hover';
	}
}
function scrollUp(steps) {
	if ($(searchId + 'Box').style.display != 'block') {
		return;
	}
	
	if (selectedSuggest > 0) {
		selectedSuggest = parseInt(selectedSuggest);
		
		if (selectedSuggest == 1) {
			return;
		}
		if (!$('sb_' + selectedSuggest)) {
			return;
		}
		
		// remove prev
		$('sb_' + selectedSuggest).className = 'suggestion';
		
		// prev
		selectedSuggest = selectedSuggest - steps;
		if (!$('sb_' + selectedSuggest)) {
			return;
		}
		
		$('sb_' + selectedSuggest).className = 'suggestion_hover';
	} else {
		// first
		selectedSuggest = $(searchId + 'Box').childNodes.length;
		$('sb_' + $(searchId + 'Box').childNodes.length).className = 'suggestion_hover';
	}
}