// JavaScript Document
var userSearchTimeout = false;

function startSearchUser(fieldName){
	$('#searchUserDialog').remove();
	content = '<div id="searchUserDialog"><div class="title">Zoek gebruiker</div><div class="boxContent"><div id="searchBox"><input id="name" type="text"><button id="searchButton">Zoek</button><button id="closeButton">Sluiten</button></div></div><div id="result"></div></div></div>';
	$('#siteLayer').append(content);
	$('#searchUserDialog button#searchButton').click(startSearching);
	$('#searchUserDialog button#closeButton').click(closeSearchUser);
	$('#searchUserDialog input#name').keyup(startSearchingTimer);
	$('#searchUserDialog').attr('fieldName', fieldName);
	$('#searchUserDialog #result').attr('lastSearchString', '');
	top = $(fieldName).offset();
	left = top['left'];
	top = '200px';
	$('#searchUserDialog').css({top: top, left: left});
}

function startSearchingTimer(){
	if (userSearchTimeout) {
		clearTimeout(userSearchTimeout);
		userSearchTimeout = false;
	}
	userSearchTimeout = setTimeout(startSearching, 500);
}

function startSearching(){
	naam = $('#searchUserDialog input#name').val();		
	if(jQuery.trim(naam) == ''){
		$('#searchUserDialog #result').html('');
	} else {
		lastSearchSting = $('#searchUserDialog #result').attr('lastSearchString');
		if (lastSearchSting != naam) {
			$.getJSON('ajax.php', {action: 'searchUser', searchString: naam}, proccesSearchUserResults);
			$('#searchUserDialog #result').attr('lastSearchString', naam);
		}
	}
}

function proccesSearchUserResults(data){
	names = data['names'];
	
	content = '<table>'
	for(i=0;i<names.length;i++){
		content = content + '<tr>';
		content = content + '<td class="realName">' + names[i]['username'] + '</td>';
		content = content + '<td>' + names[i]['voornaam'] + '</td>';
		content = content + '<td>' + names[i]['achternaam'] + '</td>';
		content = content + '</tr>';
	}
	content = content + '</table>';

	$('#searchUserDialog #result').html(content);
	$('#searchUserDialog #result td').dblclick( 
		function () {
		 	
			naam = $(this).parent().children('.realName').text();
			field = $('#searchUserDialog').attr('fieldName');
			$(field).val(naam);			
			closeSearchUser();	
		}
	);
	
	$('#searchUserDialog #result tr').hover(
		function(){
			$('td', this).css({backgroundColor: '#eee'});
		},
		function(){
			$('td', this).css({backgroundColor: ''});
		}
	)
}

function closeSearchUser(){
	$('#searchUserDialog').remove();
}