- assets_mapper route(:assets), suffix: ASSETS_EXT do
  == js_tag  'api'
  == css_tag 'ui'
  == css_tag 'colorbox/colorbox'
  == css_tag 'jquery-ui/css/ui-lightness/jquery-ui'
  == css_tag 'jQuery-File-Upload/css/jquery.fileupload-ui'

javascript:
  var ELFinderLoader = new ELFinderAPI(), ELFinderColorboxes = [];
  ELFinderLoader.loadScript(
    '#{asset_url('jquery.js')}',
    function () { return typeof window.jQuery == "function"; },
    function () {

      ELFinderLoader.loadScript(
        '#{ asset_url "jquery-ui/js/jquery-ui.js" }',
        function () { return jQuery.ui == "function" },
        function () { ELFinderLoader.loadScript('#{ asset_url "ui.js" }'); }
      );

      ELFinderLoader.loadScript(
        '#{ asset_url "jQuery-File-Upload/js/vendor/jquery.ui.widget.js" }', null,
        function () {
          ELFinderLoader.loadScript(
            '#{ asset_url "jQuery-File-Upload/js/jquery.fileupload.js" }',
            function () { return typeof $().fileupload == "function"; },
            function () { ELFinderLoader.loadScript('#{ asset_url "fileupload.js" }'); }
          );
        }
      );

      ELFinderLoader.loadScript(
        '#{ asset_url "noty/jquery.noty.js" }',
        function () { return typeof window.noty == "function"; },
        function () {
          ELFinderLoader.loadScript('#{ asset_url "noty/layouts/top.js" }');
          ELFinderLoader.loadScript('#{ asset_url "noty/layouts/topRight.js" }');
          ELFinderLoader.loadScript('#{ asset_url "noty/themes/default.js" }');
        }
      );

      ELFinderLoader.loadScript(
        '#{ asset_url "colorbox/jquery.colorbox-min.js" }',
        function () { return typeof $().colorbox == "function"; },
        function () {
          $(function() {
            jQuery.each(ELFinderColorboxes, function(i, callback) { callback() });
          });
        }
      );

      ELFinderLoader.loadScript(
        '#{ asset_url "bootstrap/js/bootstrap.min.js" }',
        function() { return typeof $().dropdown == "function"; },
        function() { $('.dropdown-toggle').dropdown() }
      );
      ELFinderLoader.loadStylesheet(
        '#{{ asset_url "bootstrap/css/bootstrap.min.css" }}',
        '.span12'
      );
    }
  );

- given = [:location, :file].inject({}) do |units,unit|
  - url, units[unit] = params[unit], nil
  - if url || unit == :location
    - url = EUtils.normalize_path(url.to_s.gsub(/\/+Z/, ''))
    - units[unit] = {}
    - units[unit][:URL ] = url
    - units[unit][:name] = name = File.basename(url)
    - units[unit][:path] = File.dirname(url)
    - units[unit][:fullpath  ] = File.join(root, url)
    - units[unit][:path_array] = url.split('/')
    - units[unit][:path_array].unshift('') unless units[unit][:path_array].first == ''
  - units
- given = Struct.new(*given.keys).new(*given.values)

- editor_opts = Hash[env[:EDITOR_OPTS]||{}]
- editor = editor_opts.delete(:editor)

.container-fluid
  .row-fluid
    .span
      ul.breadcrumb
        li
          a href=parent_route
            i.icon-home
            |  
            = File.basename(root)
        - path_array = given.file ? given.file[:path_array] : given.location[:path_array]
        - path_array.inject([]) do |path,unit|
          - path << unit
          - active = path == path_array
          li class=('active' if active)
            - if active
              = unit
            - else
              a href=parent_route(location: File.join(*path))
                = unit
              span.divider
                | /
          - path

      .form-inline
        - if given.location[:path_array].size > 1 || given.file
          - value = given.file ? given.file[:name] : given.location[:name]
          .input-append
            input.input-rename#input-rename type="text" value=value
            button.btn type="button" onclick=="ELFinder.rename();"
              | rename&nbsp;
              i.icon-pencil
          | &nbsp;

        - if given.file
          - editable = editable?(given.file[:fullpath]) || params[:force_edit]
          javascript:
            var ELFinder = new ELFinderAPI('#{parent_route}', {
              location: {
                path: '#{given.location[:path]}',
                name: '#{given.location[:name]}',
                URL:  '#{given.location[:URL]}'
              },
              file: {
                path: '#{given.file[:path]}',
                name: '#{given.file[:name]}',
                URL:  '#{given.file[:URL]}'
              }
            });

          .btn-group
            button.btn type="button" onclick=="ELFinder.download();"
              i.icon-download-alt
              | &nbsp;download

            - if editable
              button.btn.btn-info.input-medium.saveButton type="button" onclick=="ELFinder.save_file();"
                i.icon-edit
                | &nbsp;SAVE

          .btn-group
            button.btn.btn-warning type="button" onclick=="ELFinder.delete('file');"
              i.icon-trash
              | &nbsp;delete
            a.btn href=parent_route(location: given.location[:URL])
              | close&nbsp;
              i.icon-remove

          p
            - if image?(given.file[:name])

              ul.thumbnails
                li.span12
                  .thumbnail
                    == img_tag src: parent_route(:image, image: given.file[:URL])

            - elsif editable
              p
                textarea.text_editor.input-block-level#ELFinderEditor = File.read(given.file[:fullpath])
              - if editor == :ace
                == ace('ELFinderEditor', editor_opts.merge(file: given.file[:name]))
              - elsif editor == :ckeditor
                == ckeditor('ELFinderEditor', editor_opts)

            - else
              ul.thumbnails
                li.span12
                  .thumbnail
                    h4 
                      | Was unable to find a suitable editor for this type of file.&nbsp;
                      a href=parent_route(location: given.location[:URL], file: given.file[:URL], force_edit: 'true')
                        | Open it as a text file.

        - else
          javascript:
            var ELFinder = new ELFinderAPI('#{parent_route}', {
              location: {
                path: '#{given.location[:path]}', 
                name: '#{given.location[:name]}',
                URL:  '#{given.location[:URL]}'
              }
            });

          .input-append
            input.input-mini#input-create type="text" onfocus=="$(this).removeClass('input-mini');"
            button.btn type="button" onclick=="ELFinder.create('file');"
              i.icon-file
              | new file
            button.btn type="button" onclick=="ELFinder.create('folder');"
              i.icon-folder-close
              | new folder
          | &nbsp;

          span.btn.fileinput-button
            input#fileupload type="file" name="files[]" multiple=true data-url=parent_route(:upload, path: given.location[:URL])
              i.icon-upload
              | &nbsp;upload

          - if given.location[:path_array].size > 1
            .btn-group
              button.btn.btn-warning type="button" onclick=="ELFinder.delete('folder');"
                i.icon-trash
                | &nbsp;delete
              a.btn href=parent_route(location: given.location[:path])
                | close&nbsp;
                i.icon-remove
            
          hr
          table
            tr
              - given.location[:path_array].inject([]) do |path_array,dir|
                - fullpath = File.join(root, *path_array, dir)
                - if File.directory?(fullpath)
                  - path_array << dir

                  td.column
                    - context = {path_array: path_array, fullpath: fullpath, given: given}
                    == render_p :column, context
                    javascript:
                      ELFinderColorboxes.push(function() {
                        $('.slider-#{fullpath.hash}').colorbox({
                          rel: 'slider-#{fullpath.hash}',
                          width: '80%',
                          height: '80%'
                        });
                      });
                - path_array
              td#right_edge

          #progress_modal.modal.hide
            .modal-header Uploading file(s), please wait ...
            .modal-body
              #progress_bar.progress.progress-striped.active
                .bar style="width: 0%;"

iframe#ELFinderDownloadIframe