var SearchSuggest = new Class({
    initialize: function(el) {
        this.searchField = document.getElement(el);
        if (!this.searchField) {
          return;
        }
        this.searchField.set('autocomplete', 'off');
        this.suggestions = new Element('ul', {'class':'current-suggestions'});
        this.suggestions.setStyles({
            'width': this.searchField.getSize().x - 2,
            'top': this.searchField.offsetTop + this.searchField.getSize().y,
            'left': this.searchField.offsetLeft
        });

        this.loading = false;
        this.storedValue = this.searchField.get('value');

        var that = this;
        this.searchField.addEvents({
            'keyup':   function(e) {that._onKeyup.call(that, e);},
            'keydown': function(e) {that._onKeydown.call(that, e)},
            'focus':   function(e) {that._onFocus.call(that, e)},
            'blur':    function(e) {that._onBlur.call(that, e)}
        });
    },
    
    _onKeyup: function(e) { 
        if(e.key != 'up' && e.key != 'down' && e.key != 'enter') {
            this._fetchSuggestions(this.searchField,this.searchField.get('value'));
        } else {
            if(this.suggestions.getElement('.active')) {
                this.searchField.set('value',this.suggestions.getElement('.active').getElement('a').get('text'));
            }
        }
    },

    _onKeydown: function(e) {
        var active = null;
        if(this.suggestions.getElement('.active'))
            active = this.suggestions.getElement('.active');
            
        switch (e.key) {
        case 'down':
            e.preventDefault();
            if (active) {
                if (active.getNext()) {
                    active.removeClass('active');
                    active.getNext().addClass('active');
                }
            } else {
                if (this.suggestions.getChildren().length > 0) {
                    active = this.suggestions.getChildren()[0];
                    active.addClass('active');
                }
            }
            break;
        case 'up':
            e.preventDefault();
            if (active) {
                if (active.getPrevious()) {
                    active.removeClass('active');
                    active.getPrevious().addClass('active');
                }
            } else {
                if (this.suggestions.getChildren().length > 0)
                    this.suggestions.getChildren()[0].addClass('active');
            }
            break;
        case 'enter':
            this.suggestions.setStyle('display','none');
            this.suggestions.empty();
            break;
        }
    },

    _onFocus: function(e) {
        if (this.searchField.get('value') != ''){
            this._fetchSuggestions(this.searchField,this.searchField.get('value'));
        }
    },

    _onBlur: function(e) {
        var that = this;
        (function() {
            that._removeSuggestions();
        }).delay(500);
    },

    _removeSuggestions: function() {
        this.suggestions.dispose()
    },

    _empty: function(element) {
        element.getChildren().each(function(child) {
            element.removeChild(child);
        });
    },

    _fetchSuggestions: function(el,value) {
        if (this.loading)
            this.loading.cancel();

        if(this.suggestions.getParent() == null)
            this.searchField.getParent().grab(this.suggestions);

        this.storedValue = value;

        var num = 0;
        var that = this;
        var newSuggestions = [];
        var regexp = new RegExp("^(" + value + ")(.*)", "i");
        var isTags = false;
        
        if(el.id && el.id == "newTagName") {
          isTags = true;
        }

        this.loading = new Request.JSON({'url': '/autoComplete.do', onComplete: function(suggestions) {

            if(that.suggestions.getStyle('display') == 'none')
              that.suggestions.setStyle('display','block');


            suggestions.each(function(suggestion, i) {
                var results = regexp.exec(suggestion);
                var li = new Element('li');
                var a;

                if(el.id && el.id == "newTagName") {
                  a = new Element('a', {'html': "<strong>" + results[1] + "</strong>" + results[2], 'onClick':'document.getElement("#newTagName").set("value","'+results[1]+results[2]+'");'});
                } else {
                  a = new Element('a', {'href': "/search/" + escape(suggestion), 'html': "<strong>" + results[1] + "</strong>" + results[2]});
                }
                li.grab(a);

                suggestion = new Hash({'title': suggestion, 'element': li, 'a': a});
                newSuggestions[num] = suggestion['element'];

                num++;
            });

            if (num == 0) {
                that.suggestions.setStyle('display','none');
                that.suggestions.empty();
                return;
            }

            var oldSuggestions = that.suggestions.getChildren('li');

            if(oldSuggestions.length == newSuggestions.length) {
                newSuggestions.each(function(suggestion, i){
                    suggestion.replaces(oldSuggestions[i]);
                });
            } else if (oldSuggestions.length > newSuggestions.length) {
                oldSuggestions.each(function(suggestion, i) {
                    if(newSuggestions[i])
                        newSuggestions[i].replaces(suggestion);
                    else
                        suggestion.dispose();
                });
            } else {
                newSuggestions.each(function(suggestion, i) {
                    if(oldSuggestions[i])
                        suggestion.replaces(oldSuggestions[i]);
                    else
                        that.suggestions.grab(suggestion);
                });
            }
        }}).get({'searchTerm': value, 'limit': 10, 'tags': isTags});


    }
});