<% 
  import org.exoplatform.web.application.JavascriptManager;
  import org.exoplatform.ecm.webui.utils.Utils;
  import org.exoplatform.services.jcr.RepositoryService;
  
  def rcontext = _ctx.getRequestContext() ;
  JavascriptManager jsmanager = rcontext.getJavascriptManager();
  
  jsmanager.importJavascript('eXo.webui.UIVerticalSlideTabs');
  
  RepositoryService rService = uicomponent.getApplicationComponent(RepositoryService.class) ;
  String repository = rService.getCurrentRepository().getConfiguration().getName() ;    
%>

<div class="UIDrivesBrowser" id="<%=uicomponent.getId()%>">
	<div class="UIDrivesList">
		<div class="DrivesListContainer" >
		<%
      def personalDrives = uicomponent.personalDrives() ;
			if(personalDrives.size() > 0) {			
		%>
			<div class="DrivesContent">	
  			<div class="DrivesListTitleBG" onclick="eXo.ecm.ECMUtils.collapseExpand(this)">
					<div class="DrivesListTitleBGRight"> 
						<div class="DrivesListTitle" >
							<div class="DropDownArrow16x16Icon">
								<div class="Icon PersonalDrivesIcon"><%=_ctx.appRes("UIDrivesBrowser.title.PersonalDrives" )%></div>
							</div>
						</div>
					</div>
			  </div>
					
				<div class="BrowserDecorator NodeGroup" style="display: none;">
			    <div class="TopLeftCorner">
			      <div class="DecoratorTopRightCorner">
			        <div class="DecoratorTopCenterCorner"><span></span></div>
			      </div>
			    </div>
			    <div class="DecoratorMiddleLeft">
			      <div class="DecoratorMiddleRight">
			        <div class="DecoratorMiddle ClearFix">
			          <%for(personalDrive in personalDrives) {%>
		              <div class="Drive">
		              	<div class="DriveContainer">
			              <%
			                if(personalDrive.getIcon() != null && personalDrive.getIcon().length() > 0) {
			                  String[] personalIconPath = personalDrive.getIcon().split(":/") ;
			              %>
			                <div class="Icon" onclick="<%=uicomponent.event("SelectDrive","${personalDrive.name}")%>">
			                	<img src="/${uicomponent.getPortalName()}/rest/jcr/${repository}/${personalIconPath[0]}/${personalIconPath[1]}" alt="${personalDrive.name}" width="48" height="41" />			                				                			                  
			                </div>
			              <%} else {%>
			               	<div class="Icon UserDriveIcon" style="margin:auto" onclick="<%=uicomponent.event("SelectDrive","${personalDrive.name}")%>"><span></span></div>
			              <%}%>
			                <div class="DriveLabel">
			                  <div class="LeftBar">
			                    <div class="RightBar">
			                      <div class="MiddleBar">
			                        <a href="<%=uicomponent.event("SelectDrive","${personalDrive.name}")%>"><%=_ctx.appRes("Drives.label.${personalDrive.name.replace(" ", "")}")%></a>
			                      </div>
			                    </div>
			                  </div>
			                </div>
			              </div>    
		              </div>
			          <%}%>
					 
			        </div>
			      </div>
			    </div>
			    <div class="DecoratorBottomLeftCorner">
			      <div class="DecoratorBottomRightCorner">
			        <div class="DecoratorBottomCenterCorner"><span></span></div>
			      </div>
			    </div>
			  </div>
		  </div>
		<%}%>
    <%
      def groupDrives = uicomponent.groupDrives() ;
      if(groupDrives.size() > 0) {
    %>
      <div class="DrivesContent">	
   			<div class="DrivesListTitleBG" onclick="eXo.ecm.ECMUtils.collapseExpand(this)">
					<div class="DrivesListTitleBGRight"> 
						<div class="DrivesListTitle" >
							<div class="DropDownArrow16x16Icon">
								<div class="Icon GroupDrivesIcon"><%=_ctx.appRes("UIDrivesBrowser.title.GroupDrives" )%></div>
							</div>
						</div>
				  </div>
				</div>
					
				<div class="BrowserDecorator  NodeGroup" style="display: none;">
			    <div class="TopLeftCorner">
			      <div class="DecoratorTopRightCorner">
			        <div class="DecoratorTopCenterCorner"><span></span></div>
			      </div>
			    </div>
			    <div class="DecoratorMiddleLeft">
			      <div class="DecoratorMiddleRight">
			        <div class="DecoratorMiddle ClearFix">
			          <%for(groupDrive in groupDrives) {%>
		              <div class="Drive">
		              	<div class="DriveContainer">
			              <%
			                if(groupDrive.getIcon() != null && groupDrive.getIcon().length() > 0) {
                        String[] groupIconPath = groupDrive.getIcon().split(":/") ;
			              %>
			                <div class="Icon" onclick="<%=uicomponent.event("SelectDrive","${groupDrive.name}")%>">
			                	<img alt="${groupDrive.name}" src="/${uicomponent.getPortalName()}/rest/jcr/${repository}/${groupIconPath[0]}/${groupIconPath[1]}" width="48" height="41" />			                				                  
			                </div>
			              <%} else {%>
			                <div class="Icon GroupDriveIcon" style="margin:auto" onclick="<%=uicomponent.event("SelectDrive","${groupDrive.name}")%>"><span></span></div>
			              <%}%>
			                <div class="DriveLabel">
			                  <div class="LeftBar">
			                    <div class="RightBar">
			                      <div class="MiddleBar">
			                        <a href="<%=uicomponent.event("SelectDrive","${groupDrive.name}")%>"><%=groupDrive.getName().replace(".", " / ")%></a>
			                      </div>
			                    </div>
			                  </div>
			                </div>
			            	</div>    
		              </div>
			          <%}%>
								
			        </div>
			      </div>
			    </div>
			    <div class="DecoratorBottomLeftCorner">
			      <div class="DecoratorBottomRightCorner">
			        <div class="DecoratorBottomCenterCorner"><span></span></div>
			      </div>
			    </div>
			  </div>
		  </div>
		<%}%>  
      <div class="DrivesContent">	
  			<div class="DrivesListTitleBG" onclick="eXo.ecm.ECMUtils.collapseExpand(this)">
					<div class="DrivesListTitleBGRight"> 
						<div class="DrivesListTitle" >
							<div class="DropDownArrow16x16Icon">
								<div class="Icon GeneralDriveIcon"><%=_ctx.appRes("UIDrivesBrowser.title.GeneralDrives" )%></div>
							</div>
						</div>
					</div>
			  </div>      
					
				<div class="BrowserDecorator  NodeGroup">
			    <div class="TopLeftCorner">
			      <div class="DecoratorTopRightCorner">
			        <div class="DecoratorTopCenterCorner"><span></span></div>
			      </div>
			    </div>
			    <div class="DecoratorMiddleLeft">
			      <div class="DecoratorMiddleRight">
			        <div class="DecoratorMiddle ClearFix">
			          <%
			            def drives = uicomponent.generalDrives() ;
			            if(drives.size() > 0) {
			              for(drive in drives) {
			          %>
			              <div class="Drive">
			              	<div class="DriveContainer">
				              <%
				                if(drive.getIcon() != null && drive.getIcon().length() > 0) {
  				                String[] generalIconPath = drive.getIcon().split(":/") ;
				              %>
				                <div class="Icon" onclick="<%=uicomponent.event("SelectDrive","${drive.name}")%>">
				                	<img alt="${drive.name}" src="/${uicomponent.getPortalName()}/rest/jcr/${repository}/${generalIconPath[0]}/${generalIconPath[1]}" width="48" height="41" />
				                </div>
				              <%} else {%>
				                <div class="Icon DefaultDriveIcon Admin${drive.workspace}Icon" style="margin:auto" onclick="<%=uicomponent.event("SelectDrive","${drive.name}")%>"><span></span></div>
				              <%}%>
				                <div class="DriveLabel">
				                  <div class="LeftBar">
				                    <div class="RightBar">
				                      <div class="MiddleBar">
				                        <a href="<%=uicomponent.event("SelectDrive", Utils.formatNodeName(drive.getName()))%>"><%=_ctx.appRes("Drives.label.${drive.name.replace(" ", "")}")%></a>
				                      </div>
				                    </div>
				                  </div>
				                </div>
				            	</div>    
			              </div>
			          <%  
			              }
			            } else {
			          %>
			            <div class="EmptyDrives">
			            	<div class="ContainerEmptyDrives">
			            		<%=_ctx.appRes("UIDrivesBrowser.msg.empty-drives")%>
			            	</div>
			            </div>
			          <%}%>
								
			        </div>
			      </div>
			    </div>
			    <div class="DecoratorBottomLeftCorner">
			      <div class="DecoratorBottomRightCorner">
			        <div class="DecoratorBottomCenterCorner"><span></span></div>
			      </div>
			    </div>
			  </div>
		  </div>		  		  
		  
		</div>
	</div>
</div>