! File Manager

  script FileManager

  div Mask
  div Panel
  div FileListing
  div FileRow
  div Scroller
  div Uploader
  div Buttons
  span UploadPrompt
  span UploadStatus
  progress UploadProgress
  input UploadFile
  button CloseButton
  button NewFolderButton
  button ShowURLButton
  button UploadButton
  button DeleteButton
  a FileName
  img Icon
  img Image
  variable Alpha
  variable FileCount
  variable File
  variable FileList
  variable Name
  variable Type
  variable Source
  variable Content
  variable CurrentPath
  variable Separator
  variable Path
  variable N
  variable Even
  variable Progress
  variable Status
  variable Password
  variable Valid

  get Password from storage as `password`
  rest get Valid from `_verify/` cat Password
    or alert `Unable to verify password - please try again.`
  if Valid is not `yes` location `https://fr.rembrandt.ie`

  create Mask in body
  set the style of Mask to `position:fixed;top:0;left:0;right:0;bottom:0;`
    cat `width:100%;height:100%;z-index:5;background-color:rgba(0,0,0,0.0);text-align:center`
  create Panel in Mask
  if mobile
    set the style of Panel to
      `width:100%;height:100%;background:#ffe`
  else
    set the style of Panel to
      `width:50%;height:90%;margin-top:5%;margin-left:25%;background:#ffe;border:3px solid black`

  create Uploader in Panel
  set the style of Uploader to
    `width:80%;margin:0.5em 10%;padding:0.5em 0;border:1px solid gray;font-size:80%`
  create UploadPrompt in Uploader
  set the content of UploadPrompt to `Select a file: `
  create UploadFile in Uploader
  set the style of UploadFile to `display:inline-block;width:15em`
  set attribute `type` of UploadFile to `file`
  set attribute `name` of UploadFile to `Source`
  create UploadProgress in Uploader
  set the style of UploadProgress to `display:inline-block;margin-left:0.5em`
  set attribute `value` of UploadProgress to 0
  set attribute `max` of UploadProgress to 100
  create UploadStatus in Uploader
  set style `margin-left` of UploadStatus to `0.5em`

  create Buttons in Panel
  set the style of Buttons to `position:relative;top:10px`
  create CloseButton in Buttons
  set the style of CloseButton to `display:none;width:150px;height:40px;margin:0 5px`
  set the text of CloseButton to `Close`
  create DeleteButton in Buttons
  set the style of DeleteButton to `display:none;width:150px;height:40px;margin:0 5px`
  set the text of DeleteButton to `Delete`
  on click CloseButton history back
  create NewFolderButton in Buttons
  set the style of NewFolderButton to `width:150px;height:40px;margin:0 5px`
  set the text of NewFolderButton to `New Folder`
  create ShowURLButton in Buttons
  set the style of ShowURLButton to `display:none;width:150px;height:40px;margin:0 5px`
  set the text of ShowURLButton to `Show URL`
  create UploadButton in Buttons
  set the style of UploadButton to `width:150px;height:40px;margin:0 5px`
  set the text of UploadButton to `Upload`
  on click UploadButton go to Upload

  create FileListing in Panel
  set the style of FileListing to `position:relative;top:40px;width:100%;height:80%;text-align:center`
  create Scroller in FileListing
  set the style of Scroller to
    `position:absolute;top:0;left:0;bottom:0;right:0;text-align:left;overflow-y:scroll`
  create Image in FileListing
  set the style of Image to `display:none;display: block;margin: 0 auto;max-width:100%;max-height:100%`

  on click NewFolderButton
  begin
    put prompt `Name of folder:` with `new` into Path
    if Path is empty stop
    replace ` ` with `-` in Path
    put `/home/matmos6/fr.rembrandt.ie/resources/` cat CurrentPath cat `/` cat Path into Path
    rest post Path to `_mkdir`
    goto Browser
  end

  put 0 into Alpha
  while Alpha is less than 8
  begin
    set style `background-color` of Mask to `rgba(0,0,0,0.` cat Alpha cat `)`
    wait 4 ticks
    add 1 to Alpha
  end
  wait 10 ticks
  set style `display` of FileListing to `block`

! Fill the browser with content from the server
  put empty into CurrentPath

! Build the list
Browser:
  rest get Content from `_list` cat CurrentPath cat `/`
  put empty into FileList
  put the json count of Content into FileCount
  set the elements of File to FileCount
  set the elements of FileName to FileCount

! Add a row for each file
  set the content of Scroller to ``
  set Even

  if CurrentPath is not empty
  begin
    create FileRow in Scroller
    set the style of FileRow to `width:90%;padding:0.5em 1em;text-align:left`
    create Icon in FileRow
    set the style of Icon to `float:left;margin-right:0.5em;width:20px`
    set attribute `src` of Icon to `https://fr.rembrandt.ie/resources/system/arrow-back.png`
    create FileName in FileRow
    set the content of FileName to `(back to previous folder)`
    on click FileName
    begin
      put the position of the last `~` in CurrentPath into N
      if N is less than 0 put the position of the last `/` in CurrentPath into N
      put left N of CurrentPath into CurrentPath
      go to Browser
    end
  end

  set the elements of FileName to FileCount
  put 0 into N
  while N is less than FileCount
  begin
    index File to N
    put element N of Content into File
    put property `name` of File into Name
    put property `type` of File into Type
    create FileRow in Scroller
    set the style of FileRow to `clear:both;padding:0.5em 1em;text-align:left`
    if Even set style `background` of FileRow to `#eee`
    create Icon in FileRow
    set the style of Icon to `float:left;margin-right:0.5em;width:20px`
    if Type is `dir` put `folder.png` into Source
    else if Type is `img` put `image.png` into Source
    else if Type is `txt` put `text.png` into Source
    else if Type is `doc` put `document.png` into Source
    else put `unknown.png` into Source
    set attribute `src` of Icon to `https://fr.rembrandt.ie/resources/system/` cat Source
    index FileName to N
    create FileName in FileRow
    set the content of FileName to Name
    on click FileName go to SelectFile
    toggle Even
    add 1 to N
  end

  stop

SelectFile:
  index File to the index of FileName
  put property `type` of File into Type
  if Type is `dir`
  begin
    if CurrentPath is empty put `/` into Separator
    else put `~` into Separator
    put CurrentPath cat Separator cat the content of FileName into CurrentPath
    goto Browser
  end
  if Type is `img`
  begin
    set style `display` of Uploader to `none`
    set style `display` of UploadButton to `none`
    set style `display` of NewFolderButton to `none`
    set style `display` of CloseButton to `inline-block`
    set style `display` of DeleteButton to `inline-block`

    set style `display` of Scroller to `none`
    set style `display` of Image to `block`
    put CurrentPath cat `/` cat property `name` of File into Path
    replace `~` with `/` in Path
    set attribute `src` of Image to `https://fr.rembrandt.ie/resources` cat Path
    on click CloseButton go to CloseMedia
    set style `display` of ShowURLButton to `inline-block`
    on click ShowURLButton
    begin
      put prompt `URL of this image:` with `https://fr.rembrandt.ie/resources`
        cat Path into Path
    end
    on click DeleteButton
    begin
      rest post `/home/matmos6/fr.rembrandt.ie/resources/` cat Path to `_delete`
      go to CloseMedia
    end
  end
  stop

CloseMedia:
  set style `display` of Image to `none`
  set style `display` of CloseButton to `none`
  set style `display` of DeleteButton to `none`
  set style `display` of Scroller to `block`
  set style `display` of Uploader to `inline-block`
  set style `display` of UploadButton to `inline-block`
  set style `display` of NewFolderButton to `inline-block`
  set style `display` of ShowURLButton to `none`
  on click CloseButton history back
  go to Browser

Upload:
  if UploadFile is empty alert `Please choose a file to upload`
  else
  begin
    put `/home/matmos6/fr.rembrandt.ie/resources` cat CurrentPath into Path
    upload UploadFile to Path with UploadProgress and UploadStatus
    goto Browser
  end
  stop