<% 
	import org.exoplatform.faq.service.Category;
	import org.exoplatform.faq.service.Question;
	import org.exoplatform.faq.service.Utils;
	String compId = uicomponent.getId() ; 
  def rcontext = _ctx.getRequestContext() ;	
  rcontext.getJavascriptManager().addJavascript('eXo.webui.UIRightClickPopupMenu.disableContextMenu("'+compId+'") ;') ;
%>
<div class="FAQUIAddRelationQuestion $uicomponent.id">
	<% uiform.begin() %>
	<!-- View interface -->
	<div class="HorizontalLayout ViewQuestionsToSelect">
		<%
		List listCate = uicomponent.getListCate() ;
		Stack<String> stackCateid = new Stack<String>() ;
    StringBuffer stringBuffer = new StringBuffer() ;
    int n = listCate.size() ;
    int i = 0 ;
    int id = 0 ;
   %>   
   	<div class="FAQCategoryTreeView" id="FAQCate$i">
			<a href="javaScript:void(0)" onclick="eXo.faq.UIAnswersPortlet.treeView('FAQViewChild$id')">
				<%=uicomponent.homeCategoryName%>
			</a>
		</div>
		<div style=" display:none; padding-left:30px ; margin-top:10px;" id="FAQViewChild$i">
			<div style="margin-top:10px; display:block;" id="FAQViewChild$i">
	    <%
	      for(Question question : uicomponent.getQuestions(Utils.CATEGORY_HOME)) {%>
		    	<div id="FAQCate$i" style="margin:5px;">
		        	<% uiform.renderField(uicomponent.getChildById(question.getId())) %>
		    			<%= question.getQuestion().replaceAll("<p>", "").replaceAll("</p>", "");%>
					</div>
			<%}%>
	    </div>
	    
	   <!-- ===================================== view all subcategories of root category ==================================== -->
	   <%
	   if(uicomponent.getListCate() != null && !uicomponent.getListCate().isEmpty()){
	   	for(cate in uicomponent.getListCate()) {
	   		stackCateid.push(cate.getCategory().getId()) ;
	    	id ++ ;
	    	i ++ ;
	      if(i == 1) {%>
					<div class="FAQCategoryTreeView" id="FAQCate$i">
						<a href="javaScript:void(0)" onclick="eXo.faq.UIAnswersPortlet.treeView('FAQViewChild$id')"><%= cate.getCategory().getName();%></a>
					</div>
					<div style=" display:none; padding-left:30px ; margin-top:10px;" id="FAQViewChild$i">
						<div style="margin-top:10px;" id="FAQViewChild$i">
						<%for(Question question : uicomponent.getQuestions(stackCateid.pop())) {%>
					    	<div id="FAQCate$i" style="margin:5px;">
					        	<% uiform.renderField(uicomponent.getChildById(question.getId())) %>
					    			<%= question.getQuestion().replaceAll("<p>", "").replaceAll("</p>", "");%>
								</div>
		    		<%}%>
	          </div>
	  	<%
      	} else if(i > 1) {
	        int sub = cate.getDeft() - listCate.get(i - 2).getDeft() ;
	        if(sub == 0) {%>
	        	</div>
	        	<div class="FAQCategoryTreeView">
								<a href="javaScript:void(0)" onclick="eXo.faq.UIAnswersPortlet.treeView('FAQViewChild$id')"><%= cate.getCategory().getName();%></a>
						</div>
						<div style=" display:none; padding-left:30px ; margin-top:10px;" id="FAQViewChild$i">
		   				<div style="margin-top:10px;" id="FAQViewChild$i">
		    <%
		          for(Question question : uicomponent.getQuestions(stackCateid.pop())) {%>
					    	<div id="FAQCate$i" style="margin:5px;">
					        	<% uiform.renderField(uicomponent.getChildById(question.getId())) %>
					    			<%= question.getQuestion().replaceAll("<p>", "").replaceAll("</p>", "");%>
								</div>
		    <%        
		          }%>
		          </div>
						
	    <%
	        } else if(sub > 0) {%>
						<div class="FAQCategoryTreeView">
				    	<div id="FAQCate$i" style=" overflow-x:auto;">
				    		<a href="javaScript:void(0)" onclick="eXo.faq.UIAnswersPortlet.treeView('FAQViewChild$id')"><%= cate.getCategory().getName();%></a>
				    	</div>
				    </div>
					  <div style=" display:none; padding-left:30px ; margin-top:10px;" id="FAQViewChild$i">
					    <div style="margin-top:10px;" id="FAQViewChild$i">
			    		<%for(Question question : uicomponent.getQuestions(stackCateid.pop())) {%>
						    	<div id="FAQCate$i" style="margin:5px;">
						        	<% uiform.renderField(uicomponent.getChildById(question.getId())) %>
						    			<%= question.getQuestion().replaceAll("<p>", "").replaceAll("</p>", "");%>
									</div>
			    		<%}%>
		          </div>
	    <%
	        } else {
						for(int j = 0 ; j < (-1*sub) + 1; j ++) {%>
	    				</div>
	     		<%}%>
					 <div class="Icon FAQCategoryTreeView">
						 <a href="javaScript:void(0)" onclick="eXo.faq.UIAnswersPortlet.treeView('FAQViewChild$id')"><%= cate.getCategory().getName();%></a>
					 </div>
					 <div style=" display:none; padding-left:30px ; margin-top:10px;" id="FAQViewChild$i">
						 <div style="margin-top:10px;" id="FAQViewChild$i">
		     		<%for(Question question : uicomponent.getQuestions(stackCateid.pop())) {
		            stringBuffer.append( question.getQuestion()) ;%>
								<div id="FAQCate$i" style="margin:5px;">
							    	<% uiform.renderField(uicomponent.getChildById(question.getId())) %>
										<%= question.getQuestion().replaceAll("<p>", "").replaceAll("</p>", "");%>
								</div>
		     		<%}%>
		          </div>
	     <%
	        }
	      }
	    }%>
	    <%
	    for(i = 0 ; i < listCate.get(n - 1).getDeft() ; i ++) {%>
	    	</div>
	  	<%
	    }%>
	<%}%>
		</div>
	</div>
	
	<!-- Action of this form -->
		 <div class="UIAction">
    <% for(action in uicomponent.getActions()) { 
        String actionLabel = _ctx.appRes(uicomponent.getName() + ".action." + action); 
        String link = uicomponent.event(action) ;
    %>
    <a href="javascript:void(0);" onclick="$link" class="ActionButton LightBlueStyle">$actionLabel</a>
    <%}%>
  </div>
	<%uiform.end()%>
</div>