<%

  import org.exoplatform.webui.core.UIPopupWindow;
  
  def rcontext = _ctx.getRequestContext() ;
  def children = uicomponent.getChildren();

  def messageClose = uicomponent.getClosingConfirmMsg("UIDocumentForm.msg.confirm-close") ;
  def messageNavigate = uicomponent.getClosingConfirmMsg("UIDocumentForm.msg.confirm-navigate") ;
  
  private String getDisplayTab(String selectedTab) {
    if ((uicomponent.getSelectedTab() == null && 
         selectedTab.equals(uicomponent.getChildren().get(uicomponent.getChildren().size() - 1).getId())) ||
        selectedTab.equals(uicomponent.getSelectedTab())  ) {
      return "display:block"; 
    }
    return "display:none";
  }
  
  private String getSelectedTab(String selectedTab) {
    if (getDisplayTab(selectedTab).equals("display:block")) {
      return "SelectedTab";
    }
    return "NormalTab";
  }
	
%>

<div class="UITabPane" id="$uicomponent.id">
  <div class="TabPaneContent">
    <div class="WorkingAreaWithHelp">
      <div class="UIHorizontalTabs">
        <div class="LeftHorizontalTabs">
	     	  <div class="RightHorizontalTabs">
	     	    <div class="CenterHorizontalTabs">
	     	    
	     	    
              <div class="TabsContainer">
                <%
                for(int i = children.size() - 1; i >= 0; i --) {
                  def uiChild = children.get(i);
                  if (!(uiChild instanceof UIPopupWindow)) {
                    String tabId = uiChild.getId();
                %>
                <div class="UITab NormalTabStyle">
                  <div class="<%= getSelectedTab(tabId)%>">
                    <div class="LeftTab">
                      <div class="RightTab">                
                        <div class="MiddleTab" onclick="<%=uicomponent.event("ChangeTab", tabId)%>"><%=_ctx.appRes("UITabPane.title." + tabId)%></div>
                      </div>
                    </div>
                  </div>
                </div>              
                <%  }
                  }
                %>
              </div>
			      </div>
			    </div>
			  </div>
      </div>
      <div class="UITabContentContainer">
        <%
          for(int j = children.size() - 1; j >= 0; j --) {
            def uiChild = children.get(j);
            def displayStyle = getDisplayTab(uiChild.getId());
            if (uiChild instanceof UIPopupWindow && uiChild.isRendered()) {
             displayStyle="display: block"; 
            }
            %>
            <div class="UITabContent" style="$displayStyle">
              <% uicomponent.renderUIComponent(uiChild); %>
            </div>
            <%
          }
        %>
      </div>  
    </div>  
  </div>
  <div id="CloseConfirmationMsg" style="display:none">${messageClose}</div>
  <div id="NavigateConfirmationMsg" style="display:none">${messageNavigate}</div>
</div>
<script type="text/javascript" src="/eXoWCMResources/javascript/eXo/wcm/backoffice/private/CloseEvents.js"></script>
