domReady(function(){
    // Make sure that the results popup is closed, to begin with
    hide( id("results") );

    // Keep track of which users have already been entered
    var doneUsers = {};
    
    // Keep track of which user is currently selected
    var curPos;
    
    // Watch for input in the entry field
    id("q").onkeypress = function(e){
        // Get all of the users in the result set
        var li = id("results").getElementsByTagName("li");
        
        // If the [TAB] or [Enter] keys are pressed
        if ( e.keyCode == 9 || e.keyCode == 13 ) {
            // Reset the list of current users
            loadDone();
            
            // If the currently selected user is not in the list of selcted
            // users, add it on to the input
            if ( !doneUsers[ curPos.id ] )
                addUser( curPos );
            
            // Stop the key from doing its normal action
            e.preventDefault();
            return false;
        
        // If the up key is presssed
        } else if ( e.keyCode == 38 )
            // Select the previous user, or the last user (if we're at the beginning)
            return updatePos( curPos.previousSibling || li[ li.length - 1 ] );
            
        // If the down key is pressed
        else if ( e.keyCode == 40 )
            // Select the next user, or the first user (if we're at the end)
            return updatePos( curPos.nextSibling || li[0] );
    };

    // Initialize the delayed input checks on our input
    delayedInput({
        // We're attaching to the input text field
        elem: id("q"),
        
        // We're going to start searching after only 1 character of input
        chars: 1,

        // When the text field loses focus, close the results popup
        focus: true,
        
        // Handle when the result popup should be opened up
        open: function(q,open){
            // Get the last word out of the comma-separated list of words
            var w = trim( q.substr( q.lastIndexOf(',')+1, q.length ) );

            // Make sure that we're dealing with a word, at least
            if ( w ) {
                // Show the loading spinner animation
                show( id("qloading") );

                // Make sure that no user is currently selected
                curPos = null;
                
                // Get the UL that holds all the results
                var results = id("results").lastChild;
                
                // And empty it out
                results.innerHTML = "";
                
                // Do a request for new data
                ajax({
                    // Do a simple GET request to the CGI script which
                    // returns an HTML block of LI elements
                    type: "GET",
                    url: "auto.cgi?q=" + w,
                    
                    // Watch for when the HTML comes back
                    onSuccess: function(html){
                        // Insert it in to the results UL
                        results.innerHTML = html;
                        
                        // And hide the loading animation
                        hide( id("qloading") );
                        
                        // Re-initalize the list of users that we've pulled in
                        loadDone();
                        
                        // Go through each of the returned users
                        var li = results.getElementsByTagName( "li" );
                        for ( var i = 0; i < li.length; i++ ) {
                            
                            // If we're already added the user, remove the LI for it
                            if ( doneUsers [ li[i].id ] )
                                results.removeChild( li[i--] );
                            
                            // Otherwise, bind some events to the user li
                            else {
                                
                                // Whenever the user mouses over the li,
                                // set it to be the currently hilighted user
                                li[i].onmouseover = function(){
                                    updatePos( this );
                                };
                                
                                // When the user is clicked
                                li[i].onclick = function(){
                                    // Add the user to the input
                                    addUser( this );
                                    
                                    // And focus back on the input again
                                    id("q").focus();
                                };
                            }
                        }
                        
                        // Go through the list of user li
                        li = results.getElementsByTagName( "li" );
    
                        // If there are no users left (we've added them all)
                        if ( li.length == 0 )
                            // Then hide the results
                            hide( id("results") );

                        else {
                        
                            // Add 'odd' classes to each of the remaining users
                            // to give them a striping
                            for ( var i = 1; i < li.length; i += 2 )
                                addClass( li[i], "odd" );
    
                            // Set the currently selected user to the first one
                            updatePos( li[0] );
                            
                            // And then show the results
                            show( id("results") );
                        }
                    }
                });
            }
        },
        
        // When the popup needs to be closed
        close: function(){
            // Hide the result set
            hide( id("results") );
        }
    });
    
    function trim(s) {
        return s.replace(/^\s+/,"").replace(/\s+$/, "");
    }

    // Change the hilite of the user that's currently selected
    function updatePos( elem ) {
        // Update the position to the currently selected element
        curPos = elem;
        
        // Get all the user li elements
        var li = id("results").getElementsByTagName("li");
        
        // Remove the 'cur' class from the currently selected one
        for ( var i = 0; i < li.length; i++ )
            removeClass( li[i], "cur" );
        
        // And add the hilite to the current user item
        addClass( curPos, "cur" );
        
        return false;
    }

    // Re-initialize the list of users that have already been
    // entered into the text input by the user
    function loadDone() {
        doneUsers = {};
        
        // Go through the list of users (separated by commas)
        var users = id("q").value.split(',');
        for ( var i = 0; i < users.length; i++ ) {
            
            // Save the username (as the key) in an object hash
            doneUsers[ trim( users[i].toLowerCase() ) ] = true;
        }
    }

    // Add a user to the input text field
    function addUser( elem ) {
        // The text value of the text input
        var v = id("q").value;
        
        // Add the user's name at the end of the end of the input
        // Making sure that its separated with the correct comma
        id("q").value =
            ( v.indexOf(',') >= 0 ? v.substr(0, v.lastIndexOf(',') + 2 ) : '' )
            + elem.id + ", ";
 
        // Add the username to the master list (avoids having
        // to completely re-load the list)
        doneUsers[ elem.id ] = true;
 
        // Remove the user li element
        elem.parentNode.removeChild( elem );
        
        // And hide the results list
        hide( id("results") );
    }
});