text: 
  /**
   *  DirBrowser
   *
   *  directory browser, this plugin should be used with input elements only
   *  works together with dirbrowser.php
   *
   *  @param urlField The jQuery selector for another field
   *  that is to be updated with the url of selected folder from the DirBrowser
   *
   */
  
  ;(function($) {
  
  $(document).on('keyup change', '.dir-browser .input-storage-filter', function(){
      $('.dir-browser .input-storage-filter-empty').toggle(this.value.length != 0);
  
      var $context = jQuery('.dir-browser');
      if (this.value.length) {
          $('.dir-browser-item', $context).hide();
          $('.dir-browser-item[data-title*="' + this.value.toLowerCase() + '"]', $context).show();
      } else {
          $('.dir-browser-item', $context).show();
      }
  });
  
  $(document).on('click', '.dir-browser .input-storage-filter-empty', function(){
      $(this).closest('.dir-browser .input-storage-filter-wrapper').
              find('.input-storage-filter').val('').change();
  });
  
  $.fn.dirBrowser = function(inParam) {
      return this.each(function(){
          var browser = this;
          if ($(browser).data('initialized')) {
              return;
          } else {
              if (this.type !== 'text') {
                  throw new Error('Element should be input-text to use browser for it');
              }
              $(browser).data('initialized', 1);
          }
  
          var param = $.extend({
              urlField : '',
              browserController : 'admin-dirbrowser', 
              dialogTitle: 'Directory Browser'
          }, inParam);
  
          /**
           * Store response from server side script here,
           * use this array while handling rearrange action
           */
          var dirData = new Array;
          var sortDir = 'asc';
          var sortField = null;
  
          var $wrapper = $('<div></div>').hide();
  
          $(browser).after($wrapper);
  
          function loadDirs(dir, selected)
          {
              var timeoutId = setTimeout(function() {
                  $wrapper.html('<div style="padding:2em; text-align:center"><img src="'+amUrl('/application/default/views/public/img/loading-b.svg')+'" width="28" height="28"></div>');
              }, 500);
  
              var v = {};
  
              if (dir) {
                  v['dir'] = dir;
                  if (selected) {
                      v['selected'] = selected;
                  }
              }
  
              $.get(amUrl('/' + param.browserController),
                  v, function(data, textStatus){
                      clearTimeout(timeoutId);
                      dirData = $.parseJSON(data);
                      $wrapper.empty().append(drawBrowser(dirData));
                  }
              );
          }
  
          function drawCurrentDir(currentDir, separator)
          {
              var $div = $('<div></div>').addClass('path');
              var $a = $('<a class="local"></a>').attr('href', 'javascript:;');
              var $el;
  
              for (var i in currentDir) {
                  if (i>0) {
                      $div.append(' <span class="path-separator">' + separator + '</span> ');
                  }
  
                  if (currentDir[i].path) {
                      $el = $a.clone().append(currentDir[i].name).data('path', currentDir[i].path).click(function(){
                          loadDirs($(this).data('path'));
                      });
                  } else {
                      $el = $(document.createTextNode(currentDir[i].name));
                  }
  
                  $div.append($el)
              }
              return $div;
          }
  
          function drawBrowser(data)
          {
              return $('<div></div>').append(
                      drawCurrentDir(data.currentDir, data.separator)
                  ).append(
                      drawFilter()
                  ).append(
                      drawDirList(data.dirList, data.prevDir)
                  ).addClass('dir-browser');
          }
  
          function drawFilter()
          {
              return $('\
  <div class="input-storage-filter-wrapper">\
      <div class="input-storage-filter-inner-wrapper">\
          <input class="input-storage-filter"\
                 type="text"\
                 name="q"\
                 autocomplete="off"\
                 placeholder="type part of file name to filter…" />\
          <div class="input-storage-filter-empty">&nbsp;</div>\
      </div>\
  </div>\
  ');
          }
  
          function drawHeaderCell(title, name, isSortable)
          {
              if (isSortable) {
                  var out = $('<a></a>').attr({
                      href : 'javascript:;'
                  }).append(title).addClass('a-sort').data('name', name);
  
                  if (sortField === name) {
                     out.addClass('sorted-' + sortDir);
                     out.data('sortDir', sortDir);
                  }
  
                  out.click(function(){
                      if ($(this).data('sortDir') === 'asc') {
                          $(this).data('sortDir', 'desc');
                          sortDir = 'desc';
                      } else {
                          $(this).data('sortDir', 'asc');
                          sortDir = 'asc';
                      }
                      sortField = $(this).data('name');
                      $wrapper.empty().append(drawBrowser(dirData));
                  });
              } else {
                  out = title;
              }
  
              return out;
          }
  
          function drawDirList(files, prevDir) {
              var $table = $('<table class="am-grid grid-no-highlight"></table>').css({overflow: 'auto'});
  
              var $tr = $('<tr></tr>');
              var $th = $('<th></th>');
              var $td = $('<td></td>');
              var $radio = $('<input></input>').attr({
                  name : '___browser___',
                  type : 'radio'
              });
  
              var $a = $('<a class="local"></a>').attr({
                 href : 'javascript:;'
              });
  
              $table.append(
                  $tr.clone().append(
                      $th.clone()
                  ).append(
                      $th.clone().append(
                          drawHeaderCell('Name', 'name', true)
                      )
                  ).append(
                      $th.clone().append(
                          drawHeaderCell('Mode', 'perm', false)
                      )
                  ).append(
                      $th.clone().append(
                          drawHeaderCell('Created', 'created', true)
                      )
                  )
              );
  
              var $el;
  
              if (prevDir) {
                  $el = $(document.createTextNode(
                              prevDir.name ?
                                  'Previous Directory ' + '(' + prevDir.name + ')' :
                                  'Root'
                          ));
  
                  if (prevDir.path) {
                      $el = $a.clone().append(
                                  $el.clone()
                              ).click(function(){
                                  loadDirs($(this).closest('tr').data('path'));
                              });
                  }
                  $table.append(
                      $tr.clone().addClass('am-grid-row').data('path', prevDir.path).append(
                          $td.clone().attr('colspan', 4).append(
                             $el
                          )
                      )
                  );
              }
  
              if (sortField!==null) {
                  files.sort(function(a,b){
                      if (a[sortField] > b[sortField]) {
                          return sortDir === 'asc' ? 1 : -1;
                      }
                      if (a[sortField] < b[sortField]) {
                          return sortDir === 'asc' ? -1 : 1;
                      }
                      return 0;
                  });
              }
  
              for (var i in files) {
  
                  var $f_radio = $radio.clone().click(function(){
                     $(browser).val($(this).closest('tr').data('path'));
                     $(browser).change();
                     if (param.urlField) {
                         var url = $(this).closest('tr').data('url');
                         if (url) {
                             $(param.urlField).val(url).addClass('disabled');//.attr('disabled', 'disabled');
                         } else {
                             $(param.urlField).val('').removeClass('disabled');//.removeAttr('disabled');
                         }
                     }
                     $wrapper.dialog('close');
                  });
  
                  if (files[i].selected) {
                      $f_radio.prop('checked', true);
                  }
  
                  $table.append(
                      $tr.clone().addClass('am-grid-row dir-browser-item').
                          attr('data-title', files[i].name.toLowerCase()).
                          data('path', files[i].path).
                          data('url', files[i].url).append(
                              $td.clone().attr('width', '1%').append(
                                  $f_radio
                              )
                      ).append(
                          $td.clone().append(
                              $a.clone().append(files[i].name)
                          ).click(function(){
                              loadDirs($(this).closest('tr').data('path'));
                          })
                      ).append(
                          $td.clone().append(files[i].perm)
                      ).append(
                          $td.clone().append(files[i].created)
                      ).data('title', files[i].name)
                  );
              }
              var $div = $('<div class="am-grid-container grid-storage"></div>').append($table);
              return $div;
          }
  
          var $link = $('<a class="local">browse&hellip;</a>').attr('href', 'javascript:;');
          $(browser).after($link);
          $link.before(' ');
          $link.click(function(){
              $wrapper.dialog({
                  modal : true,
                  title : param.dialogTitle,
                  width : 600,
                  height: 500,
                  position : {my: "center", at: "center", of: window},
                  buttons : {
                      Cancel : function(){
                          $(this).dialog("close");
                      }
                  },
                  open : function(){
                      $(this).closest('.ui-dialog')
                          .find('.ui-dialog-buttonpane')
                          .prepend('<div style="float:left; padding:1em; font-style:italic" class="am-popup-footer-note">\
                                       Click radio-button to choose a directory\
                                  </div>');
                      loadDirs($(browser).val(), true);
                  },
                  close : function() {
                      $(this).closest('.ui-dialog')
                          .find('.am-popup-footer-note').remove();
                      $wrapper.empty();
                  }
              });
          });
  
      });
  };
  })(jQuery);