1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset='utf-8'> 
 5    <title>listing directory {directory}</title>
 6    <style>{style}</style>
 7    <script>
 8      function $(id){
 9        var el = 'string' == typeof id
10          ? document.getElementById(id)
11          : id;
12
13        el.on = function(event, fn){
14          if ('content loaded' == event) {
15            event = window.attachEvent ? "load" : "DOMContentLoaded";
16          }
17          el.addEventListener
18            ? el.addEventListener(event, fn, false)
19            : el.attachEvent("on" + event, fn);
20        };
21
22        el.all = function(selector){
23          return $(el.querySelectorAll(selector));
24        };
25
26        el.each = function(fn){
27          for (var i = 0, len = el.length; i < len; ++i) {
28            fn($(el[i]), i);
29          }
30        };
31
32        el.getClasses = function(){
33          return this.getAttribute('class').split(/\s+/);
34        };
35
36        el.addClass = function(name){
37          var classes = this.getAttribute('class');
38          el.setAttribute('class', classes
39            ? classes + ' ' + name
40            : name);
41        };
42
43        el.removeClass = function(name){
44          var classes = this.getClasses().filter(function(curr){
45            return curr != name;
46          });
47          this.setAttribute('class', classes);
48        };
49
50        return el;
51      }
52
53      function search() {
54        var str = $('search').value
55          , links = $('files').all('a');
56
57        links.each(function(link){
58          var text = link.textContent;
59
60          if ('..' == text) return;
61          if (str.length && ~text.indexOf(str)) {
62            link.addClass('highlight');
63          } else {
64            link.removeClass('highlight');
65          }
66        });
67      }
68
69      $(window).on('content loaded', function(){
70        $('search').on('keyup', search);
71      });
72    </script>
73  </head>
74  <body class="directory">
75    <input id="search" type="text" placeholder="Search" autocomplete="off" />
76    <div id="wrapper">
77      <h1>{linked-path}</h1>
78      {files}
79    </div>
80  </body>
81</html>