[#macro checkbox name="" width="50%"  source={}  hiddenValue="" showValue=""]
<style type="text/css">
	ul{list-style:none;}
	.AutoComplete_Container{}
	.AutoComplete_Content{ position:absolute; padding:5px 40px 5px 12px; display:none; width:auto; max-width:${width}; overflow:scroll; background-color:#f1f1f1; border:1px solid #d0d0d0; }
	.AutoComplete_Content li{ margin:5px 7px; color:#444444; line-height:24px; }
	.AutoComplete_Content input{ padding-left:10px;}
</style>
<script type="text/javascript">
    	$(function(){
    		var _${name}_content = $("#_${name}_content");
    		var _${name}_txt = $("#_${name}");
    		_${name}_txt.focus(function(){
    			_${name}_content.show();
    			$(".AutoComplete_Content").each(function(){
    				if(this.id != "_${name}_content"){
    					$(this).hide();
    				}
    			});
    		});
    		
    		_${name}_txt.click(function(){
    			return false;
    		});
    		
    		_${name}_content.click(function(event){
				event.stopPropagation();
    		});
    		
    		$(document).click(function(){
    			_${name}_content.hide();
    		});
    		
    		var eles = document.getElementsByName("_${name}_chb");
    		for(var i=0;i<eles.length;i++){
    			$(eles[i]).click(function(){
    				var val = "";
    				for(var j=0;j<eles.length;j++){
    					if(eles[j].checked == true){
    						val += $(eles[j]).next("label").html() +",";
    					}
    				}
    				document.getElementById("_${name}").focus();
    				document.getElementById("_${name}").value = val;  
    			});
    		}
    	});
    </script>
<div class="AutoComplete_Container" id="AutoComplete_Container">
 	<input readonly="readonly" class="input-text" style="width:${width};" value="${showValue}" type="text" name="_${name}" id="_${name}" />
<div class="AutoComplete_Content" id="_${name}_content">
	<ul>
	[#if FreeMarkerUtil.isSimpleHash(source)]
		[#list source?keys as key]
			<li><input type="checkbox" name="_${name}_chb" id="_${name}_${key_index}" value="${key}" [#if hiddenValue?contains(key)]checked="checked"[/#if] /><label for="_${name}_${key_index}">${source[key]}</label></li>
		[/#list]
	[#else]
		[#list source.keySet() as key]
			<li><input type="checkbox" name="_${name}_chb" id="_${name}_${key_index}" value="${key}" [#if hiddenValue?contains(key)]checked="checked"[/#if] /><label for="_${name}_${key_index}">${source.get(key)}</label></li>
		[/#list]
	[/#if]
	</ul>
</div>
 </div>
[/#macro]