var topFromBox			= 20;
var leftFromBox			= 0;

var resultBoxClass		= "search_results";
var searchFieldClass	= "search_field";
var searchBoxClass		= "search_box";
var searchLoaderClass	= "search_loader";
var result				= "result";
var startText			= "zoeken...";

var resultPage			= "/scripts/search_results.php";

function init()
{
	var searchBoxes = document.getElementsByClassName(searchFieldClass);
	
	for(var i=0; i<searchBoxes.length; i++)
	{
		var id			= searchBoxes[i].id;
		var funcKeyUp	= function(e){ search(id,e); }
		var funcFocus	= function(){ clearSearch(id); }
		
		Event.observe(searchBoxes[i], "keyup", funcKeyUp, true);
		Event.observe(searchBoxes[i], "focus", funcFocus, true);
	}
	
	Event.observe(document.body, "click", function(){ hideResults(); }, true);
	Event.observe(document.body, "keyup", function(e){ navigateResults(e); }, true)
}

selected = null;

function navigateResults(e)
{
	if($(resultBoxClass) != undefined && $(resultBoxClass).style.display != "none")
	{
		if(e.keyCode == 38 || e.keyCode == 40)
		{
			if(selected == null){
				selected = 0;
				selectResult();
			} else {
				switch(e.keyCode)
				{
					case 38:
						if(selected != 0){
							selected--;
							selectResult();
						}
					break;
					case 40:
						if($(result+(selected+1)) != undefined){
							selected++;
							selectResult();
						}
					break;
				}
			}
		}
	}
}

function selectResult()
{
	if($(result+selected) != undefined){
		$(result+selected).focus();
	}
}

var searchInterval	= 200;
var typing			= 0;
var nonKeys			= [27,20,16,17,91,18,93,37,38,40,39,16,27,112,113,114,
				   115,116,117,118,119,120,121,122,123,18,35,36,33,34,45,45,144,44,145,19];

function hideResults()
{
	if($(resultBoxClass) != undefined){
		$(resultBoxClass).style.display = "none";
	}
}

function checkReadySearch(field)
{
	typing--;
	if(typing == 0)
	{
		startSearch(field);
	}
}

function search(field, e)
{
	if(nonKeys.indexOf(e.keyCode) == -1){	
		typing++;
		
		setTimeout(function(){ 
			checkReadySearch(field); },
		searchInterval);
	}
}

function startSearch(fieldId)
{	
	$(searchLoaderClass).style.display = "block";	

	var field = $(fieldId);
	var value = field.value;
	
	if($(resultBoxClass) == undefined){
		addResultDiv(fieldId);
	}
	
	var params = {value:value};
	
	var succes_actions = function(transport)
	{
		var responseText = transport.responseText;
		
		$(resultBoxClass).innerHTML = responseText;
		$(resultBoxClass).style.display = "block";
		$(searchLoaderClass).style.display = "none";
	}
	
	new Ajax.Request(resultPage,
	{
		method:			'post',
		onSuccess:		succes_actions,
		parameters: 	params
	});
}

function clearSearch(fieldId)
{
	var field = $(fieldId);
	var value = field.value;
	
	if(value == startText){
		field.value = "";
		field.style.color = "black";
	}
}

function addResultDiv(parent)
{
	var newdiv			= document.createElement('div');
	
	newdiv.id			= resultBoxClass;
	newdiv.setAttribute('id',resultBoxClass);
	
	newdiv.className	= resultBoxClass;
	newdiv.setAttribute('className',resultBoxClass);
	
	$(searchBoxClass).appendChild(newdiv);
}

window.onload = function(){ init(); }