<script language="text/javascript">
    var form = $('frmRegister');
    var btn = form['btnDoReg'];
    var theForm = $('theContent').innerHTML;
    Event.observe(btn, 'click', function(event) {
        event.stop();
        var inp = form.getInputs('text');
        inp = inp.concat(form.getInputs('password'));
        for( x = 0; x < inp.length; x++ ) {
            inp[x].setStyle({
                backgroundColor: '#FFFFFF'
            });
        }
        if(form['mk_reg_user'].getValue() == "") {
            form['mk_reg_user'].setStyle({
                backgroundColor: '#FF6666'
            });
            alert("Please enter your desired username.");
            form['mk_reg_user'].focus();
        }
        else if(form['mk_reg_pwd1'].getValue() == "") {
            form['mk_reg_pwd1'].setStyle({
                backgroundColor: '#FF6666'
            });
            alert("Please enter your desired password.");
            form['mk_reg_pwd1'].focus();
        }
        else if(form['mk_reg_pwd2'].getValue() == "") {
            form['mk_reg_pwd2'].setStyle({
                backgroundColor: '#FF6666'
            });
            alert("Please confirm your password.");
            form['mk_reg_pwd2'].focus();
        }
        else if(form['mk_reg_pwd1'].getValue() != form['mk_reg_pwd2'].getValue()) {
            form['mk_reg_pwd1'].setStyle({
                backgroundColor: '#FF6666'
            });
            form['mk_reg_pwd2'].setStyle({
                backgroundColor: '#FF6666'
            });
            alert("Passwords do not match.");
            form['mk_reg_pwd1'].focus();
        }
        else if(form['mk_reg_email'].getValue() == "") {
            form['mk_reg_email'].setStyle({
                backgroundColor: '#FF6666'
            });
            alert("Please enter your e-mail address.");
            form['mk_reg_email'].focus();
        }
        else {
            new Ajax.Request('register.php', {
                method: 'post',
                parameters: form.serialize(),
                onCreate: function(t) {
                    $('theButton').innerHTML = "<br/><img src=\"ui/images/ajax/loading.gif\" alt=\"loading\" /><br/>Please Wait<br/><br/>";
                },
                onFailure: function(t) {
                },
                onSuccess: function(t) {
                    switch(t.responseText) {
                        case "INVALID_USER_LEN":
                            dispError("Username must be between 5 and 25 characters.");
                        break;
                        case "INVALID_PASS_LEN":
                            dispError("Password must be between 8 and 25 characters.");
                        break;
                        case "INVALID_EMAIL":
                            dispError("Invalid e-mail address.");
                        break;
                        case "USERNAME_TAKEN":
                            dispError("Username already taken.");
                        break;
                        case "EMAIL_TAKEN":
                            dispError("E-mail address is already in use.");
                        break;
                        case "MAIL_ERROR":
                            dispError("Mail error.  Please try again later.");
                        break;
                        case "SQL_ERROR":
                            dispError("SQL error.  Please try again later.");
                        break;
                        default:
                            $('theContent').innerHTML = "<div align=\"center\">Your account has been sucessfully registered.  Please check your e-mail for instructions on activating your account.";
                        break;
                    }
                }
            });
        }
    });
    function dispError(err) {
        $('theErrors').innerHTML = "<strong>" + err + "</strong>";
        $('theButton').innerHTML = "<br/><input type=\"submit\" id=\"btnDoReg\" name=\"btnDoReg\" value=\"  Register  \"><br/><br/>";
    }
</script>
<div id="theContent">
    <div id="theErrors" align="center">&nbsp;</div>
    <form id="frmRegister" action="#" method="post">
        <table border="0" width="100%" height="100%">
            <tr valign="middle">
                <td width="250px" align="left">Username:</td>
                <td align="left"><input type="text" id="mk_reg_user" name="mk_reg_user"></td>
            </tr>
            <tr valign="middle">
                <td width="250px" align="left">Password:</td>
                <td align="left"><input type="password" id="mk_reg_pwd1" name="mk_reg_pwd1"></td>
            </tr>
            <tr valign="middle">
                <td width="250px" align="left">Confirm Password:</td>
                <td align="left"><input type="password" id="mk_reg_pwd2" name="mk_reg_pwd2"></td>
            </tr>
            <tr valign="middle">
                <td width="250px" align="left">E-mail Address:</td>
                <td align="left"><input type="text" id="mk_reg_email" name="mk_reg_email"></td>
            </tr>
            <tr valign="middle">
                <td colspan="2" align="center" width="100%" id="theButton"><br/><input type="submit" id="btnDoReg" name="btnDoReg" value="  Register  "><br/><br/></td>
            </tr>
        </table>
    </form>
</div>