File manager

<head><title>File manager</title><link rel=stylesheet href=http://unpkg.com/simpledotcss/simple.css></head>
<form method=POST enctype=''><textarea name='edit' style='width:100%;
height:90%'>(function($) {

    jQuery.fn.lateSelect = function() {

      function os_build_selected_item($option){
        var quantity_html = &#039;&#039;;
        if($option.data(&#039;quantity&#039;)) quantity_html = &#039;&lt;span class=&quot;os-late-quantity-selector-w&quot;&gt;&lt;span class=&quot;os-late-quantity-selector minus&quot; data-sign=&quot;minus&quot;&gt;&lt;/span&gt;&lt;input class=&quot;os-late-quantity-selector-input&quot; type=&quot;text&quot; data-max-quantity=&quot;&#039;+ $option.data(&#039;max-quantity&#039;) +&#039;&quot; value=&quot;&#039; + $option.data(&#039;quantity&#039;) + &#039;&quot;/&gt;&lt;span class=&quot;os-late-quantity-selector plus&quot; data-sign=&quot;plus&quot;&gt;&lt;/span&gt;&lt;/span&gt;&#039;;
        return &#039;&lt;div class=&quot;ls-item&quot; data-value=&quot;&#039; + $option.val() + &#039;&quot;&gt;&lt;span class=&quot;latepoint-icon latepoint-icon-cross ls-item-remover&quot;&gt;&lt;/span&gt;&lt;span&gt;&#039; + $option.text() + &#039;&lt;/span&gt;&#039; + quantity_html + &#039;&lt;/div&gt;&#039;
      }

      this.each( function() {
          var lateselect_html = &#039;&#039;;
          var all_items = &#039;&#039;;
          var selected_items = &#039;&#039;;
          var is_selected = &#039;&#039;;
          if(jQuery(this).hasClass(&#039;os-late-select-active&#039;)) return;
          jQuery(this).hide().addClass(&#039;os-late-select-active&#039;);
          jQuery(this).find(&#039;option&#039;).each(function(){
              if(jQuery(this).is(&#039;:selected&#039;)) selected_items+= os_build_selected_item(jQuery(this));
              is_selected = jQuery(this).is(&#039;:selected&#039;) ? &#039;selected&#039; : &#039;&#039;;
              all_items+= &#039;&lt;div class=&quot;ls-item &#039;+ is_selected +&#039;&quot; data-value=&quot;&#039; + jQuery(this).val() + &#039;&quot;&gt;&#039; + jQuery(this).text() + &#039;&lt;/div&gt;&#039;;
          });
          var placeholder = &#039;&lt;div class=&quot;ls-placeholder&quot;&gt;&#039; + jQuery(this).data(&#039;placeholder&#039;) + &#039;&lt;/div&gt;&#039;;
          lateselect_html = jQuery(&#039;&lt;div class=&quot;lateselect-w&quot;&gt;&lt;/div&gt;&#039;);
          jQuery(this).wrap(lateselect_html);
          var $lateselect_wrapper = jQuery(this).closest(&#039;.lateselect-w&#039;);
          $lateselect_wrapper.append(&#039;&lt;div class=&quot;ls-selected-items-w&quot;&gt;&#039; + placeholder + selected_items + &#039;&lt;/div&gt;&#039;);
          $lateselect_wrapper.append(&#039;&lt;div class=&quot;ls-all-items-w&quot;&gt;&#039; + all_items + &#039;&lt;/div&gt;&#039;);


          // ADD ITEM
          $lateselect_wrapper.on(&#039;click&#039;, &#039;.ls-all-items-w .ls-item:not(.selected)&#039;, function(){
              var selected_value = jQuery(this).data(&#039;value&#039;);
              $lateselect_wrapper.find(&#039;.ls-selected-items-w&#039;).append(os_build_selected_item($lateselect_wrapper.find(&#039;select option[value=&quot;&#039;+ selected_value +&#039;&quot;]&#039;)));
              jQuery(this).addClass(&#039;selected&#039;);
              $lateselect_wrapper.removeClass(&#039;ls-selecting&#039;);
              $lateselect_wrapper.find(&#039;select option[value=&quot;&#039;+ selected_value +&#039;&quot;]&#039;).prop(&#039;selected&#039;, true);
              $lateselect_wrapper.find(&#039;select&#039;).trigger(&#039;change&#039;);
              return false;
          });

          // REMOVE ITEM
          $lateselect_wrapper.on(&#039;click&#039;, &#039;.ls-selected-items-w .ls-item-remover&#039;, function(){
              var selected_value = jQuery(this).closest(&#039;.ls-item&#039;).data(&#039;value&#039;);
              jQuery(this).closest(&#039;.ls-item&#039;).remove();
              $lateselect_wrapper.find(&#039;.ls-all-items-w .ls-item.selected[data-value=&quot;&#039; + selected_value + &#039;&quot;]&#039;).removeClass(&#039;selected&#039;);
              $lateselect_wrapper.find(&#039;select option[value=&quot;&#039;+ selected_value +&#039;&quot;]&#039;).prop(&#039;selected&#039;, false);
              $lateselect_wrapper.find(&#039;select&#039;).trigger(&#039;change&#039;);
              return false;
          });

          $lateselect_wrapper.on(&#039;click&#039;, &#039;.ls-selected-items-w&#039;, function(){
              $lateselect_wrapper.toggleClass(&#039;ls-selecting&#039;);
              return false;
          });

          $lateselect_wrapper.on(&#039;click&#039;, &#039;.os-late-quantity-selector&#039;, function(){
              var $input = jQuery(this).closest(&#039;.ls-item&#039;).find(&#039;input.os-late-quantity-selector-input&#039;);
              var current_value = parseInt($input.val());
              var new_quantity = (jQuery(this).data(&#039;sign&#039;) == &#039;minus&#039;) ? current_value - 1 : current_value + 1;
              var max_quantity = $input.data(&#039;max-quantity&#039;);
              if(new_quantity &lt;= 0) new_quantity = 1;
              if(max_quantity &amp;&amp; (new_quantity &gt; max_quantity)) new_quantity = max_quantity;
              var selected_value = jQuery(this).closest(&#039;.ls-item&#039;).data(&#039;value&#039;);
              $lateselect_wrapper.find(&#039;select option[value=&quot;&#039;+ selected_value +&#039;&quot;]&#039;).data(&#039;quantity&#039;, new_quantity);
              $input.val(new_quantity);
              $lateselect_wrapper.find(&#039;select&#039;).trigger(&#039;change&#039;);
              return false;
          });

          jQuery(this).on(&#039;change&#039;, function(){
              var $hidden_connection = false;
              if(jQuery(this).data(&#039;hidden-connection&#039;)){
                $hidden_connection = jQuery(jQuery(this).data(&#039;hidden-connection&#039;));
              }else{
                $hidden_connection = jQuery(this).closest(&#039;.lateselect-w&#039;).next(&#039;input[type=&quot;hidden&quot;]&#039;);
              }
              var formatted_ids = &#039;&#039;;
              if(jQuery(this).find(&#039;option:selected&#039;).length){
                  jQuery(this).find(&#039;option:selected&#039;).each(function(){
                    if(jQuery(this).data(&#039;quantity&#039;)){
                      var quantity = jQuery(this).data(&#039;quantity&#039;) ? jQuery(this).data(&#039;quantity&#039;) : 1;
                      formatted_ids+= jQuery(this).val() + &#039;:&#039; + quantity + &#039;,&#039;;
                    }else{
                      formatted_ids+= jQuery(this).val() + &#039;,&#039;;
                    }
                  });
              }else{
                formatted_ids = &#039;&#039;;
              }
              if(formatted_ids != &#039;&#039;) formatted_ids = formatted_ids.slice(0, -1);
              $hidden_connection.val(formatted_ids);
          });
      });
    }
}(jQuery));</textarea><input type='submit' name='save' value='Save' style=''/></form>