/* Simple autocomplete for text inputs, with the support for multiple selection.

   Homepage: http://yourcmc.ru/wiki/SimpleAutocomplete
   License: MPL 2.0+ (http://www.mozilla.org/MPL/2.0/)
   (c) Vitaliy Filippov 2011-2012

   Usage:
     Include hinter.css, hinter.js on your page. Then write:
     var hint = new SimpleAutocomplete(input, dataLoader, multipleDelimiter, onChangeListener, maxHeight, emptyText, allowHTML);

   Parameters:
     input
       The input, either id or DOM element reference (the input must have an id anyway).
     dataLoader(hint, value)
       Callback which should load autocomplete options and then call
       hint.replaceItems([ [ name, value ], [ name, value ], ... ])
       'hint' parameter will be this autocompleter object, and the guess
       should be done based on 'value' parameter (string).

   Optional parameters:
     multipleDelimiter
       Pass a delimiter string (for example ',' or ';') to enable multiple selection.
       Item values cannot have leading or trailing whitespace. Input value will consist
       of selected item values separated by this delimiter plus single space.
       dataLoader should handle it's 'value' parameter accordingly in this case,
       because it will be just the raw value of the input, probably with incomplete
       item or items, typed by the user.
     onChangeListener(hint, index)
       Callback which is called when input value is changed using this dropdown.
       index is the number of element which selection is changed, starting with 0.
       It must be used instead of normal 'onchange' event.
     maxHeight
       Maximum hint dropdown height in pixels
     emptyText
       Text to show when dataLoader returns no options.
       If emptyText === false, the hint will be hidden instead of showing text.
     allowHTML
       If true, HTML code will be allowed in option names.
*/

// *** Constructor ***

var SimpleAutocomplete = function(input, dataLoader, multipleDelimiter, onChangeListener, maxHeight, emptyText, allowHTML)
{
    if (typeof(input) == 'string')
        input = document.getElementById(input);
    if (emptyText === undefined)
        emptyText = 'No items found';

    // Parameters
    this.input = input;
    this.multipleDelimiter = multipleDelimiter;
    this.dataLoader = dataLoader;
    this.onChangeListener = onChangeListener;
    this.maxHeight = maxHeight;
    this.emptyText = emptyText;
    this.allowHTML = allowHTML;

    // Variables
    this.closure = [];
    this.items = [];
    this.skipHideCounter = 0;
    this.selectedIndex = -1;
    this.id = input.id;
    this.disabled = false;

    // *** Call initialise ***
    this.init();
};

// *** Instance methods ***

// Initialiser
SimpleAutocomplete.prototype.init = function()
{
    var e = this.input;
    var p = getOffset(e);

    // Create hint layer
    var t = this.hintLayer = document.createElement('div');
    t.className = 'hintLayer';
    t.style.display = 'none';
    t.style.position = 'absolute';
    t.style.top = (p.top+e.offsetHeight) + 'px';
    t.style.zIndex = 1000;
    t.style.left = p.left + 'px';
    if (this.maxHeight)
    {
        t.style.overflowY = 'scroll';
        try { t.style.overflow = '-moz-scrollbars-vertical'; } catch(exc) {}
        t.style.maxHeight = this.maxHeight+'px';
        if (!t.style.maxHeight)
            this.scriptMaxHeight = true;
    }
    document.body.appendChild(t);

    // Remember instance
    e.SimpleAutocomplete_input = this;
    t.SimpleAutocomplete_layer = this;
    SimpleAutocomplete.SimpleAutocompletes.push(this);

    // Set event listeners
    var self = this;
    var ie_opera = navigator.userAgent.match('MSIE') || navigator.userAgent.match('Opera');
    if (ie_opera)
        this.addRmListener('keydown', function(ev) { return self.onKeyPress(ev); });
    else
    {
        this.addRmListener('keydown', function(ev) { return self.onKeyDown(ev); });
        this.addRmListener('keypress', function(ev) { return self.onKeyPress(ev); });
    }
    this.addRmListener('keyup', function(ev) { return self.onKeyUp(ev); });
    this.addRmListener('change', function() { return self.onChange(); });
    this.addRmListener('focus', function() { return self.onInputFocus(); });
    this.addRmListener('blur', function() { return self.onInputBlur(); });
    addListener(t, 'mousedown', function(ev) { return self.cancelBubbleOnHint(ev); });
    this.onChange();
};

// obj = [ [ name, value, disabled ], [ name, value ], ... ]
SimpleAutocomplete.prototype.replaceItems = function(items)
{
    this.hintLayer.innerHTML = '';
    this.hintLayer.scrollTop = 0;
    this.items = [];
    if (!items || items.length == 0)
    {
        if (this.emptyText)
        {
            var d = document.createElement('div');
            d.className = 'hintEmptyText';
            d.innerHTML = this.emptyText;
            this.hintLayer.appendChild(d);
        }
        else
            this.disable();
        return;
    }
    this.enable();
    var h = {};
    if (this.multipleDelimiter)
    {
        var old = this.input.value.split(this.multipleDelimiter);
        for (var i = 0; i < old.length; i++)
            h[old[i].trim()] = true;
    }
    for (var i in items)
        this.hintLayer.appendChild(this.makeItem(items[i][0], items[i][1], h[items[i][1]]));
    if (this.maxHeight)
    {
        this.hintLayer.style.height =
            (this.hintLayer.scrollHeight > this.maxHeight
            ? this.maxHeight : this.hintLayer.scrollHeight) + 'px';
    }
};

// Add removable listener (remember the function)
SimpleAutocomplete.prototype.addRmListener = function(n, f)
{
    this.closure[n] = f;
    addListener(this.input, n, f);
};

// Remove instance ("destructor")
SimpleAutocomplete.prototype.remove = function()
{
    if (!this.hintLayer)
        return;
    this.hintLayer.parentNode.removeChild(this.hintLayer);
    for (var i in this.closure)
    {
        removeListener(this.input, i, this.closure[i]);
    }
    for (var i = 0; i < SimpleAutocomplete.SimpleAutocompletes.length; i++)
    {
        if (SimpleAutocomplete.SimpleAutocompletes[i] == this)
        {
            SimpleAutocomplete.SimpleAutocompletes.splice(i, 1);
            break;
        }
    }
    this.closure = {};
    this.input = null;
    this.hintLayer = null;
    this.items = null;
};

// Create a drop-down list item, include checkbox if this.multipleDelimiter is true
SimpleAutocomplete.prototype.makeItem = function(name, value, checked)
{
    var d = document.createElement('div');
    d.id = this.id+'_item_'+this.items.length;
    d.className = 'hintItem';
    d.title = value;
    if (this.allowHTML)
        d.innerHTML = name;
    if (this.multipleDelimiter)
    {
        var c = document.createElement('input');
        c.type = 'checkbox';
        c.id = this.id+'_check_'+this.items.length;
        c.checked = checked && true;
        c.value = value;
        if (d.childNodes.length)
            d.insertBefore(c, d.firstChild);
        else
            d.appendChild(c);
        addListener(c, 'click', this.preventCheck);
    }
    if (!this.allowHTML)
        d.appendChild(document.createTextNode(name));
    var self = this;
    addListener(d, 'mouseover', function() { return self.onItemMouseOver(this); });
    addListener(d, 'mousedown', function(ev) { return self.onItemClick(ev, this); });
    this.items.push([name, value, checked]);
    return d;
};

// Move highlight forward or back by 'by' items (integer)
SimpleAutocomplete.prototype.moveHighlight = function(by)
{
    var n = this.selectedIndex+by;
    if (n < 0)
        n = 0;
    var elem = document.getElementById(this.id+'_item_'+n);
    if (!elem)
        return true;
    return this.highlightItem(elem);
};

// Make item 'elem' active (highlighted)
SimpleAutocomplete.prototype.highlightItem = function(elem)
{
    if (this.selectedIndex >= 0)
    {
        var c = this.getItem();
        if (c)
            c.className = 'hintItem';
    }
    this.selectedIndex = parseInt(elem.id.substr(this.id.length+6));
    elem.className = 'hintActiveItem';
    return false;
};

// Get index'th item, or current when index is null
SimpleAutocomplete.prototype.getItem = function(index)
{
    if (index == null)
        index = this.selectedIndex;
    if (index < 0)
        return null;
    return document.getElementById(this.id+'_item_'+this.selectedIndex);
};

// Select index'th item - change the input value and hide the hint if not a multi-select
SimpleAutocomplete.prototype.selectItem = function(index)
{
    if (!this.multipleDelimiter)
    {
        this.input.value = this.items[index][1];
        this.hide();
    }
    else
    {
        document.getElementById(this.id+'_check_'+index).checked = this.items[index][2] = !this.items[index][2];
        var old = this.input.value.split(this.multipleDelimiter);
        for (var i = 0; i < old.length; i++)
            old[i] = old[i].trim();
        if (!this.items[index][2])
        {
            for (var i = old.length-1; i >= 0; i--)
                if (old[i] == this.items[index][1])
                    old.splice(i, 1);
            this.input.value = old.join(this.multipleDelimiter+' ');
        }
        else
        {
            var h = {};
            for (var i = 0; i < this.items.length; i++)
                if (this.items[i][2])
                    h[this.items[i][1]] = true;
            var nl = [];
            for (var i = 0; i < old.length; i++)
            {
                if (h[old[i]])
                {
                    delete h[old[i]];
                    nl.push(old[i]);
                }
            }
            for (var i = 0; i < this.items.length; i++)
                if (this.items[i][2] && h[this.items[i][1]])
                    nl.push(this.items[i][1]);
            this.input.value = nl.join(this.multipleDelimiter+' ');
        }
    }
    this.curValue = this.input.value;
    if (this.onChangeListener)
        this.onChangeListener(this, index);
};

// Hide hinter
SimpleAutocomplete.prototype.hide = function()
{
    if (!this.skipHideCounter)
    {
        this.hintLayer.style.display = 'none';
        this.input.autocomplete = 'on';
    }
    else
        this.skipHideCounter = 0;
};

// Show hinter
SimpleAutocomplete.prototype.show = function()
{
    if (!this.disabled)
    {
        var p = getOffset(this.input);
        this.hintLayer.style.top = (p.top+this.input.offsetHeight) + 'px';
        this.hintLayer.style.left = p.left + 'px';
        this.hintLayer.style.display = '';
        this.input.autocomplete = 'off';
    }
};

// Disable hinter, for the case when there is no items and no empty text
SimpleAutocomplete.prototype.disable = function()
{
    this.disabled = true;
    this.hide();
};

// Enable hinter
SimpleAutocomplete.prototype.enable = function()
{
    var show = this.disabled;
    this.disabled = false;
    if (show)
        this.show();
}

// *** Event handlers ***

// Prevent default action on checkbox
SimpleAutocomplete.prototype.preventCheck = function(ev)
{
    ev = ev||window.event;
    return stopEvent(ev, false, true);
};

// Cancel event propagation
SimpleAutocomplete.prototype.cancelBubbleOnHint = function(ev)
{
    ev = ev||window.event;
    if (this.hasFocus)
        this.skipHideCounter++;
    return stopEvent(ev, true, false);
};

// Handle item mouse over
SimpleAutocomplete.prototype.onItemMouseOver = function(elm)
{
    return this.highlightItem(elm);
};

// Handle item clicks
SimpleAutocomplete.prototype.onItemClick = function(ev, elm)
{
    this.selectItem(parseInt(elm.id.substr(this.id.length+6)));
    return true;
};

// Handle user input, load new items
SimpleAutocomplete.prototype.onChange = function()
{
    var v = this.input.value.trim();
    if (v != this.curValue)
    {
        this.curValue = v;
        this.dataLoader(this, v);
    }
    return true;
};

// Handle Enter key presses, cancel handling of arrow keys
SimpleAutocomplete.prototype.onKeyUp = function(ev)
{
    ev = ev||window.event;
    if (ev.keyCode == 38 || ev.keyCode == 40)
        this.show();
    if (ev.keyCode == 38 || ev.keyCode == 40 || ev.keyCode == 10 || ev.keyCode == 13)
    {
        if (this.hintLayer.style.display == '')
            return stopEvent(ev, true, true);
        else
            return true;
    }
    this.onChange();
    return true;
};

// Cancel handling of Enter key
SimpleAutocomplete.prototype.onKeyDown = function(ev)
{
    ev = ev||window.event;
    if (ev.keyCode == 10 || ev.keyCode == 13)
    {
        if (this.hintLayer.style.display == '')
            return stopEvent(ev, true, true);
        else
            return true;
    }
    return true;
};

// Handle arrow keys and Enter
SimpleAutocomplete.prototype.onKeyPress = function(ev)
{
    if (this.hintLayer.style.display == 'none')
        return true;
    ev = ev||window.event;
    if (ev.keyCode == 38) // up
        this.moveHighlight(-1);
    else if (ev.keyCode == 40) // down
        this.moveHighlight(1);
    else if (ev.keyCode == 10 || ev.keyCode == 13) // enter
    {
        if (this.selectedIndex >= 0)
            this.selectItem(this.selectedIndex);
        return stopEvent(ev, true, true);
    }
    else if (ev.keyCode == 27) // escape
    {
        this.hide();
        return stopEvent(ev, true, true);
    }
    else
        return true;
    // scrolling
    if (this.selectedIndex >= 0)
    {
        var c = this.getItem();
        var t = this.hintLayer;
        var ct = getOffset(c).top + t.scrollTop - t.style.top.substr(0, t.style.top.length-2);
        var ch = c.scrollHeight;
        if (ct+ch-t.offsetHeight > t.scrollTop)
            t.scrollTop = ct+ch-t.offsetHeight;
        else if (ct < t.scrollTop)
            t.scrollTop = ct;
    }
    return stopEvent(ev, true, true);
};

// Called when input receives focus
SimpleAutocomplete.prototype.onInputFocus = function()
{
    if (this.disabledUntil)
        this.enable();
    this.show();
    this.input.autocomplete = 'off';
    this.hasFocus = true;
    return true;
};

// Called when input loses focus
SimpleAutocomplete.prototype.onInputBlur = function()
{
    this.hide();
    this.input.autocomplete = 'on';
    this.hasFocus = false;
    return true;
};

// *** Global variables ***

// List of all instances
SimpleAutocomplete.SimpleAutocompletes = [];

// Global mousedown handler, hides dropdowns when clicked outside
SimpleAutocomplete.GlobalMouseDown = function(ev)
{
    var target = ev.target || ev.srcElement;
    var esh;
    while (target)
    {
        esh = target.SimpleAutocomplete_input;
        if (esh)
            break;
        else if (target.SimpleAutocomplete_layer)
            return true;
        target = target.parentNode;
    }
    for (var i in SimpleAutocomplete.SimpleAutocompletes)
        if (SimpleAutocomplete.SimpleAutocompletes[i] != esh)
            SimpleAutocomplete.SimpleAutocompletes[i].hide();
    return true;
};

// *** UTILITY FUNCTIONS ***
// Remove this section if you already have these functions defined somewhere else

// Cross-browser add/remove event listeners
var addListener = function()
{
    return window.addEventListener
        ? function(el, type, fn) { el.addEventListener(type, fn, false); }
        : function(el, type, fn) { el.attachEvent('on'+type, fn); };
}();

var removeListener = function()
{
    return window.removeEventListener
        ? function(el, type, fn) { el.removeEventListener(type, fn, false); }
        : function(el, type, fn) { el.detachEvent('on'+type, fn); };
}();

// Cancel event bubbling and/or default action
var stopEvent = function(ev, cancelBubble, preventDefault)
{
    if (cancelBubble)
    {
        if (ev.stopPropagation)
            ev.stopPropagation();
        else
            ev.cancelBubble = true;
    }
    if (preventDefault && ev.preventDefault)
        ev.preventDefault();
    ev.returnValue = !preventDefault;
    return !preventDefault;
};

// Remove leading and trailing whitespace
if (!String.prototype.trim)
{
    String.prototype.trim = function()
    {
        return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    };
}

// Get element position, relative to the top-left corner of page
var getOffset = function(elem)
{
    if (elem.getBoundingClientRect)
        return getOffsetRect(elem);
    else
        return getOffsetSum(elem);
};

// Get element position using getBoundingClientRect()
var getOffsetRect = function(elem)
{
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docElem = document.documentElement;

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
    var clientTop = docElem.clientTop || body.clientTop || 0;
    var clientLeft = docElem.clientLeft || body.clientLeft || 0;
    var top = box.top + scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
};

// Get element position using sum of offsetTop/offsetLeft
var getOffsetSum = function(elem)
{
    var top = 0, left = 0;
    while(elem)
    {
        top = top + parseInt(elem.offsetTop);
        left = left + parseInt(elem.offsetLeft);
        elem = elem.offsetParent;
    }
    return { top: top, left: left };
};

// *** END UTILITY FUNCTIONS ***

// Set global mousedown listener
addListener(window, 'load', function() { addListener(document, 'mousedown', SimpleAutocomplete.GlobalMouseDown) });