SearchBox= function (dom) {

	var obj= this;

	$(dom).wrap("<div class=\"searchbox\"></div>");
	$(dom).after("<div class=\"autocomplete\"></div>");
	dom= $(dom).parent();

	function input() {
		return $("input", dom)
	}

	function getCompletion(word, callback) {
		$.getJSON("/suchen/completion/?s="+encodeURIComponent(word), callback);
	}

	input().attr("autocomplete", "off");

	this.setWord= function(newword) {
		var cursor= input()[0].selectionStart;
		var new_cursor= 0;
		var words= obj.words();
		var new_words= [];
		var word= words.shift();
		cursor-= word.length;
		while (cursor > 0) {
			new_words.push(word);
			new_cursor+= word.length+1
			word= words.shift();
			cursor-= word.length+1;
		}
		new_words.push(newword);
		new_cursor+= newword.length;
		new_words= new_words.concat(words);
		input().attr("value", new_words.join(" "));
		input()[0].selectionStart= new_cursor;
		input()[0].selectionEnd= new_cursor;
		update_guessed(newword);
		change();
	}

	this.words= function () {
		return input().attr("value").split(" ");
	}

	var change_callbacks= [];

	this.change= function(callback) {
		change_callbacks.push(callback);
	}

	var change= function() {
		$.each(change_callbacks, function (i, callback) {
			callback();
		} );
	}

	var update_count= 0;

	var update_guessed= function (word) {
		update_count++;
		var local_count= update_count;
		if (word.length == 0) {
			$("div.autocomplete div", dom).remove();
		} else {
			getCompletion(word, function (words) {
				if (local_count == update_count) {
					var current= $("div.autocomplete div.selected", dom).text();
					$("div.autocomplete div", dom).remove();
					$("div.autocomplete", dom).append($.map(words, function (word) {
						if (word == current) {
							return "<div class=\"selected\">" + word + "</div>";
						} else {
							return "<div>" + word + "</div>";
						}
					} ).join(""));
					$("div.autocomplete div").each( function (i, div) {
						$(div).mousedown( function () {
							obj.setWord($(div).text());
							return false;
						});
					}); 
				}
			});
		}
	};

	var get_current_word= function () {
		var cursor= input()[0].selectionStart;
		var words= obj.words();
		var word= words.shift();
		cursor-= word.length;
		while (cursor > 0) {
			word= words.shift();
			if (word == undefined) {
				return "";
			}
			cursor-= word.length+1;
		}
		return word;
	}

	var last_word= "";

	var check_for_guessed= function () {
		word= get_current_word();
		if (last_word != word) {
			last_word= word;
			update_guessed(word);
			change();
		}
	};
	input().keyup(check_for_guessed);
	input().mouseup(check_for_guessed);
	input().focus(check_for_guessed);
	input().blur( function() {
		update_guessed("");
		last_word= ""
	});

	input().keydown( function(key) {
		var current= $("div.autocomplete div.selected", dom);
		switch(key.keyCode) {
			case 38: // up
				if (current.length == 0) {
					$("div.autocomplete div:last", dom).addClass("selected");
				} else {
					current.prev().addClass("selected");
					current.removeClass("selected");
				}
				return false;
				break;
			case 40: // down
				if (current.length == 0) {
					$("div.autocomplete div:first", dom).addClass("selected");
				} else {
					current.next().addClass("selected");
					current.removeClass("selected");
				}
				return false;
				break;
			case 13: // enter
				if (current.length == 1) {
					current.removeClass("selected")
					obj.setWord(current.text());
					return false;
				}
				break;
		}
		return true;
	} );

}

all_SearchBox= [];
$(document).ready( function () {
	$("input.searchbox").each( function (i, dom) {
		all_SearchBox.push(new SearchBox(dom));
	} );
} );