var Qs_MultiDataAutocompleteElement = {
    _instances: {},

    getInstance: function (elementId)
    {
        if (typeof this._instances[elementId] !== 'undefined') {
            return this._instances[elementId];
        }
        return false;
    },

    getInstances: function ()
    {
        return this._instances;
    },

    addInstance: function (elementId, instance)
    {
        this._instances[elementId] = instance;
    }
};

/**
 * @version $Id$
 * @uses jQuery
 * @uses jQuery.ui.autocomplete
 */
var Qs_Form_Element_MultiDataAutocomplete = qs.createObject();
Qs_Form_Element_MultiDataAutocomplete.defaultOptions = {
    valueElementId: undefined,
    displayElementId: undefined,

    dataUrl: undefined,
    minLength: 2,

    /**
     * Callback for item rendering
     * @type {Function|String}
     */
    renderItem: undefined
};
Qs_Form_Element_MultiDataAutocomplete.prototype = {
    initialize: function (options) {
        this.className = 'Qs_Form_Element_MultiDataAutocomplete';
        this.options = $.extend({}, Qs_Form_Element_MultiDataAutocomplete.defaultOptions, options);
        this._autocompleteSource = undefined;

        this.valueElement = $('#' + this.options.valueElementId);
        this.displayElement = $('#' + this.options.displayElementId);
        if (1 !== this.valueElement.size() || 1 !== this.displayElement.size()) {
            qs.debug.warn(this.className + ': can not me initialized');
            return this;
        }

        if (!this.getAutocompleteSource()) {
            qs.debug.warn(this.className + ': source is not specified');
            return this;
        }

        this.initAutocomplete();

        Qs_MultiDataAutocompleteElement.addInstance(this.options.valueElementId, this);

        return this;
    },

    initAutocomplete: function () {
        var options = $.extend({
            source: this.getAutocompleteSource(),
            autoFocus: true,
            focus: _.bind(this.onFocus, this),
            change: _.bind(this.onChange, this),
            select: _.bind(this.onSelect, this),
            response: _.bind(this.onResponse, this),
            position: {collision: "flip" }
        }, this.getAutocompleteOptions());

        this.displayElement.autocomplete(options);

        this.displayElement.data('uiAutocomplete')._renderItem = this.getRenderItemCallback();
        return this;
    },

    getRenderItemCallback: function () {
        var callback;
        if (this.options.renderItem) {
            if ('function' === typeof this.options.renderItem) {
                callback = this.options.renderItem;
            } else if ('function' !== typeof (callback = qs.variable(this.options.renderItem))) {
                callback = undefined;
            }
        }
        callback = (callback) ? callback : this.renderItem;
        return _.bind(callback, this);
    },

    renderItem: function (ul, item) {
        if(item.disabled == true){
            return $('<li class="ui-state-disabled">' + item.title + '</li>').appendTo(ul);
        }
        return $(document.createElement('li'))
            .data('item.autocomplete', item)
            .append($(document.createElement('a')).text(item.title))
            .appendTo(ul);
    },

    onFocus: function (e, ui) {
        if (e.originalEvent.originalEvent && /^key/.test(e.originalEvent.originalEvent.type)) {
            var change = (this.valueElement.val() != ui.item.value);
            this.valueElement.val(ui.item.value);
            this.displayElement.val(ui.item.title);

            if (change) {
                this.valueElement.trigger('change');
            }
        }
        return false;
    },

    onChange: function(e, ui)
    {
        if (!ui.item) {
            this.displayElement.val('');
        }
    },

    onSelect: function (e, ui) {
        var change = (this.valueElement.val() != ui.item.value);

        this.valueElement.val(ui.item.value);
        this.displayElement.val('');
        if (change) {
            this.valueElement.trigger('change');
        }
        this.addToList(ui.item.value, ui.item.title);
        this.addToValues(ui.item.value);
        this.valueElement.val('');

        return false;
    },

    onResponse: function(e, ui)
    {
      this.markSelectedValues(e, ui);
    },

    markSelectedValues: function(e, ui)
    {
        var selectedItems = this.getSelectedValues();
        for ( var i = 0; i<ui.content.length; i++ ) {
            if ($.inArray(ui.content[i].value, selectedItems) !== -1) {
                ui.content[i].disabled = true;
            } else {
                ui.content[i].disabled = false;
            }
        }
    },

    getSelectedValues: function ()
    {
        var selectedValues = $('input[name="' + this.options.valueElementId + '[]"]').map(function() {
            return ($(this).val()) ? $(this).val() : null;
        }).toArray();

        return selectedValues;
    },

    addToList: function (value, title)
    {
        $('#' + this.options.valueElementId + '-list').append(
            '<li id="' + this.options.valueElementId + '-id-' + value +'">'
            + title
            + '<a class="delete-link" id="delete-id-' + value + '" href="#" onclick="return Qs_Form_Element_MultiDataAutocomplete.prototype.deleteItem(\'' + this.options.valueElementId + '\',' + value + ');"><i class="fa fa-times"></i></a>'
            + '</li>'
        );
    },

    deleteItem: function (valueElementId, value)
    {
        $('#' + valueElementId + '-id-' + value ).remove();
        Qs_Form_Element_MultiDataAutocomplete.prototype.deleteFromValues(valueElementId, value);
        return false;
    },

    addToValues: function (value)
    {
        $('input[name="' + this.options.valueElementId + '[]"]').last().after('<input type="hidden" name="vendors[]" value="' + value +'">');
    },

    deleteFromValues: function (valueElementId, value)
    {
        $('input[name="' + valueElementId + '[]"][value="' + value + '"]').remove();
    },

    getAutocompleteSource: function () {
        if (undefined === this._autocompleteSource) {
            var source;
            if (this.options.dataUrl) {
                source = this.options.dataUrl;
            }
            this._autocompleteSource = source;
        }
        return this._autocompleteSource;
    },

    getAutocompleteOptions: function () {
        var options = {}, i, length, name, callback,
            allowedOptions = ['autoFocus', 'delay', 'minLength', 'position'],
            allowedCallbacks = ['search', 'open', 'focus', 'select', 'close', 'change'];

        for (i = 0, length = allowedOptions.length; i < length; ++i) {
            name = allowedOptions[i];
            if (undefined !== this.options[name]) {
                options[name] = this.options[name];
            }
        }

        for (i = 0, length = allowedCallbacks.length; i < length; ++i) {
            name = allowedCallbacks[i];
            if (undefined !== this.options[name] && 'function' === typeof (callback = qs.variable(name))) {
                options[name] = callback;
            }
        }
        return options;
    }
};