function draw_auth_box(o)
{
    var html = '<div>';
    html += '<div id="authtype">';
    html += '<input type="radio" name="authtyperadio" id="auth_login" checked="CHECKED" onclick="draw_auth_box_opts()"/> Login&nbsp;';
    html += '<input type="radio" name="authtyperadio" id="auth_register" onclick="draw_auth_box_opts()"/> Register<br/>';
    html += '</div>';
    html += '<div id="authmessages">';
    html += '</div>';
    html += '<div id="autherrors">';
    html += '</div>';
    html += '<div id="auth_login_opts">';
    html += '<table border="0" style="text-align:left">';
    html += '    <tr>';
    html += '        <td>Username/Email:</td>';
    html += '        <td><input type="text" id="auth_login_user" name="username" style="width:200px" maxlength="100"/></td>';
    html += '    </tr>';
    html += '    <tr>';
    html += '        <td>Password:</td>';
    html += '        <td><input type="password" id="auth_login_pass" name="password" style="width:200px" onkeydown="if(event.keyCode==13) perform_login()"/></td>';
    html += '    </tr>';
    html += '    <tr>';
    html += '        <td colspan="2" align="center"><input type="button" style="width:100px" onclick="perform_login()" value="Continue"/>&nbsp;<input type="button" style="width:100px" onclick="login_canceled()" value="Cancel"/></td>';
    html += '    </tr>';
    html += '</table>';
    html += '</div>';
    html += '<div id="auth_register_opts" style="display:none">';
    html += '<table border="0" style="text-align:left">';
    html += '    <tr>';
    html += '        <td>Email address:</td>';
    html += '        <td><input type="text" id="auth_register_email1" name="email1" style="width:200px" maxlength="100"/></td>';
    html += '    </tr>';
    html += '    <tr>';
    html += '        <td>Email address to verify:</td>';
    html += '        <td><input type="text" id="auth_register_email2" name="email2" style="width:200px" maxlength="100"/></td>';
    html += '    </tr>';
    html += '    <tr>';
    html += '        <td>Username:</td>';
    html += '        <td><input type="text" id="auth_register_username" name="username" style="width:200px" maxlength="16" onkeydown="if(event.keyCode==13) perform_registration()"/></td>';
    html += '    </tr>';
    html += '    <tr>';
    html += '        <td colspan="2" align="center"><input type="button" style="width:100px" onclick="perform_registration()" value="Continue"/>&nbsp;<input type="button" style="width:100px" onclick="login_canceled()" value="Cancel"/></td>';
    html += '    </tr>';
    html += '</table>';
    html += '</div>';
    html += '<div id="auth_confirm_register_opts" style="display:none">';
    html += '<table border="0" style="text-align:left">';
    html += '    <tr>';
    html += '        <td>Password:</td>';
    html += '        <td><input type="password" id="auth_confirm_register_password" name="password" style="width:200px" onkeydown="if(event.keyCode==13) perform_confirm_registration()"/></td>';
    html += '    </tr>';
    html += '    <tr>';
    html += '        <td colspan="2" align="center"><input type="button" style="width:100px" onclick="perform_confirm_registration()" value="Continue"/>&nbsp;<input type="button" style="width:100px" onclick="login_canceled()" value="Cancel"/></td>';
    html += '    </tr>';
    html += '</table>';
    html += '</div>';
    html += '</div>';

    o.innerHTML = html;
}

function draw_auth_box_opts()
{
    get('autherrors').innerHTML = '';
    var is_auth = get('auth_login').checked;
    get('auth_login_opts').style.display = is_auth ? '' : 'none';
    get('auth_register_opts').style.display = !is_auth ? '' : 'none';
    get('auth_confirm_register_opts').style.display = 'none';
    if (is_auth)
        get('auth_login_user').focus();
    else
        get('auth_register_email1').focus();
}

function perform_registration()
{
    get('autherrors').innerHTML = '';
    var email1 = _trim(get('auth_register_email1').value);
    var email2 = _trim(get('auth_register_email2').value);
    if (email1 == '')
    {
        autherror('Please enter your email address');
        return;
    }
    if (email2 == '')
    {
        autherror('Please confirm your email address');
        return;
    }
    if (email1 != email2)
    {
        autherror('Email addresses should match');
        return;
    }
    var filter  = /^[^@]+@(([a-zA-Z0-9\-])+\.)+([a-zA-Z]{2,4})+$/;
    if (!filter.test(email1))
    {
        autherror('Invalid email address specified');
        return;
    }
    var username = _trim(get('auth_register_username').value);
    if (username == '')
    {
        autherror('Please choose your ImageShack username');
        return;
    }
    filter  = /^[a-zA-Z][a-zA-Z0-9_]*$/;
    if (!filter.test(username))
    {
        autherror('Invalid username specified, it should start with letter and contain only letters, digits and underscore');
        return;
    }
    var callback =
    {
        success:  on_registration_ok,
        failure:  on_registration_fail,
        argument: [username, email1]
    };
    var data = 'email=' + encodeURIComponent(email1) + '&username=' + encodeURIComponent(username);
    YAHOO.util.Connect.asyncRequest('POST', '/quickreg.php', callback, data, null);
}

function perform_confirm_registration()
{
    get('autherrors').innerHTML = '';
    var pass = _trim(get('auth_confirm_register_password').value);
    if (pass == '')
    {
        autherror('Please enter password received by email');
        return;
    }
    var callback =
    {
        success:  on_auth_login_ok,
        failure:  on_auth_login_fail,
        argument: [false]
    };
    var data = 'username=' + encodeURIComponent(_trim(get('auth_register_username').value)) + '&password=' + encodeURIComponent(pass);
    YAHOO.util.Connect.asyncRequest('POST', '/auth.php', callback, data, null);
}

function on_registration_ok(rsp)
{
    var txt = rsp.responseText;
    if (txt == 'ok')
    {
        get('authmessages').innerHTML = 'Please enter password received in registration confirmation in order to continue';
        get('auth_login_opts').style.display = 'none';
        get('auth_register_opts').style.display = 'none';
        get('auth_confirm_register_opts').style.display = '';
        get('auth_confirm_register_password').focus();
    }
    else
    if (txt.indexOf('fail:') == 0)
    {
        txt = txt.substring(5);
        autherror('Registration failed:\n' + txt);
    }
    else
        on_registration_fail(rsp);
}

function on_registration_fail(rsp)
{
    autherror('Registration failed: internal server error. Please try again later');
}

function perform_login()
{
    get('autherrors').innerHTML = '';
    var username = _trim(get('auth_login_user').value);
    var password = _trim(get('auth_login_pass').value);
    if (username == '')
    {
        autherror('Please enter your username/email address');
        return;
    }
    if (password == '')
    {
        autherror('Please enter your password');
        return;
    }
    var callback =
    {
        success:  on_auth_login_ok,
        failure:  on_auth_login_fail,
        argument: [true]
    };
    var data = 'username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password);
    YAHOO.util.Connect.asyncRequest('POST', '/auth.php', callback, data, null);
}

function on_auth_login_ok(rsp)
{
    if (rsp.responseText == 'OK')
    {
        paint_login_box(true);
        login_complete();
        return;
    }
    else
        on_auth_login_fail(rsp);
}

function on_auth_login_fail(rsp)
{
    if (rsp.argument[0])
        autherror('Authentication failed, please check your username/email and password entered');
    else
        autherror('Authentication failed, please check password entered');
}

function _trim(str)
{
    return str.replace(/^\s+|\s+$/g,'');
}

function autherror(s)
{
    get('autherrors').innerHTML = s;
}