function avatarSelected(theNewAvatarName, theHiddenFieldName, radioButtonName) {
    //
    // The hidden field with its name stored in "theHiddenFieldName" stores the name of the
    // currently selected avatar (for instance, "bunny.jpg") or is null if there is no currently
    // selected avatar.
    //
    // First we have to "un-highlight" the currently selected avatar.
    //
    hiddenFieldObj = getDivFromName(theHiddenFieldName);
    if( hiddenFieldObj.value != null)
    {
        avatarImageObj=getDivFromName('avatar_'+hiddenFieldObj.value);
        if (avatarImageObj != null)
        {
            avatarImageObj.className = "highlight_off";
            avatarImageObj.style.borderWidth = "1px";
        }
    }
    
    // Now let's highlight the selected avatar.
    avatarImageObj=getDivFromName('avatar_'+theNewAvatarName);
	if (avatarImageObj != null)
    {
        avatarImageObj.className = "highlight_on";
        avatarImageObj.style.borderWidth = "3px";
    }
    hiddenFieldObj.value = theNewAvatarName;
    
    // Finally select button
    radioButtonObj = getDivFromName(radioButtonName);
    radioButtonObj.checked = true;
    
}