/**
 * RealTown Signup Form
 * Client-side form validation
 * 
 */

function initClientSideVerification()
{
    var domLoaded = function(event)
    {
        // Username Availability
        if ($('username')) {
            var button = document.createElement('INPUT');
            button.setAttribute('type', 'button');
            button.setAttribute('value', 'Check Availability');
            button.style.marginLeft = '4px';
            //button.disabled = true;
            //$('username').up().appendChild(button);
            $('username').insert({after: button});
    
            // result
            var result = document.createElement('SPAN');
            result.style.marginLeft = '4px';
            //$('username').up().appendChild(result);
            $(button).insert({after: result});
            
            
            var checkingUsername = false;
            var checkUsernameAvailability = function(event) {
                if (checkingUsername) return;
                checkingUsername = true;
                var username = $('username').value;
                var regex = /[^a-zA-Z0-9]+/;
                
                var clearResult = function() {
                    if ($(result).hasClassName('red')) $(result).removeClassName('red');
                    if ($(result).hasClassName('green')) $(result).removeClassName('green');
                    //$(result).removeClassName();
                    $(result).innerHTML = '';
                }
                
                var setResult = function(value, classname) {
                    clearResult();
                    $(result).innerHTML = value;
                    if (typeof(classname) != 'undefined' && !$(result).hasClassName(classname)) $(result).addClassName(classname);
                }
                
                // Client-side validation
    
                if (!username.length) {
                    checkingUsername = false;
                    setResult('Please provide a username!', 'red');
                    return;
                }
                
                if (username.length < 4) {
                    checkingUsername = false;
                    setResult('Username too short!', 'red');
                    return;
                }
                
                if (username.length > 40) {
                    checkingUsername = false;
                    setResult('Username too long!', 'red');
                    return;
                }
                
                if (regex.test(username)) {
                    checkingUsername = false;
                    setResult('Username may only contain letters and numbers (no spaces)!', 'red');
                    return;
                }
                
                var usernameSuccessHandler = function(t) {
                    json = t.responseText.evalJSON(true);
                    checkingUsername = false;
                    setResult(json.result, json.classname);
                }
                
                var usernameFailureHandler = function(t) {
                    checkingUsername = false;
                    alert('Error ' + t.status + ' -- ' + t.statusText);
                }
                
                var postData = 'username=' + encodeURIComponent(username);
                postData += '&format=json';
                
                clearResult();
                setResult('Checking availability...');
                
                new Ajax.Request('/members/auth/check-username-availability', {
                    method:     'post',
                    postBody:   postData,
                    onSuccess:  usernameSuccessHandler,
                    onFailure:  usernameFailureHandler
                });
            }
            
            
            Event.observe(button, 'click', checkUsernameAvailability);
            Event.observe($('username'), 'blur', checkUsernameAvailability);
        }
        
        
        // Passwords must match
        if ($('password') && $('password_confirm')) {
            var resultPassword = document.createElement('span');
            resultPassword.style.marginLeft = '4px';
            $('password').insert({after: resultPassword});
            
            var resultConfirmation = document.createElement('span');
            resultConfirmation.style.marginLeft = '4px';
            $('password_confirm').insert({after: resultConfirmation});
            
            var clearResult = function(element) 
            {
                if ($(element).hasClassName('red')) $(element).removeClassName('red');
                if ($(element).hasClassName('green')) $(element).removeClassName('green');
                $(element).update();
            }
            
            var setResult = function(value, classname, element) 
            {
                if (typeof(element) == 'undefined') var element = resultPassword;
                clearResult(element);
                $(element).update(value);
                if (typeof(classname) != 'undefined' && !$(element).hasClassName(classname)) $(element).addClassName(classname);
            }
            
            var validatePassword = function(event)
            {
                var password = $('password').getValue();
                
                if (!$('password').present()) {
                    setResult('Please create a password', 'red');
                    return;
                }
                
                if (password.length < 6) {
                    setResult('Password must be at least 6 characters in length', 'red');
                    return;
                }
                
                if (password.length > 40) {
                    setResult('Password cannot exceed 40 characters in length', 'red');
                    return;
                }
                
                setResult('Password length is OK!', 'green');
            }
            
            var verifyPasswordConfirmation = function(event)
            {
                var password = $('password').getValue();
                var confirm = $('password_confirm').getValue();
                
                if (!$('password_confirm').present()) {
                    setResult('Please confirm your password', 'red', resultConfirmation);
                    return;
                }
                
                if (password != confirm) {
                    setResult('Passwords do not match', 'red', resultConfirmation);
                    return;
                }
                
                setResult('Passwords match!', 'green', resultConfirmation);
            }
            
            $('password').observe('blur', validatePassword);
            $('password').observe('keydown', validatePassword);
            $('password').observe('keyup', validatePassword);
            
            $('password_confirm').observe('blur', verifyPasswordConfirmation);
            $('password_confirm').observe('keydown', verifyPasswordConfirmation);
            $('password_confirm').observe('keyup', verifyPasswordConfirmation);
        }
        
        
        
        if ($('strStateID') && $('strCountryCode')) {
            var checkUsaCountry = function(event) {
                //alert('value: ' + $('strCountryCode').value);
                if ($('strCountryCode').value != 'US') {
                    $('strStateID').value = 0;
                    $('strStateID').disabled = true;
                } else {
                    $('strStateID').disabled = false;
                }
            }
            
            checkUsaCountry();
            
            Event.observe($('strCountryCode'), 'change', checkUsaCountry);
        }
        
        if ($('country') && $('state')) {
            var checkUsaCountry = function(event) {
                //alert('value: ' + $('strCountryCode').value);
                if ($('country').value != 'US') {
                    $('state').value = 'none';
                    $('state').disable();
                } else {
                    $('state').enable();
                }
            }
            
            checkUsaCountry();
            
            Event.observe($('country'), 'change', checkUsaCountry);
        }
    }
    
    document.observe('dom:loaded', domLoaded);
}

initClientSideVerification();