Prototype: How to switch from drop down list to Radio buttons with variables as Value
 

HI,

I have working code a friend did for me that creates an array and builds a select option (drop down list). Based on the option choosen in the drop list three images change. This basically picking a theme for you page:
An Avatar, header image and background image.

The option select works but I want change the drop list to radio buttons.
How would I change the ChangeAvatar function (pasted below) to recognize input from a radio button and update when the radio's button selection changed?


Any help very appreciated!!!

The javascript is using the prototype framework. Links and posted code snippet below.

Here are links to sample pages:
Working dropdown list:
http://fuzzbert.org/change_test.html

This is the sample set up I would like but does not work:
http://fuzzbert.org/change_test_radio.html

The part that call the drop down list is here:

//will be called when the avatar drop list changes
function changeAvatar(avatarNum) {

//get the element that was selected
var selectedAvatarNum = $('avatarDropList')[$('avatarDropList').selectedIndex].value;

var tempAvatar = avatars[selectedAvatarNum];
var imgFolders = 'images/themes';
//change the porthole image
$('portholeAvatar').src = imgFolders + "/" + tempAvatar.porthole_img; //<img id="portholeAvatar">...
//console.debug($('portholeAvatar').src);
//change the header image
$('headerContainerImage').setStyle({backgroundImage:'url(' + imgFolders + '/' + tempAvatar.banner_img +')'});

//change the banner
$('avatarImg').src = imgFolders + "/" + tempAvatar.header_img;

console.debug($('avatarImg').src);
}


//will be run automatically when page loads. it builds the select/option drop list under the porthole.
function populateAvatarDropList() {

//loop through avatar array of objects
for(var i = 0; i< avatars.length; i++) {
//create <option> tag
var tempOption = document.createElement("option");
tempOption.value = i; //set <option value=???> ??? is the current avatar number from array
tempOption.innerHTML = avatars[i].name + " (" + avatars[i].gender + ")"; //display name and gender of avatar within <option>???</option> tag

$('avatarDropList').appendChild(tempOption); //command to put <option> tag into <select> list

}

//auto select chronox female, array number of chronox female is 2
$('avatarDropList').options[2].selected =true;
}


//the onload event
window.onload = function() {
populateAvatarDropList();
}

//on change event listener for avatar drop list. will run changeAvatar function above
//Event.observe($('avatarDropList'), 'change', changeAvatar);