(function($) {
	
	var selected = null;
	// De constructor. Roep je aan in JS door: $('element').KeywordDropDown()
	$.fn.KeywordDropDown = function(options) {
		
		var defaults = {
			server: "/ajaxSearch.php"
		};
		
		var options = $.extend(defaults, options);
		
		return this.each(function() {
			setUp(this, options);
		});
	};
	
	// Een private function. Gebruik je enkel intern, kan niet overschreven worden.
	function setUp(field, options) {
		var container = $('<ul id="keywordList"></ul>').insertAfter(field);
		var form = $(field).parents('form');
		var button = $('input[type=submit], input[type=image]', form);
		container.hide();
		$(document).bind("click", function() {container.hide()});
		$(field).bind("keypress",{container: container, server:options.server}, navigate);
		$(field).bind("keyup",{container: container, server:options.server}, getKeywords);
	}
	
	function navigate(e) {
		if (e.keyCode == '13') {
			if (selected != null) {
				e.data.query = this;
				e.data.keyword = $(selected).text();
				selectKeyword(e);
				selected = null;
				return false;
			}
		}
	}
	
	function getKeywords(e) {
		if (e.keyCode == '40') {
			goDown(e);

		}
		else if (e.keyCode == '38') {
			goUp(e);
		}
		else if (e.keyCode != 13) {
			var query = this;
			var cont = e.data.container;
			cont.empty();
			cont.attr('scrollTop', 0);
			cont.hide();
			var langID = $('#lang').val();
			
			// Nieuw: met xml bestand
			$.ajax({
			  type: "GET",
			  url: "/files/keywords.xml",
			  dataType: "xml",
			  success: function(xml){
					// Juiste taal selecteren en doorgeven
					var xmlLang = $(xml).find('lang[langID = ' + langID + ']');
					
					var q = $('#search-criterium').val();
					var val = "";
					var xmlk = [];
					$(xmlLang).find('keyword').each(function() {
						val = $(this).text();
						if (val.indexOf(q) != -1) {
							xmlk[xmlk.length] = val;
						}
					});
					showKeywords(query, cont, xmlk);
				}
			});
			
			// Oude ajaxsearch.php
		/*	$.ajax({
				url: e.data.server,
				type: 'POST',
				data: {keyword: $(this).val(), lang: $('#lang').val()},
				dataType: 'xml',
				timeout: 1000,
				success: function(xml) { 
					showKeywords(query, cont, xml);
				}
			});*/
		}
	}
	
	function goDown(e) {
		$('li', e.data.container).css('background-color', '');
		if (selected == null) {
			selected = $('li:first', e.data.container);
		}
		else if($(selected).next().is('li')) {
			selected = $(selected).next();
		}
		$(selected).css('background-color', '#ccc');
		if ($(selected).is('li'))
			scrollKeywords(e.data.container, selected);
	}
	
	function goUp(e) {
		$('li', e.data.container).css('background-color', '');
		if (selected != null && $(selected).prev().is('li')) {
			selected = $(selected).prev();
			$(selected).css('background-color', '#ccc');
			scrollKeywords(e.data.container, selected);
		}
	}
	
	function scrollKeywords(cont, sel) {

		if(sel.offset().top>cont.offset().top + cont.height() - 10){
			$(cont).each(function(e){this.scrollTop = this.scrollTop + 60});
		}
		else if(sel.offset().top<cont.offset().top+10) {
			$(cont).each(function(e){this.scrollTop = this.scrollTop - 60});
		}
	}
	
	function showKeywords(field, container, xml) {
		var i=0;
			for (var j=0; j<xml.length; j++) {
				var keyword = xml[j];
				i++;
				if (i>10)
					continue;
				$('<li></li>').html(keyword).appendTo(container).bind("click", {query:field, container: container, keyword:keyword}, selectKeyword);
			}
		if (i>0)
			$(container).show();
	}
	
	function selectKeyword(e) {
		$(e.data.query).val(e.data.keyword);
		$(e.data.container).hide();
	}

	/*
	// Een public function. Kan extern gebruikt worden: $('element').KeywordDropDown.publicFunction(), en overschreven worden
	$.fn.KeywordDropDown.publicFunction = function(args) {
		
	};*/
})(jQuery);