$(document).ready(function() { 
	
	$('input#frm_dictionary_key').keyup(function(e) {
		e.preventDefault();
		input_value = $(this).val();
		obj_offset = $(this).offset();
		
		if ($('#frm_dictionary_cnt').length!=0) {
			$('#frm_dictionary_cnt').remove();
		}
		
		if (input_value.length<=1) { return false; }
		
		var o = $.create('div', {'id':'frm_dictionary_cnt'}, [
				$.create('div', {'id':'frm_dictionary_result'}, [])
			]);
		$('body').append($(o));
		
		$('#frm_dictionary_cnt').css({
			'top': obj_offset.top + $(this).height() + 5,
			'left': obj_offset.left + 20,
			'position': 'absolute'
		})
		$.ajax({
			type: 'GET',
			url: DEFINE.get(http_server) + '/wordlist_result.php?mode=search&key='+input_value,
			dataType: 'xml',
			success: function(xml) {
				$(xml).find('word').each(function(){
					xml_id = $(this).find('id').text()
					xml_key = ' ' + $(this).find('key').text() + ' ' // als de key begint of eindigt in het woord geeft hij een error, vandaar de spaties
					xml_description = $(this).find('description').text()
					xml_url = $(this).find('url').text()
					
					find_key = xml_key.search(input_value);
					str_start = xml_key.substring( 0, find_key );
					str_center = xml_key.substring( find_key, parseInt( find_key + input_value.length ) );
					str_end = xml_key.substring( parseInt( find_key + input_value.length ) );
					
					var r = $.create('a', {'href':xml_url}, [
							$.create('span', {}, [str_start]),
							$.create('span', {'class':'highlight'}, [str_center]),
							$.create('span', {}, [str_end])
						]);
					$('#frm_dictionary_result').append($(r));
				});
			}
		});
		
	});

	key='';
	$('a[rel=wordlist]').mouseover(function(e) {
		key = $(this).attr('title');
		$(this).attr('title','');
		
		var o = $.create('div', {'id':'tooltip'}, []);
		$('body').append($(o));
		$('#tooltip').children().remove();
		
		$.ajax({
			type: 'GET',
			url: DEFINE.get(http_server) + '/wordlist_result.php?key='+key,
			dataType: 'xml',
			success: function(xml) {
				$('#tooltip').html('');
				var thtml = $.create('div', {}, [
					//$.create('h1', {}, [$(xml).find('key').text()]), 
					$.create('p', {}, [$(xml).find('description').text()])
				]);
					
				$('#tooltip').append($(thtml));
			}
		});
		
		$('#tooltip').css({opacity:0});
		$('#tooltip').animate({opacity:1},'fast');
		$('#tooltip').css({
			'top': e.pageY + 10,
			'left': e.pageX + 20
		});
		
	}).mousemove(function(e) {
		$('#tooltip').css({
			'top': e.pageY + 10,
			'left': e.pageX + 20
		});
	}).mouseout(function() {
		$(this).attr('title',key);
		$('#tooltip').remove();
	});
});