var currentAvatar = null

function initAvatar() { 
  if( $('#txtAvatarId').val() != '' ) { 
    var av = 'avatar_' + $('#txtAvatarId').val()
    selectAvatar( document.getElementById(av) ); 
  }
  
  $('img').each(function(index) {
    var el = this
    if(el.id && el.id.substring(0,6)== 'avatar') {
      el.onclick = function() { selectAvatar(this); }
      if(!currentAvatar) { selectAvatar(el); }
    }
  });
}

function selectAvatar(avatar) {
  if (avatar != currentAvatar) {
    if(currentAvatar) {
      currentAvatar.className = '';
    }
    currentAvatar = avatar
    currentAvatar.className = 'selected';
    $('#txtAvatarId').val(avatar.id.substring(7));
  }
  return false;
}
    

// startup
$(document).ready(function() { initAvatar() });