PythonSlideShow

Changeset

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