{#-
  The generated page ought to work in most browsers. Currently supports
  down to IE 6. (some CSS breaks in IE5, but still browsable)

  Beware of cross-browser compatibility, basicly comply with CSS 2.1 and
  ECMAscript 3 or provide a fallback.

  - Avoid Node.textContent (break in IE < 9)
  - Avoid Array.prototype.indexOf (break in IE < 9)
  - Avoid Event.preventDefault (break in IE < 9)
-#}
<!DOCTYPE html>
<!--
  This file is generated by WebScrapBook and is not intended to be edited.
  Create {{ filename }}.css and/or {{ filename }}.js for customization.
-->
<html dir="{{ i18n('@@bidi_dir') }}" data-scrapbook-tree-page="{{ filename }}">
<head>
<base target="view">
<meta charset="UTF-8">
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
{% if rss -%}
<link rel="alternate" type ="application/rss+xml" title="Atom Feed" href="feed.atom">
{% endif -%}
<style>
html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.35em;
}

#header {
  margin-bottom: .75em;
  border: 1px solid #A0A0A0;
  padding: .125em .5em;
  background-color: #FFFFE1;
}

#header > a {
  color: #666666;
}

#search img {
  margin: 0;
  width: 1.5em;
  height: 1em;
}

#item-root {
  padding: 0 1.5em;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
  margin: .2em 0;
  padding-{{ i18n('@@bidi_start_edge') }}: 1em;
}

li > div {
  margin-{{ i18n('@@bidi_start_edge') }}: -1em;
  white-space: nowrap;
}

li > div:hover {
  background-color: rgba(196, 221, 252, 0.3);
}

li > div:focus {
  outline-style: auto;
  background-color: rgba(196, 221, 252, 1);
}

a {
  text-decoration: none;
  color: #000000;
}

a:focus {
  outline-style: auto;
  background-color: rgba(196, 221, 252, 1);
}

a > img {
  display: inline-block;
  margin: 0 .2em;
  border: none;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

a.scrapbook-toggle {
  position: absolute;
  margin-{{ i18n('@@bidi_start_edge') }}: -1em;
}

a.scrapbook-toggle > img {
  margin: 0;
}

a.scrapbook-external > img {
  margin: 0 .1em;
  width: .7em;
  height: .7em;
  vertical-align: top;
}

a.scrapbook-comment > img {
  margin: 1.5px .1em 1.5px;
  width: .7em;
  height: .7em;
  vertical-align: top;
}

.scrapbook-type-bookmark > div > a {
  color: rgb(32,192,32);
}

.scrapbook-type-note > div > a {
  color: rgb(80,0,32);
}

.scrapbook-type-combine > div > a {
  color: blue;
}

.scrapbook-type-separator > div > fieldset {
  margin: 0;
  border: none;
  border-top: 1px solid #aaa;
  padding: 0 0 0 1em;
  text-indent: 0;
}

.scrapbook-type-separator > div > fieldset > legend {
  padding: 0;
}

.scrapbook-marked > div > a {
  font-weight: bold;
}
</style>
<link rel="stylesheet" href="{{ filename }}.css">
<script>
var scrapbook = {
  conf: {
    dataDir: {{ data_dir | tojson }},
    viewSourceTitle: {{ i18n('cache_index_source_link_title') | tojson }},
    defaultIcons: {{ default_icons | tojson }}
  },

  data: {
    title: document.title,
    toc: {},
    meta: {}
  },

  toc: function (data) {
    for (var id in data) {
      this.data.toc[id] = data[id];
    }
  },

  meta: function (data) {
    for (var id in data) {
      this.data.meta[id] = data[id];
    }
  },

  init: function () {
    var rootElem = document.getElementById('item-root');
    while (rootElem) {
      rootElem.parentNode.removeChild(rootElem);
      rootElem = document.getElementById('item-root');
    }

    var rootElem = document.createElement('div');
    rootElem.id = 'item-root';

    rootElem.container = document.createElement('ul');
    rootElem.container.className = 'scrapbook-container';
    rootElem.appendChild(rootElem.container);

    for (var i = 0, I = scrapbook.data.toc.root.length; i < I; i++) {
      var id = scrapbook.data.toc.root[i];
      scrapbook.addItem(id, rootElem, ["root"]);
    }

    document.body.appendChild(rootElem);

    document.getElementById('toggle-all').onclick = scrapbook.onClickToggleAll;

    scrapbook.loadHash();
  },

  addItem: function (id, parent, idChain) {
    var meta = scrapbook.data.meta[id];

    var elem = document.createElement('li');
    elem.id = 'item-' + id;

    var classes = [];
    if (meta.type) { classes.push('scrapbook-type-' + meta.type); }
    if (meta.marked) { classes.push('scrapbook-marked'); }
    elem.className = classes.join(' ');

    var div = elem.appendChild(document.createElement('div'));
    div.setAttribute('tabindex', -1);
    div.onclick = scrapbook.onClickItem;

    if (meta.type !== 'separator') {
      var a = div.appendChild(document.createElement('a'));
      a.appendChild(document.createTextNode(meta.title || id));
      a.title = (meta.title || id) + (meta.source ? "\n" + meta.source : "") + (meta.comment ? "\n\n" + meta.comment : "");
      if (meta.type !== 'bookmark') {
        if (meta.index) { a.href = scrapbook.conf.dataDir + scrapbook.escapeFilename(meta.index); }
      } else {
        if (meta.source) {
          a.href = meta.source;
        } else {
          if (meta.index) { a.href = scrapbook.conf.dataDir + scrapbook.escapeFilename(meta.index); }
        }
      }
      if (meta.type === 'folder') { a.onclick = scrapbook.onClickFolder; }

      var icon = a.insertBefore(document.createElement('img'), a.firstChild);
      if (meta.icon) {
        icon.src = /^(?:[a-z][a-z0-9+.-]*:|[/])/i.test(meta.icon || "") ? 
            meta.icon : 
            (scrapbook.conf.dataDir + scrapbook.escapeFilename(meta.index || "")).replace(/[/][^/]+$/, '/') + meta.icon;
      } else {
        icon.src = scrapbook.conf.defaultIcons[meta.type] || scrapbook.conf.defaultIcons[''];
      }
      icon.alt = "";

      if (meta.type !== 'bookmark' && meta.source) {
        var srcLink = div.appendChild(document.createElement('a'));
        srcLink.className = 'scrapbook-external';
        srcLink.href = meta.source;
        srcLink.title = scrapbook.conf.viewSourceTitle;
        srcLink.target = "_blank";

        var srcImg = srcLink.appendChild(document.createElement('img'));
        srcImg.src = 'icon/external.png';
        srcImg.alt = '';
      }

      if (meta.comment) {
        var commentLink = div.appendChild(document.createElement('a'));
        commentLink.className = 'scrapbook-comment';
        commentLink.href = '';
        commentLink.title = meta.comment;
        commentLink.onclick = scrapbook.onClickComment;

        var commentImg = commentLink.appendChild(document.createElement('img'));
        commentImg.src = 'icon/comment.png';
        commentImg.alt = '';
      }
    } else {
      var line = div.appendChild(document.createElement('fieldset'));
      line.title = (meta.title || "") + (meta.source ? "\n" + meta.source : "") + (meta.comment ? "\n\n" + meta.comment : "");

      var legend = line.appendChild(document.createElement('legend'));
      legend.appendChild(document.createTextNode('\xA0' + (meta.title || '') + '\xA0'));
    }

    addChildren: {
      for (var i = 0, I = idChain.length; i < I; i++) {
        if (idChain[i] === id) {
          break addChildren;
        }
      }

      idChain.push(id);
      var childIdList = scrapbook.data.toc[id];
      if (childIdList && childIdList.length) {
        elem.toggle = div.insertBefore(document.createElement('a'), div.firstChild);
        elem.toggle.href = '#';
        elem.toggle.className = 'scrapbook-toggle';
        elem.toggle.onclick = scrapbook.onClickToggle;

        var toggleImg = elem.toggle.appendChild(document.createElement('img'));
        toggleImg.src = 'icon/collapse.png';
        toggleImg.alt = '';

        elem.container = elem.appendChild(document.createElement('ul'));
        elem.container.className = 'scrapbook-container';
        elem.container.style.display = 'none';

        for (var i = 0, I = childIdList.length; i < I; i++) {
          scrapbook.addItem(childIdList[i], elem, idChain);
        }
      }
      idChain.pop();
    }

    parent.container.appendChild(elem);

    return elem;
  },

  loadHash: function () {
    var hash = self.location.hash || top.location.hash;
    if (!hash) { return; }

    var itemElem = document.getElementById(hash.slice(1));
    if (!itemElem) { return; }

    var e = itemElem.parentNode;
    while (e && e.parentNode) {
      if (e.nodeName.toLowerCase() === 'ul') {
        scrapbook.toggleElem(e, true);
      }
      e = e.parentNode;
    }

    if (self !== top && location.hash !== hash) {
      location.hash = hash;
    }

    setTimeout(function(){ itemElem.firstChild.focus(); }, 0);

    var anchor = scrapbook.getItemAnchor(itemElem);

    if (anchor) {
      if (self !== top) {
        top.document.title = anchor.firstChild.nodeValue || scrapbook.data.title;
        if (anchor.href) { top.frames["view"].location = anchor.href; }
      }
    }
  },

  getItemAnchor: function (itemElem) {
    var anchorElem = null;
    if (!/^item-(?!root$)/.test(itemElem.id)) { return anchorElem; }

    var elems = itemElem.firstChild.getElementsByTagName('a');
    for (var i = 0, I = elems.length; i < I; i++) {
      var e = elems[i];
      if (e.className !== 'scrapbook-toggle' && 
          e.className !== 'scrapbook-external') {
        anchorElem = e;
        break;
      }
    }
    return anchorElem;
  },

  onClickFolder: function (event) {
    if (event) { event.preventDefault(); }
    var target = this.previousSibling;
    if (target) {
      target.focus();
      target.click();
    }
    return false;
  },

  onClickItem: function (event) {
    var hash = '#' + this.parentNode.id;
    var anchor = scrapbook.getItemAnchor(this.parentNode);

    try {
      var title = anchor ? anchor.firstChild.nodeValue : "";
      title = title || scrapbook.data.title;

      if (self !== top) {
        top.document.title = title;
        if (top.history && top.history.pushState) {
          top.history.pushState('', title, hash);
        } else {
          top.location.hash = hash;
        }
      } else {
        if (history && history.replaceState) {
          history.replaceState('', title, hash);
        }
      }
    } catch(ex) {
      if (console && console.error) { console.error(ex); }
    }
  },

  onClickToggle: function (event) {
    if (event) { event.preventDefault(); }
    scrapbook.toggleElem(this.parentNode.nextSibling);
    return false;
  },

  onClickToggleAll: function (event) {
    if (event) { event.preventDefault(); }
    scrapbook.toggleAllElem();
    return false;
  },

  onClickComment: function (event) {
    if (event) { event.preventDefault(); }
    alert(this.title);
    return false;
  },

  toggleElem: function (elem, willOpen) {
    if (typeof willOpen === "undefined") {
      willOpen = (elem.style.display === "none");
    }
    elem.style.display = willOpen ? '' : 'none';

    try {
      elem.previousSibling.firstChild.firstChild.src = willOpen ? 'icon/expand.png' : 'icon/collapse.png';
    } catch (ex) {
      // if the elem is the root elem, previousSibling is undefined and an error is thrown
    }
  },

  toggleAllElem: function (willOpen) {
    var elems = document.getElementsByTagName("ul");
    if (typeof willOpen === "undefined") {
      willOpen = false;
      for (var i = 1, I = elems.length; i < I; i++) { // skip root
        if (elems[i].style.display === "none") { willOpen = true; break; }
      }
    }
    for (var i = 1, I = elems.length; i < I; i++) { // skip root
      scrapbook.toggleElem(elems[i], willOpen);
    }
  },

  escapeFilename: function (filename) {
    return filename.replace(/[^/]+/g, function (m) { return encodeURIComponent(m); });
  }
};
</script>
{% for i in range(meta_cnt) -%}
<script src="meta{{ i or '' }}.js"></script>
{% endfor -%}
{% for i in range(toc_cnt) -%}
<script src="toc{{ i or '' }}.js"></script>
{% endfor -%}
<script src="{{ filename }}.js"></script>
</head>
<body>
<div id="header">
<a id="toggle-all" title="{{ i18n('cache_index_toggle_all') }}" href="#"><img src="icon/toggle.png">{{ title }}</a>
<a id="search" href="search.html" target="_self" title="{{ i18n('cache_index_search_link_title') }}"><img src="icon/search.png" alt=""></a>
</div>
{% block static_index %}{% endblock -%}
<script>scrapbook.init();</script>
</body>
</html>
