PythonSlideShow

Changeset

0:3e9f012474eb
2010-08-26 ink raw files shortlog changelog graph Enter commit message. Lines beginning with 'HG:' are removed. branch 'default' Added minimumWorking_H5p10n.html. This is a horizontal scrolling presentation.
minimumWorking_H5p10n.html (file)
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/minimumWorking_H5p10n.html	Thu Aug 26 07:38:42 2010 +0300
     1.3 @@ -0,0 +1,836 @@
     1.4 +<!DOCTYPE html>
     1.5 +<!-- saved from url=(0036)http://slides.html5rocks.com/#slide1 -->
     1.6 +<!-- <HTML manifest="/html5/src/slides_manifest.php"> -->
     1.7 +<!-- Bugs: The first slide is always in the background if URL references "#slideN" are followed when the document is first loaded.-->
     1.8 +<HTML>
     1.9 +<HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    1.10 +    <META charset="UTF-8">
    1.11 +    <!--[if lt IE 9]>
    1.12 +      <meta http-equiv="X-UA-Compatible" content="chrome=1">
    1.13 +    <![endif]-->
    1.14 +
    1.15 +    <TITLE>HTML5 presentation</TITLE>
    1.16 +    <LINK href="./HTML5 presentation_files/css" rel="stylesheet" type="text/css">
    1.17 +    
    1.18 +    <!-- <link type="text/css" href="./src/scrollbar.css" rel="stylesheet"> -->
    1.19 +    
    1.20 +    <STYLE>
    1.21 +      .notes { display: none; }
    1.22 +      .stroke {
    1.23 +        -webkit-text-stroke-color: red;
    1.24 +        -webkit-text-stroke-width: 1px;
    1.25 +      } /* currently webkit-only */
    1.26 +      
    1.27 +      body {
    1.28 +        font: 14px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
    1.29 +        padding: 0;
    1.30 +        margin: 0;
    1.31 +        width: 100%;
    1.32 +        height: 100%;
    1.33 +        position: absolute;
    1.34 +        left: 0px; top: 0px;
    1.35 +      }
    1.36 +      
    1.37 +      .presentation {
    1.38 +        position: absolute;
    1.39 +        height: 100%;
    1.40 +        width: 100%;
    1.41 +        left: 0px;
    1.42 +        top: 0px;
    1.43 +        display: block;
    1.44 +        overflow: hidden;
    1.45 +        background: #778;
    1.46 +      }
    1.47 +      
    1.48 +      .slides {
    1.49 +        width: 100%;
    1.50 +        height: 100%;
    1.51 +        /*
    1.52 +        overflow: hidden;
    1.53 +        */
    1.54 +        left: 0;
    1.55 +        top: 0;
    1.56 +        position: absolute;
    1.57 +        display: block;
    1.58 +        -webkit-transition: -webkit-transform 2s ease-in-out;
    1.59 +        -moz-transition: -moz-transform 2s ease-in-out;
    1.60 +        -o-transition: -o-transform 2s ease-in-out;
    1.61 +        transition: transform 2s ease-in-out;
    1.62 +      }
    1.63 +
    1.64 +      .slide {
    1.65 +        display: none;
    1.66 +        position: absolute;
    1.67 +        overflow: hidden;
    1.68 +        width: 900px;
    1.69 +        height: 700px;
    1.70 +        left: 50%;
    1.71 +        top: 50%;
    1.72 +        margin-top: -350px;
    1.73 +        background-color: #eee;
    1.74 +        background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));
    1.75 +        background: -moz-linear-gradient(bottom, #bbd, #fff);
    1.76 +        background: linear-gradient(bottom, #bbd, #fff);
    1.77 +        -webkit-transition: margin 2.25s ease-in-out;
    1.78 +        -moz-transition: margin 2.25s ease-in-out;
    1.79 +        -o-transition: margin 2.25s ease-in-out;
    1.80 +        transition: margin 2.25s ease-in-out;
    1.81 +      }
    1.82 +      
    1.83 +      .slide:nth-child(even) {
    1.84 +        border-radius: 20px 0; /* includes Opera 10.5+ */
    1.85 +        -moz-border-radius: 20px 0;
    1.86 +        -khtml-border-radius: 20px 0;
    1.87 +        -webkit-border-top-left-radius: 20px;
    1.88 +        -webkit-border-bottom-right-radius: 20px;
    1.89 +      }
    1.90 +      
    1.91 +      .slide:nth-child(odd) {
    1.92 +        border-radius: 0 20px;
    1.93 +        -moz-border-radius: 0 20px;
    1.94 +        -khtml-border-radius: 0 20px;
    1.95 +        -webkit-border-top-right-radius: 20px;
    1.96 +        -webkit-border-bottom-left-radius: 20px;
    1.97 +      }
    1.98 +
    1.99 +      .slide p {
   1.100 +        font-size: 20px;
   1.101 +      }
   1.102 +
   1.103 +      .slide .counter {
   1.104 +        color: #999999;
   1.105 +        position: absolute;
   1.106 +        left: 20px;
   1.107 +        bottom: 20px;
   1.108 +        display: block;
   1.109 +        font-size: 12px;
   1.110 +      }
   1.111 +
   1.112 +      .slide.title > .counter,
   1.113 +      .slide.segue > .counter,
   1.114 +      .slide.mainTitle > .counter {
   1.115 +        display: none;
   1.116 +      }
   1.117 +
   1.118 +      .force-render {
   1.119 +        display: block;
   1.120 +        margin-top: -10000px;
   1.121 +      }
   1.122 +
   1.123 +      section.intro p {
   1.124 +        font-size: 35px;
   1.125 +      }
   1.126 +
   1.127 +      button {
   1.128 +        font-size: 20px;
   1.129 +      }
   1.130 +      
   1.131 +      .summary {
   1.132 +       font-size: 30px;
   1.133 +      }
   1.134 +
   1.135 +      .bullets {
   1.136 +       font-size: 40px;
   1.137 +      }
   1.138 +      
   1.139 +      .slide.far-past {
   1.140 +        display: block;
   1.141 +        margin-left: -2400px;
   1.142 +      }
   1.143 +      
   1.144 +      .slide.past {
   1.145 +        display: block;
   1.146 +        margin-left: -1400px;
   1.147 +      }
   1.148 +      
   1.149 +      .slide.current {
   1.150 +        display: block;
   1.151 +        margin-left: -450px;
   1.152 +      }
   1.153 +      
   1.154 +      .slide.future {
   1.155 +        display: block;
   1.156 +        margin-left: 500px;
   1.157 +      }
   1.158 +      
   1.159 +      .slide.far-future {
   1.160 +        display: block;
   1.161 +        margin-left: 1500px;
   1.162 +      }
   1.163 +
   1.164 +      body.three-d div.presentation {
   1.165 +        /*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000));        */
   1.166 +      }
   1.167 +      
   1.168 +      body.three-d div.slides {
   1.169 +        -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
   1.170 +        -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
   1.171 +        -o-transform: translateX(50px) scale(0.8) rotateY(10deg);
   1.172 +        transform: translateX(50px) scale(0.8) rotateY(10deg);
   1.173 +      }
   1.174 +      
   1.175 +      
   1.176 +      /* Content */
   1.177 +      
   1.178 +      @font-face { font-family: 'Junction'; src: url(src/Junction02.otf); }
   1.179 +      @font-face { font-family: 'LeagueGothic'; src: url(src/LeagueGothic.otf); }
   1.180 +      
   1.181 +      header {
   1.182 +        font-family: 'Droid Sans';
   1.183 +        font-weight: normal;
   1.184 +        font-size: 50px;
   1.185 +        letter-spacing: -.05em;
   1.186 +        color: white;
   1.187 +        color: black;
   1.188 +        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
   1.189 +        position: absolute;
   1.190 +        left: 30px;
   1.191 +        top: 25px;
   1.192 +        margin: 0;
   1.193 +        padding: 0;
   1.194 +      }
   1.195 +      
   1.196 +      .intro h1 {
   1.197 +        color: black;
   1.198 +        padding: 0;
   1.199 +        margin: 0;
   1.200 +        letter-spacing: -2px;
   1.201 +        font-size: 96px;
   1.202 +      }
   1.203 +      
   1.204 +      .intro h2 {
   1.205 +        color: black;
   1.206 +        padding: 0;
   1.207 +        margin: 0;
   1.208 +        margin-top: -5px;
   1.209 +        font-size: 40px;
   1.210 +        letter-spacing: -1px;
   1.211 +      }
   1.212 +      
   1.213 +      h1 {
   1.214 +        display: inline;
   1.215 +        font-size: 100%;
   1.216 +      	font-weight: normal;
   1.217 +      	padding: 0;
   1.218 +      	margin: 0;
   1.219 +      }
   1.220 +      
   1.221 +      h2 {
   1.222 +        font-family: 'Droid Sans';
   1.223 +        color: black;
   1.224 +        font-size: 20px;
   1.225 +        margin-left: 20px;
   1.226 +        margin-top: 50px;
   1.227 +      }
   1.228 +      
   1.229 +      h2:first-child {
   1.230 +        margin-top: 0;
   1.231 +      }
   1.232 +
   1.233 +      section, footer {
   1.234 +        font-family: 'Droid Sans';
   1.235 +        font-size: 50px;
   1.236 +        color: #3f3f3f;
   1.237 +        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
   1.238 +        margin-left: 30px;
   1.239 +        margin-right: 30px;
   1.240 +        margin-top: 100px;
   1.241 +        display: block;
   1.242 +        overflow: hidden;
   1.243 +      }
   1.244 +      
   1.245 +      footer { font-size: 12px; margin-top: 20px;}
   1.246 +
   1.247 +      a {
   1.248 +        color: inherit;
   1.249 +        display: inline-block;
   1.250 +        text-decoration: none;
   1.251 +        line-height: 110%;
   1.252 +        border-bottom: 2px solid #3f3f3f;
   1.253 +      }
   1.254 +
   1.255 +      #wmap a {
   1.256 +        line-height: 100%;
   1.257 +        border-bottom: none;
   1.258 +      }
   1.259 +      
   1.260 +      section.left {
   1.261 +        float: left;
   1.262 +        width: 390px;
   1.263 +      }
   1.264 +      
   1.265 +      section.small {
   1.266 +        font-size: 24px;
   1.267 +      }
   1.268 +      
   1.269 +      section.small ul {
   1.270 +        margin: 0 0 0 15px;
   1.271 +        padding: 0;
   1.272 +      }
   1.273 +      
   1.274 +      section.small li {
   1.275 +        padding-bottom: 0;
   1.276 +      }
   1.277 +      
   1.278 +      h2 {
   1.279 +        padding: 0;
   1.280 +        margin: 15px 0 5px 0;
   1.281 +/*        font-family: GG240;*/
   1.282 +      }
   1.283 +      
   1.284 +      section.center {
   1.285 +        line-height: 180%;
   1.286 +        text-align: center;
   1.287 +        display: table-cell;
   1.288 +        vertical-align: middle;
   1.289 +        height: 700px;
   1.290 +        width: 900px;
   1.291 +      }
   1.292 +      
   1.293 +      pre {
   1.294 +        text-align: left;
   1.295 +        font-size: 16px;
   1.296 +        font-family: 'Droid Sans Mono', Courier;
   1.297 +        padding-bottom: 10px;
   1.298 +        
   1.299 +        padding: 10px 20px;
   1.300 +        background: rgba(255, 0, 0, 0.05);
   1.301 +        border-radius: 8px;
   1.302 +        -webkit-border-radius: 8px;
   1.303 +        -khtml-border-radius: 8px;
   1.304 +        -moz-border-radius: 8px;
   1.305 +        border: 1px solid rgba(255, 0, 0, 0.2);
   1.306 +      }
   1.307 +      .two-column {
   1.308 +        -webkit-column-count: 2;
   1.309 +        -moz-column-count: 2;
   1.310 +        column-count: 2;
   1.311 +      }
   1.312 +      
   1.313 +      pre select {
   1.314 +        font-size: 16px;
   1.315 +        font-family: Monaco, Courier;
   1.316 +        border: 1px solid #c61800;
   1.317 +      }
   1.318 +        
   1.319 +      input {
   1.320 +        font-size: 16px;
   1.321 +        font-family: Helvetica;
   1.322 +        padding: 3px;
   1.323 +      }
   1.324 +      input[type="range"] {
   1.325 +        width: 100%;
   1.326 +      }
   1.327 +      
   1.328 +      button {
   1.329 +        font-family: Verdana;
   1.330 +      }
   1.331 +      
   1.332 +      button.large {
   1.333 +        font-size: 32px;
   1.334 +      }
   1.335 +        
   1.336 +      pre b {
   1.337 +        font-weight: normal;
   1.338 +        color: #c61800;
   1.339 +        text-shadow: #c61800 0 0 1px;
   1.340 +        /*letter-spacing: -1px;*/
   1.341 +      }
   1.342 +      pre em {
   1.343 +        font-weight: normal;
   1.344 +        font-style: normal;
   1.345 +        color: #18a600;
   1.346 +        text-shadow: #18a600 0 0 1px;
   1.347 +      }
   1.348 +      pre input[type="range"] {
   1.349 +        height: 6px;
   1.350 +        cursor: pointer;
   1.351 +        width: auto;
   1.352 +      }
   1.353 +      example {
   1.354 +        font-size: 16px;
   1.355 +        display: block;
   1.356 +        padding: 10px 20px;
   1.357 +        color: black;
   1.358 +        background: rgba(255, 255, 255, 0.4);
   1.359 +        border-radius: 8px;
   1.360 +        -webkit-border-radius: 8px;
   1.361 +        -khtml-border-radius: 8px;
   1.362 +        -moz-border-radius: 8px;
   1.363 +        margin-bottom: 10px;
   1.364 +        border: 1px solid rgba(0, 0, 0, 0.2);
   1.365 +      }
   1.366 +      video {
   1.367 +        border-radius: 8px;
   1.368 +        -moz-border-radius: 8px;
   1.369 +        -khtml-border-radius: 8px;
   1.370 +        -webkit-border-radius: 8px;
   1.371 +        border: 1px solid rgba(0, 0, 0, 0.2);
   1.372 +      }
   1.373 +      
   1.374 +      .css,
   1.375 +      .js,
   1.376 +      .html,
   1.377 +      .key {
   1.378 +        font-family: 'Droid Sans';
   1.379 +        color: black;
   1.380 +        display: inline-block;
   1.381 +        padding: 6px 10px 3px 10px;
   1.382 +        font-size: 25px;
   1.383 +        line-height: 30px;
   1.384 +        text-shadow: none;
   1.385 +        letter-spacing: 0;
   1.386 +        bottom: 10px;
   1.387 +        position: relative;
   1.388 +        border-radius: 10px;
   1.389 +        -moz-border-radius: 10px;
   1.390 +        -khtml-border-radius: 10px;
   1.391 +        -webkit-border-radius: 10px;
   1.392 +        background: white;
   1.393 +        box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
   1.394 +        -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
   1.395 +        -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
   1.396 +        -o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
   1.397 +      }
   1.398 +      
   1.399 +      .key { font-family: Arial; }
   1.400 +      
   1.401 +      :not(header) > .css,
   1.402 +      :not(header) > .js,
   1.403 +      :not(header) > .html,
   1.404 +      :not(header) > .key {
   1.405 +        margin: 0 5px;
   1.406 +        bottom: 4px;
   1.407 +      }
   1.408 +      
   1.409 +      .css {
   1.410 +        background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#ffa));
   1.411 +        background-color: #ff4;
   1.412 +        background: -moz-linear-gradient(left top, #ff4, #ffa);
   1.413 +      }
   1.414 +      .js {
   1.415 +        background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#afa));
   1.416 +        background-color: #4f4;
   1.417 +        background: -moz-linear-gradient(left top, #4f4, #afa);
   1.418 +      }
   1.419 +      .html {
   1.420 +        background: -webkit-gradient(linear, left top, left bottom, from(#e88), to(#fee));
   1.421 +        background-color: #e88;
   1.422 +        background: -moz-linear-gradient(left top, #e88, #fee);
   1.423 +      }
   1.424 +      
   1.425 +      li {
   1.426 +        list-style: none;
   1.427 +        padding: 10px 0;
   1.428 +      }
   1.429 +      
   1.430 +      .summary li::before, .bullets li::before {
   1.431 +        content: '· ';
   1.432 +      }
   1.433 +      
   1.434 +      info {
   1.435 +        display: block;
   1.436 +        font-size: 50%;
   1.437 +        text-align: center;
   1.438 +      }
   1.439 +      
   1.440 +    </STYLE>
   1.441 +    </HEAD><BODY>
   1.442 +    <DIV class="presentation">
   1.443 +      <DIV class="slides">
   1.444 +<!--NEW SLIDES-->
   1.445 +        <DIV class="slide current">
   1.446 +          <SECTION class="center intro">
   1.447 +            <P>Getting around</P>
   1.448 +            <P>Press <SPAN class="key">→</SPAN> to move on. See detail by using <SPAN class="key">↓</SPAN>, go back via <SPAN class="key">←</SPAN> and <SPAN class="key">↑</SPAN>. Use <SPAN CLASS="key">Tab ⇥</SPAN> and <SPAN CLASS="key">&nbsp;↵&nbsp;</SPAN> to find and follow links.</P>
   1.449 +            <P>Zoom in/out: <SPAN class="key">Ctrl or Command</SPAN> + <SPAN class="key">+/-</SPAN></P>
   1.450 +            <P style="font-size: 25px">Derived from <A href="http://slides.html5rocks.com/disclaimer.html">slides.html5rocks.com</A></P>
   1.451 +          </SECTION>
   1.452 +        <SPAN class="counter">1</SPAN></DIV>
   1.453 +                
   1.454 +        <DIV class="slide future">
   1.455 +          <SECTION class="center intro">
   1.456 +            <HGROUP>
   1.457 +              <H1>
   1.458 +                P10ns in HTML5
   1.459 +              </H1>
   1.460 +              <H2>
   1.461 +                 Presentations in HyperText Markup Language 5
   1.462 +              </H2>
   1.463 +            </HGROUP>
   1.464 +            <P style="font-size: 32px">Documenting Finnish, some ideas, real estate searches and employment</P>
   1.465 +          </SECTION>
   1.466 +        <SPAN class="counter">2</SPAN></DIV>
   1.467 +
   1.468 +        <DIV class="slide far-future">
   1.469 +          <HEADER>Planning</HEADER>
   1.470 +          <SECTION class="small">
   1.471 +<P>Generate content with bpy/Python 3. This supports integration with Blender 2.5+ with no external Python 3 interpreter needed. Multi-key controls implemented in-context, per-slide, enable quick and easy development of quizzes, like counting up, counting down and typing the alphabet (with or without c[l]ues). Answers show transitional slides or content (e.g. "Correct!" flying past or flashing on the screen or a video or sound plays) before showing the next slide from the current section or subsection. This document can include hangman and similar games relying on specific typing for progression.</P>
   1.472 +          </SECTION>
   1.473 +        <SPAN class="counter">2</SPAN></DIV>
   1.474 +
   1.475 +
   1.476 +
   1.477 +      </DIV> <!-- slides -->
   1.478 +       
   1.479 +    </DIV> <!-- presentation -->
   1.480 +    
   1.481 +    <SCRIPT>
   1.482 +      (function() {
   1.483 +        // bail in IE
   1.484 +        var doc = document;
   1.485 +        if (doc.all) { return; }
   1.486 +
   1.487 +        var disableBuilds = true; //true;
   1.488 +
   1.489 +        var ctr = 0;
   1.490 +        var spaces = /\s+/, a1 = [""];
   1.491 +
   1.492 +        var toArray = function(list) {
   1.493 +          return Array.prototype.slice.call(list||[], 0);
   1.494 +        };
   1.495 +
   1.496 +        var byId = function(id) {
   1.497 +          if (typeof id == "string") { return doc.getElementById(id); }
   1.498 +          return id;
   1.499 +        };
   1.500 +
   1.501 +        var query = function(query, root) {
   1.502 +          if (!query) { return []; }
   1.503 +          if (typeof query != "string") { return toArray(query); }
   1.504 +          if (typeof root == "string"){
   1.505 +            root = byId(root);
   1.506 +            if(!root){ return []; }
   1.507 +          }
   1.508 +
   1.509 +          root = root||document;
   1.510 +          var rootIsDoc = (root.nodeType == 9);
   1.511 +          var doc = rootIsDoc ? root : (root.ownerDocument||document);
   1.512 +
   1.513 +          // rewrite the query to be ID rooted
   1.514 +          if (!rootIsDoc || (">~+".indexOf(query.charAt(0)) >= 0)) {
   1.515 +            root.id = root.id||("qUnique"+(ctr++));
   1.516 +            query = "#"+root.id+" "+query;
   1.517 +          }
   1.518 +          // don't choke on something like ".yada.yada >"
   1.519 +          if (">~+".indexOf(query.slice(-1)) >= 0) { query += " *"; }
   1.520 +
   1.521 +          return toArray(doc.querySelectorAll(query));
   1.522 +        };
   1.523 +
   1.524 +        var strToArray = function(s) {
   1.525 +          if (typeof s == "string" || s instanceof String) {
   1.526 +            if (s.indexOf(" ") < 0) {
   1.527 +              a1[0] = s;
   1.528 +              return a1;
   1.529 +            } else {
   1.530 +              return s.split(spaces);
   1.531 +            }
   1.532 +          }
   1.533 +          return s;
   1.534 +        };
   1.535 +
   1.536 +        var trim = function(str) {
   1.537 +          return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
   1.538 +        };
   1.539 +
   1.540 +        var addClass = function(node, classStr) {
   1.541 +          classStr = strToArray(classStr);
   1.542 +          var cls = " " + node.className + " ";
   1.543 +          for (var i = 0, len = classStr.length, c; i < len; ++i) {
   1.544 +            c = classStr[i];
   1.545 +            if (c && cls.indexOf(" " + c + " ") < 0) {
   1.546 +              cls += c + " ";
   1.547 +            }
   1.548 +          }
   1.549 +          node.className = trim(cls);
   1.550 +        };
   1.551 +
   1.552 +        var removeClass = function(node, classStr) {
   1.553 +          var cls;
   1.554 +          if (classStr !== undefined) {
   1.555 +            classStr = strToArray(classStr);
   1.556 +            cls = " " + node.className + " ";
   1.557 +            for (var i = 0, len = classStr.length; i < len; ++i) {
   1.558 +              cls = cls.replace(" " + classStr[i] + " ", " ");
   1.559 +            }
   1.560 +            cls = trim(cls);
   1.561 +          } else {
   1.562 +            cls = "";
   1.563 +          }
   1.564 +          if (node.className != cls) {
   1.565 +            node.className = cls;
   1.566 +          }
   1.567 +        };
   1.568 +
   1.569 +        var toggleClass = function(node, classStr) {
   1.570 +          var cls = " " + node.className + " ";
   1.571 +          if (cls.indexOf(" " + trim(classStr) + " ") >= 0) {
   1.572 +            removeClass(node, classStr);
   1.573 +          } else {
   1.574 +            addClass(node, classStr);
   1.575 +          }
   1.576 +        };
   1.577 +
   1.578 +        var ua = navigator.userAgent;
   1.579 +        var isFF = parseFloat(ua.split("Firefox/")[1]) || undefined;
   1.580 +        var isWK = parseFloat(ua.split("WebKit/")[1]) || undefined;
   1.581 +        var isOpera = parseFloat(ua.split("Opera/")[1]) || undefined;
   1.582 +
   1.583 +        var canTransition = (function() {
   1.584 +          var ver = parseFloat(ua.split("Version/")[1]) || undefined;
   1.585 +          // test to determine if this browser can handle CSS transitions.
   1.586 +          var cachedCanTransition = 
   1.587 +            (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));
   1.588 +          return function() { return cachedCanTransition; }
   1.589 +        })();
   1.590 +
   1.591 +        //
   1.592 +        // Slide class
   1.593 +        //
   1.594 +        var Slide = function(node, idx) {
   1.595 +          this._node = node;
   1.596 +          if (idx >= 0) {
   1.597 +            this._count = idx+1;
   1.598 +          }
   1.599 +          if (this._node) {
   1.600 +            addClass(this._node, "slide distant-future");
   1.601 +          }
   1.602 +          this._makeCounter();
   1.603 +          this._makeBuildList();
   1.604 +        };
   1.605 +
   1.606 +        Slide.prototype = {
   1.607 +          _node: null,
   1.608 +          _count: 0,
   1.609 +          _buildList: [],
   1.610 +          _visited: false,
   1.611 +          _currentState: "",
   1.612 +          _states: [ "distant-past", "far-past",
   1.613 +                     "past", "current", "future",
   1.614 +                     "far-future", "distant-future" ],
   1.615 +          setState: function(state) {
   1.616 +            if (typeof state != "string") {
   1.617 +              state = this._states[state];
   1.618 +            }
   1.619 +            if (state == "current" && !this._visited) {
   1.620 +              this._visited = true;
   1.621 +              this._makeBuildList();
   1.622 +            }
   1.623 +            removeClass(this._node, this._states);
   1.624 +            addClass(this._node, state);
   1.625 +            this._currentState = state;
   1.626 +
   1.627 +            // delay first auto run. Really wish this were in CSS.
   1.628 +            /*
   1.629 +            this._runAutos();
   1.630 +            */
   1.631 +            var _t = this;
   1.632 +            setTimeout(function(){ _t._runAutos(); } , 400);
   1.633 +          },
   1.634 +          _makeCounter: function() {
   1.635 +            if(!this._count || !this._node) { return; }
   1.636 +            var c = doc.createElement("span");
   1.637 +            c.innerHTML = this._count;
   1.638 +            c.className = "counter";
   1.639 +            this._node.appendChild(c);
   1.640 +          },
   1.641 +          _makeBuildList: function() {
   1.642 +            this._buildList = [];
   1.643 +            if (disableBuilds) { return; }
   1.644 +            if (this._node) {
   1.645 +              this._buildList = query("[data-build] > *", this._node);
   1.646 +            }
   1.647 +            this._buildList.forEach(function(el) {
   1.648 +              addClass(el, "to-build");
   1.649 +            });
   1.650 +          },
   1.651 +          _runAutos: function() {
   1.652 +            if (this._currentState != "current") {
   1.653 +              return;
   1.654 +            }
   1.655 +            // find the next auto, slice it out of the list, and run it
   1.656 +            var idx = -1;
   1.657 +            this._buildList.some(function(n, i) {
   1.658 +              if (n.hasAttribute("data-auto")) {
   1.659 +                idx = i;
   1.660 +                return true;
   1.661 +              }
   1.662 +              return false;
   1.663 +            });
   1.664 +            if (idx >= 0) {
   1.665 +              var elem = this._buildList.splice(idx, 1)[0];
   1.666 +              var transitionEnd = isWK ? "webkitTransitionEnd" : (isFF ? "mozTransitionEnd" : "oTransitionEnd");
   1.667 +              var _t = this;
   1.668 +              if (canTransition()) {
   1.669 +                var l = function(evt) {
   1.670 +                  elem.parentNode.removeEventListener(transitionEnd, l, false);
   1.671 +                  _t._runAutos();
   1.672 +                };
   1.673 +                elem.parentNode.addEventListener(transitionEnd, l, false);
   1.674 +                removeClass(elem, "to-build");
   1.675 +              } else {
   1.676 +                setTimeout(function() {
   1.677 +                  removeClass(elem, "to-build");
   1.678 +                  _t._runAutos();
   1.679 +                }, 400);
   1.680 +              }
   1.681 +            }
   1.682 +          },
   1.683 +          buildNext: function() {
   1.684 +            if (!this._buildList.length) {
   1.685 +              return false;
   1.686 +            }
   1.687 +            removeClass(this._buildList.shift(), "to-build");
   1.688 +            return true;
   1.689 +          },
   1.690 +        };
   1.691 +
   1.692 +        //
   1.693 +        // SlideShow class
   1.694 +        //
   1.695 +        var SlideShow = function(slides) {
   1.696 +          this._slides = (slides||[]).map(function(el, idx) {
   1.697 +            return new Slide(el, idx);
   1.698 +          });
   1.699 +
   1.700 +          var h = window.location.hash;
   1.701 +          try {
   1.702 +            this.current = parseInt(h.split('#slide')[1], 10);
   1.703 +          }catch (e) { /* squeltch */ }
   1.704 +          this.current = isNaN(this.current) ? 1 : this.current;
   1.705 +          var _t = this;
   1.706 +          doc.addEventListener('keydown', 
   1.707 +              function(e) { _t.handleKeys(e); }, false);
   1.708 +          doc.addEventListener('mousewheel', 
   1.709 +              function(e) { _t.handleWheel(e); }, false);
   1.710 +          doc.addEventListener('DOMMouseScroll', 
   1.711 +              function(e) { _t.handleWheel(e); }, false);
   1.712 +          doc.addEventListener('touchstart', 
   1.713 +              function(e) { _t.handleTouchStart(e); }, false);
   1.714 +          doc.addEventListener('touchend', 
   1.715 +              function(e) { _t.handleTouchEnd(e); }, false);
   1.716 +          window.addEventListener('popstate', 
   1.717 +              function(e) { _t.go(e.state); }, false);
   1.718 +          this._update();
   1.719 +          
   1.720 +          // hide those slides we forced to render on load time for positioning purposes
   1.721 +          [].forEach.call(document.querySelectorAll('.force-render'), function(elem,i){
   1.722 +            setTimeout(function() {
   1.723 +              removeClass(elem, 'force-render');
   1.724 +            }, 2000);
   1.725 +          });
   1.726 +        };
   1.727 +
   1.728 +        SlideShow.prototype = {
   1.729 +          _slides: [],
   1.730 +          _update: function(dontPush) {
   1.731 +            if (history.pushState) {
   1.732 +              if (!dontPush) {
   1.733 +                history.pushState(this.current, "Slide " + this.current, "#slide" + this.current);
   1.734 +              }
   1.735 +            } else {
   1.736 +              window.location.hash = "slide" + this.current;
   1.737 +            }
   1.738 +            for (var x = this.current-1; x < this.current+7; x++) {
   1.739 +              if (this._slides[x-4]) {
   1.740 +                this._slides[x-4].setState(Math.max(0, x-this.current));
   1.741 +              }
   1.742 +            }
   1.743 +          },
   1.744 +
   1.745 +          current: 0,
   1.746 +          next: function() {
   1.747 +            if (!this._slides[this.current-1].buildNext()) {
   1.748 +              this.current = Math.min(this.current+1, this._slides.length);
   1.749 +              this._update();
   1.750 +            }
   1.751 +          },
   1.752 +          prev: function() {
   1.753 +            this.current = Math.max(this.current-1, 1);
   1.754 +            this._update();
   1.755 +          },
   1.756 +          go: function(num) {
   1.757 +            if (history.pushState && this.current != num) {
   1.758 +              history.replaceState(this.current, "Slide " + this.current, "#slide" + this.current);
   1.759 +            }
   1.760 +            this.current = num;
   1.761 +            this._update(true);
   1.762 +          },
   1.763 +
   1.764 +          _notesOn: false,
   1.765 +          showNotes: function() {
   1.766 +            var isOn = this._notesOn = !this._notesOn;
   1.767 +            query(".notes").forEach(function(el) {
   1.768 +              el.style.display = (notesOn) ? "block" : "none";
   1.769 +            });
   1.770 +          },
   1.771 +          switch3D: function() {
   1.772 +            toggleClass(document.body, "three-d");
   1.773 +          },
   1.774 +          handleWheel: function(e) {
   1.775 +            var delta = 0;
   1.776 +            if (e.wheelDelta) {
   1.777 +              delta = e.wheelDelta/120;
   1.778 +              if (isOpera) {
   1.779 +                delta = -delta;
   1.780 +              }
   1.781 +            } else if (e.detail) {
   1.782 +              delta = -e.detail/3;
   1.783 +            }
   1.784 +
   1.785 +            if (delta > 0 ) {
   1.786 +              this.prev();
   1.787 +              return;
   1.788 +            }
   1.789 +            if (delta < 0 ) {
   1.790 +              this.next();
   1.791 +              return;
   1.792 +            }
   1.793 +          },
   1.794 +          handleKeys: function(e) {
   1.795 +            
   1.796 +            if (/^(input|textarea)$/i.test(e.target.nodeName)) return;
   1.797 +            
   1.798 +            switch (e.keyCode) {
   1.799 +              case 37: // left arrow
   1.800 +                this.prev(); break;
   1.801 +              case 39: // right arrow
   1.802 +              case 32: // space
   1.803 +                this.next(); break;
   1.804 +              case 50: // 2
   1.805 +                this.showNotes(); break;
   1.806 +              case 51: // 3
   1.807 +                this.switch3D(); break;
   1.808 +            }
   1.809 +          },
   1.810 +          _touchStartX: 0,
   1.811 +          handleTouchStart: function(e) {
   1.812 +            this._touchStartX = e.touches[0].pageX;
   1.813 +          },
   1.814 +          handleTouchEnd: function(e) {
   1.815 +            var delta = this._touchStartX - e.changedTouches[0].pageX;
   1.816 +            var SWIPE_SIZE = 150;
   1.817 +            if (delta > SWIPE_SIZE) {
   1.818 +              this.next();
   1.819 +            } else if (delta< -SWIPE_SIZE) {
   1.820 +              this.prev();
   1.821 +            }
   1.822 +          },
   1.823 +        };
   1.824 +
   1.825 +        // Initialize
   1.826 +        var slideshow = new SlideShow(query(".slide"));
   1.827 +      })();
   1.828 +    </SCRIPT>
   1.829 +
   1.830 +    <!--[if lt IE 9]>
   1.831 +    <script 
   1.832 +      src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
   1.833 +    </script>
   1.834 +		<script>CFInstall.check({ mode: "overlay" });</script>
   1.835 +    <![endif]-->
   1.836 +    
   1.837 + -->
   1.838 +
   1.839 +</BODY></HTML>