<script type="text/javascript">
	function setHeight () {
	    var workingArea = document.getElementById('UIWorkingArea');
	    var documentFormController = document.getElementById('UIDocumentFormController');
	    var selectDocForm = eXo.core.DOMUtil.findFirstDescendantByClass(documentFormController, "div", "UISelectDocumentForm");
	
	    if (selectDocForm) {
			//selectDocForm.style.height = documentFormController.offsetHeight + 'px';	    
	    	var page = eXo.core.DOMUtil.findFirstDescendantByClass(selectDocForm, "div", "PageAvailable");
	    	var view = eXo.core.DOMUtil.findFirstDescendantByClass(selectDocForm, "div", "SelectTemplateThumbnailView");
		        
			if (page) {
				if (parseInt(page.getAttribute('pageAvailable')) > 1) {
					if (view) {			
						view.style.height = workingArea.offsetHeight - page.offsetHeight - 20 + 'px';
					}
				}
			} else {
			  if (view) { 			
				view.style.height = workingArea.offsetHeight - 20 + 'px';
			  }
			}
	     }		
	}
</script>

<div id="$uicomponent.id" class="$uicomponent.id">
	<div class="SelectTemplateThumbnailView">
		<div class="SelectTemplateTitle" style="height:25px">
		  <div style="float:left"><%=_ctx.appRes("UISelectDocumentForm.label.selectTemplate")%></div>
		  <div title='<%=_ctx.appRes("UISelectDocumentForm.label.ThumbnailView")%>' class="ChangeThumbnailViewIcon" onclick="<%=uicomponent.event('ChangeView', 'ThumbnailView');%>"></div>
		  <div title='<%=_ctx.appRes("UISelectDocumentForm.label.ListView")%>' class="SelectedListViewIcon" onclick="<%=uicomponent.event('ChangeView', 'ListView');%>"></div>
		</div>
		<hr>
		<div class="SelectTemplateArea" style="padding-top:10px; padding-left:40px">	
			<% 
				def templates = uicomponent.getChildrenList();
				if (templates != null) {
				  for (int i = 0; i < templates.size(); i++) {
					  def label = templates.get(i);
					  def contentType = uicomponent.getContentType(label);
					  def actionLink = uicomponent.event("SelectTemplate", contentType);
					  def cssClass = contentType.replace(":", "_") + "16x16Icon";
			%>
			
			<!-- 1 template-->
			<div style="margin-top:10px;">
				<div class="Icon16x16 default16x16Icon $cssClass" style="padding-left:5px; cursor:pointer" onclick="$actionLink"></div>
				<div style ="line-height: 16px; padding-left:5px">
					<a href="javascript:void(0);" onclick="$actionLink">$label</a>
				</div>
			</div>
			<%
				  }
				}
			%>
		</div>
	</div>
	<% 
	  int availablePage = uicomponent.getContentPageIterator().getAvailablePage();
	  if (availablePage > 1) { 
	%>	
	<div class="PageAvailable" pageAvailable='$availablePage'>
		<%_ctx.renderUIComponent(uicomponent.getContentPageIterator())%>
	</div>
	<% } 
	   def rcontext = _ctx.getRequestContext() ;
	   rcontext.getJavascriptManager().addOnLoadJavascript("setHeight");
	%>
</div>