// File: reg-usernamesuggest.js
// Requires: prototype.js, (bubbles.js)

// *********************** Class Definition ***********************
UsernameSuggest = Class.create();

UsernameSuggest.prototype = {

    //******* State Code Constants ******
    CLOSED_PANE : 0,
    INIT_PANE : 1,
    USERNAME_TAKEN_SUGGESTIONS : 2,
    USERNAME_TAKEN_NOSUGGESTIONS : 3,
    USERNAME_OK : 4,
    //**** End: State Code Constants ****

    bXmlHttpEnabled : false,
    bEnableAjaxHandlers : false,
    strLastUsernameChecked : "",
    bUsernameTaken : false,
    bSuggestionWindowOpen : false,

    eltForm : null,
    eltUsername : null,
    eltPassword : null,
    eltSuggestionContainer : null,
    eltSuggestionContent : null,

    eltMssgSuggestions :null,
    eltMssgNoSuggestions :null,
    eltListSuggestions : null,

    // New Stuff
    bLastUsernameError : false,
    bEnableUsernameCheckOnBlur : true,
    bUsernameOkOrBlank : true,


    strListSuggestionsID : "listSuggestions", // Since the element is not persistent (Created and destroyed), can only store the id.

    initialize: function()
    {
        Event.observe(window, "load", this.onPageLoad.bindAsEventListener(this), this);
    },
    onPageLoad : function(evnt)
    {
        var elt, i, list;

        this.bXmlHttpEnabled = window.XMLHttpRequest || window.ActiveXObject;

        this.bEnableAjaxHandlers = this.bXmlHttpEnabled;

        // *** Id Strings of Persistent Elements ***
        var strSuggestionContentID = "containerUsernameContent";


        // *** Persistent Element Assigns ***
        this.eltForm = $("formRegUnPw")

        this.eltSuggestionContainer = $("panelUsernameSuggest");


        // Get Content Div & Enable/Disable Username check
        if(this.eltSuggestionContainer){
            if((elt = $$("#" + this.eltSuggestionContainer.id + " .bubble_content")) != null && elt.length > 0){
                this.eltSuggestionContent = elt[0];
            }
            // Close X link event handler
            if((elt = $$("#" + this.eltSuggestionContainer.id + " A.closebox")) != null && elt.length > 0){
                elt = elt[0];
                Event.observe(elt, "click", this.handleCloseSuggestPane.bindAsEventListener(this), false);
            }

            // Enable username check
            Event.observe(this.eltSuggestionContainer, "mouseover", this.handleDisableUsernameCheck.bindAsEventListener(this), true);
            Event.observe(this.eltSuggestionContainer, "mouseout", this.handleEnableUsernameCheck.bindAsEventListener(this), true);
        }

        this.eltUsername = $("username");
        this.eltPassword = $("password1");
        this.eltMssgSuggestions = $("mssgSuggestions");
        this.eltMssgNoSuggestions = $("mssgNoSuggestions");

        this.eltListSuggestions = $(this.strListSuggestionsID); // Username Suggestion list

        // *** Event Handler Assigns ***

        // Ajax username suggestions handlers
        if(this.bEnableAjaxHandlers){
            // Username Textbox (open suggestion pane)
            Event.observe(this.eltUsername, "blur", this.handleUsernameCheck.bindAsEventListener(this), true);
        }

        // Close Suggestion Pane if any form input other than username gets focus
        if (this.eltForm) {
            var listTemp = Form.getElements(this.eltForm);
    
            for(var i = 0; i < listTemp.length; i++){
                if(listTemp[i].id != "username"){
                    Event.observe(listTemp[i], "focus", this.handleCloseSuggestPane.bindAsEventListener(this), false);
                }
            }
        }
        if ($("submit")) {
            Event.observe($("submit"), "mousedown", this.handleCloseSuggestPane.bindAsEventListener(this), false);
        }

        // Assign Username suggestion link handlers, if list was created serverside
        if(this.eltListSuggestions){
            this.attachClickHandlersToUsernameLinks();
            Field.activate(this.eltUsername);
            this.bSuggestionWindowOpen = true;
        }

        return true;
    },
    handleUsernameCheck : function(evnt)
    {
        if(this.bEnableUsernameCheckOnBlur){

            var usernameToCheck = this.trim(this.eltUsername.value);

            if(usernameToCheck && (usernameToCheck != this.strLastUsernameChecked)){// || this.bLastUsernameError
                // Ajax API Request
                new APIRequest('isusernameavailable', true, { username: usernameToCheck }, this.checkUsernameOnSuccess.bind(this));
            }
            this.strLastUsernameChecked = usernameToCheck;
        }

        return true;
    },
    handleEnableUsernameCheck : function(evnt)
    {
        this.bEnableUsernameCheckOnBlur = true;
        return true;
    },
    handleDisableUsernameCheck : function(evnt)
    {
        this.bEnableUsernameCheckOnBlur = false;
        return true;
    },
    getUsernameOk : function()
    {
        return this.bUsernameOkOrBlank;
    },
    getUsernameNotOk : function()
    {
        return !this.bUsernameOkOrBlank;
    },
    trim : function(str)
    {
        var i = 0, j = str.length - 1, strRes = "";

        while(i < str.length && str.charAt(i) == " ") i++;
        while(j > i && str.charAt(j) == " ") j--;

        return str.substring(i, j + 1);
    },
    setSuggestionPanelState : function(code)
    {
        switch(code){
            case this.INIT_PANE:
                Element.show(this.eltMssgSuggestions);
                break;
            case this.USERNAME_TAKEN_SUGGESTIONS:
                Element.hide(this.eltMssgSuggestions);
                break;
            case this.USERNAME_TAKEN_NOSUGGESTIONS:
                Element.hide(this.eltMssgSuggestions);
                break;
            case this.USERNAME_OK:
                Element.hide(this.eltMssgSuggestions);
                break;
        }
    },
    handleCloseSuggestPane : function(evnt)
    {
        var elt = Event.element(evnt);

        if(elt != this.eltUsername){
            if(Element.visible(this.eltSuggestionContainer)){
                this.bUsernameOkOrBlank = true;
            }
            this.closeSuggestionPane();
        }
        return true;
    },
    closeSuggestionPane : function()
    {
        Element.hide(this.eltSuggestionContainer);
        this.bSuggestionWindowOpen = false;
    },
    checkUsernameOnSuccess: function(response)
    {
        var nMaxSuggestLen = this.eltUsername.value.length;

        var nPanelState = this.CLOSED_PANE;

        if(parseInt(response.available) != 1){    // Username is not available
            this.bLastUsernameError = true;
            this.bUsernameOkOrBlank = false;

            var suggestionHTML = "";

            // Construct link list
            for(var i = 0; response.suggestions && i < response.suggestions.length; i++){
                suggestionHTML += '<li><a href="javascript:void(0);" id="linkSuggest' + (i + 1) + '">' + response.suggestions[i].suggestion + '</a></li>' +"\n";

                if(nMaxSuggestLen < response.suggestions[i].suggestion.length){
                    nMaxSuggestLen = response.suggestions[i].suggestion.length;
                }
            }

            // Remove Previous Suggestion List, if it exists.
            if((this.eltListSuggestions = $(this.strListSuggestionsID)) != null){
                Element.remove(this.eltListSuggestions);
            }
            // Construct suggestion list
            if(suggestionHTML){
                suggestionHTML = '<ul id="' + this.strListSuggestionsID + '">' + suggestionHTML + '</ul>';

                if(this.eltSuggestionContent){
                    Element.insert(this.eltSuggestionContent, suggestionHTML);
                }

                this.eltListSuggestions = $(this.strListSuggestionsID);// Retrieve this elt again after insertion into the document

                this.attachClickHandlersToUsernameLinks();    // Attach event handler to username suggestions links
                Element.show(this.eltMssgSuggestions);
                Element.hide(this.eltMssgNoSuggestions);

            }
            else{
                nPanelState = this.USERNAME_TAKEN_NOSUGGESTIONS;
                Element.hide(this.eltMssgSuggestions);
                Element.show(this.eltMssgNoSuggestions);
            }

            Element.show(this.eltSuggestionContainer);
            //Field.focus(this.eltUsername);
            Element.hide($("password1Help"));
            Element.addClassName(this.eltUsername, 'hilightError');

            this.bUsernameTaken = true;
        }
        else{
            this.bUsernameOkOrBlank = true;
        }
    },
    attachClickHandlersToUsernameLinks : function()
    {
        if(this.eltListSuggestions){
            var listSuggestionLinks = this.eltListSuggestions.getElementsByTagName("A");

            for(var i = 0; listSuggestionLinks && i < listSuggestionLinks.length; i++){
                listSuggestionLinks[i].onclick = this.handleAltUsernameSelection.bindAsEventListener(this);
            }
        }
    },
    handleUsernameChange : function(evnt)
    {
        this.eltSuggestionContainer.style.width = "";

        if(this.bSuggestionWindowOpen){ // && this.strLastUsernameChecked != this.eltUsername.value
            this.setSuggestionPanelState(this.INIT_PANE);
        }
        return true;
    },
    handleAltUsernameSelection : function(evnt)
    {
        var elt = Event.findElement(evnt, "A");

        var strUsername = elt.innerHTML;

        this.eltUsername.value = strUsername;

        this.closeSuggestionPane();
        Field.focus(this.eltPassword);
        this.bUsernameOkOrBlank = true;

        return false;
    }
};

// *********************** Implementation ***********************
new UsernameSuggest();