Suggest = function(elem) {
    this.element = jQuery(elem);
    this.field = this.element.find('#s');

    this.init = function() {
        var self = this;

        this.field
            .attr('autocomplete', 'off')
            .keyup(function() { self.handleKeyUp() })
            .click(function() {
                if (self.element.find('.suggest').length) {
                    self.element.find('.suggest').fadeIn(100);
                    return false;
                }
            });

        jQuery('body').click(function() {
            if (self.element.find('.suggest').length) {
                self.element.find('.suggest').fadeOut(200);
            }
        });
    }

    this.handleKeyUp = function() {
       var value = this.field.val();
       var suggestions = jQuery('<div class="suggest"><ul class="wrap"><li>Suche läuft...</li></ul></div>');

       if (value.length > 2) {
           if (!this.element.find('.suggest').length) {
               this.field.after(suggestions);
               this.showSuggests(value);
           } else {
               this.showSuggests(value);
           }
       } else {
           if (this.element.find('.suggest').length) {
               this.element.find('.suggest').remove();
           }
       }
    }

    this.showSuggests = function(value) {
        var self = this;
        var elementString = '';

        jQuery.getJSON('/', { query: value }, function(data){
            if (data == null) {
                elementString = '<li>Ihre Suche erzielte keine Treffer</li>';
            } else {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].indexOf(value) != -1) {
                        elementString = elementString + '<li><dfn>' + data[i] + '</dfn>...<span style="text-decoration: none;"> (im Titel)</span></li>';
                    } else {
                        elementString = elementString + '<li><dfn>' + data[i] + '</dfn>...<span style="text-decoration: none;"> (im Inhalt)</span></li>';
                    }
                }
            }

            self.element.find('.suggest .wrap').html(elementString);
            self.updateEvents();
        });
    }

    this.autocomplete = function(elem) {
        this.field.val(elem.text());
        this.element.find('.suggest').remove();
        this.element.submit();
    }

    this.updateEvents = function() {
        var self = this;
        this.element.find('.wrap li')
            .mouseenter(function() { jQuery(this).css({ 'text-decoration': 'underline', 'font-weight': 'bold' }); })
            .mouseleave(function() { jQuery(this).css({ 'text-decoration': 'none', 'font-weight': 'normal' }); })
            .click(function() { self.autocomplete(jQuery(this).find('dfn')); });
    }

    this.init();
}