// File: registration.js
// Requires: prototype.js

var RegistrationController = Class.create();

RegistrationController.prototype = {
    isIE : (navigator.userAgent.indexOf("MSIE") != -1),
    
    initialize : function() {
        this.submitted = false;
        this.nextFieldListener = this.handleNextField.bindAsEventListener(this); // cached listener
        Event.observe(window, "load", this.onPageLoad.bindAsEventListener(this), this);
    },

    onPageLoad : function(e)
    {
        var elt, list;

        var listInputs = new Array(
            "username",
            "password1",
            "password2",
            "fn",
            "ln",
            "email",
            "gender",
            "birthYear",
            "birthDay",
            "birthMonth",
            "country",
            "zip",
            "areacode",
            "cellprefix",
            "cellsuffix",
            "recaptcha_response_field"
        );
        // Active field CSS Class Setters
        for(i = 0; i < listInputs.length; i++) {
            if((elt = $(listInputs[i])) != null) {
                Event.observe(elt, 'focus', this.handleSetActiveField.bindAsEventListener(this), false);
                Event.observe(elt, 'blur', this.handleUnsetActiveField.bindAsEventListener(this), false);
            }
        }
        // Bubbles Controler
        if (!(typeof BubblesController === "undefined") && BubblesController) {
        new BubblesController(
            {idTarg : "password1" , idBubble : "password1Help" , eventOn : "focus" , eventOff : "blur"},
            {idTarg : "password2" , idBubble : "password2Help" , eventOn : "focus" , eventOff : "blur"},
            {idTarg : "fn" , idBubble : "fnHelp" , eventOn : "focus" , eventOff : "blur"},
            {idTarg : "ln" , idBubble : "lnHelp" , eventOn : "focus" , eventOff : "blur"},
            {idTarg : "email" , idBubble : "emailHelp" , eventOn : "focus" , eventOff : "blur"},
            {idTarg : "zip" , idBubble : "zipHelp" , eventOn : "focus" , eventOff : "blur"},
            {idTarg : "birthYear" , idBubble : "birthHelp" , eventOn : "focus" , eventOff : "blur"},
            {idTarg : "birthDay" , idBubble : "birthHelp" , eventOn : "focus" , eventOff : "blur"},
            {idTarg : "birthMonth" , idBubble : "birthHelp" , eventOn : "focus" , eventOff : "blur"},
            {idTarg : "areacode" , idBubble : "cellHelp" , eventOn : "focus" , eventOff : "blur"},
            {idTarg : "cellprefix" , idBubble : "cellHelp" , eventOn : "focus" , eventOff : "blur"},
            {idTarg : "cellsuffix" , idBubble : "cellHelp" , eventOn : "focus" , eventOff : "blur"},
            {idTarg : "recaptcha_response_field" , idBubble : "wordHelp" , eventOn : "focus" , eventOff : "blur"}
        );
        }
        // Plugin close X link event handler
        if((elt = $$("#pluginRegErrorPanel A.closebox")) != null && elt.length > 0){
            elt = elt[0];
            Event.observe(elt, "click", this.handleClosePluginErrorPanel.bindAsEventListener(this), false);
        }
        // Plugin back button
        if ((elt = $("pluginBack")) != null) {
            Event.observe(elt, "click", this.handlePluginBack.bindAsEventListener(this), false);
        }
        // Cell Number Next Field Jump Handler
        if((elt = $("areacode")) != null){
            this.validateCellNumber();
        
            Event.observe(elt, "keyup", this.nextFieldListener, false);
            // remove listener if user tabs in/out of cell fields
            Event.observe(elt, "keypress", this.handleTabKeyPress.bindAsEventListener(this), false);
            Event.observe(elt, "blur", this.validateCellNumber.bindAsEventListener(this), false);
        }
        if((elt = $("cellprefix")) != null){
            Event.observe(elt, "keyup", this.nextFieldListener, false);
            // remove listener if user tabs in/out of cell fields
            Event.observe(elt, "keypress", this.handleTabKeyPress.bindAsEventListener(this), false);
            Event.observe(elt, "blur", this.validateCellNumber.bindAsEventListener(this), false);
        }
        if((elt = $("cellsuffix")) != null){
            // remove listener if user tabs in/out of cell fields
            Event.observe(elt, "keypress", this.handleTabKeyPress.bindAsEventListener(this), false);
            Event.observe(elt, "blur", this.validateCellNumber.bindAsEventListener(this), false);
        }

        // set focus to first error or first (default) field
        if((errorlist = $$(".firstError")) != null && errorlist.length > 0){
            error = errorlist[0];
            Field.focus(error);
        } else {
            if ((firstlist = $$(".firstField")) != null && firstlist.length > 0) {
                first = firstlist[0];
                Field.focus(first);
            }
        }
        
        var obj = $('formRegAcctInfo');
        if(obj) Event.observe(obj,"submit",this.onSubmit.bindAsEventListener(this));
        
        return true;
    },
    handleSetActiveField:function(evnt)
    {
        var elt = Event.element(evnt);
        if (!(this.isIE && elt.nodeName == "SELECT") &&
             (elt && elt.nodeName != "#document")) {
            Element.addClassName(elt, 'activeInput');
        }
        return true;
    },
    
    handleUnsetActiveField:function(evnt)
    {
        var elt = Event.element(evnt);
        if (!(this.isIE && elt.nodeName == "SELECT") &&
             (elt && elt.nodeName != "#document")) {
            Element.removeClassName(elt, 'activeInput');
        }
        return true;
    },
    handleClosePluginErrorPanel : function(evnt) {
        Element.hide("pluginRegErrorPanel");
        if ((tableElt = $("pluginReg2Table")) != null) {
            tableElt.style.visibility = "visible";
        }
    },
    handlePluginBack: function(evnt) {
        $("step").value -= 1;
        $("back").value = 1;
        $("formReg").submit();
    },
    validateCellNumber : function(evnt)
    {
        var areacode = $('areacode').value;
        var cellprefix = $('cellprefix').value;
        var cellsuffix = $('cellsuffix').value;
    },
    isValid : function(number, expectedLength)
    {
        var strValidChars = "0123456789";
        if(number.length != expectedLength){
            return false;
        }
        for(i = 0; i < expectedLength; i++){
            strChar = number.charAt(i);
            if(strValidChars.indexOf(strChar) == -1){
                return false;
            }
        }
        return true;
    },

    handleNextField : function(evnt)
    {
        var elt = Event.element(evnt), id = elt.id;
        var listNextCellField = { areacode : "cellprefix", cellprefix : "cellsuffix"};
        var listMaxLength = { areacode : 3, cellprefix : 3, cellsuffix : 4};

        if(typeof(id) != "undefined" && elt.value.length == listMaxLength[id]){
            var idNextFld = listNextCellField[id];

            if(typeof(idNextFld) != "undefined" && idNextFld && $(idNextFld).value == ""){
                Field.focus(idNextFld);
            }
        }
        return true;
    },
    
    handleTabKeyPress : function(evnt) {
        var code;
        if (!evnt) var evnt= window.event;
        if (evnt.keyCode) code = evnt.keyCode;
        else if (evnt.which) code = evnt.which;
        if (code == Event.KEY_TAB) {
            Event.stopObserving($("areacode"), "keyup", this.nextFieldListener, false)
            Event.stopObserving($("cellprefix"), "keyup", this.nextFieldListener, false)
        }
        
    },
    
    onSubmit: function(evt) {
        if (this.submitted) {
            Event.stop(evt);
        } else {
            this.submitted = true;
            Element.writeAttribute($('submit'),"disabled","true");
    }
    }
};

// *********************** Implementation ***********************
new RegistrationController();