{AJAXCONTENT}

<!-- <script type="text/javascript" src="{JSDIR}/jquery-1.3.2.min.js"></script> -->
<script type="text/javascript" src="{JSDIR}/jquery.collapsibleCheckboxTree.js"></script>
<link rel="stylesheet" href="{SKINS}CSS/jquery.collapsibleCheckboxTree.css" type="text/css" />

<table  width="100%" align="center" border="0">
		<tr>
			<td  valign="top" height="450px" align="center" width="25%">
<table bgcolor="#CDB38B"  cellspacing="2" height="550px" width="90%" cellpadding="3" style="border-collapse:collapse;border:1px solid {TABLEBORDERCOLOR}" >
<tr>
<td >
<div id="check">

<ul id="example">
    <li>
      <input type="checkbox" name="" />
    <B> ZONE</B>
      <ul>
	  <!-- BEGIN dbvalues -->
        <li>
        <input type="checkbox" name="zone" value="{ZONEID}" onclick="zonengineer(this.value); showMe('zonal_engineer{ZONEID}',this)"/><font color="BLUE">{ZONE}</font>
				<div id="zonal_engineer{ZONEID}"></div>
			<ul>
			<li>
				<input type="checkbox" name="" />
				<B>Constituency</B>
				<ul>
					<!-- BEGIN CONSTITUENCY -->
					<li>
						<input type="checkbox" name="constituency" value="{CONSTITUENCYID}" /><font color="GREEN">{CONSTITUENCY}</font>
					<ul>
						<li>
							<input type="checkbox" name="" />
							<B>	Division</B>
						<ul>
						<!-- BEGIN DIVISION -->
						<li>
						<input type="checkbox" name="division" value="{DIVISIONID}" onclick="divengineer(this.value); showMe('div_engineer{DIVISIONID}',this)"/><font color="#8A084B">{DIVISION}</font>
						<div id="div_engineer{DIVISIONID}"></div>
						<ul>
							<li>
								<input type="checkbox" name="" />
									<B>SubDivision</B>
								<ul>
								<!-- BEGIN SUBDIVISION -->
								<li>
									<input type="checkbox" name="subdivision" value="{SUBDIVISIONID}" onclick="subdivengineer(this.value); showMe('subdiv_engineer{SUBDIVISIONID}',this)"/><font color="#8A4B08">{SUBDIVISION}
										<div id="subdiv_engineer{SUBDIVISIONID}"></div>
										<ul>
											<li>
												<input type="checkbox" name="" />
													<B>WARD</B>
														<ul>
															<!-- BEGIN WARD -->
																<li>
																	<input type="checkbox" name="ward" value="{WARDID}" onclick="wengineer(this.value);showMe('ward_engineer{WARDID}',this)" /><font color="#0B3861">{WARDNAME}</font>
																	<div id="ward_engineer{WARDID}"></div>
																</li>	
															<!-- END WARD -->
														</ul>
																	
											</li>
										</ul>
								</li>
								<!-- END SUBDIVISION -->
								</ul>
							</li>
						</ul>
						
						</li>
						<!-- END DIVISION -->
						</ul>
						</li>
					</ul>
					
					
					</li>
					<!-- END CONSTITUENCY -->
				</ul>
			</li>
			</ul>
		
		</li>
		<!-- END dbvalues -->	
      </ul>
    </li>
   
    
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>


<script>
jQuery(document).ready(function(){
		$('ul#example').collapsibleCheckboxTree();
});



function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;

}
</script>