PythonSlideShow

Changeset

9:5b81e83a114f
2010-09-02 ink raw files shortlog changelog graph changed README default tip
README (file) chrome-directory-listing.html (file) generated_slides (file) template_H5p10n.html (file) walkfs-writemarkup.py (file)
     1.1 --- a/README	Thu Aug 26 22:10:08 2010 +0300
     1.2 +++ b/README	Thu Sep 02 00:27:59 2010 +0300
     1.3 @@ -1,21 +1,35 @@
     1.4  {{{
     1.5 -This ReadMe is for a Python HTML5 Slideshow.
     1.6 -
     1.7 -The code parses wiki markup and directory hierarchies to produce a slideshow, like that ones at http://slides.html5rocks.com, for navigation, and at http://smoothgallery.jondesign.net/showcase/gallery-set/ for timed transition. It ought not to matter that the document is HTML4.01).
     1.8 +This ReadMe is for Python-based combined-output documentation tool. Python code parses wiki text to the listed multi-formatted output, in one file:
     1.9 +- text                        --search the web for ready libs that do wiki text->plaintext
    1.10 +- HTML4 basic content         --This wiki does wiki text->HTML4
    1.11 +- HTML5 basic content         --search the web for ready libs that do wiki text->HTML5
    1.12 +                              ?? http://hg.moinmo.in/moin/2.0-dev 
    1.13 +- HTML5 simplified slideshow  --combine and simplify, moinmoin's own with s5 and html5rocks to run a timed slideshow with inline SVG, audio and video
    1.14  
    1.15 -Use cases: Family album, Business analysis portfolio, File system navigation, Blender presentation
    1.16 +The standalone documentation file's HTML4 basic content is the fallback format. Javascript determines and offers available formats for the client. A 'try' function in Javascript allows graceful fallback error messages.
    1.17  
    1.18 -Current activity
    1.19 -	Python: Map files below "./", generating slide content from file and directory meta-information and then from wiki text file content. Put the result in a HTML 5 slideshow template.
    1.20 +The code parses wiki markup and directory hierarchies:
    1.21 +  produce a documentation or a slideshow with notes, ease and speed up file system navigation,
    1.22 +
    1.23 +Do timed transition later. 
    1.24 +
    1.25 +It supplements Google-Chrome's view of a single directory listing to become a slideshow that details text content, metadata and, if applicable, header and/or mime info.
    1.26  
    1.27 -Next
    1.28 -   Python: Read wiki text files and parse their content into one or more slides subordinate to the meta-information slide.
    1.29 +   References:
    1.30 +http://code.google.com/
    1.31 +view-source:file:/// (in google-chrome)
    1.32 +http://slides.html5rocks.com 
    1.33 +http://smoothgallery.jondesign.net/showcase/gallery-set/
    1.34 +http://docs.python.org/py3k/library/html.parser.html#module-html.parser
    1.35  
    1.36 -   Javascript: Implement the current transition model but in the vertical, not the horizontal.
    1.37 -   Javascript: Edit Spacebar, right cursor action (go to next-sibling file or directory slide)
    1.38 -   Javascript: Edit left cursor action (go to previous-sibling file or directory slide)  
    1.39 -   Javascript: Add up cursor key action (go to parent directory or ../first-child slide).
    1.40 -   Javascript: Add down cursor key action (go to ./first-child-directory slide).
    1.41 -   Javascript: Add Home key action (go to ./first-sibling slide||./root-level-ancestor slide||root slide).
    1.42 -   Javascript: Add Home key action (go to ./last-sibling).
    1.43 +   Use cases:
    1.44 +File system navigation, Employment, CV, Family album, Business analysis, Blender presentation
    1.45 +
    1.46 +   Tasks
    1.47 +
    1.48 +Simplify Javascript and presentation code. Remove eye-candy, focus on navigability.
    1.49 +Python: Read wiki text files and parse their content into one or more slides subordinate to the meta-information slide.
    1.50 +Python: Map files below "./", put the result in a HTML 5 slideshow template.
    1.51 +CSS/Javascript: Implement the current transition model but in the vertical, not the horizontal.
    1.52 +Python: Generate slide content from file and directory meta-information and then from wiki text file content.
    1.53  }}}
     2.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     2.2 +++ b/chrome-directory-listing.html	Thu Sep 02 00:27:59 2010 +0300
     2.3 @@ -0,0 +1,272 @@
     2.4 +<!DOCTYPE html> 
     2.5 + 
     2.6 +<html> 
     2.7 + 
     2.8 +<head> 
     2.9 + 
    2.10 +<script> 
    2.11 +function addRow(name, url, isdir, size, date_modified) {
    2.12 +  if (name == ".")
    2.13 +    return;
    2.14 + 
    2.15 +  var root = "" + document.location;
    2.16 +  if (root.substr(-1) !== "/")
    2.17 +    root += "/";
    2.18 + 
    2.19 +  var table = document.getElementById("table");
    2.20 +  var row = document.createElement("tr");
    2.21 +  var file_cell = document.createElement("td");
    2.22 +  var link = document.createElement("a");
    2.23 + 
    2.24 +  link.className = isdir ? "icon dir" : "icon file";
    2.25 + 
    2.26 +  if (name == "..") {
    2.27 +    link.href = root + "..";
    2.28 +    link.innerText = document.getElementById("parentDirText").innerText;
    2.29 +    link.className = "icon up";
    2.30 +    size = "";
    2.31 +    date_modified = "";
    2.32 +  } else {
    2.33 +    if (isdir) {
    2.34 +      name = name + "/";
    2.35 +      url = url + "/";
    2.36 +      size = "";
    2.37 +    }
    2.38 +    link.innerText = name;
    2.39 +    link.href = root + url;
    2.40 +  }
    2.41 +  file_cell.appendChild(link);
    2.42 + 
    2.43 +  row.appendChild(file_cell);
    2.44 +  row.appendChild(createCell(size));
    2.45 +  row.appendChild(createCell(date_modified));
    2.46 + 
    2.47 +  table.appendChild(row);
    2.48 +}
    2.49 + 
    2.50 +function createCell(text) {
    2.51 +  var cell = document.createElement("td");
    2.52 +  cell.setAttribute("class", "detailsColumn");
    2.53 +  cell.innerText = text;
    2.54 +  return cell;
    2.55 +}
    2.56 + 
    2.57 +function start(location) {
    2.58 +  var header = document.getElementById("header");
    2.59 +  header.innerText = header.innerText.replace("LOCATION", location);
    2.60 + 
    2.61 +  document.getElementById("title").innerText = header.innerText;
    2.62 +}
    2.63 + 
    2.64 +function onListingParsingError() {
    2.65 +  var box = document.getElementById("listingParsingErrorBox");
    2.66 +  box.innerHTML = box.innerHTML.replace("LOCATION", encodeURI(document.location)
    2.67 +      + "?raw");
    2.68 +  box.style.display = "";
    2.69 +}
    2.70 +</script> 
    2.71 + 
    2.72 +<style> 
    2.73 + 
    2.74 +  h1 {
    2.75 +    border-bottom: 1px solid #c0c0c0;
    2.76 +    margin-bottom: 10px;
    2.77 +    padding-bottom: 10px;
    2.78 +    white-space: nowrap;
    2.79 +  }
    2.80 + 
    2.81 +  table {
    2.82 +    border-collapse: collapse;
    2.83 +  }
    2.84 + 
    2.85 +  tr.header {
    2.86 +    font-weight: bold;
    2.87 +  }
    2.88 + 
    2.89 +  td.detailsColumn {
    2.90 +    padding-left: 2em;
    2.91 +    text-align: right;
    2.92 +    white-space: nowrap;
    2.93 +  }
    2.94 + 
    2.95 +  a.icon {
    2.96 +    padding-left: 1.5em;
    2.97 +    text-decoration: none;
    2.98 +  }
    2.99 + 
   2.100 +  a.icon:hover {
   2.101 +    text-decoration: underline;
   2.102 +  }
   2.103 + 
   2.104 +  a.file {
   2.105 +    background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ") left top no-repeat;
   2.106 +  }
   2.107 + 
   2.108 +  a.dir {
   2.109 +    background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ") left top no-repeat;
   2.110 +  }
   2.111 + 
   2.112 +  a.up {
   2.113 +    background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmlJREFUeNpsU0toU0EUPfPysx/tTxuDH9SCWhUDooIbd7oRUUTMouqi2iIoCO6lceHWhegy4EJFinWjrlQUpVm0IIoFpVDEIthm0dpikpf3ZuZ6Z94nrXhhMjM3c8895977BBHB2PznK8WPtDgyWH5q77cPH8PpdXuhpQT4ifR9u5sfJb1bmw6VivahATDrxcRZ2njfoaMv+2j7mLDn93MPiNRMvGbL18L9IpF8h9/TN+EYkMffSiOXJ5+hkD+PdqcLpICWHOHc2CC+LEyA/K+cKQMnlQHJX8wqYG3MAJy88Wa4OLDvEqAEOpJd0LxHIMdHBziowSwVlF8D6QaicK01krw/JynwcKoEwZczewroTvZirlKJs5CqQ5CG8pb57FnJUA0LYCXMX5fibd+p8LWDDemcPZbzQyjvH+Ki1TlIciElA7ghwLKV4kRZstt2sANWRjYTAGzuP2hXZFpJ/GsxgGJ0ox1aoFWsDXyyxqCs26+ydmagFN/rRjymJ1898bzGzmQE0HCZpmk5A0RFIv8Pn0WYPsiu6t/Rsj6PauVTwffTSzGAGZhUG2F06hEc9ibS7OPMNp6ErYFlKavo7MkhmTqCxZ/jwzGA9Hx82H2BZSw1NTN9Gx8ycHkajU/7M+jInsDC7DiaEmo1bNl1AMr9ASFgqVu9MCTIzoGUimXVAnnaN0PdBBDCCYbEtMk6wkpQwIG0sn0PQIUF4GsTwLSIFKNqF6DVrQq+IWVrQDxAYQC/1SsYOI4pOxKZrfifiUSbDUisif7XlpGIPufXd/uvdvZm760M0no1FZcnrzUdjw7au3vu/BVgAFLXeuTxhTXVAAAAAElFTkSuQmCC ") left top no-repeat;
   2.114 +  }
   2.115 + 
   2.116 +  #listingParsingErrorBox {
   2.117 +    border: 1px solid black;
   2.118 +    background: #fae691;
   2.119 +    padding: 10px;
   2.120 +    display: none;
   2.121 +  }
   2.122 +</style> 
   2.123 + 
   2.124 +<title id="title"></title> 
   2.125 + 
   2.126 +</head> 
   2.127 + 
   2.128 +<body> 
   2.129 + 
   2.130 +<div id="listingParsingErrorBox" i18n-values=".innerHTML:listingParsingErrorBoxText"></div> 
   2.131 + 
   2.132 +<span id="parentDirText" style="display:none" i18n-content="parentDirText"></span> 
   2.133 + 
   2.134 +<h1 id="header" i18n-content="header"></h1> 
   2.135 + 
   2.136 +<table id="table"> 
   2.137 +  <tr class="header"> 
   2.138 +    <td i18n-content="headerName"></td> 
   2.139 +    <td class="detailsColumn" i18n-content="headerSize"></td> 
   2.140 +    <td class="detailsColumn" i18n-content="headerDateModified"></td> 
   2.141 +  </tr> 
   2.142 +</table> 
   2.143 + 
   2.144 +</body> 
   2.145 + 
   2.146 +</html> 
   2.147 +<script>var templateData = {"header":"Index of LOCATION","headerDateModified":"Date Modified","headerName":"Name","headerSize":"Size","listingParsingErrorBoxText":"Oh, no! This server is sending data Google Chrome can't understand. Please \u003Ca href=\"http://code.google.com/p/chromium/issues/entry\"\u003Ereport a bug\u003C/a\u003E, and include the \u003Ca href=\"LOCATION\"\u003Eraw listing\u003C/a\u003E.","parentDirText":"[parent directory]"};</script><script>/**
   2.148 + * @fileoverview This is a simple template engine inspired by JsTemplates
   2.149 + * optimized for i18n.
   2.150 + *
   2.151 + * It currently supports two handlers:
   2.152 + *
   2.153 + *   * i18n-content which sets the textContent of the element
   2.154 + *
   2.155 + *     <span i18n-content="myContent"></span>
   2.156 + *     i18nTemplate.process(element, {'myContent': 'Content'});
   2.157 + *
   2.158 + *   * i18n-values is a list of attribute-value or property-value pairs.
   2.159 + *     Properties are prefixed with a '.' and can contain nested properties.
   2.160 + *
   2.161 + *     <span i18n-values="title:myTitle;.style.fontSize:fontSize"></span>
   2.162 + *     i18nTemplate.process(element, {
   2.163 + *       'myTitle': 'Title',
   2.164 + *       'fontSize': '13px'
   2.165 + *     });
   2.166 + */
   2.167 + 
   2.168 +var i18nTemplate = (function() {
   2.169 +  /**
   2.170 +   * This provides the handlers for the templating engine. The key is used as
   2.171 +   * the attribute name and the value is the function that gets called for every
   2.172 +   * single node that has this attribute.
   2.173 +   * @type {Object}
   2.174 +   */
   2.175 +  var handlers = {
   2.176 +    /**
   2.177 +     * This handler sets the textContent of the element.
   2.178 +     */
   2.179 +    'i18n-content': function(element, attributeValue, obj) {
   2.180 +      element.textContent = obj[attributeValue];
   2.181 +    },
   2.182 + 
   2.183 +    /**
   2.184 +     * This is used to set HTML attributes and DOM properties,. The syntax is:
   2.185 +     *   attributename:key;
   2.186 +     *   .domProperty:key;
   2.187 +     *   .nested.dom.property:key
   2.188 +     */
   2.189 +    'i18n-values': function(element, attributeValue, obj) {
   2.190 +      var parts = attributeValue.replace(/\s/g, '').split(/;/);
   2.191 +      for (var j = 0; j < parts.length; j++) {
   2.192 +        var a = parts[j].match(/^([^:]+):(.+)$/);
   2.193 +        if (a) {
   2.194 +          var propName = a[1];
   2.195 +          var propExpr = a[2];
   2.196 + 
   2.197 +          // Ignore missing properties
   2.198 +          if (propExpr in obj) {
   2.199 +            var value = obj[propExpr];
   2.200 +            if (propName.charAt(0) == '.') {
   2.201 +              var path = propName.slice(1).split('.');
   2.202 +              var object = element;
   2.203 +              while (object && path.length > 1) {
   2.204 +                object = object[path.shift()];
   2.205 +              }
   2.206 +              if (object) {
   2.207 +                object[path] = value;
   2.208 +                // In case we set innerHTML (ignoring others) we need to
   2.209 +                // recursively check the content
   2.210 +                if (path == 'innerHTML') {
   2.211 +                  process(element, obj);
   2.212 +                }
   2.213 +              }
   2.214 +            } else {
   2.215 +              element.setAttribute(propName, value);
   2.216 +            }
   2.217 +          } else {
   2.218 +            console.warn('i18n-values: Missing value for "' + propExpr + '"');
   2.219 +          }
   2.220 +        }
   2.221 +      }
   2.222 +    }
   2.223 +  };
   2.224 + 
   2.225 +  var attributeNames = [];
   2.226 +  for (var key in handlers) {
   2.227 +    attributeNames.push(key);
   2.228 +  }
   2.229 +  var selector = '[' + attributeNames.join('],[') + ']';
   2.230 + 
   2.231 +  /**
   2.232 +   * Processes a DOM tree with the {@code obj} map.
   2.233 +   */
   2.234 +  function process(node, obj) {
   2.235 +    var elements = node.querySelectorAll(selector);
   2.236 +    for (var element, i = 0; element = elements[i]; i++) {
   2.237 +      for (var j = 0; j < attributeNames.length; j++) {
   2.238 +        var name = attributeNames[j];
   2.239 +        var att = element.getAttribute(name);
   2.240 +        if (att != null) {
   2.241 +          handlers[name](element, att, obj);
   2.242 +        }
   2.243 +      }
   2.244 +    }
   2.245 +  }
   2.246 + 
   2.247 +  return {
   2.248 +    process: process
   2.249 +  };
   2.250 +})();
   2.251 +</script><script>i18nTemplate.process(document, templateData);</script><script>start("/");</script> 
   2.252 +<script>addRow("..","..",1,"4 kB","7/30/10 6:25:53 PM");</script> 
   2.253 +<script>addRow("bin","bin",1,"4 kB","8/25/10 9:08:24 PM");</script> 
   2.254 +<script>addRow("boot","boot",1,"4 kB","8/20/10 7:35:54 AM");</script> 
   2.255 +<script>addRow("cdrom","cdrom",1,"4 kB","6/15/10 1:04:24 PM");</script> 
   2.256 +<script>addRow("dev","dev",1,"3.4 kB","8/31/10 9:24:04 AM");</script> 
   2.257 +<script>addRow("etc","etc",1,"4 kB","8/31/10 10:27:20 AM");</script> 
   2.258 +<script>addRow("home","home",1,"4 kB","6/15/10 2:15:44 PM");</script> 
   2.259 +<script>addRow("lib","lib",1,"12 kB","7/8/10 11:49:18 PM");</script> 
   2.260 +<script>addRow("lost+found","lost+found",1,"16 kB","6/15/10 1:04:14 PM");</script> 
   2.261 +<script>addRow("media","media",1,"4 kB","8/31/10 6:47:29 AM");</script> 
   2.262 +<script>addRow("mnt","mnt",1,"4 kB","1/25/10 5:41:51 AM");</script> 
   2.263 +<script>addRow("opt","opt",1,"4 kB","6/17/10 12:34:02 PM");</script> 
   2.264 +<script>addRow("p10n","p10n",1,"4 kB","6/15/10 1:04:20 PM");</script> 
   2.265 +<script>addRow("proc","proc",1,"0 B","8/31/10 6:45:25 AM");</script> 
   2.266 +<script>addRow("root","root",1,"4 kB","8/6/10 2:28:32 PM");</script> 
   2.267 +<script>addRow("sbin","sbin",1,"4 kB","6/28/10 1:50:36 PM");</script> 
   2.268 +<script>addRow("selinux","selinux",1,"4 kB","9/16/08 9:38:17 AM");</script> 
   2.269 +<script>addRow("srv","srv",1,"4 kB","6/15/10 1:04:23 PM");</script> 
   2.270 +<script>addRow("sys","sys",1,"0 B","8/31/10 6:45:25 AM");</script> 
   2.271 +<script>addRow("tmp","tmp",1,"20 kB","8/31/10 1:47:28 PM");</script> 
   2.272 +<script>addRow("usr","usr",1,"4 kB","6/15/10 1:47:54 PM");</script> 
   2.273 +<script>addRow("var","var",1,"4 kB","6/15/10 2:09:44 PM");</script> 
   2.274 +<script>addRow("initrd.img","initrd.img",0,"5.9 MB","8/20/10 7:35:54 AM");</script> 
   2.275 +<script>addRow("vmlinuz","vmlinuz",0,"1472 kB","8/19/10 10:28:33 AM");</script> 
     3.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     3.2 +++ b/generated_slides	Thu Sep 02 00:27:59 2010 +0300
     3.3 @@ -0,0 +1,647 @@
     3.4 +<!DOCTYPE html>
     3.5 +<HTML>
     3.6 +<HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
     3.7 +    <META charset="UTF-8">
     3.8 +    <!--[if lt IE 9]>
     3.9 +<!--handle whichever browser is running.-->
    3.10 +    <![endif]-->
    3.11 +    <TITLE>HTML5 presentation</TITLE>
    3.12 +    <STYLE>
    3.13 +      .sequencing { display:none; }
    3.14 +      .notes { display: none; }
    3.15 +      .presentation {
    3.16 +        position: absolute;
    3.17 +        height: 100%;
    3.18 +        width: 100%;
    3.19 +        left: 0px;
    3.20 +        top: 0px;
    3.21 +        display: block;
    3.22 +        overflow: hidden;
    3.23 +        background: #000;
    3.24 +      }      
    3.25 +      .slides {
    3.26 +        width: 100%;
    3.27 +        height: 100%;
    3.28 +        /*
    3.29 +        overflow: hidden;
    3.30 +        */
    3.31 +        left: 0;
    3.32 +        top: 0;
    3.33 +        position: absolute;
    3.34 +        display: block;
    3.35 +      }
    3.36 +      .slide {
    3.37 +        display: none;
    3.38 +        position: absolute;
    3.39 +        overflow: hidden;
    3.40 +        width: 100%;/*900px;*/
    3.41 +        height: 100%;/*700px;*/
    3.42 +        left: 0%;
    3.43 +        top: 0%;
    3.44 +        margin-top: -0px;
    3.45 +        background-color: #111;
    3.46 +      }
    3.47 +      p {
    3.48 +        font-size: 20px;
    3.49 +      }
    3.50 +      .force-render {
    3.51 +        display: block;
    3.52 +        margin-top: -1000px;
    3.53 +      }
    3.54 +      section.intro p {
    3.55 +        font-size: 35px;
    3.56 +      }
    3.57 +.slide.far-past, .slide.past, .slide.future, .slide.far-future, .slide.parent, slide.child { display: none; } /*margin-left: -2400px;*/      
    3.58 +/* {display: block; margin-left: -1400px;}*/
    3.59 +/* {display: block; margin-left: 1500px;}*/      
    3.60 +/* {display: block; margin-left: 2500px;}*/
    3.61 +/* {display: block; margin-top: -400px; margin-left: 0px;}*/
    3.62 +.slide.current { display: block; margin-top: 0px; margin-left: 0px; }
    3.63 +/* {display: block; margin-top: 500px; margin-left: 0px;}*/
    3.64 +      body.three-d div.presentation {
    3.65 +        /*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000));        */
    3.66 +      }
    3.67 +      
    3.68 +      body.three-d div.slides {
    3.69 +        -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
    3.70 +        -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
    3.71 +        -o-transform: translateX(50px) scale(0.8) rotateY(10deg);
    3.72 +        transform: translateX(50px) scale(0.8) rotateY(10deg);
    3.73 +      }     
    3.74 +    </STYLE>
    3.75 +  </HEAD>
    3.76 +  <BODY>
    3.77 +    <DIV class="presentation">
    3.78 +      <DIV class="slides">
    3.79 +<!--NEW SLIDES-->
    3.80 +
    3.81 +<DIV class="directory" id="./">./
    3.82 +  <DIV class="subdirectory" id="HTML5 presentation_files">./HTML5 presentation_files</DIV>
    3.83 +  <DIV class="subdirectory" id=".hg">./.hg</DIV>
    3.84 +  <DIV class="subdirectory" id="HTML5Rocks - Home_files">./HTML5Rocks - Home_files</DIV>
    3.85 +  <DIV class="file" id="README">./README</DIV>
    3.86 +  <DIV class="file" id="walkfs-writemarkup.py">./walkfs-writemarkup.py</DIV>
    3.87 +  <DIV class="file" id="README~">./README~</DIV>
    3.88 +  <DIV class="file" id="HTML5 presentation_template.html~">./HTML5 presentation_template.html~</DIV>
    3.89 +  <DIV class="file" id="HTML5 presentation.html">./HTML5 presentation.html</DIV>
    3.90 +  <DIV class="file" id="HTML5Rocks - Home.html">./HTML5Rocks - Home.html</DIV>
    3.91 +  <DIV class="file" id="h5p10n.py~">./h5p10n.py~</DIV>
    3.92 +  <DIV class="file" id="H5p10n (Finnish Language).html">./H5p10n (Finnish Language).html</DIV>
    3.93 +  <DIV class="file" id="generated_slides~">./generated_slides~</DIV>
    3.94 +  <DIV class="file" id="generated_slides">./generated_slides</DIV>
    3.95 +  <DIV class="file" id="h5p10n.pyc">./h5p10n.pyc</DIV>
    3.96 +  <DIV class="file" id="h5p10n.py">./h5p10n.py</DIV>
    3.97 +  <DIV class="file" id="template_H5p10n.html">./template_H5p10n.html</DIV>
    3.98 +  <DIV class="file" id="_states_py">./_states_py</DIV>
    3.99 +  <DIV class="file" id="template_H5p10n.html~">./template_H5p10n.html~</DIV>
   3.100 +  <DIV class="file" id="HTML5 presentation_template.html">./HTML5 presentation_template.html</DIV>
   3.101 +  <DIV class="file" id="walkfs-writemarkup.py~">./walkfs-writemarkup.py~</DIV>
   3.102 +  <DIV class="file" id="H5p10n (Finnish Language etc).html">./H5p10n (Finnish Language etc).html</DIV>
   3.103 +  <DIV class="file" id="minimumWorking_H5p10n.html">./minimumWorking_H5p10n.html</DIV>
   3.104 +</DIV>
   3.105 +<DIV class="directory" id="./">./
   3.106 +  <DIV class="subdirectory" id="HTML5 presentation_files">./HTML5 presentation_files</DIV>
   3.107 +  <DIV class="subdirectory" id=".hg">./.hg</DIV>
   3.108 +  <DIV class="subdirectory" id="HTML5Rocks - Home_files">./HTML5Rocks - Home_files</DIV>
   3.109 +  <DIV class="file" id="README">./README</DIV>
   3.110 +  <DIV class="file" id="walkfs-writemarkup.py">./walkfs-writemarkup.py</DIV>
   3.111 +  <DIV class="file" id="README~">./README~</DIV>
   3.112 +  <DIV class="file" id="HTML5 presentation_template.html~">./HTML5 presentation_template.html~</DIV>
   3.113 +  <DIV class="file" id="HTML5 presentation.html">./HTML5 presentation.html</DIV>
   3.114 +  <DIV class="file" id="HTML5Rocks - Home.html">./HTML5Rocks - Home.html</DIV>
   3.115 +  <DIV class="file" id="h5p10n.py~">./h5p10n.py~</DIV>
   3.116 +  <DIV class="file" id="H5p10n (Finnish Language).html">./H5p10n (Finnish Language).html</DIV>
   3.117 +  <DIV class="file" id="generated_slides~">./generated_slides~</DIV>
   3.118 +  <DIV class="file" id="generated_slides">./generated_slides</DIV>
   3.119 +  <DIV class="file" id="h5p10n.pyc">./h5p10n.pyc</DIV>
   3.120 +  <DIV class="file" id="h5p10n.py">./h5p10n.py</DIV>
   3.121 +  <DIV class="file" id="template_H5p10n.html">./template_H5p10n.html</DIV>
   3.122 +  <DIV class="file" id="_states_py">./_states_py</DIV>
   3.123 +  <DIV class="file" id="template_H5p10n.html~">./template_H5p10n.html~</DIV>
   3.124 +  <DIV class="file" id="HTML5 presentation_template.html">./HTML5 presentation_template.html</DIV>
   3.125 +  <DIV class="file" id="walkfs-writemarkup.py~">./walkfs-writemarkup.py~</DIV>
   3.126 +  <DIV class="file" id="H5p10n (Finnish Language etc).html">./H5p10n (Finnish Language etc).html</DIV>
   3.127 +  <DIV class="file" id="minimumWorking_H5p10n.html">./minimumWorking_H5p10n.html</DIV>
   3.128 +</DIV>
   3.129 +<DIV class="directory" id="./HTML5 presentation_files">./HTML5 presentation_files
   3.130 +  <DIV class="file" id="outOfReach__context.js">./HTML5 presentation_files/outOfReach__context.js</DIV>
   3.131 +  <DIV class="file" id="outOfReach__points.js">./HTML5 presentation_files/outOfReach__points.js</DIV>
   3.132 +  <DIV class="file" id="outOfReach__utilities.js">./HTML5 presentation_files/outOfReach__utilities.js</DIV>
   3.133 +  <DIV class="file" id="outOfReach__san_angeles.html">./HTML5 presentation_files/outOfReach__san_angeles.html</DIV>
   3.134 +  <DIV class="file" id="outOfReach__css">./HTML5 presentation_files/outOfReach__css</DIV>
   3.135 +  <DIV class="file" id="7.jpg">./HTML5 presentation_files/7.jpg</DIV>
   3.136 +  <DIV class="file" id="8.jpg">./HTML5 presentation_files/8.jpg</DIV>
   3.137 +  <DIV class="file" id="outOfReach__index.html">./HTML5 presentation_files/outOfReach__index.html</DIV>
   3.138 +  <DIV class="file" id="outOfReach__annealing.js">./HTML5 presentation_files/outOfReach__annealing.js</DIV>
   3.139 +  <DIV class="file" id="outOfReach__matrix4x4.js">./HTML5 presentation_files/outOfReach__matrix4x4.js</DIV>
   3.140 +  <DIV class="file" id="9.jpg">./HTML5 presentation_files/9.jpg</DIV>
   3.141 +  <DIV class="file" id="magpie.png">./HTML5 presentation_files/magpie.png</DIV>
   3.142 +  <DIV class="file" id="outOfReach__canvasElement.js">./HTML5 presentation_files/outOfReach__canvasElement.js</DIV>
   3.143 +  <DIV class="file" id="outOfReach__canvasImg.js">./HTML5 presentation_files/outOfReach__canvasImg.js</DIV>
   3.144 +  <DIV class="file" id="outOfReach__demo.js">./HTML5 presentation_files/outOfReach__demo.js</DIV>
   3.145 +  <DIV class="file" id="outOfReach__ViewportInfoService.GetViewportInfo">./HTML5 presentation_files/outOfReach__ViewportInfoService.GetViewportInfo</DIV>
   3.146 +  <DIV class="file" id="outOfReach__angeles.js">./HTML5 presentation_files/outOfReach__angeles.js</DIV>
   3.147 +  <DIV class="file" id="outOfReach__ga.js">./HTML5 presentation_files/outOfReach__ga.js</DIV>
   3.148 +  <DIV class="file" id="outOfReach__{controls}.js">./HTML5 presentation_files/outOfReach__{controls}.js</DIV>
   3.149 +  <DIV class="file" id="outOfReach__AuthenticationService.Authenticate">./HTML5 presentation_files/outOfReach__AuthenticationService.Authenticate</DIV>
   3.150 +  <DIV class="file" id="ourOfReach__main.js">./HTML5 presentation_files/ourOfReach__main.js</DIV>
   3.151 +  <DIV class="file" id="transparent.png">./HTML5 presentation_files/transparent.png</DIV>
   3.152 +  <DIV class="file" id="refresh.png">./HTML5 presentation_files/refresh.png</DIV>
   3.153 +  <DIV class="file" id="dwd1.png">./HTML5 presentation_files/dwd1.png</DIV>
   3.154 +  <DIV class="file" id="outOfReach__js">./HTML5 presentation_files/outOfReach__js</DIV>
   3.155 +  <DIV class="file" id="outOfReach__{common,map,util,marker}.js">./HTML5 presentation_files/outOfReach__{common,map,util,marker}.js</DIV>
   3.156 +  <DIV class="file" id="bg.jpg">./HTML5 presentation_files/bg.jpg</DIV>
   3.157 +</DIV>
   3.158 +<DIV class="directory" id="./HTML5 presentation_files">./HTML5 presentation_files
   3.159 +  <DIV class="file" id="outOfReach__context.js">./HTML5 presentation_files/outOfReach__context.js</DIV>
   3.160 +  <DIV class="file" id="outOfReach__points.js">./HTML5 presentation_files/outOfReach__points.js</DIV>
   3.161 +  <DIV class="file" id="outOfReach__utilities.js">./HTML5 presentation_files/outOfReach__utilities.js</DIV>
   3.162 +  <DIV class="file" id="outOfReach__san_angeles.html">./HTML5 presentation_files/outOfReach__san_angeles.html</DIV>
   3.163 +  <DIV class="file" id="outOfReach__css">./HTML5 presentation_files/outOfReach__css</DIV>
   3.164 +  <DIV class="file" id="7.jpg">./HTML5 presentation_files/7.jpg</DIV>
   3.165 +  <DIV class="file" id="8.jpg">./HTML5 presentation_files/8.jpg</DIV>
   3.166 +  <DIV class="file" id="outOfReach__index.html">./HTML5 presentation_files/outOfReach__index.html</DIV>
   3.167 +  <DIV class="file" id="outOfReach__annealing.js">./HTML5 presentation_files/outOfReach__annealing.js</DIV>
   3.168 +  <DIV class="file" id="outOfReach__matrix4x4.js">./HTML5 presentation_files/outOfReach__matrix4x4.js</DIV>
   3.169 +  <DIV class="file" id="9.jpg">./HTML5 presentation_files/9.jpg</DIV>
   3.170 +  <DIV class="file" id="magpie.png">./HTML5 presentation_files/magpie.png</DIV>
   3.171 +  <DIV class="file" id="outOfReach__canvasElement.js">./HTML5 presentation_files/outOfReach__canvasElement.js</DIV>
   3.172 +  <DIV class="file" id="outOfReach__canvasImg.js">./HTML5 presentation_files/outOfReach__canvasImg.js</DIV>
   3.173 +  <DIV class="file" id="outOfReach__demo.js">./HTML5 presentation_files/outOfReach__demo.js</DIV>
   3.174 +  <DIV class="file" id="outOfReach__ViewportInfoService.GetViewportInfo">./HTML5 presentation_files/outOfReach__ViewportInfoService.GetViewportInfo</DIV>
   3.175 +  <DIV class="file" id="outOfReach__angeles.js">./HTML5 presentation_files/outOfReach__angeles.js</DIV>
   3.176 +  <DIV class="file" id="outOfReach__ga.js">./HTML5 presentation_files/outOfReach__ga.js</DIV>
   3.177 +  <DIV class="file" id="outOfReach__{controls}.js">./HTML5 presentation_files/outOfReach__{controls}.js</DIV>
   3.178 +  <DIV class="file" id="outOfReach__AuthenticationService.Authenticate">./HTML5 presentation_files/outOfReach__AuthenticationService.Authenticate</DIV>
   3.179 +  <DIV class="file" id="ourOfReach__main.js">./HTML5 presentation_files/ourOfReach__main.js</DIV>
   3.180 +  <DIV class="file" id="transparent.png">./HTML5 presentation_files/transparent.png</DIV>
   3.181 +  <DIV class="file" id="refresh.png">./HTML5 presentation_files/refresh.png</DIV>
   3.182 +  <DIV class="file" id="dwd1.png">./HTML5 presentation_files/dwd1.png</DIV>
   3.183 +  <DIV class="file" id="outOfReach__js">./HTML5 presentation_files/outOfReach__js</DIV>
   3.184 +  <DIV class="file" id="outOfReach__{common,map,util,marker}.js">./HTML5 presentation_files/outOfReach__{common,map,util,marker}.js</DIV>
   3.185 +  <DIV class="file" id="bg.jpg">./HTML5 presentation_files/bg.jpg</DIV>
   3.186 +</DIV>
   3.187 +<DIV class="directory" id="./.hg">./.hg
   3.188 +  <DIV class="subdirectory" id="store">./.hg/store</DIV>
   3.189 +  <DIV class="file" id="undo.dirstate">./.hg/undo.dirstate</DIV>
   3.190 +  <DIV class="file" id="requires">./.hg/requires</DIV>
   3.191 +  <DIV class="file" id="branch.cache">./.hg/branch.cache</DIV>
   3.192 +  <DIV class="file" id="dirstate">./.hg/dirstate</DIV>
   3.193 +  <DIV class="file" id="undo.branch">./.hg/undo.branch</DIV>
   3.194 +  <DIV class="file" id="00changelog.i">./.hg/00changelog.i</DIV>
   3.195 +</DIV>
   3.196 +<DIV class="directory" id="./.hg">./.hg
   3.197 +  <DIV class="subdirectory" id="store">./.hg/store</DIV>
   3.198 +  <DIV class="file" id="undo.dirstate">./.hg/undo.dirstate</DIV>
   3.199 +  <DIV class="file" id="requires">./.hg/requires</DIV>
   3.200 +  <DIV class="file" id="branch.cache">./.hg/branch.cache</DIV>
   3.201 +  <DIV class="file" id="dirstate">./.hg/dirstate</DIV>
   3.202 +  <DIV class="file" id="undo.branch">./.hg/undo.branch</DIV>
   3.203 +  <DIV class="file" id="00changelog.i">./.hg/00changelog.i</DIV>
   3.204 +</DIV>
   3.205 +<DIV class="directory" id="./.hg/store">./.hg/store
   3.206 +  <DIV class="subdirectory" id="data">./.hg/store/data</DIV>
   3.207 +  <DIV class="file" id="undo">./.hg/store/undo</DIV>
   3.208 +  <DIV class="file" id="00manifest.i">./.hg/store/00manifest.i</DIV>
   3.209 +  <DIV class="file" id="00changelog.i">./.hg/store/00changelog.i</DIV>
   3.210 +</DIV>
   3.211 +<DIV class="directory" id="./.hg/store">./.hg/store
   3.212 +  <DIV class="subdirectory" id="data">./.hg/store/data</DIV>
   3.213 +  <DIV class="file" id="undo">./.hg/store/undo</DIV>
   3.214 +  <DIV class="file" id="00manifest.i">./.hg/store/00manifest.i</DIV>
   3.215 +  <DIV class="file" id="00changelog.i">./.hg/store/00changelog.i</DIV>
   3.216 +</DIV>
   3.217 +<DIV class="directory" id="./.hg/store">./.hg/store
   3.218 +  <DIV class="subdirectory" id="data">./.hg/store/data</DIV>
   3.219 +  <DIV class="file" id="undo">./.hg/store/undo</DIV>
   3.220 +  <DIV class="file" id="00manifest.i">./.hg/store/00manifest.i</DIV>
   3.221 +  <DIV class="file" id="00changelog.i">./.hg/store/00changelog.i</DIV>
   3.222 +</DIV>
   3.223 +<DIV class="directory" id="./.hg/store/data">./.hg/store/data
   3.224 +  <DIV class="file" id="template___h5p10n.html.i">./.hg/store/data/template___h5p10n.html.i</DIV>
   3.225 +  <DIV class="file" id="_r_e_a_d_m_e.i">./.hg/store/data/_r_e_a_d_m_e.i</DIV>
   3.226 +  <DIV class="file" id="minimum_working___h5p10n.html.i">./.hg/store/data/minimum_working___h5p10n.html.i</DIV>
   3.227 +  <DIV class="file" id="walkfs-writemarkup.py.i">./.hg/store/data/walkfs-writemarkup.py.i</DIV>
   3.228 +</DIV>
   3.229 +<DIV class="directory" id="./.hg/store/data">./.hg/store/data
   3.230 +  <DIV class="file" id="template___h5p10n.html.i">./.hg/store/data/template___h5p10n.html.i</DIV>
   3.231 +  <DIV class="file" id="_r_e_a_d_m_e.i">./.hg/store/data/_r_e_a_d_m_e.i</DIV>
   3.232 +  <DIV class="file" id="minimum_working___h5p10n.html.i">./.hg/store/data/minimum_working___h5p10n.html.i</DIV>
   3.233 +  <DIV class="file" id="walkfs-writemarkup.py.i">./.hg/store/data/walkfs-writemarkup.py.i</DIV>
   3.234 +</DIV>
   3.235 +<DIV class="directory" id="./.hg/store/data">./.hg/store/data
   3.236 +  <DIV class="file" id="template___h5p10n.html.i">./.hg/store/data/template___h5p10n.html.i</DIV>
   3.237 +  <DIV class="file" id="_r_e_a_d_m_e.i">./.hg/store/data/_r_e_a_d_m_e.i</DIV>
   3.238 +  <DIV class="file" id="minimum_working___h5p10n.html.i">./.hg/store/data/minimum_working___h5p10n.html.i</DIV>
   3.239 +  <DIV class="file" id="walkfs-writemarkup.py.i">./.hg/store/data/walkfs-writemarkup.py.i</DIV>
   3.240 +</DIV>
   3.241 +<DIV class="directory" id="./.hg/store/data">./.hg/store/data
   3.242 +  <DIV class="file" id="template___h5p10n.html.i">./.hg/store/data/template___h5p10n.html.i</DIV>
   3.243 +  <DIV class="file" id="_r_e_a_d_m_e.i">./.hg/store/data/_r_e_a_d_m_e.i</DIV>
   3.244 +  <DIV class="file" id="minimum_working___h5p10n.html.i">./.hg/store/data/minimum_working___h5p10n.html.i</DIV>
   3.245 +  <DIV class="file" id="walkfs-writemarkup.py.i">./.hg/store/data/walkfs-writemarkup.py.i</DIV>
   3.246 +</DIV>
   3.247 +<DIV class="directory" id="./HTML5Rocks - Home_files">./HTML5Rocks - Home_files
   3.248 +  <DIV class="file" id="html5rocks-presentation.png">./HTML5Rocks - Home_files/html5rocks-presentation.png</DIV>
   3.249 +  <DIV class="file" id="modernizr-1.1.min.js">./HTML5Rocks - Home_files/modernizr-1.1.min.js</DIV>
   3.250 +  <DIV class="file" id="html5rocks-playground.png">./HTML5Rocks - Home_files/html5rocks-playground.png</DIV>
   3.251 +  <DIV class="file" id="css">./HTML5Rocks - Home_files/css</DIV>
   3.252 +  <DIV class="file" id="google_logo_small.png">./HTML5Rocks - Home_files/google_logo_small.png</DIV>
   3.253 +  <DIV class="file" id="html5rocks-tutorials.png">./HTML5Rocks - Home_files/html5rocks-tutorials.png</DIV>
   3.254 +  <DIV class="file" id="prettify.js">./HTML5Rocks - Home_files/prettify.js</DIV>
   3.255 +  <DIV class="file" id="ga.js">./HTML5Rocks - Home_files/ga.js</DIV>
   3.256 +</DIV>
   3.257 +<DIV class="directory" id="./HTML5Rocks - Home_files">./HTML5Rocks - Home_files
   3.258 +  <DIV class="file" id="html5rocks-presentation.png">./HTML5Rocks - Home_files/html5rocks-presentation.png</DIV>
   3.259 +  <DIV class="file" id="modernizr-1.1.min.js">./HTML5Rocks - Home_files/modernizr-1.1.min.js</DIV>
   3.260 +  <DIV class="file" id="html5rocks-playground.png">./HTML5Rocks - Home_files/html5rocks-playground.png</DIV>
   3.261 +  <DIV class="file" id="css">./HTML5Rocks - Home_files/css</DIV>
   3.262 +  <DIV class="file" id="google_logo_small.png">./HTML5Rocks - Home_files/google_logo_small.png</DIV>
   3.263 +  <DIV class="file" id="html5rocks-tutorials.png">./HTML5Rocks - Home_files/html5rocks-tutorials.png</DIV>
   3.264 +  <DIV class="file" id="prettify.js">./HTML5Rocks - Home_files/prettify.js</DIV>
   3.265 +  <DIV class="file" id="ga.js">./HTML5Rocks - Home_files/ga.js</DIV>
   3.266 +</DIV>
   3.267 +      </DIV> <!-- slides -->
   3.268 +       
   3.269 +    </DIV> <!-- presentation -->
   3.270 +    
   3.271 +    <SCRIPT>
   3.272 +      (function() {
   3.273 +        // bail in IE
   3.274 +        var doc = document;
   3.275 +        if (doc.all) { return; }
   3.276 +
   3.277 +        var disableBuilds = true; //true;
   3.278 +
   3.279 +        var ctr = 0;
   3.280 +        var spaces = /\s+/, a1 = [""];
   3.281 +
   3.282 +        var toArray = function(list) {
   3.283 +          return Array.prototype.slice.call(list||[], 0);
   3.284 +        };
   3.285 +
   3.286 +        var byId = function(id) {
   3.287 +          if (typeof id == "string") { return doc.getElementById(id); }
   3.288 +          return id;
   3.289 +        };
   3.290 +
   3.291 +        var query = function(query, root) {
   3.292 +          if (!query) { return []; }
   3.293 +          if (typeof query != "string") { return toArray(query); }
   3.294 +          if (typeof root == "string"){
   3.295 +            root = byId(root);
   3.296 +            if(!root){ return []; }
   3.297 +          }
   3.298 +
   3.299 +          root = root||document;
   3.300 +          var rootIsDoc = (root.nodeType == 9);
   3.301 +          var doc = rootIsDoc ? root : (root.ownerDocument||document);
   3.302 +
   3.303 +          // rewrite the query to be ID rooted
   3.304 +          if (!rootIsDoc || (">~+".indexOf(query.charAt(0)) >= 0)) {
   3.305 +            root.id = root.id||("qUnique"+(ctr++));
   3.306 +            query = "#"+root.id+" "+query;
   3.307 +          }
   3.308 +          // don't choke on something like ".yada.yada >"
   3.309 +          if (">~+".indexOf(query.slice(-1)) >= 0) { query += " *"; }
   3.310 +
   3.311 +          return toArray(doc.querySelectorAll(query));
   3.312 +        };
   3.313 +
   3.314 +        var strToArray = function(s) {
   3.315 +          if (typeof s == "string" || s instanceof String) {
   3.316 +            if (s.indexOf(" ") < 0) {
   3.317 +              a1[0] = s;
   3.318 +              return a1;
   3.319 +            } else {
   3.320 +              return s.split(spaces);
   3.321 +            }
   3.322 +          }
   3.323 +          return s;
   3.324 +        };
   3.325 +
   3.326 +        var trim = function(str) {
   3.327 +          return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
   3.328 +        };
   3.329 +
   3.330 +        var addClass = function(node, classStr) {
   3.331 +          classStr = strToArray(classStr);
   3.332 +          var cls = " " + node.className + " ";
   3.333 +          for (var i = 0, len = classStr.length, c; i < len; ++i) {
   3.334 +            c = classStr[i];
   3.335 +            if (c && cls.indexOf(" " + c + " ") < 0) {
   3.336 +              cls += c + " ";
   3.337 +            }
   3.338 +          }
   3.339 +          node.className = trim(cls);
   3.340 +        };
   3.341 +
   3.342 +        var removeClass = function(node, classStr) {
   3.343 +          var cls;
   3.344 +          if (classStr !== undefined) {
   3.345 +            classStr = strToArray(classStr);
   3.346 +            cls = " " + node.className + " ";
   3.347 +            for (var i = 0, len = classStr.length; i < len; ++i) {
   3.348 +              cls = cls.replace(" " + classStr[i] + " ", " ");
   3.349 +            }
   3.350 +            cls = trim(cls);
   3.351 +          } else {
   3.352 +            cls = "";
   3.353 +          }
   3.354 +          if (node.className != cls) {
   3.355 +            node.className = cls;
   3.356 +          }
   3.357 +        };
   3.358 +
   3.359 +        var toggleClass = function(node, classStr) {
   3.360 +          var cls = " " + node.className + " ";
   3.361 +          if (cls.indexOf(" " + trim(classStr) + " ") >= 0) {
   3.362 +            removeClass(node, classStr);
   3.363 +          } else {
   3.364 +            addClass(node, classStr);
   3.365 +          }
   3.366 +        };
   3.367 +
   3.368 +        var ua = navigator.userAgent;
   3.369 +        var isFF = parseFloat(ua.split("Firefox/")[1]) || undefined;
   3.370 +        var isWK = parseFloat(ua.split("WebKit/")[1]) || undefined;
   3.371 +        var isOpera = parseFloat(ua.split("Opera/")[1]) || undefined;
   3.372 +
   3.373 +        var canTransition = (function() {
   3.374 +          var ver = parseFloat(ua.split("Version/")[1]) || undefined;
   3.375 +          // test to determine if this browser can handle CSS transitions.
   3.376 +          var cachedCanTransition = 
   3.377 +            (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));
   3.378 +          return function() { return cachedCanTransition; }
   3.379 +        })();
   3.380 +
   3.381 +        //
   3.382 +        // Slide class
   3.383 +        //
   3.384 +        var Slide = function(node, idx) {
   3.385 +          this._node = node;
   3.386 +          if (idx >= 0) {
   3.387 +            this._count = idx+1;
   3.388 +          }
   3.389 +          if (this._node) {
   3.390 +            addClass(this._node, "slide distant-future");
   3.391 +          }
   3.392 +          this._makeCounter();
   3.393 +          this._makeBuildList();
   3.394 +        };
   3.395 +
   3.396 +        Slide.prototype = {
   3.397 +          _node: null,
   3.398 +          _count: 0,
   3.399 +          _buildList: [],
   3.400 +          _visited: false,
   3.401 +          _currentState: "",
   3.402 +          _states: [ "distant-past", "far-past",
   3.403 +                     "past", "current", "future",
   3.404 +                     "far-future", "distant-future" ],
   3.405 +          setState: function(state) {
   3.406 +            if (typeof state != "string") {
   3.407 +              state = this._states[state];
   3.408 +            }
   3.409 +            if (state == "current" && !this._visited) {
   3.410 +              this._visited = true;
   3.411 +              this._makeBuildList();
   3.412 +            }
   3.413 +            removeClass(this._node, this._states);
   3.414 +            addClass(this._node, state);
   3.415 +            this._currentState = state;
   3.416 +
   3.417 +            // delay first auto run. Really wish this were in CSS.
   3.418 +            /*
   3.419 +            this._runAutos();
   3.420 +            */
   3.421 +            var _t = this;
   3.422 +            setTimeout(function(){ _t._runAutos(); } , 400);
   3.423 +          },
   3.424 +          _makeCounter: function() {
   3.425 +            if(!this._count || !this._node) { return; }
   3.426 +            var c = doc.createElement("span");
   3.427 +            c.innerHTML = this._count;
   3.428 +            c.className = "counter";
   3.429 +            this._node.appendChild(c);
   3.430 +          },
   3.431 +          _makeBuildList: function() {
   3.432 +            this._buildList = [];
   3.433 +            if (disableBuilds) { return; }
   3.434 +            if (this._node) {
   3.435 +              this._buildList = query("[data-build] > *", this._node);
   3.436 +            }
   3.437 +            this._buildList.forEach(function(el) {
   3.438 +              addClass(el, "to-build");
   3.439 +            });
   3.440 +          },
   3.441 +          _runAutos: function() {
   3.442 +            if (this._currentState != "current") {
   3.443 +              return;
   3.444 +            }
   3.445 +            // find the next auto, slice it out of the list, and run it
   3.446 +            var idx = -1;
   3.447 +            this._buildList.some(function(n, i) {
   3.448 +              if (n.hasAttribute("data-auto")) {
   3.449 +                idx = i;
   3.450 +                return true;
   3.451 +              }
   3.452 +              return false;
   3.453 +            });
   3.454 +            if (idx >= 0) {
   3.455 +              var elem = this._buildList.splice(idx, 1)[0];
   3.456 +              var transitionEnd = isWK ? "webkitTransitionEnd" : (isFF ? "mozTransitionEnd" : "oTransitionEnd");
   3.457 +              var _t = this;
   3.458 +              if (canTransition()) {
   3.459 +                var l = function(evt) {
   3.460 +                  elem.parentNode.removeEventListener(transitionEnd, l, false);
   3.461 +                  _t._runAutos();
   3.462 +                };
   3.463 +                elem.parentNode.addEventListener(transitionEnd, l, false);
   3.464 +                removeClass(elem, "to-build");
   3.465 +              } else {
   3.466 +                setTimeout(function() {
   3.467 +                  removeClass(elem, "to-build");
   3.468 +                  _t._runAutos();
   3.469 +                }, 400);
   3.470 +              }
   3.471 +            }
   3.472 +          },
   3.473 +          buildNext: function() {
   3.474 +            if (!this._buildList.length) {
   3.475 +              return false;
   3.476 +            }
   3.477 +            removeClass(this._buildList.shift(), "to-build");
   3.478 +            return true;
   3.479 +          },
   3.480 +        };
   3.481 +
   3.482 +        //
   3.483 +        // SlideShow class
   3.484 +        //
   3.485 +        var SlideShow = function(slides) {
   3.486 +          this._slides = (slides||[]).map(function(el, idx) {
   3.487 +            return new Slide(el, idx);
   3.488 +          });
   3.489 +
   3.490 +          var h = window.location.hash;
   3.491 +          try {
   3.492 +            this.current = parseInt(h.split('#slide')[1], 10);
   3.493 +          }catch (e) { /* squeltch */ }
   3.494 +          this.current = isNaN(this.current) ? 1 : this.current;
   3.495 +          var _t = this;
   3.496 +          doc.addEventListener('keydown', 
   3.497 +              function(e) { _t.handleKeys(e); }, false);
   3.498 +          doc.addEventListener('mousewheel', 
   3.499 +              function(e) { _t.handleWheel(e); }, false);
   3.500 +          doc.addEventListener('DOMMouseScroll', 
   3.501 +              function(e) { _t.handleWheel(e); }, false);
   3.502 +          doc.addEventListener('touchstart', 
   3.503 +              function(e) { _t.handleTouchStart(e); }, false);
   3.504 +          doc.addEventListener('touchend', 
   3.505 +              function(e) { _t.handleTouchEnd(e); }, false);
   3.506 +          window.addEventListener('popstate', 
   3.507 +              function(e) { _t.go(e.state); }, false);
   3.508 +          this._update();
   3.509 +          
   3.510 +          // hide those slides we forced to render on load time for positioning purposes
   3.511 +          [].forEach.call(document.querySelectorAll('.force-render'), function(elem,i){
   3.512 +            setTimeout(function() {
   3.513 +              removeClass(elem, 'force-render');
   3.514 +            }, 2000);
   3.515 +          });
   3.516 +        };
   3.517 +
   3.518 +        SlideShow.prototype = {
   3.519 +          _slides: [],
   3.520 +          _update: function(dontPush) {
   3.521 +            if (history.pushState) {
   3.522 +              if (!dontPush) {
   3.523 +                history.pushState(this.current, "Slide " + this.current, "#slide" + this.current);
   3.524 +              }
   3.525 +            } else {
   3.526 +              window.location.hash = "slide" + this.current;
   3.527 +            }
   3.528 +            for (var x = this.current-1; x < this.current+7; x++) {
   3.529 +              if (this._slides[x-4]) {
   3.530 +                this._slides[x-4].setState(Math.max(0, x-this.current));
   3.531 +              }
   3.532 +            }
   3.533 +          },
   3.534 +
   3.535 +          current: 0,
   3.536 +          next: function() {
   3.537 +            if (!this._slides[this.current-1].buildNext()) {
   3.538 +              //if _slide is not one index less than the current, build the next indexed slide
   3.539 +
   3.540 +              this.current = Math.min(this.current+1, this._slides.length);
   3.541 +              //current index number = add 1 unless we reached the last slide index
   3.542 +
   3.543 +              this._update();
   3.544 +            }
   3.545 +          },
   3.546 +          prev: function() {
   3.547 +            this.current = Math.max(this.current -1, 1);//
   3.548 +            this._update();
   3.549 +          },
   3.550 +          generation: function() {//may want to rename this child node?
   3.551 +            alert(document.getElementsByTagName('DIV')[0].innerHTML);
   3.552 +// so we have the inner content: now get the first node ID attribute/make it display the subnode.
   3.553 +            if (n>0) {this.current = 0;};//move to child node
   3.554 +//document.getElementById('div2').getElementsByTagNames('tr')[0].innerHTML='<td>Test</td>'; //does not work..
   3.555 +
   3.556 +            if (n<0) {};//move to parent node
   3.557 +            if (this.current != 1) this.prev();//if not slide #1, go back 1
   3.558 +            this._update();//update the viewer.
   3.559 +          },
   3.560 +
   3.561 +          go: function(num) {
   3.562 +            if (history.pushState && this.current != num) {
   3.563 +              history.replaceState(this.current, "Slide " + this.current, "#slide" + this.current);
   3.564 +            }
   3.565 +            this.current = num;
   3.566 +            this._update(true);
   3.567 +          },
   3.568 +
   3.569 +          _notesOn: false,
   3.570 +          showNotes: function() {
   3.571 +            var isOn = this._notesOn = !this._notesOn;
   3.572 +            query(".notes").forEach(function(el) {
   3.573 +              el.style.display = (notesOn) ? "block" : "none";
   3.574 +            });
   3.575 +          },
   3.576 +          switch3D: function() {
   3.577 +            toggleClass(document.body, "three-d");
   3.578 +          },
   3.579 +          handleWheel: function(e) {
   3.580 +            var delta = 0;
   3.581 +            if (e.wheelDelta) {
   3.582 +              delta = e.wheelDelta/120;
   3.583 +              if (isOpera) {
   3.584 +                delta = -delta;
   3.585 +              }
   3.586 +            } else if (e.detail) {
   3.587 +              delta = -e.detail/3;
   3.588 +            }
   3.589 +
   3.590 +            if (delta > 0 ) {
   3.591 +              this.prev();
   3.592 +              return;
   3.593 +            }
   3.594 +            if (delta < 0 ) {
   3.595 +              this.next();
   3.596 +              return;
   3.597 +            }
   3.598 +          },
   3.599 +          handleKeys: function(e) {
   3.600 +            
   3.601 +            if (/^(input|textarea)$/i.test(e.target.nodeName)) return;
   3.602 +            
   3.603 +            switch (e.keyCode) {
   3.604 +
   3.605 +              case 37: // left arrow: previous file or parent directory
   3.606 +                this.prev(); break;
   3.607 +              case 38: // up arrow/context by file links should work, but
   3.608 +                this.generation(); break;              
   3.609 +              case 39: // right arrow: next file or subdirectory
   3.610 +                this.next(); break;
   3.611 +              case 40: // go to first child (subdirectory) in current directory
   3.612 +                this.generation(); break; // 
   3.613 +              case 32: // space
   3.614 +                this.next(); break;
   3.615 +              case 50: // 2
   3.616 +                this.showNotes(); break;
   3.617 +              case 51: // 3
   3.618 +                this.switch3D(); break;
   3.619 +            }
   3.620 +          },
   3.621 +          _touchStartX: 0,
   3.622 +          handleTouchStart: function(e) {
   3.623 +            this._touchStartX = e.touches[0].pageX;
   3.624 +          },
   3.625 +          handleTouchEnd: function(e) {
   3.626 +            var delta = this._touchStartX - e.changedTouches[0].pageX;
   3.627 +            var SWIPE_SIZE = 150;
   3.628 +            if (delta > SWIPE_SIZE) {
   3.629 +              this.next();
   3.630 +            } else if (delta< -SWIPE_SIZE) {
   3.631 +              this.prev();
   3.632 +            }
   3.633 +          },
   3.634 +        };
   3.635 +
   3.636 +        // Initialize
   3.637 +        var slideshow = new SlideShow(query(".slide"));
   3.638 +      })();
   3.639 +    </SCRIPT>
   3.640 +
   3.641 +    <!--[if lt IE 9]>
   3.642 +    <script 
   3.643 +      src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
   3.644 +    </script>
   3.645 +		<script>CFInstall.check({ mode: "overlay" });</script>
   3.646 +    <![endif]-->
   3.647 +    
   3.648 + -->
   3.649 +
   3.650 +</BODY></HTML>
     4.1 --- a/template_H5p10n.html	Thu Aug 26 22:10:08 2010 +0300
     4.2 +++ b/template_H5p10n.html	Thu Sep 02 00:27:59 2010 +0300
     4.3 @@ -3,32 +3,12 @@
     4.4  <HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
     4.5      <META charset="UTF-8">
     4.6      <!--[if lt IE 9]>
     4.7 -      <meta http-equiv="X-UA-Compatible" content="chrome=1">
     4.8 +<!--handle whichever browser is running.-->
     4.9      <![endif]-->
    4.10 -
    4.11      <TITLE>HTML5 presentation</TITLE>
    4.12 -<!--    <LINK href="./HTML5 presentation_files/css" rel="stylesheet" type="text/css">-->
    4.13 -    
    4.14 -    <!-- <link type="text/css" href="./src/scrollbar.css" rel="stylesheet"> -->
    4.15 -    
    4.16      <STYLE>
    4.17        .sequencing { display:none; }
    4.18        .notes { display: none; }
    4.19 -      .stroke {
    4.20 -        -webkit-text-stroke-color: red;
    4.21 -        -webkit-text-stroke-width: 1px;
    4.22 -      } /* currently webkit-only */
    4.23 -      
    4.24 -      body {
    4.25 -        font: 14px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
    4.26 -        padding: 0;
    4.27 -        margin: 0;
    4.28 -        width: 100%;
    4.29 -        height: 100%;
    4.30 -        position: absolute;
    4.31 -        left: 0px; top: 0px;
    4.32 -      }
    4.33 -      
    4.34        .presentation {
    4.35          position: absolute;
    4.36          height: 100%;
    4.37 @@ -37,9 +17,8 @@
    4.38          top: 0px;
    4.39          display: block;
    4.40          overflow: hidden;
    4.41 -        background: #778;
    4.42 -      }
    4.43 -      
    4.44 +        background: #000;
    4.45 +      }      
    4.46        .slides {
    4.47          width: 100%;
    4.48          height: 100%;
    4.49 @@ -50,137 +29,35 @@
    4.50          top: 0;
    4.51          position: absolute;
    4.52          display: block;
    4.53 -        -webkit-transition: -webkit-transform 1s ease-in-out;
    4.54 -        -moz-transition: -moz-transform 1s ease-in-out;
    4.55 -        -o-transition: -o-transform 1s ease-in-out;
    4.56 -        transition: transform 1s ease-in-out;
    4.57        }
    4.58 -
    4.59        .slide {
    4.60          display: none;
    4.61          position: absolute;
    4.62          overflow: hidden;
    4.63          width: 100%;/*900px;*/
    4.64 -        height: 700px;
    4.65 +        height: 100%;/*700px;*/
    4.66          left: 0%;
    4.67          top: 0%;
    4.68          margin-top: -0px;
    4.69 -        background-color: #eee;
    4.70 -        background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));
    4.71 -        background: -moz-linear-gradient(bottom, #bbd, #fff);
    4.72 -        background: linear-gradient(bottom, #bbd, #fff);
    4.73 -        -webkit-transition: margin 1.4s ease-in-out;
    4.74 -        -moz-transition: margin 1.4s ease-in-out;
    4.75 -        -o-transition: margin 1.4s ease-in-out;
    4.76 -        transition: margin 1.4s ease-in-out;
    4.77 +        background-color: #111;
    4.78        }
    4.79 -      
    4.80 -      .slide:nth-child(even) {
    4.81 -        border-radius: 20px 0; /* includes Opera 10.5+ */
    4.82 -        -moz-border-radius: 20px 0;
    4.83 -        -khtml-border-radius: 20px 0;
    4.84 -        -webkit-border-top-left-radius: 20px;
    4.85 -        -webkit-border-bottom-right-radius: 20px;
    4.86 -      }
    4.87 -      
    4.88 -      .slide:nth-child(odd) {
    4.89 -        border-radius: 0 20px;
    4.90 -        -moz-border-radius: 0 20px;
    4.91 -        -khtml-border-radius: 0 20px;
    4.92 -        -webkit-border-top-right-radius: 20px;
    4.93 -        -webkit-border-bottom-left-radius: 20px;
    4.94 -      }
    4.95 -
    4.96 -      .slide p {
    4.97 +      p {
    4.98          font-size: 20px;
    4.99        }
   4.100 -
   4.101 -      .slide .counter {
   4.102 -        color: #999999;
   4.103 -        position: absolute;
   4.104 -        left: 20px;
   4.105 -        bottom: 20px;
   4.106 -        display: block;
   4.107 -        font-size: 12px;
   4.108 -      }
   4.109 -
   4.110 -      .slide.title > .counter,
   4.111 -      .slide.segue > .counter,
   4.112 -      .slide.mainTitle > .counter {
   4.113 -        display: none;
   4.114 -      }
   4.115 -
   4.116        .force-render {
   4.117          display: block;
   4.118 -        margin-top: -10000px;
   4.119 +        margin-top: -1000px;
   4.120        }
   4.121 -
   4.122        section.intro p {
   4.123          font-size: 35px;
   4.124        }
   4.125 -
   4.126 -      button {
   4.127 -        font-size: 20px;
   4.128 -      }
   4.129 -      
   4.130 -      .summary {
   4.131 -       font-size: 30px;
   4.132 -      }
   4.133 -
   4.134 -      .bullets {
   4.135 -       font-size: 40px;
   4.136 -      }
   4.137 -
   4.138 -      .slide.far-past {
   4.139 -        display: block;
   4.140 -        margin-left: -2400px;
   4.141 -      }
   4.142 -      
   4.143 -      .slide.past {
   4.144 -        display: block;
   4.145 -        margin-left: -1400px;
   4.146 -      }
   4.147 -      
   4.148 -      .slide.current {
   4.149 -        display: block;
   4.150 -        margin-left: 0px;
   4.151 -      }
   4.152 -      
   4.153 -      .slide.future {
   4.154 -        display: block;
   4.155 -        margin-left: 1500px;
   4.156 -      }
   4.157 -      
   4.158 -      .slide.far-future {
   4.159 -        display: block;
   4.160 -        margin-left: 2500px;
   4.161 -      }
   4.162 -
   4.163 -      .slide.grandparent {
   4.164 -        display: block;
   4.165 -        margin-top: -2400px;
   4.166 -      }
   4.167 -      
   4.168 -      .slide.parent {
   4.169 -        display: block;
   4.170 -        margin-top: -1400px;
   4.171 -      }
   4.172 -      
   4.173 -      .slide.current {
   4.174 -        display: block;
   4.175 -        margin-top: 0px;
   4.176 -      }
   4.177 -      
   4.178 -      .slide.first-child {
   4.179 -        display: block;
   4.180 -        margin-top: 1500px;
   4.181 -      }
   4.182 -      
   4.183 -      .slide.first-grandchild {
   4.184 -        display: block;
   4.185 -        margin-top: 2500px;
   4.186 -      }
   4.187 -
   4.188 +.slide.far-past, .slide.past, .slide.future, .slide.far-future, .slide.parent, slide.child { display: none; } /*margin-left: -2400px;*/      
   4.189 +/* {display: block; margin-left: -1400px;}*/
   4.190 +/* {display: block; margin-left: 1500px;}*/      
   4.191 +/* {display: block; margin-left: 2500px;}*/
   4.192 +/* {display: block; margin-top: -400px; margin-left: 0px;}*/
   4.193 +.slide.current { display: block; margin-top: 0px; margin-left: 0px; }
   4.194 +/* {display: block; margin-top: 500px; margin-left: 0px;}*/
   4.195        body.three-d div.presentation {
   4.196          /*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000));        */
   4.197        }
   4.198 @@ -190,275 +67,10 @@
   4.199          -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
   4.200          -o-transform: translateX(50px) scale(0.8) rotateY(10deg);
   4.201          transform: translateX(50px) scale(0.8) rotateY(10deg);
   4.202 -      }
   4.203 -      
   4.204 -      
   4.205 -      /* Content */
   4.206 -      
   4.207 -      @font-face { font-family: 'Junction'; src: url(src/Junction02.otf); }
   4.208 -      @font-face { font-family: 'LeagueGothic'; src: url(src/LeagueGothic.otf); }
   4.209 -      
   4.210 -      header {
   4.211 -        font-family: 'Droid Sans';
   4.212 -        font-weight: normal;
   4.213 -        font-size: 50px;
   4.214 -        letter-spacing: -.05em;
   4.215 -        color: white;
   4.216 -        color: black;
   4.217 -        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
   4.218 -        position: absolute;
   4.219 -        left: 30px;
   4.220 -        top: 25px;
   4.221 -        margin: 0;
   4.222 -        padding: 0;
   4.223 -      }
   4.224 -      
   4.225 -      .intro h1 {
   4.226 -        color: black;
   4.227 -        padding: 0;
   4.228 -        margin: 0;
   4.229 -        letter-spacing: -2px;
   4.230 -        font-size: 96px;
   4.231 -      }
   4.232 -      
   4.233 -      .intro h2 {
   4.234 -        color: black;
   4.235 -        padding: 0;
   4.236 -        margin: 0;
   4.237 -        margin-top: -5px;
   4.238 -        font-size: 40px;
   4.239 -        letter-spacing: -1px;
   4.240 -      }
   4.241 -      
   4.242 -      h1 {
   4.243 -        display: inline;
   4.244 -        font-size: 100%;
   4.245 -      	font-weight: normal;
   4.246 -      	padding: 0;
   4.247 -      	margin: 0;
   4.248 -      }
   4.249 -      
   4.250 -      h2 {
   4.251 -        font-family: 'Droid Sans';
   4.252 -        color: black;
   4.253 -        font-size: 20px;
   4.254 -        margin-left: 20px;
   4.255 -        margin-top: 50px;
   4.256 -      }
   4.257 -      
   4.258 -      h2:first-child {
   4.259 -        margin-top: 0;
   4.260 -      }
   4.261 -
   4.262 -      section, footer {
   4.263 -        font-family: 'Droid Sans';
   4.264 -        font-size: 50px;
   4.265 -        color: #3f3f3f;
   4.266 -        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
   4.267 -        margin-left: 30px;
   4.268 -        margin-right: 30px;
   4.269 -        margin-top: 100px;
   4.270 -        display: block;
   4.271 -        overflow: hidden;
   4.272 -      }
   4.273 -      
   4.274 -      footer { font-size: 12px; margin-top: 20px;}
   4.275 -
   4.276 -      a {
   4.277 -        color: inherit;
   4.278 -        display: inline-block;
   4.279 -        text-decoration: none;
   4.280 -        line-height: 110%;
   4.281 -        border-bottom: 2px solid #3f3f3f;
   4.282 -      }
   4.283 -
   4.284 -      #wmap a {
   4.285 -        line-height: 100%;
   4.286 -        border-bottom: none;
   4.287 -      }
   4.288 -      
   4.289 -      section.left {
   4.290 -        float: left;
   4.291 -        width: 390px;
   4.292 -      }
   4.293 -      
   4.294 -      section.small {
   4.295 -        font-size: 24px;
   4.296 -      }
   4.297 -      
   4.298 -      section.small ul {
   4.299 -        margin: 0 0 0 15px;
   4.300 -        padding: 0;
   4.301 -      }
   4.302 -      
   4.303 -      section.small li {
   4.304 -        padding-bottom: 0;
   4.305 -      }
   4.306 -      
   4.307 -      h2 {
   4.308 -        padding: 0;
   4.309 -        margin: 15px 0 5px 0;
   4.310 -/*        font-family: GG240;*/
   4.311 -      }
   4.312 -      
   4.313 -      section.center {
   4.314 -        line-height: 180%;
   4.315 -        text-align: center;
   4.316 -        display: table-cell;
   4.317 -        vertical-align: middle;
   4.318 -        height: 700px;
   4.319 -        width: 900px;
   4.320 -      }
   4.321 -      
   4.322 -      pre {
   4.323 -        text-align: left;
   4.324 -        font-size: 16px;
   4.325 -        font-family: 'Droid Sans Mono', Courier;
   4.326 -        padding-bottom: 10px;
   4.327 -        
   4.328 -        padding: 10px 20px;
   4.329 -        background: rgba(255, 0, 0, 0.05);
   4.330 -        border-radius: 8px;
   4.331 -        -webkit-border-radius: 8px;
   4.332 -        -khtml-border-radius: 8px;
   4.333 -        -moz-border-radius: 8px;
   4.334 -        border: 1px solid rgba(255, 0, 0, 0.2);
   4.335 -      }
   4.336 -      .two-column {
   4.337 -        -webkit-column-count: 2;
   4.338 -        -moz-column-count: 2;
   4.339 -        column-count: 2;
   4.340 -      }
   4.341 -      
   4.342 -      pre select {
   4.343 -        font-size: 16px;
   4.344 -        font-family: Monaco, Courier;
   4.345 -        border: 1px solid #c61800;
   4.346 -      }
   4.347 -        
   4.348 -      input {
   4.349 -        font-size: 16px;
   4.350 -        font-family: Helvetica;
   4.351 -        padding: 3px;
   4.352 -      }
   4.353 -      input[type="range"] {
   4.354 -        width: 100%;
   4.355 -      }
   4.356 -      
   4.357 -      button {
   4.358 -        font-family: Verdana;
   4.359 -      }
   4.360 -      
   4.361 -      button.large {
   4.362 -        font-size: 32px;
   4.363 -      }
   4.364 -        
   4.365 -      pre b {
   4.366 -        font-weight: normal;
   4.367 -        color: #c61800;
   4.368 -        text-shadow: #c61800 0 0 1px;
   4.369 -        /*letter-spacing: -1px;*/
   4.370 -      }
   4.371 -      pre em {
   4.372 -        font-weight: normal;
   4.373 -        font-style: normal;
   4.374 -        color: #18a600;
   4.375 -        text-shadow: #18a600 0 0 1px;
   4.376 -      }
   4.377 -      pre input[type="range"] {
   4.378 -        height: 6px;
   4.379 -        cursor: pointer;
   4.380 -        width: auto;
   4.381 -      }
   4.382 -      example {
   4.383 -        font-size: 16px;
   4.384 -        display: block;
   4.385 -        padding: 10px 20px;
   4.386 -        color: black;
   4.387 -        background: rgba(255, 255, 255, 0.4);
   4.388 -        border-radius: 8px;
   4.389 -        -webkit-border-radius: 8px;
   4.390 -        -khtml-border-radius: 8px;
   4.391 -        -moz-border-radius: 8px;
   4.392 -        margin-bottom: 10px;
   4.393 -        border: 1px solid rgba(0, 0, 0, 0.2);
   4.394 -      }
   4.395 -      video {
   4.396 -        border-radius: 8px;
   4.397 -        -moz-border-radius: 8px;
   4.398 -        -khtml-border-radius: 8px;
   4.399 -        -webkit-border-radius: 8px;
   4.400 -        border: 1px solid rgba(0, 0, 0, 0.2);
   4.401 -      }
   4.402 -      
   4.403 -      .css,
   4.404 -      .js,
   4.405 -      .html,
   4.406 -      .key {
   4.407 -        font-family: 'Droid Sans';
   4.408 -        color: black;
   4.409 -        display: inline-block;
   4.410 -        padding: 6px 10px 3px 10px;
   4.411 -        font-size: 25px;
   4.412 -        line-height: 30px;
   4.413 -        text-shadow: none;
   4.414 -        letter-spacing: 0;
   4.415 -        bottom: 10px;
   4.416 -        position: relative;
   4.417 -        border-radius: 10px;
   4.418 -        -moz-border-radius: 10px;
   4.419 -        -khtml-border-radius: 10px;
   4.420 -        -webkit-border-radius: 10px;
   4.421 -        background: white;
   4.422 -        box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
   4.423 -        -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
   4.424 -        -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
   4.425 -        -o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
   4.426 -      }
   4.427 -      
   4.428 -      .key { font-family: Arial; }
   4.429 -      
   4.430 -      :not(header) > .css,
   4.431 -      :not(header) > .js,
   4.432 -      :not(header) > .html,
   4.433 -      :not(header) > .key {
   4.434 -        margin: 0 5px;
   4.435 -        bottom: 4px;
   4.436 -      }
   4.437 -      
   4.438 -      .css {
   4.439 -        background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#ffa));
   4.440 -        background-color: #ff4;
   4.441 -        background: -moz-linear-gradient(left top, #ff4, #ffa);
   4.442 -      }
   4.443 -      .js {
   4.444 -        background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#afa));
   4.445 -        background-color: #4f4;
   4.446 -        background: -moz-linear-gradient(left top, #4f4, #afa);
   4.447 -      }
   4.448 -      .html {
   4.449 -        background: -webkit-gradient(linear, left top, left bottom, from(#e88), to(#fee));
   4.450 -        background-color: #e88;
   4.451 -        background: -moz-linear-gradient(left top, #e88, #fee);
   4.452 -      }
   4.453 -      
   4.454 -      li {
   4.455 -        list-style: none;
   4.456 -        padding: 10px 0;
   4.457 -      }
   4.458 -      
   4.459 -      .summary li::before, .bullets li::before {
   4.460 -        content: 'ยท ';
   4.461 -      }
   4.462 -      
   4.463 -      info {
   4.464 -        display: block;
   4.465 -        font-size: 50%;
   4.466 -        text-align: center;
   4.467 -      }
   4.468 -      
   4.469 +      }     
   4.470      </STYLE>
   4.471 -    </HEAD><BODY>
   4.472 +  </HEAD>
   4.473 +  <BODY>
   4.474      <DIV class="presentation">
   4.475        <DIV class="slides">
   4.476  <!--NEW SLIDES-->
   4.477 @@ -734,27 +346,29 @@
   4.478            current: 0,
   4.479            next: function() {
   4.480              if (!this._slides[this.current-1].buildNext()) {
   4.481 +              //if _slide is not one index less than the current, build the next indexed slide
   4.482 +
   4.483                this.current = Math.min(this.current+1, this._slides.length);
   4.484 +              //current index number = add 1 unless we reached the last slide index
   4.485 +
   4.486                this._update();
   4.487              }
   4.488            },
   4.489            prev: function() {
   4.490 -            this.current = Math.max(this.current-1, 1);//this.current-1, 1);
   4.491 +            this.current = Math.max(this.current -1, 1);//
   4.492              this._update();
   4.493            },
   4.494 -          parent: function() {
   4.495 -            this.current = Math.max(this.current-1, 1);//this.current-1, 1);
   4.496 -            this._update();
   4.497 +          generation: function(n) {//may want to rename this child node?
   4.498 +            alert(document.getElementsByTagName('DIV')[0].innerHTML);
   4.499 +// so we have the inner content: now get the first node ID attribute/make it display the subnode.
   4.500 +            if (n>0) {this.current = 0;};//move to child node
   4.501 +//document.getElementById('div2').getElementsByTagNames('tr')[0].innerHTML='<td>Test</td>'; //does not work..
   4.502 +
   4.503 +            if (n<0) {};//move to parent node
   4.504 +            if (this.current != 1) this.prev();//if not slide #1, go back 1
   4.505 +            this._update();//update the viewer.
   4.506            },
   4.507  
   4.508 -          first_child: function() {
   4.509 -            this.current = Math.max(this.current-1, 1);//this.current-1, 1);
   4.510 -            this._update();
   4.511 -          },
   4.512 -//
   4.513 -//
   4.514 -//
   4.515 -//
   4.516            go: function(num) {
   4.517              if (history.pushState && this.current != num) {
   4.518                history.replaceState(this.current, "Slide " + this.current, "#slide" + this.current);
   4.519 @@ -798,15 +412,15 @@
   4.520              if (/^(input|textarea)$/i.test(e.target.nodeName)) return;
   4.521              
   4.522              switch (e.keyCode) {
   4.523 -              case 37: // left arrow
   4.524 +
   4.525 +              case 37: // left arrow: previous file or parent directory
   4.526                  this.prev(); break;
   4.527                case 38: // up arrow/context by file links should work, but
   4.528 -                this.parent(); break; // linked p10ns must use a nest-level flag for back button=up cursor              
   4.529 -              case 39: // right arrow
   4.530 +                this.generation(); break;              
   4.531 +              case 39: // right arrow: next file or subdirectory
   4.532                  this.next(); break;
   4.533 -              case 40: // down arrow/what can we do with os.walk() here? This navigation should allow p10n tailoring to a given situation; link keys on a per-presentation basis for key slides will also be good.
   4.534 -                this.first_child(); break; // make the wiki bouncier.
   4.535 -
   4.536 +              case 40: // go to first child (subdirectory) in current directory
   4.537 +                this.generation(); break; // 
   4.538                case 32: // space
   4.539                  this.next(); break;
   4.540                case 50: // 2
     5.1 --- a/walkfs-writemarkup.py	Thu Aug 26 22:10:08 2010 +0300
     5.2 +++ b/walkfs-writemarkup.py	Thu Sep 02 00:27:59 2010 +0300
     5.3 @@ -2,48 +2,36 @@
     5.4  # -*- coding: utf-8 -*-
     5.5  
     5.6  from os import walk, path, stat
     5.7 -from sha import new
     5.8 +#from sha import new
     5.9  #from time import 
    5.10  
    5.11 -# Bug: Class attributes end up with white space (if filenames have them): this might be a bug or a feature, I suppose.
    5.12 -
    5.13 -# Put template loader from file minimumWorking... mod with %s at slide insertion point.
    5.14 -# Setup a current slideset, current index display (re-add it modified from original).
    5.15 -
    5.16 -def makeSlides(root):
    5.17 -   defaultOrder, slideData = "", ""
    5.18 +def directorySlides(root):
    5.19 +   content = ""
    5.20     for current, directories, files in walk(root):
    5.21 -#      print current, directories, files
    5.22 -      classes = ""
    5.23 -      if directories != []:
    5.24 -         for directory in directories:
    5.25 -            try:
    5.26 -               fullpath = path.join(current, directory)
    5.27 -               uid = new(fullpath).hexdigest()
    5.28 -               metaInfo = stat(fullpath) # see http://wiki.forum.nokia.com/index.php/How_to_handle_file_metadata
    5.29 -               slideData += '\n<!-- directory --><DIV class="slide %s" id="%s">%s</DIV>' % ("defaultOrder", uid, metaInfo)
    5.30 -               defaultOrder += " " + uid
    5.31 -            except:
    5.32 -               pass
    5.33 +      for count in current.split("/"):
    5.34 +         content += '\n<DIV class="directory" id="%s">%s' % (current, current)
    5.35 +         if directories != []:
    5.36 +            for item in directories:
    5.37 +               fullpath = path.join(current, item)
    5.38 +               content += '\n  <DIV class="subdirectory" id="%s">%s</DIV>' % (item, fullpath)
    5.39 +         else:
    5.40 +            print "No directories in %s" % current
    5.41 +#No cnotent is shown for nested slides, and this is a big problem
    5.42 +         if files != []:
    5.43 +            for item in files:
    5.44 +               fullpath = path.join(current, item)
    5.45 +               content += '\n  <DIV class="file" id="%s">%s</DIV>' % (item, fullpath)
    5.46 +         else:
    5.47 +            print "No files in %s" % current
    5.48 +         content += '\n</DIV>'
    5.49  
    5.50 -      if files != []:
    5.51 -         for filename in files:
    5.52 -            #classes stay the same for file slides as for directory slides for each path given.
    5.53 -            try:
    5.54 -               fullpath = path.join(current, filename) 
    5.55 -               uid = new(fullpath).hexdigest()
    5.56 -               metaInfo = stat(fullpath)
    5.57 -               slideData += '\n<!-- filename --><DIV class="slide %s" id="%s">%s</DIV>' % ("defaultOrder", uid, metaInfo)
    5.58 -               defaultOrder += " " + uid
    5.59 -            except:
    5.60 -               pass
    5.61 -   slideOrder = '\n<!-- default order --><DIV class="%s">\n%s\n</DIV>' % ("sequencing defaultOrder", defaultOrder)
    5.62 -   slideData += slideOrder   
    5.63 +   return content
    5.64  
    5.65 -   return slideData
    5.66 -
    5.67 -s = makeSlides('.')
    5.68 -template = file("./template_H5p10n.html", "r").read()
    5.69 -r = template.split("%s")
    5.70 -t = r[0] + s + r[1]
    5.71 -file("./generated_slides", "w").write(t)
    5.72 +def main():
    5.73 +   s = directorySlides("./")
    5.74 +   template = file("./template_H5p10n.html", "r").read()
    5.75 +   r = template.split("%s")
    5.76 +   t = r[0] + s + r[1]
    5.77 +   file("./generated_slides", "w").write(t)
    5.78 +   
    5.79 +activation = main()