﻿// images
var IMG_URL_UNCHECK = 'images2/icon_uncheck2.png';
var IMG_URL_CHECK = 'images2/icon_check2.png';
var IMG_URL_BLANK = 'images2/icon_no_check.png';
var IMG_URL_WAITING = 'images2/icon_waiting_arrow.gif';

// validation constants
var MIN_LENGTH_PASSWORD = 6;
var MIN_LENGTH_USERNAME = 4;

var userContextHolder;

function checkUserNameAvailable()
{
    hideCallout('divCalloutUserName');
    
    var elementUserName = document.getElementById('ctl00_ContentPlaceHolder1_txtUserName');
    var errorElementId = document.getElementById('ctl00_ContentPlaceHolder1_lblErrorUserName');
    if(errorElementId.innerHTML == '')
    {
        if(elementUserName.value != '')
        {
            document.getElementById('ctl00_ContentPlaceHolder1_imgUserName').src = IMG_URL_WAITING;
            errorElementId.innerHTML = STR_CHECK_AVAILABLE;
            errorElementId.className = 'validate_message';
            
            elementUserName.disabled = true;
            var sName = elementUserName.value;
            WebScriptServices.CheckUserName(sName, onSuccess, onFailed, userContextHolder);
        }
        else
        {
            var elementError = document.getElementById('ctl00_ContentPlaceHolder1_lblErrorUserName');
            var elementImage = document.getElementById('ctl00_ContentPlaceHolder1_imgUserName');
            elementError.innerHTML = STR_CANNOT_BE_EMPTY; 
            elementImage.src = IMG_URL_UNCHECK;
            elementImage.alt = STR_CANNOT_BE_EMPTY;
        }
    }
}

function onSuccess(result, userContextHolder, sender)
{
    var elementUserName = document.getElementById('ctl00_ContentPlaceHolder1_txtUserName');
    elementUserName.disabled = false;
    if(result != null)
    {
        var sName = elementUserName.value;
        var elementId = document.getElementById('ctl00_ContentPlaceHolder1_lblErrorUserName');
        if(result.IsDuplicate == true)
        {
            document.getElementById('ctl00_ContentPlaceHolder1_imgUserName').src = IMG_URL_UNCHECK;
            elementId.innerHTML = '\'' + sName + '\' ' + STR_TAKEN;
            elementId.className = 'validate_failure';
        }
        else
        {
            document.getElementById('ctl00_ContentPlaceHolder1_imgUserName').src = IMG_URL_CHECK;
            elementId.innerHTML = '\'' + sName + '\' ' + STR_AVAILBLE;
            elementId.className = 'validate_success';
        }
    }
}

function onFailed(result)
{
    var elementUserName = document.getElementById('ctl00_ContentPlaceHolder1_txtUserName');
    elementUserName.disabled = false;
    var elementId = document.getElementById('ctl00_ContentPlaceHolder1_lblErrorUserName');
    elementId.className = 'validate_message';
    document.getElementById('ctl00_ContentPlaceHolder1_imgUserName').src = IMG_URL_BLANK;
}

function validateForm()
{
    var bIsValidUserName = checkUserName('UserName');
    var bIsValidEmail = checkEmail('Email');
    var bIsValidPassword = checkPassword('Password');
    var bIsValidCountry = checkCountry('Country');
    
    if(!bIsValidUserName || 
        !bIsValidEmail ||
        !bIsValidPassword || 
        !bIsValidCountry)
    {
        return false;
    }
    
    return true;
}

function checkUserName(sElementPostfix)
{
    var sElementId = 'ctl00_ContentPlaceHolder1_txt' + sElementPostfix;
    var sErrorElementId = 'ctl00_ContentPlaceHolder1_lblError' + sElementPostfix;
    var sImageElementId = 'ctl00_ContentPlaceHolder1_img' + sElementPostfix;
    
    var sValue = document.getElementById(sElementId).value;
    var elementError = document.getElementById(sErrorElementId);
    var elementImage = document.getElementById(sImageElementId);
    
    var sExpression = /\W/;
    var myRegxp = new RegExp(sExpression); // (only allow alpha, numeric, and underscores)
    
    elementError.className = 'validate_failure';
    
    if(sValue == '')
    {
        elementError.innerHTML = STR_CANNOT_BE_EMPTY; 
        elementImage.src = IMG_URL_UNCHECK;
        elementImage.alt = STR_CANNOT_BE_EMPTY;
        return false;
    }
    if(sValue.length < MIN_LENGTH_USERNAME)
    {
        elementError.innerHTML = STR_MINIMUM_USERNAME_CHAR; 
        elementImage.src = IMG_URL_UNCHECK;
        elementImage.alt = STR_MINIMUM_USERNAME_CHAR;
        return false;
    }
    else if(myRegxp.test(sValue))
    {
        elementError.innerHTML = STR_INVALID_USERNAME_CHAR;
        elementImage.src = IMG_URL_UNCHECK;
        elementImage.alt = STR_INVALID_USERNAME_CHAR;
        return false;
    }
    else
    {
        elementError.innerHTML = '';
        elementImage.src = IMG_URL_CHECK;
        elementImage.alt = '';
        return true;
    }
}

function checkPassword(sElementPostfix)
{
    var sElementId = 'ctl00_ContentPlaceHolder1_txt' + sElementPostfix;
    var sErrorElementId = 'ctl00_ContentPlaceHolder1_lblError' + sElementPostfix;
    var sImageElementId = 'ctl00_ContentPlaceHolder1_img' + sElementPostfix;
    
    var sValue = document.getElementById(sElementId).value;
    var elementError = document.getElementById(sErrorElementId);
    var elementImage = document.getElementById(sImageElementId);
    
    if(sValue == '')
    {
        elementError.innerHTML = STR_CANNOT_BE_EMPTY; 
        elementImage.src = IMG_URL_UNCHECK;
        elementImage.alt = STR_CANNOT_BE_EMPTY;
        return false;
    }
    if(sValue.length < MIN_LENGTH_PASSWORD)
    {
        elementError.innerHTML = STR_MINIMUM_PASSWORD_CHAR; 
        elementImage.src = IMG_URL_UNCHECK;
        elementImage.alt = STR_MINIMUM_PASSWORD_CHAR;
        return false;
    }
    else
    {
        elementError.innerHTML = '';
        elementImage.src = IMG_URL_CHECK;
        elementImage.alt = '';
        return true;
    }
}

function checkEmail(sElementPostfix)
{
    var sElementId = 'ctl00_ContentPlaceHolder1_txt' + sElementPostfix;
    var sErrorElementId = 'ctl00_ContentPlaceHolder1_lblError' + sElementPostfix;
    var sImageElementId = 'ctl00_ContentPlaceHolder1_img' + sElementPostfix;
    
    var sValue = document.getElementById(sElementId).value;
    var elementError = document.getElementById(sErrorElementId);
    var elementImage = document.getElementById(sImageElementId);
    
    // regular expression to validate email
    var sExpression = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    var myRegxp = new RegExp(sExpression);
    
    if(sValue == '')
    {
        elementError.innerHTML = STR_CANNOT_BE_EMPTY; 
        elementImage.src = IMG_URL_UNCHECK;
        elementImage.alt = STR_CANNOT_BE_EMPTY;
        return false;
    }
    else if(!myRegxp.test(sValue))
    {
        elementError.innerHTML = STR_EMAIL_NOT_VALID; 
        elementImage.src = IMG_URL_UNCHECK;
        elementImage.alt = STR_EMAIL_NOT_VALID;
        return false;
    }
    else
    {
        elementError.innerHTML = '';
        elementImage.src = IMG_URL_CHECK;
        elementImage.alt = '';
        return true;
    }
}

function checkCountry(sElementPostfix)
{
    var sElementId = 'ctl00_ContentPlaceHolder1_ddn' + sElementPostfix;
    var sErrorElementId = 'ctl00_ContentPlaceHolder1_lblError' + sElementPostfix;
    var sImageElementId = 'ctl00_ContentPlaceHolder1_img' + sElementPostfix;
    
    var iSelectedIndex = document.getElementById(sElementId).selectedIndex;
    var elementError = document.getElementById(sErrorElementId);
    var elementImage = document.getElementById(sImageElementId);
    
    if(iSelectedIndex == 0)
    {
        elementError.innerHTML = STR_SELECT_COUNTRY; 
        elementImage.src = IMG_URL_UNCHECK;
        elementImage.alt = STR_SELECT_COUNTRY;
        return false;
    }
    else
    {
        elementError.innerHTML = '';
        elementImage.src = IMG_URL_CHECK;
        elementImage.alt = '';
        return true;
    }
}

function updateProgress()
{
    var oFirstName = document.getElementById('ctl00_ContentPlaceHolder1_txtFirstName');
    var oLastName = document.getElementById('ctl00_ContentPlaceHolder1_txtLastName');
    var oGender0 = document.getElementById('ctl00_ContentPlaceHolder1_rdoGender_0');
    var oGender1 = document.getElementById('ctl00_ContentPlaceHolder1_rdoGender_1');
    var oBirthYear = document.getElementById('ctl00_ContentPlaceHolder1_ddnBirthYear');
    var oPostalCode = document.getElementById('ctl00_ContentPlaceHolder1_txtPostalCode');
    var oMessage = document.getElementById('ctl00_ContentPlaceHolder1_txtMessage');
    var oPicture = document.getElementById('ctl00_ContentPlaceHolder1_filePicture');
    var oPercentage = document.getElementById('ctl00_ContentPlaceHolder1_lblProgressPercentage');
    var oProgress = document.getElementById('divProgress');
    
    var iBeginProgress = 90;
    var iIncreaseProgress = 30;
    var iTotalProgress = iBeginProgress;
    
    var iBeginPercentage = 30;
    var iIncreasePercentage = 10;
    var iTotalPercentage = iBeginPercentage;
    
    if(oFirstName.value.length > 0)
    {
        iTotalPercentage += iIncreasePercentage;
        iTotalProgress += iIncreaseProgress;
    }
    
    if(oLastName.value.length > 0)
    {
        iTotalPercentage += iIncreasePercentage;
        iTotalProgress += iIncreaseProgress;
    }
    
    if (oGender0.checked)
    {
        iTotalPercentage += iIncreasePercentage;
        iTotalProgress += iIncreaseProgress;
    }
    
    if (oGender1.checked)
    {
        iTotalPercentage += iIncreasePercentage;
        iTotalProgress += iIncreaseProgress;
    }
    
    if(oBirthYear.selectedIndex > 0)
    {
        iTotalPercentage += iIncreasePercentage;
        iTotalProgress += iIncreaseProgress;
    }
    
    if(oPostalCode.value.length > 0)
    {
        iTotalPercentage += iIncreasePercentage;
        iTotalProgress += iIncreaseProgress;
    }
    
    if(oMessage.value.length > 0)
    {
        iTotalPercentage += iIncreasePercentage;
        iTotalProgress += iIncreaseProgress;
    }

    if(oPicture.value.length > 0)
    {
        iTotalPercentage += iIncreasePercentage;
        iTotalProgress += iIncreaseProgress;
    }
    
    oPercentage.innerText = iTotalPercentage.toString();
    oProgress.style.width = iTotalProgress.toString() + 'px';
}