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"> ↵ </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>
