<%
	def drivesList = uicomponent.getDrives();
	def foldersList = uicomponent.getFolders();
	def filesList = uicomponent.getFiles();
	def breadCrumb = uicomponent.getBreadCrumb();

    def jsManager = _ctx.getRequestContext().getJavascriptManager();
    jsManager.require("SHARED/composerMultiUpload", "multiUpload").addScripts("multiUpload.UIUploadInput.initSearchBox('"+ uicomponent.getId() + "');");
    jsManager.require("SHARED/jquery", "gj").addScripts("gj(document).ready(function() { gj(\"*[rel='tooltip']\").tooltip();});");
%>
<div id="$uicomponent.id">
	<div class="breadcrumbContainer">
	  	<ul class="breadcrumb pull-left" id="BreadcumbsContainer">
        <% 
                if(breadCrumb.size() > 0) {
                    def objectId = breadCrumb.size() == 1 ? "BREADCRUMB/@/DRIVES/@/0" : (breadCrumb.size() == 2 ? "BREADCRUMB/@/DRIVE/@/0" :  "BREADCRUMB/@/FOLDER/@/" + (breadCrumb.size() - 2));
        %>
	  	<li class="backBTN">
            <a class="uiIconGoBack" onclick="<%= uicomponent.event("Select", objectId) %>" href="javascript:void(0);" data-toggle="tooltip" rel="tooltip" data-placement="bottom" title="<%=_ctx.appRes("UIActivity.label.Previous")%>"></a>
	  	</li>
	  	<%
	   	       }
                def cssActive = (0 == (breadCrumb.size())) ? "active" : "normal"; %>
				<li>
					<span></span>
					<a class="$cssActive" onclick="<%= uicomponent.event("Select", "BREADCRUMB/@/DRIVES/@/0") %>" href="javascript:void(0);" data-toggle="tooltip" rel="tooltip" data-placement="bottom" title="<%=_ctx.appRes("UIDocumentSelector.label.documents")%>"><%=_ctx.appRes("UIDocumentSelector.label.documents")%></a>
				</li>
		<%
			if(breadCrumb.size() > 0) {
			    def titleFirstElement = uicomponent.getBreadCrumbTitle(breadCrumb.get(0));
				cssActive = (1 == (breadCrumb.size())) ? "active" : "normal"; %>

				<li>
					<span class="uiIconMiniArrowRight"></span>
					<a class="$cssActive" onclick="<%= uicomponent.event("Select", "BREADCRUMB/@/DRIVE/@/0" ) %>" href="javascript:void(0);" data-toggle="tooltip" rel="tooltip" data-placement="bottom" title="$titleFirstElement">
						<%=titleFirstElement%>
					</a>
				</li>

				<%
				if(breadCrumb.size() > 1) {
					int i = 1;
					while(i < breadCrumb.size()) {
						def breadcrumbElement = breadCrumb.get(i);
						def breadcrumbTitle = uicomponent.getBreadCrumbTitle(breadcrumbElement);
						cssActive = (i == (breadCrumb.size() -1)) ? "active" : "normal";
					%>
						<li>
							<span class="uiIconMiniArrowRight"></span>
							<a class="$cssActive" onclick="<%= uicomponent.event("Select", "BREADCRUMB/@/FOLDER/@/"+i ) %>" href="javascript:void(0);" data-toggle="tooltip" rel="tooltip" data-placement="bottom" title="$breadcrumbTitle">
								<%
									out.println(breadcrumbTitle);
								%>
							</a>
						</li>
				<%      i++;
					}
				}
			}
		%>
		</ul>

		<div class="searchBox pull-right">
			<input type="text">
		    <a href="#"><i class="uiIconSearch uiIconLightGray"></i></a>
		</div>
	</div>
	<div class="fileAlreadySelected alert alert-error" onclick="this.style.display = 'none'" style="display:none;">
        <i class="uiIconError"></i>
        <%=_ctx.appRes("UIDocActivityPopup.label.fileAlreadyExists").replace("{0}", "<b></b>")%>
    </div>
	<div class="selectionBox">
		<div class="emptyFolder" style="display: <%=(breadCrumb.size() > 0 && (foldersList.size() + filesList.size()) == 0) ? "block" : "none";%>">
		  <span><%=_ctx.appRes("UIDocumentSelector.label.emptyFolder")%></span>
		</div>
        <div class="emptyResults" style="display: none;">
          <span><%=_ctx.appRes("UIDocumentSelector.label.emptyResults")%></span>
        </div>
		<%
			if(!drivesList.isEmpty()) { 
				for (drive in drivesList) { 
				     def driveLabel = uicomponent.getDriveTitle(drive);
				     def driveName = drive.getName();
				     def driveCSSClasses = uicomponent.getDriveCSSClasses(drive);
					%>
					<div class="driveData" rel="tooltip" data-placement="bottom" title="$driveLabel">
						<a href="javascript:void(0);" onclick="<%= uicomponent.event("Select", "SELECTIONBOX/@/DRIVE/@/"+driveName ) %>">
							<i class="$driveCSSClasses uiIconEcmsLightGray selectionIcon center"></i>
							<div class="selectionLabel center">$driveLabel</div>
						</a>
					</div>
					<%
				}
			}
			if(!foldersList.isEmpty()) { 
		%>
					<h4 class="foldersTitle"><%=_ctx.appRes("UIDocumentSelector.label.folders")%></h4>
		<%
				for (folderNode in foldersList) {
					def folderTitle = uicomponent.getFolderTitle(folderNode);
					def folderPath = folderNode.getPath();
					def folderCSSClass = uicomponent.getFolderNodeIcon(folderNode);
		%>
					<div class="folderSelection">
						<a href="javascript:void(0);" onclick="<%= uicomponent.event("Select", "SELECTIONBOX/@/FOLDER/@/"+folderPath) %>" rel="tooltip" data-placement="bottom" title="$folderTitle">
							<i class="uiIcon24x24FolderDefault $folderCSSClass uiIconEcmsLightGray selectionIcon center"></i>
							<div class="selectionLabel truncate center">$folderTitle</div>
						</a>
					</div>
		<%
				}
			}
			if(!filesList.isEmpty()) { 
		%>
				<h4  class="filesTitle clearfix"><%=_ctx.appRes("UIDocumentSelector.label.files")%></h4>
		<%
				for (fileNode in filesList) {
					def fileTitle = uicomponent.getFileTitle(fileNode);
					def filePath = uicomponent.getFilePath(fileNode);
					def iconClass = uicomponent.getFileTypeCSSClass(fileNode);
					def cssClasses = (uicomponent.isFileSelected(fileNode) ? "selected": "");
                    String compId = "fileSelection" + fileNode.getPath().hashCode();
					%>
						<div id="$compId" class="fileSelection $cssClasses">
							<a href="javascript:void(0);" onclick="<%= uicomponent.event("Select", "SELECTIONBOX/@/FILE/@/"+filePath+"/@/"+fileTitle) %>" rel="tooltip" data-placement="bottom" title="$fileTitle">
								<div class="uiBgd64x64FileDefault selectionIcon center $iconClass"></div>
								<div class="selectionLabel truncate center">$fileTitle</div>
							</a>
						</div>
					<%
				}
			}
		%>
   </div>
   <%uicomponent.renderChildren()%>
</div>
