$(document).ready(function(){



	$('#membershipApplication input:radio').click(function() {

		// find the parent td of the selected radio button
		var parentTd = $(this).parents('td');
		
		// destroy any instances of div.extraMembers that aren't in parentTd 
		$('#membershipApplication td').not(parentTd).find('div.extraMembers').slideUp('normal', function() { $(this).remove() });
		// remove font highlighting form the not if it's not in parentTd
		$('#membershipApplication td').not(parentTd).find('div.note').css( { fontWeight: 'normal', color: '#888' } );
		
		// check to see if extraMembers is already active for the current radio button
		var presence = parentTd.children('div.extraMembers').length;
	
		// if it's not...
		if ( ($(this).attr('class') == 'bonusMembers' ) && (presence == 0 ) ) {
			
			var extraFields = '<div><label for="member2">2nd member  name:</label><input name="member2" type="text" id="member2" /></div><div><label for="member2address">2nd member mailing address:</label><textarea id="member2address" name="member2address" rows="5" cols="10"></textarea></div><div><label for="member3">3rd member name:</label><input name="member3" type="text" id="member3" /></div><div><label for="member3address">3rd member mailing address:</label><textarea id="member3address" name="member3address" rows="5" cols="10"></textarea></div>'
			// create it...	
			var extraMembers = document.createElement('div');
			// class it...
			extraMembers.className = 'extraMembers';
			// add it to the parent...
			parentTd.append(extraMembers);
			// highlight its note...
			parentTd.find('div.note').css( { fontWeight: 'bold', color: 'red' } );
			// append the extra fields...
			extraMembers.innerHTML = extraFields;
			// and show it...
			$(extraMembers).slideDown();
		}

	});


}); // main docready