function display_options(clicked_id, the_id, agent_id)
{
	// clear each li of its style
	var liArray = document.getElementsByClassName('category_option');
	var arLen=liArray.length;
	for ( var i=0, len=arLen; i<len; ++i )
	{
		if ( liArray[i].id == "selected" )
		{
			liArray[i].id = (i+1);
		}
		if( document.getElementById(clicked_id).id == liArray[i].id )
			var selected_obj = liArray[i];
	}

	// set this id to selected
	document.getElementById(clicked_id).id = 'selected';
	var category_id = selected_obj.title;

	// register the selection
	register_activity('category', the_id, agent_id)

	var divArray = document.getElementsByClassName('sub_category_options_div');
	var divArLen=divArray.length;
	for ( var i=0, leng=divArLen; i<leng; ++i )
	{
		var str = divArray[i].id;
		var id_parts = str.split("_", 5);
		var id_number = id_parts[4];

		// display the selected category's options.
		document.getElementById(divArray[i].id).style.display = ( id_number == the_id ) ? 'block' : 'none';
	}
}