<% 
	import org.exoplatform.faq.service.Category;
%>
<div class="UIViewerSettingForm">
	<% uiform.begin() %>
		
	<div class="UIFormTabPane">
		<div class="UITabPane">
			<div class="TabPaneContent" style="padding:0px;">
				
				<div class="WorkingArea">
					 <div class="UIHorizontalTabs">
						 <div class="LeftHorizontalTabs">
							 <div class="RightHorizontalTabs">
								 <div class="CenterHorizontalTabs">
									<div class="TabsContainer">
										<%String classCss = "SelectedTab" ; 
										int i_ = 0;
										for(tabconten in uiform.getChildren()){ 
											if(tabconten.id.indexOf("Tab") < 0) continue;
											String link = "javascript:void(0);";
											if(uiform.getIsSelected(i_)) classCss = "SelectedTab" ;
											else {
												classCss = "NormalTab" ;
												link = uicomponent.event("SelectTab",""+i_) ;
											}
										%>	
										<div class="UITab NormalTabStyle">
											<div class="$classCss">
												<div class="LeftTab">
													<div class="RightTab">
														<div onclick="$link">
															<div class="MiddleTab"><%= _ctx.appRes(uiform.id + ".label." + tabconten.id); %></div>
														</div>
													</div>
												</div>
											</div>
										</div>
									<%	 ++i_;
										} %>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="UIForm">
						<div class="HorizontalLayout">
							<div class="UITabContentContainer">
								<div class="TabContentContainer">
								<% 
									String display =	"block";
									int j_ = 0;
									for(tabconten in uiform.getChildren()){
										if(tabconten.id.indexOf("Tab") < 0) continue;
										if(uiform.getIsSelected(j_))display =	"block";
										else display = "none";
								%>
									<div style="display:$display;" id="UITabContent" class="UITabContent">
									<% if(tabconten.id.equals(uiform.SELECT_CATEGORY_TAB)) { %>

											<div class="TitleMoveThreads"><%=uiform.getLabel("SelectCategory")%>: </div>
											<!-- View interface -->
											<div class="HorizontalLayout ViewQuestionsToSelect" style="overflow:auto;">
												<%
												List listCate = uicomponent.listCate;
												Stack<String> stackCateid = new Stack<String>() ;
										    StringBuffer stringBuffer = new StringBuffer() ;
										    int n = listCate.size() ;
										    int i = 0 ;
										    int id = 0 ;
										   %>
											   <!-- ===================================== view all subcategories of root category ==================================== -->
											   <%
											   if(uicomponent.listCate != null && !uicomponent.listCate.isEmpty()){
										   		String checked = "";
										   		List checkeds = uicomponent.getCategoriesId();
											   	for(cate in uicomponent.listCate) {
											   		String cateId = cate.getCategory().getId();
														if(checkeds.isEmpty() || checkeds.contains(cateId)){
												    	checked = "checked=\"checked\"";
												    } else {
												    	checked = "";
												    }
											   		stackCateid.push(cateId) ;
											    	id ++ ;
											    	i ++ ;
											      if(i == 1) {%>
												      <div class="FAQDomNode" style="padding-left:30px">
																<div style="margin:6px 0px;line-height:22px;" id="FAQCate$i">
																	<div class="Icon CategoryIcon" onclick="eXo.faq.UIAnswersPortlet.checkedNode(this);">
																		<input type="checkbox" class="checkbox" value="false" name="$cateId" $checked/>
																 	</div>
																	<div class="LabelNameCategory">
																		<%= cate.getCategory().getName();%>
																	</div>
																	<div style="clear:left;"><span></span></div>
																</div>
																<div class="FAQChildNodeContainer" id="FAQViewChild$i">
											  	<%
										      	} else if(i > 1) {
											        int sub = cate.getDeft() - listCate.get(i - 2).getDeft() ;
											        if(sub == 0) {%>
											        		</div>
											        	</div>
												      <div class="FAQDomNode" style="padding-left:30px">
											        	<div style="margin:6px 0px;line-height:22px;">
											        			<div class="Icon CategoryIcon" onclick="eXo.faq.UIAnswersPortlet.checkedNode(this);">
																			<input type="checkbox" class="checkbox" value="false" name="$cateId" $checked/>
																		</div>
																		<div class="LabelNameCategory">
																			<%= cate.getCategory().getName();%>
																		</div>
																		<div style="clear:left;"><span></span></div>
																</div>
																<div class="FAQChildNodeContainer" id="FAQViewChild$i">
																
											    <%
											        } else if(sub > 0) {%>
													      <div class="FAQDomNode" style="padding-left:30px">
																	<div style="margin:6px 0px;line-height:22px;">
															    	<div id="FAQCate$i">
															    		<div class="Icon CategoryIcon" onclick="eXo.faq.UIAnswersPortlet.checkedNode(this);">
																				<input type="checkbox" class="checkbox" value="false" name="$cateId" $checked/>
																			</div>
															    		<div class="LabelNameCategory">
															    			<%= cate.getCategory().getName();%>s
															    		</div>
															    	</div>
															    	<div style="clear:left;"><span></span></div>
															    </div>
																  <div class="FAQChildNodeContainer" id="FAQViewChild$i">
											    <%
											        } else {%>
											     		<%for(int j = 0 ; j < (-1*sub) + 1; j ++) {%>
												    				</div>
												    			</div>
											     		<%}%>
												      <div class="FAQDomNode" style="padding-left:30px">
															 <div style="margin:6px 0px;line-height:22px;">
															 	 <div class="Icon CategoryIcon" onclick="eXo.faq.UIAnswersPortlet.checkedNode(this);">
																		<input type="checkbox" class="checkbox" value="false" name="$cateId" $checked/>
																 </div>
																 <div class="LabelNameCategory">
																 	<%= cate.getCategory().getName();%>
																 </div>
																 <div style="clear:left;"><span></span></div>
															 </div>
															 <div class="FAQChildNodeContainer" id="FAQViewChild$i">
											     <%
											        }
											      }
											    }%>
											    	</div>
											    </div>
											    <%
											    for(i = 1 ; i < listCate.get(n - 1).getDeft() ; i ++) {%>
											    		</div>
											    	</div>
											  	<%
											    }%>
											<%}%>
											</div>
										

									<% } else if(tabconten.id.equals(uiform.EDIT_TEMPLATE_TAB)) {%>
											<div class="EditTempLateContent">
												<div class="LabelContent"><%=uiform.getLabel(uiform.FIELD_TEMPLATE_TEXTARE);%>:</div>
												<div class="TextAreContent">
													<%uiform.renderField(tabconten.getChildById(uiform.FIELD_TEMPLATE_TEXTARE)) ;%>
												</div>
											</div>
									<% } else {%>
										<%
											 String checkedBox = "";
											 if(uiform.useAjax) checkedBox = "checked=\"checked\"";
										%>
											<div class="EditTempLateContent">
												<div style="width:200px; margin:30px auto;line-height:20px;">
													<div class="FloatLeft"><%=uiform.getLabel(uiform.FIELD_USEAJAX_CHECKBOX);%>:&nbsp; &nbsp;</div>
													<div class="FloatLeft" style="padding-top:3px">
														<input type="checkbox" class="checkbox" value="false" $checkedBox name="<%=uiform.FIELD_USEAJAX_CHECKBOX;%>"/>
													</div>
													<div style="clear:left;"><span></span></div>
												</div>
											</div>
									<% } %>
									</div>
							<% ++j_;} %>

									<div id="viewerSettingMsg" style="display:none;"><%=_ctx.appRes("UIViewerSettingForm.label.NotCheckParentInput"); %></div>
									 <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>
									
								</div>
							</div>
							
						</div>
					</div>
				</div>
				
			</div>	
		</div>	
	</div>
	<%uiform.end()%>
</div>
