<%

  import org.exoplatform.webui.core.UIPopupWindow;
  
  def rcontext = _ctx.getRequestContext() ;
	rcontext.getJavascriptManager().importJavascript('eXo.webui.UIHorizontalTabs');
	
%>

<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(uiChild in uicomponent.getChildren()) {
			              if (!(uiChild instanceof UIPopupWindow)) {
				              String style = "NormalTab" ;
				              String tabId = uiChild.getId();
				              String paneId = uicomponent.getId();
				              if(uiChild.isRendered()) style = "SelectedTab" ;
			          %>
			            <div class="UITab NormalTabStyle">
			              <div class="$style">
			                <div class="LeftTab">
			                  <div class="RightTab">                
			                    <div class="MiddleTab" onclick="eXo.webui.UIHorizontalTabs.changeTabForUITabPane(this, '$paneId', '$tabId')"><%=_ctx.appRes("UITabPane.title." + uiChild.getId());%></div>
			                  </div>
			                </div>
			              </div>
			            </div>              
			          <%  }
			            }
			          %>
			        </div>
			      </div>
			    </div>
			  </div>
      </div>
      <div class="UITabContentContainer">
        <%
          for(uiChild in uicomponent.getChildren()) {
            String display = "none" ;
            if(uiChild.isRendered()) display="block" ;
            println "<div class=\"UITabContent\" style=\"display: $display;\">" ;
            uicomponent.renderUIComponent(uiChild) ;
            println "</div>" ;
          }
        %>
      </div>  
    </div>  
  </div>  
</div>  
