QAutocompleter = new Class({
    Extends: Autocompleter.Request.JSON,

    options: {
        modal: false
    },

    initialize: function(el, url, options) {
        this.parent(el, url, options);
        var that = this;
        document.id('search').setStyle('display', 'block').addEvent('submit', function(e){
            e.stop();
            if (that.options.minLength > document.id('q').value.length) alert('Bitte gib mindestens drei Buchstaben ein, um dein Werk zu suchen.');
            else that.query()}
        );
    },

    update: function(tokens) {
        var n = [];
        var c = new Object();
        tokens.each(function(t){
            n.push(t[0]);
            c[t[0]] = t;
        });

        if (!n.length) {
            return this.fillEmpty();
        }

        this.cachedComplete = c;

        this.parent(n);
    },
    showChoices: function(count){
        this.hideChoices();
        this.wrapper = document.id('werk-wrapper').dispose();

        count = $type(count) == 'number' ? count : this.choices.getChildren().length;

        new Element('tr').adopt(
            new Element('th', {'html':'Suchergebnis: ' + count + ' ' + (count == 1 ? 'Werk' : 'Werke')}),
            new Element('th', {'html':'Verlag'}),
            new Element('th', {'html':' '})
        ).inject(this.choices, 'top');
        this.parent();

        if(this.options.modal) this.options.modal.scan();
    },
    hideChoices: function(){
        if (this.wrapper) this.wrapper.inject('werke-result', 'after').setStyle('opacity', 1);
        this.parent();
    },
    buildChoice: function(token, data){
        var data = data || this.cachedComplete[token];

        var audio;
        if (data[7] && data[7].length > 0) audio = new Element('a', {'href':'http://www.gottfriedveit.it/audio/stat/' + data[7] + '.mp3', 'html':' '});

        return new Element('tr').adopt(
            new Element('td').adopt(
                new Element('a', {'rel':'facebox', 'href':'#werk_' + data[1] + '_' + data[8], 'html': data[0], 'title':data[0]}),
                new Element('div', {'class':'info', 'html':data[2]}),
                new Element('div', {'class':'popup_info', 'id':'werk_' + data[1] + '_' + data[8], 'styles':{'display':'none'}}).adopt(
                    data[5] ? new Element('div', {'html':data[5]}) : null,
                    new Element('hr'),
                    new Element('p').adopt(
                        new Element('strong',{'html':'Verlag:'}),
                        new Element('a',{'class':'verlag_link','target':'_blank','href':'verlag.html#' + data[3][1],'html':data[3][0]})
                    ),
                    data[4] ? new Element('p').adopt(
                        new Element('strong',{'html':'Schwierigkeitsgrad:'}),
                        new Element('span',{'html':data[4]})
                    ) : null,
                    data[6] ? new Element('p').adopt(
                        new Element('strong',{'html':'Spieldauer:'}),
                        new Element('span',{'html':data[6]})
                    ) : null
                )
            ),
            new Element('td').adopt(new Element('a', {'class':'verlag_link', 'html': data[3][0], 'href': 'verlag.html#' + data[3][1]})),
            new Element('td', {'class':'audiofile'}).adopt(audio)
        );
    },

    addChoiceEvents: function(el) {
        return el;
    },

    choiceSelect: function(choice) {
        if (choice) this.choiceOver(choice);
        this.setSelection(true);
    },

    toggleFocus: function(state) {
        this.focussed = state;
        this.fireEvent((state) ? 'onFocus' : 'onBlur', [this.element]);
    },

    fillEmpty: function(){
        this.choices.empty();
        new Element('tr').adopt(
            new Element('td', {'colspan':3, 'html':'Es wurden keine Werke gefunden, die mit der Suchanfrage übereinstimmen'})
        ).inject(this.choices);
        this.showChoices(0);
    },
    query: function(){
        c = document.id('werk-wrapper') || document.id('werke-result');
        c.setStyle('opacity', 0.1);

        this.loader = new Element('div', {'class':'loading'}).inject(document.body).position({'relativeTo':c,'position':'top'});
        this.parent();
    },
    queryResponse: function(response) {
        this.parent(response);
        this.loader.destroy();
        c = document.id('werk-wrapper') || document.id('werke-result');
        c.setStyle('opacity', 1);
    }
});