<%
  def rcontext = _ctx.getRequestContext();
  String restContext = uicomponent.getRestContext();
  String selectFileLink =uicomponent.event(uicomponent.SELECT_FILE);
  String selectFolderLink =uicomponent.event(uicomponent.SELECT_FOLDER);

  def jsManager = rcontext.getJavascriptManager();
  
  jsManager.addJavascript("eXo.commons.DocumentSelector.getDrives = '" + uicomponent.GET_DRIVES + "';");
  jsManager.addJavascript("eXo.commons.DocumentSelector.getFoldersAndFiles = '" + uicomponent.GET_FOLDERS_AND_FILES + "';");
  jsManager.addJavascript("eXo.commons.DocumentSelector.deleteFolderOrFile = '" + uicomponent.DELETE_FOLDER_OR_FILE + "';");
  jsManager.addJavascript("eXo.commons.DocumentSelector.createFolder = '" + uicomponent.CREATE_FOLDER + "';");
  jsManager.addJavascript("eXo.commons.DocumentSelector.isFolderOnlyParam = '" + uicomponent.PARAM_IS_FOLDER_ONLY + "';");
  jsManager.addJavascript("eXo.commons.DocumentSelector.folderNameParam = '" + uicomponent.PARAM_FOLDER_NAME + "';");
  jsManager.addJavascript("eXo.commons.DocumentSelector.driveTypeParam = '" + uicomponent.PARAM_DRIVE_TYPE + "';");
  jsManager.addJavascript("eXo.commons.DocumentSelector.driveNameParam = '" + uicomponent.PARAM_DRIVE_NAME + "';");
  jsManager.addJavascript("eXo.commons.DocumentSelector.workspaceNameParam = '" + uicomponent.PARAM_WORKSPACE_NAME + "';");
  jsManager.addJavascript("eXo.commons.DocumentSelector.currentFolderParam = '" + uicomponent.PARAM_CURRENT_FOLDER + "';");
  jsManager.addJavascript("eXo.commons.DocumentSelector.itemPathParam = '" + uicomponent.PARAM_ITEM_PATH + "';");  
  jsManager.addJavascript("eXo.commons.DocumentSelector.dataId ='" + uicomponent.DATA_ID + "';");
  jsManager.addJavascript("eXo.commons.DocumentSelector.init('" + uicomponent.id + "','" + restContext +"');");
%>
<div class="UIDocumentSelector" id="$uicomponent.id">
  <a style="display:none;" href="$selectFileLink" class="SelectFile"></a>
  <a style="display:none;" href="$selectFolderLink" class="SelectFolder"></a>
   <center>
   <%= _ctx.appRes(uicomponent.id + '.label.select-drive')%>
    <select onchange="eXo.commons.DocumentSelector.changeDrive(this);">
      <option value="general"><%= _ctx.appRes(uicomponent.id + '.label.general-drives')%></option>
      <option value="group"><%= _ctx.appRes(uicomponent.id + '.label.group-drives')%></option>
      <option value="personal" selected="selected"><%= _ctx.appRes(uicomponent.id + '.label.personal-drives')%></option>
    </select>
  </center>
  <%      
        String newFolderLink = "<a class=\"NewFolder\" href=\"javascript:void(0);\" value=\"" + _ctx.appRes(uicomponent.id + '.label.new-folder') + "\"" +  
                  " onclick=\"eXo.commons.DocumentSelector.newFolder(this)\"" + 
                  " msg_new_folder_not_allow=\"" + _ctx.appRes(uicomponent.id + '.label.new-folder-not-allow') + "\"" +
                  " msg_select_drive=\"" + _ctx.appRes(uicomponent.id + '.label.require-drive') + "\"" +
                  " msg_enter_folder_name=\"" + _ctx.appRes(uicomponent.id + '.label.enter-folder-name') + "\"" +
                  " msg_empty_folder_name=\"" + _ctx.appRes(uicomponent.id + '.label.empty-folder-name') + "\">&nbsp;</a>";
     %>
    <div class="ClearFix Breadcumbs">
    <div class="ActionBar">
      $newFolderLink
      
      <% if (uicomponent.isShowUpload) {      
           uicomponent.renderChild(uicomponent.UPLOAD_AREA);  
       }
       %>
	  </div>
    <div class="BreadcumbsContainer" id="BreadcumbsContainer"></div>  
    </div>
  <div class="ListContainer">
    <div class="ClearFix">      
      <div class="RightWorkspace" id="RightWorkspace">
        <div class=ListView>
          <table cellspacing="0" style="table-layout: fixed; width: 100%;" id="ListRecords">
            <!--<thead>
              <tr>
                <th class="THBar"><%=_ctx.appRes(uicomponent.id + ".label.Name");%></th>
                <th class="THBar" style="width: 120px;"><%=_ctx.appRes(uicomponent.id + ".label.Date");%></th>
                <th class="THBar" style="width: 80px;"><%=_ctx.appRes(uicomponent.id + ".label.Size");%></th>
                <th class="THBar" style="width: 80px;"><%=_ctx.appRes(uicomponent.id + ".label.Action");%></th>                
              </tr>
            </thead>
            --> 
            <tr>
            </tr>            
          </table>
        </div>
      </div>
    </div>     
  </div>
</div>
