#set ($fontlist = $searcherManager.getList($catalogid, "fonts") )
	
	<style>
		.${detail.id}-style {
			#if($val) font-family: $val; #end
		}
	</style>
	
	<table>
		<tr>
			<td>
				<table style="width:342px; ">
					<tr>
						<td style="vertical-align:middle;">
							<select id="${detail.id}-fontselector" class="fontselector" rel="${detail.id}-target" #if($val) style="font-family: $val;" #end>
							#foreach ($font in $fontlist)
							 	<option style="font-family: ${font.name}" value="${font.name}" #if($val == $font.name) selected #end>$font.fontname</option>
							#end
							</select>
						</td>
					</tr>
				</table>
			</td>
			<td>
				<div id="${detail.id}-target" class="${detail.id}-style">AaBbCc</div>
			</td>
		</tr>
	</table>
	
	<input name="${detail.getId()}.value" id="${detail.id}" value="$!value" type="hidden" />
	
	<script type="text/javascript">
	$(function() {
		$("#${detail.id}-fontselector").change(function(e) {
			var target = $(this).attr('rel');
			var style = $(this).attr('value');
			$(this).css('fontFamily', style);
			$("#"+target).css('fontFamily', style);
			$("#${detail.id}").attr('value',style);
			return false;
		});
	});
	</script>