PythonSlideShow

Annotated minimumWorking_H5p10n.html

6:c69af778e9a3
2010-08-26 ink changed template_H5p10n.html to use vertical CSS transitions instead of horizontal ones.
ink@0 1
<!DOCTYPE html>
ink@0 2
<!-- saved from url=(0036)http://slides.html5rocks.com/#slide1 -->
ink@0 3
<!-- <HTML manifest="/html5/src/slides_manifest.php"> -->
ink@0 4
<!-- Bugs: The first slide is always in the background if URL references "#slideN" are followed when the document is first loaded.-->
ink@0 5
<HTML>
ink@0 6
<HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
ink@0 7
    <META charset="UTF-8">
ink@0 8
    <!--[if lt IE 9]>
ink@0 9
      <meta http-equiv="X-UA-Compatible" content="chrome=1">
ink@0 10
    <![endif]-->
ink@0 11
ink@0 12
    <TITLE>HTML5 presentation</TITLE>
ink@0 13
    <LINK href="./HTML5 presentation_files/css" rel="stylesheet" type="text/css">
ink@0 14
    
ink@0 15
    <!-- <link type="text/css" href="./src/scrollbar.css" rel="stylesheet"> -->
ink@0 16
    
ink@0 17
    <STYLE>
ink@0 18
      .notes { display: none; }
ink@0 19
      .stroke {
ink@0 20
        -webkit-text-stroke-color: red;
ink@0 21
        -webkit-text-stroke-width: 1px;
ink@0 22
      } /* currently webkit-only */
ink@0 23
      
ink@0 24
      body {
ink@0 25
        font: 14px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
ink@0 26
        padding: 0;
ink@0 27
        margin: 0;
ink@0 28
        width: 100%;
ink@0 29
        height: 100%;
ink@0 30
        position: absolute;
ink@0 31
        left: 0px; top: 0px;
ink@0 32
      }
ink@0 33
      
ink@0 34
      .presentation {
ink@0 35
        position: absolute;
ink@0 36
        height: 100%;
ink@0 37
        width: 100%;
ink@0 38
        left: 0px;
ink@0 39
        top: 0px;
ink@0 40
        display: block;
ink@0 41
        overflow: hidden;
ink@0 42
        background: #778;
ink@0 43
      }
ink@0 44
      
ink@0 45
      .slides {
ink@0 46
        width: 100%;
ink@0 47
        height: 100%;
ink@0 48
        /*
ink@0 49
        overflow: hidden;
ink@0 50
        */
ink@0 51
        left: 0;
ink@0 52
        top: 0;
ink@0 53
        position: absolute;
ink@0 54
        display: block;
ink@0 55
        -webkit-transition: -webkit-transform 2s ease-in-out;
ink@0 56
        -moz-transition: -moz-transform 2s ease-in-out;
ink@0 57
        -o-transition: -o-transform 2s ease-in-out;
ink@0 58
        transition: transform 2s ease-in-out;
ink@0 59
      }
ink@0 60
ink@0 61
      .slide {
ink@0 62
        display: none;
ink@0 63
        position: absolute;
ink@0 64
        overflow: hidden;
ink@0 65
        width: 900px;
ink@0 66
        height: 700px;
ink@0 67
        left: 50%;
ink@0 68
        top: 50%;
ink@0 69
        margin-top: -350px;
ink@0 70
        background-color: #eee;
ink@0 71
        background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));
ink@0 72
        background: -moz-linear-gradient(bottom, #bbd, #fff);
ink@0 73
        background: linear-gradient(bottom, #bbd, #fff);
ink@0 74
        -webkit-transition: margin 2.25s ease-in-out;
ink@0 75
        -moz-transition: margin 2.25s ease-in-out;
ink@0 76
        -o-transition: margin 2.25s ease-in-out;
ink@0 77
        transition: margin 2.25s ease-in-out;
ink@0 78
      }
ink@0 79
      
ink@0 80
      .slide:nth-child(even) {
ink@0 81
        border-radius: 20px 0; /* includes Opera 10.5+ */
ink@0 82
        -moz-border-radius: 20px 0;
ink@0 83
        -khtml-border-radius: 20px 0;
ink@0 84
        -webkit-border-top-left-radius: 20px;
ink@0 85
        -webkit-border-bottom-right-radius: 20px;
ink@0 86
      }
ink@0 87
      
ink@0 88
      .slide:nth-child(odd) {
ink@0 89
        border-radius: 0 20px;
ink@0 90
        -moz-border-radius: 0 20px;
ink@0 91
        -khtml-border-radius: 0 20px;
ink@0 92
        -webkit-border-top-right-radius: 20px;
ink@0 93
        -webkit-border-bottom-left-radius: 20px;
ink@0 94
      }
ink@0 95
ink@0 96
      .slide p {
ink@0 97
        font-size: 20px;
ink@0 98
      }
ink@0 99
ink@0 100
      .slide .counter {
ink@0 101
        color: #999999;
ink@0 102
        position: absolute;
ink@0 103
        left: 20px;
ink@0 104
        bottom: 20px;
ink@0 105
        display: block;
ink@0 106
        font-size: 12px;
ink@0 107
      }
ink@0 108
ink@0 109
      .slide.title > .counter,
ink@0 110
      .slide.segue > .counter,
ink@0 111
      .slide.mainTitle > .counter {
ink@0 112
        display: none;
ink@0 113
      }
ink@0 114
ink@0 115
      .force-render {
ink@0 116
        display: block;
ink@0 117
        margin-top: -10000px;
ink@0 118
      }
ink@0 119
ink@0 120
      section.intro p {
ink@0 121
        font-size: 35px;
ink@0 122
      }
ink@0 123
ink@0 124
      button {
ink@0 125
        font-size: 20px;
ink@0 126
      }
ink@0 127
      
ink@0 128
      .summary {
ink@0 129
       font-size: 30px;
ink@0 130
      }
ink@0 131
ink@0 132
      .bullets {
ink@0 133
       font-size: 40px;
ink@0 134
      }
ink@0 135
      
ink@0 136
      .slide.far-past {
ink@0 137
        display: block;
ink@0 138
        margin-left: -2400px;
ink@0 139
      }
ink@0 140
      
ink@0 141
      .slide.past {
ink@0 142
        display: block;
ink@0 143
        margin-left: -1400px;
ink@0 144
      }
ink@0 145
      
ink@0 146
      .slide.current {
ink@0 147
        display: block;
ink@0 148
        margin-left: -450px;
ink@0 149
      }
ink@0 150
      
ink@0 151
      .slide.future {
ink@0 152
        display: block;
ink@0 153
        margin-left: 500px;
ink@0 154
      }
ink@0 155
      
ink@0 156
      .slide.far-future {
ink@0 157
        display: block;
ink@0 158
        margin-left: 1500px;
ink@0 159
      }
ink@0 160
ink@0 161
      body.three-d div.presentation {
ink@0 162
        /*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000));        */
ink@0 163
      }
ink@0 164
      
ink@0 165
      body.three-d div.slides {
ink@0 166
        -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
ink@0 167
        -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
ink@0 168
        -o-transform: translateX(50px) scale(0.8) rotateY(10deg);
ink@0 169
        transform: translateX(50px) scale(0.8) rotateY(10deg);
ink@0 170
      }
ink@0 171
      
ink@0 172
      
ink@0 173
      /* Content */
ink@0 174
      
ink@0 175
      @font-face { font-family: 'Junction'; src: url(src/Junction02.otf); }
ink@0 176
      @font-face { font-family: 'LeagueGothic'; src: url(src/LeagueGothic.otf); }
ink@0 177
      
ink@0 178
      header {
ink@0 179
        font-family: 'Droid Sans';
ink@0 180
        font-weight: normal;
ink@0 181
        font-size: 50px;
ink@0 182
        letter-spacing: -.05em;
ink@0 183
        color: white;
ink@0 184
        color: black;
ink@0 185
        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
ink@0 186
        position: absolute;
ink@0 187
        left: 30px;
ink@0 188
        top: 25px;
ink@0 189
        margin: 0;
ink@0 190
        padding: 0;
ink@0 191
      }
ink@0 192
      
ink@0 193
      .intro h1 {
ink@0 194
        color: black;
ink@0 195
        padding: 0;
ink@0 196
        margin: 0;
ink@0 197
        letter-spacing: -2px;
ink@0 198
        font-size: 96px;
ink@0 199
      }
ink@0 200
      
ink@0 201
      .intro h2 {
ink@0 202
        color: black;
ink@0 203
        padding: 0;
ink@0 204
        margin: 0;
ink@0 205
        margin-top: -5px;
ink@0 206
        font-size: 40px;
ink@0 207
        letter-spacing: -1px;
ink@0 208
      }
ink@0 209
      
ink@0 210
      h1 {
ink@0 211
        display: inline;
ink@0 212
        font-size: 100%;
ink@0 213
      	font-weight: normal;
ink@0 214
      	padding: 0;
ink@0 215
      	margin: 0;
ink@0 216
      }
ink@0 217
      
ink@0 218
      h2 {
ink@0 219
        font-family: 'Droid Sans';
ink@0 220
        color: black;
ink@0 221
        font-size: 20px;
ink@0 222
        margin-left: 20px;
ink@0 223
        margin-top: 50px;
ink@0 224
      }
ink@0 225
      
ink@0 226
      h2:first-child {
ink@0 227
        margin-top: 0;
ink@0 228
      }
ink@0 229
ink@0 230
      section, footer {
ink@0 231
        font-family: 'Droid Sans';
ink@0 232
        font-size: 50px;
ink@0 233
        color: #3f3f3f;
ink@0 234
        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
ink@0 235
        margin-left: 30px;
ink@0 236
        margin-right: 30px;
ink@0 237
        margin-top: 100px;
ink@0 238
        display: block;
ink@0 239
        overflow: hidden;
ink@0 240
      }
ink@0 241
      
ink@0 242
      footer { font-size: 12px; margin-top: 20px;}
ink@0 243
ink@0 244
      a {
ink@0 245
        color: inherit;
ink@0 246
        display: inline-block;
ink@0 247
        text-decoration: none;
ink@0 248
        line-height: 110%;
ink@0 249
        border-bottom: 2px solid #3f3f3f;
ink@0 250
      }
ink@0 251
ink@0 252
      #wmap a {
ink@0 253
        line-height: 100%;
ink@0 254
        border-bottom: none;
ink@0 255
      }
ink@0 256
      
ink@0 257
      section.left {
ink@0 258
        float: left;
ink@0 259
        width: 390px;
ink@0 260
      }
ink@0 261
      
ink@0 262
      section.small {
ink@0 263
        font-size: 24px;
ink@0 264
      }
ink@0 265
      
ink@0 266
      section.small ul {
ink@0 267
        margin: 0 0 0 15px;
ink@0 268
        padding: 0;
ink@0 269
      }
ink@0 270
      
ink@0 271
      section.small li {
ink@0 272
        padding-bottom: 0;
ink@0 273
      }
ink@0 274
      
ink@0 275
      h2 {
ink@0 276
        padding: 0;
ink@0 277
        margin: 15px 0 5px 0;
ink@0 278
/*        font-family: GG240;*/
ink@0 279
      }
ink@0 280
      
ink@0 281
      section.center {
ink@0 282
        line-height: 180%;
ink@0 283
        text-align: center;
ink@0 284
        display: table-cell;
ink@0 285
        vertical-align: middle;
ink@0 286
        height: 700px;
ink@0 287
        width: 900px;
ink@0 288
      }
ink@0 289
      
ink@0 290
      pre {
ink@0 291
        text-align: left;
ink@0 292
        font-size: 16px;
ink@0 293
        font-family: 'Droid Sans Mono', Courier;
ink@0 294
        padding-bottom: 10px;
ink@0 295
        
ink@0 296
        padding: 10px 20px;
ink@0 297
        background: rgba(255, 0, 0, 0.05);
ink@0 298
        border-radius: 8px;
ink@0 299
        -webkit-border-radius: 8px;
ink@0 300
        -khtml-border-radius: 8px;
ink@0 301
        -moz-border-radius: 8px;
ink@0 302
        border: 1px solid rgba(255, 0, 0, 0.2);
ink@0 303
      }
ink@0 304
      .two-column {
ink@0 305
        -webkit-column-count: 2;
ink@0 306
        -moz-column-count: 2;
ink@0 307
        column-count: 2;
ink@0 308
      }
ink@0 309
      
ink@0 310
      pre select {
ink@0 311
        font-size: 16px;
ink@0 312
        font-family: Monaco, Courier;
ink@0 313
        border: 1px solid #c61800;
ink@0 314
      }
ink@0 315
        
ink@0 316
      input {
ink@0 317
        font-size: 16px;
ink@0 318
        font-family: Helvetica;
ink@0 319
        padding: 3px;
ink@0 320
      }
ink@0 321
      input[type="range"] {
ink@0 322
        width: 100%;
ink@0 323
      }
ink@0 324
      
ink@0 325
      button {
ink@0 326
        font-family: Verdana;
ink@0 327
      }
ink@0 328
      
ink@0 329
      button.large {
ink@0 330
        font-size: 32px;
ink@0 331
      }
ink@0 332
        
ink@0 333
      pre b {
ink@0 334
        font-weight: normal;
ink@0 335
        color: #c61800;
ink@0 336
        text-shadow: #c61800 0 0 1px;
ink@0 337
        /*letter-spacing: -1px;*/
ink@0 338
      }
ink@0 339
      pre em {
ink@0 340
        font-weight: normal;
ink@0 341
        font-style: normal;
ink@0 342
        color: #18a600;
ink@0 343
        text-shadow: #18a600 0 0 1px;
ink@0 344
      }
ink@0 345
      pre input[type="range"] {
ink@0 346
        height: 6px;
ink@0 347
        cursor: pointer;
ink@0 348
        width: auto;
ink@0 349
      }
ink@0 350
      example {
ink@0 351
        font-size: 16px;
ink@0 352
        display: block;
ink@0 353
        padding: 10px 20px;
ink@0 354
        color: black;
ink@0 355
        background: rgba(255, 255, 255, 0.4);
ink@0 356
        border-radius: 8px;
ink@0 357
        -webkit-border-radius: 8px;
ink@0 358
        -khtml-border-radius: 8px;
ink@0 359
        -moz-border-radius: 8px;
ink@0 360
        margin-bottom: 10px;
ink@0 361
        border: 1px solid rgba(0, 0, 0, 0.2);
ink@0 362
      }
ink@0 363
      video {
ink@0 364
        border-radius: 8px;
ink@0 365
        -moz-border-radius: 8px;
ink@0 366
        -khtml-border-radius: 8px;
ink@0 367
        -webkit-border-radius: 8px;
ink@0 368
        border: 1px solid rgba(0, 0, 0, 0.2);
ink@0 369
      }
ink@0 370
      
ink@0 371
      .css,
ink@0 372
      .js,
ink@0 373
      .html,
ink@0 374
      .key {
ink@0 375
        font-family: 'Droid Sans';
ink@0 376
        color: black;
ink@0 377
        display: inline-block;
ink@0 378
        padding: 6px 10px 3px 10px;
ink@0 379
        font-size: 25px;
ink@0 380
        line-height: 30px;
ink@0 381
        text-shadow: none;
ink@0 382
        letter-spacing: 0;
ink@0 383
        bottom: 10px;
ink@0 384
        position: relative;
ink@0 385
        border-radius: 10px;
ink@0 386
        -moz-border-radius: 10px;
ink@0 387
        -khtml-border-radius: 10px;
ink@0 388
        -webkit-border-radius: 10px;
ink@0 389
        background: white;
ink@0 390
        box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
ink@0 391
        -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
ink@0 392
        -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
ink@0 393
        -o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
ink@0 394
      }
ink@0 395
      
ink@0 396
      .key { font-family: Arial; }
ink@0 397
      
ink@0 398
      :not(header) > .css,
ink@0 399
      :not(header) > .js,
ink@0 400
      :not(header) > .html,
ink@0 401
      :not(header) > .key {
ink@0 402
        margin: 0 5px;
ink@0 403
        bottom: 4px;
ink@0 404
      }
ink@0 405
      
ink@0 406
      .css {
ink@0 407
        background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#ffa));
ink@0 408
        background-color: #ff4;
ink@0 409
        background: -moz-linear-gradient(left top, #ff4, #ffa);
ink@0 410
      }
ink@0 411
      .js {
ink@0 412
        background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#afa));
ink@0 413
        background-color: #4f4;
ink@0 414
        background: -moz-linear-gradient(left top, #4f4, #afa);
ink@0 415
      }
ink@0 416
      .html {
ink@0 417
        background: -webkit-gradient(linear, left top, left bottom, from(#e88), to(#fee));
ink@0 418
        background-color: #e88;
ink@0 419
        background: -moz-linear-gradient(left top, #e88, #fee);
ink@0 420
      }
ink@0 421
      
ink@0 422
      li {
ink@0 423
        list-style: none;
ink@0 424
        padding: 10px 0;
ink@0 425
      }
ink@0 426
      
ink@0 427
      .summary li::before, .bullets li::before {
ink@0 428
        content: '?? ';
ink@0 429
      }
ink@0 430
      
ink@0 431
      info {
ink@0 432
        display: block;
ink@0 433
        font-size: 50%;
ink@0 434
        text-align: center;
ink@0 435
      }
ink@0 436
      
ink@0 437
    </STYLE>
ink@0 438
    </HEAD><BODY>
ink@0 439
    <DIV class="presentation">
ink@0 440
      <DIV class="slides">
ink@0 441
<!--NEW SLIDES-->
ink@0 442
        <DIV class="slide current">
ink@0 443
          <SECTION class="center intro">
ink@0 444
            <P>Getting around</P>
ink@0 445
            <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>
ink@0 446
            <P>Zoom in/out: <SPAN class="key">Ctrl or Command</SPAN> + <SPAN class="key">+/-</SPAN></P>
ink@0 447
            <P style="font-size: 25px">Derived from <A href="http://slides.html5rocks.com/disclaimer.html">slides.html5rocks.com</A></P>
ink@0 448
          </SECTION>
ink@0 449
        <SPAN class="counter">1</SPAN></DIV>
ink@0 450
                
ink@0 451
        <DIV class="slide future">
ink@0 452
          <SECTION class="center intro">
ink@0 453
            <HGROUP>
ink@0 454
              <H1>
ink@0 455
                P10ns in HTML5
ink@0 456
              </H1>
ink@0 457
              <H2>
ink@0 458
                 Presentations in HyperText Markup Language 5
ink@0 459
              </H2>
ink@0 460
            </HGROUP>
ink@0 461
            <P style="font-size: 32px">Documenting Finnish, some ideas, real estate searches and employment</P>
ink@0 462
          </SECTION>
ink@0 463
        <SPAN class="counter">2</SPAN></DIV>
ink@0 464
ink@0 465
        <DIV class="slide far-future">
ink@0 466
          <HEADER>Planning</HEADER>
ink@0 467
          <SECTION class="small">
ink@0 468
<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>
ink@0 469
          </SECTION>
ink@0 470
        <SPAN class="counter">2</SPAN></DIV>
ink@0 471
ink@0 472
ink@0 473
ink@0 474
      </DIV> <!-- slides -->
ink@0 475
       
ink@0 476
    </DIV> <!-- presentation -->
ink@0 477
    
ink@0 478
    <SCRIPT>
ink@0 479
      (function() {
ink@0 480
        // bail in IE
ink@0 481
        var doc = document;
ink@0 482
        if (doc.all) { return; }
ink@0 483
ink@0 484
        var disableBuilds = true; //true;
ink@0 485
ink@0 486
        var ctr = 0;
ink@0 487
        var spaces = /\s+/, a1 = [""];
ink@0 488
ink@0 489
        var toArray = function(list) {
ink@0 490
          return Array.prototype.slice.call(list||[], 0);
ink@0 491
        };
ink@0 492
ink@0 493
        var byId = function(id) {
ink@0 494
          if (typeof id == "string") { return doc.getElementById(id); }
ink@0 495
          return id;
ink@0 496
        };
ink@0 497
ink@0 498
        var query = function(query, root) {
ink@0 499
          if (!query) { return []; }
ink@0 500
          if (typeof query != "string") { return toArray(query); }
ink@0 501
          if (typeof root == "string"){
ink@0 502
            root = byId(root);
ink@0 503
            if(!root){ return []; }
ink@0 504
          }
ink@0 505
ink@0 506
          root = root||document;
ink@0 507
          var rootIsDoc = (root.nodeType == 9);
ink@0 508
          var doc = rootIsDoc ? root : (root.ownerDocument||document);
ink@0 509
ink@0 510
          // rewrite the query to be ID rooted
ink@0 511
          if (!rootIsDoc || (">~+".indexOf(query.charAt(0)) >= 0)) {
ink@0 512
            root.id = root.id||("qUnique"+(ctr++));
ink@0 513
            query = "#"+root.id+" "+query;
ink@0 514
          }
ink@0 515
          // don't choke on something like ".yada.yada >"
ink@0 516
          if (">~+".indexOf(query.slice(-1)) >= 0) { query += " *"; }
ink@0 517
ink@0 518
          return toArray(doc.querySelectorAll(query));
ink@0 519
        };
ink@0 520
ink@0 521
        var strToArray = function(s) {
ink@0 522
          if (typeof s == "string" || s instanceof String) {
ink@0 523
            if (s.indexOf(" ") < 0) {
ink@0 524
              a1[0] = s;
ink@0 525
              return a1;
ink@0 526
            } else {
ink@0 527
              return s.split(spaces);
ink@0 528
            }
ink@0 529
          }
ink@0 530
          return s;
ink@0 531
        };
ink@0 532
ink@0 533
        var trim = function(str) {
ink@0 534
          return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
ink@0 535
        };
ink@0 536
ink@0 537
        var addClass = function(node, classStr) {
ink@0 538
          classStr = strToArray(classStr);
ink@0 539
          var cls = " " + node.className + " ";
ink@0 540
          for (var i = 0, len = classStr.length, c; i < len; ++i) {
ink@0 541
            c = classStr[i];
ink@0 542
            if (c && cls.indexOf(" " + c + " ") < 0) {
ink@0 543
              cls += c + " ";
ink@0 544
            }
ink@0 545
          }
ink@0 546
          node.className = trim(cls);
ink@0 547
        };
ink@0 548
ink@0 549
        var removeClass = function(node, classStr) {
ink@0 550
          var cls;
ink@0 551
          if (classStr !== undefined) {
ink@0 552
            classStr = strToArray(classStr);
ink@0 553
            cls = " " + node.className + " ";
ink@0 554
            for (var i = 0, len = classStr.length; i < len; ++i) {
ink@0 555
              cls = cls.replace(" " + classStr[i] + " ", " ");
ink@0 556
            }
ink@0 557
            cls = trim(cls);
ink@0 558
          } else {
ink@0 559
            cls = "";
ink@0 560
          }
ink@0 561
          if (node.className != cls) {
ink@0 562
            node.className = cls;
ink@0 563
          }
ink@0 564
        };
ink@0 565
ink@0 566
        var toggleClass = function(node, classStr) {
ink@0 567
          var cls = " " + node.className + " ";
ink@0 568
          if (cls.indexOf(" " + trim(classStr) + " ") >= 0) {
ink@0 569
            removeClass(node, classStr);
ink@0 570
          } else {
ink@0 571
            addClass(node, classStr);
ink@0 572
          }
ink@0 573
        };
ink@0 574
ink@0 575
        var ua = navigator.userAgent;
ink@0 576
        var isFF = parseFloat(ua.split("Firefox/")[1]) || undefined;
ink@0 577
        var isWK = parseFloat(ua.split("WebKit/")[1]) || undefined;
ink@0 578
        var isOpera = parseFloat(ua.split("Opera/")[1]) || undefined;
ink@0 579
ink@0 580
        var canTransition = (function() {
ink@0 581
          var ver = parseFloat(ua.split("Version/")[1]) || undefined;
ink@0 582
          // test to determine if this browser can handle CSS transitions.
ink@0 583
          var cachedCanTransition = 
ink@0 584
            (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));
ink@0 585
          return function() { return cachedCanTransition; }
ink@0 586
        })();
ink@0 587
ink@0 588
        //
ink@0 589
        // Slide class
ink@0 590
        //
ink@0 591
        var Slide = function(node, idx) {
ink@0 592
          this._node = node;
ink@0 593
          if (idx >= 0) {
ink@0 594
            this._count = idx+1;
ink@0 595
          }
ink@0 596
          if (this._node) {
ink@0 597
            addClass(this._node, "slide distant-future");
ink@0 598
          }
ink@0 599
          this._makeCounter();
ink@0 600
          this._makeBuildList();
ink@0 601
        };
ink@0 602
ink@0 603
        Slide.prototype = {
ink@0 604
          _node: null,
ink@0 605
          _count: 0,
ink@0 606
          _buildList: [],
ink@0 607
          _visited: false,
ink@0 608
          _currentState: "",
ink@0 609
          _states: [ "distant-past", "far-past",
ink@0 610
                     "past", "current", "future",
ink@0 611
                     "far-future", "distant-future" ],
ink@0 612
          setState: function(state) {
ink@0 613
            if (typeof state != "string") {
ink@0 614
              state = this._states[state];
ink@0 615
            }
ink@0 616
            if (state == "current" && !this._visited) {
ink@0 617
              this._visited = true;
ink@0 618
              this._makeBuildList();
ink@0 619
            }
ink@0 620
            removeClass(this._node, this._states);
ink@0 621
            addClass(this._node, state);
ink@0 622
            this._currentState = state;
ink@0 623
ink@0 624
            // delay first auto run. Really wish this were in CSS.
ink@0 625
            /*
ink@0 626
            this._runAutos();
ink@0 627
            */
ink@0 628
            var _t = this;
ink@0 629
            setTimeout(function(){ _t._runAutos(); } , 400);
ink@0 630
          },
ink@0 631
          _makeCounter: function() {
ink@0 632
            if(!this._count || !this._node) { return; }
ink@0 633
            var c = doc.createElement("span");
ink@0 634
            c.innerHTML = this._count;
ink@0 635
            c.className = "counter";
ink@0 636
            this._node.appendChild(c);
ink@0 637
          },
ink@0 638
          _makeBuildList: function() {
ink@0 639
            this._buildList = [];
ink@0 640
            if (disableBuilds) { return; }
ink@0 641
            if (this._node) {
ink@0 642
              this._buildList = query("[data-build] > *", this._node);
ink@0 643
            }
ink@0 644
            this._buildList.forEach(function(el) {
ink@0 645
              addClass(el, "to-build");
ink@0 646
            });
ink@0 647
          },
ink@0 648
          _runAutos: function() {
ink@0 649
            if (this._currentState != "current") {
ink@0 650
              return;
ink@0 651
            }
ink@0 652
            // find the next auto, slice it out of the list, and run it
ink@0 653
            var idx = -1;
ink@0 654
            this._buildList.some(function(n, i) {
ink@0 655
              if (n.hasAttribute("data-auto")) {
ink@0 656
                idx = i;
ink@0 657
                return true;
ink@0 658
              }
ink@0 659
              return false;
ink@0 660
            });
ink@0 661
            if (idx >= 0) {
ink@0 662
              var elem = this._buildList.splice(idx, 1)[0];
ink@0 663
              var transitionEnd = isWK ? "webkitTransitionEnd" : (isFF ? "mozTransitionEnd" : "oTransitionEnd");
ink@0 664
              var _t = this;
ink@0 665
              if (canTransition()) {
ink@0 666
                var l = function(evt) {
ink@0 667
                  elem.parentNode.removeEventListener(transitionEnd, l, false);
ink@0 668
                  _t._runAutos();
ink@0 669
                };
ink@0 670
                elem.parentNode.addEventListener(transitionEnd, l, false);
ink@0 671
                removeClass(elem, "to-build");
ink@0 672
              } else {
ink@0 673
                setTimeout(function() {
ink@0 674
                  removeClass(elem, "to-build");
ink@0 675
                  _t._runAutos();
ink@0 676
                }, 400);
ink@0 677
              }
ink@0 678
            }
ink@0 679
          },
ink@0 680
          buildNext: function() {
ink@0 681
            if (!this._buildList.length) {
ink@0 682
              return false;
ink@0 683
            }
ink@0 684
            removeClass(this._buildList.shift(), "to-build");
ink@0 685
            return true;
ink@0 686
          },
ink@0 687
        };
ink@0 688
ink@0 689
        //
ink@0 690
        // SlideShow class
ink@0 691
        //
ink@0 692
        var SlideShow = function(slides) {
ink@0 693
          this._slides = (slides||[]).map(function(el, idx) {
ink@0 694
            return new Slide(el, idx);
ink@0 695
          });
ink@0 696
ink@0 697
          var h = window.location.hash;
ink@0 698
          try {
ink@0 699
            this.current = parseInt(h.split('#slide')[1], 10);
ink@0 700
          }catch (e) { /* squeltch */ }
ink@0 701
          this.current = isNaN(this.current) ? 1 : this.current;
ink@0 702
          var _t = this;
ink@0 703
          doc.addEventListener('keydown', 
ink@0 704
              function(e) { _t.handleKeys(e); }, false);
ink@0 705
          doc.addEventListener('mousewheel', 
ink@0 706
              function(e) { _t.handleWheel(e); }, false);
ink@0 707
          doc.addEventListener('DOMMouseScroll', 
ink@0 708
              function(e) { _t.handleWheel(e); }, false);
ink@0 709
          doc.addEventListener('touchstart', 
ink@0 710
              function(e) { _t.handleTouchStart(e); }, false);
ink@0 711
          doc.addEventListener('touchend', 
ink@0 712
              function(e) { _t.handleTouchEnd(e); }, false);
ink@0 713
          window.addEventListener('popstate', 
ink@0 714
              function(e) { _t.go(e.state); }, false);
ink@0 715
          this._update();
ink@0 716
          
ink@0 717
          // hide those slides we forced to render on load time for positioning purposes
ink@0 718
          [].forEach.call(document.querySelectorAll('.force-render'), function(elem,i){
ink@0 719
            setTimeout(function() {
ink@0 720
              removeClass(elem, 'force-render');
ink@0 721
            }, 2000);
ink@0 722
          });
ink@0 723
        };
ink@0 724
ink@0 725
        SlideShow.prototype = {
ink@0 726
          _slides: [],
ink@0 727
          _update: function(dontPush) {
ink@0 728
            if (history.pushState) {
ink@0 729
              if (!dontPush) {
ink@0 730
                history.pushState(this.current, "Slide " + this.current, "#slide" + this.current);
ink@0 731
              }
ink@0 732
            } else {
ink@0 733
              window.location.hash = "slide" + this.current;
ink@0 734
            }
ink@0 735
            for (var x = this.current-1; x < this.current+7; x++) {
ink@0 736
              if (this._slides[x-4]) {
ink@0 737
                this._slides[x-4].setState(Math.max(0, x-this.current));
ink@0 738
              }
ink@0 739
            }
ink@0 740
          },
ink@0 741
ink@0 742
          current: 0,
ink@0 743
          next: function() {
ink@0 744
            if (!this._slides[this.current-1].buildNext()) {
ink@0 745
              this.current = Math.min(this.current+1, this._slides.length);
ink@0 746
              this._update();
ink@0 747
            }
ink@0 748
          },
ink@0 749
          prev: function() {
ink@0 750
            this.current = Math.max(this.current-1, 1);
ink@0 751
            this._update();
ink@0 752
          },
ink@0 753
          go: function(num) {
ink@0 754
            if (history.pushState && this.current != num) {
ink@0 755
              history.replaceState(this.current, "Slide " + this.current, "#slide" + this.current);
ink@0 756
            }
ink@0 757
            this.current = num;
ink@0 758
            this._update(true);
ink@0 759
          },
ink@0 760
ink@0 761
          _notesOn: false,
ink@0 762
          showNotes: function() {
ink@0 763
            var isOn = this._notesOn = !this._notesOn;
ink@0 764
            query(".notes").forEach(function(el) {
ink@0 765
              el.style.display = (notesOn) ? "block" : "none";
ink@0 766
            });
ink@0 767
          },
ink@0 768
          switch3D: function() {
ink@0 769
            toggleClass(document.body, "three-d");
ink@0 770
          },
ink@0 771
          handleWheel: function(e) {
ink@0 772
            var delta = 0;
ink@0 773
            if (e.wheelDelta) {
ink@0 774
              delta = e.wheelDelta/120;
ink@0 775
              if (isOpera) {
ink@0 776
                delta = -delta;
ink@0 777
              }
ink@0 778
            } else if (e.detail) {
ink@0 779
              delta = -e.detail/3;
ink@0 780
            }
ink@0 781
ink@0 782
            if (delta > 0 ) {
ink@0 783
              this.prev();
ink@0 784
              return;
ink@0 785
            }
ink@0 786
            if (delta < 0 ) {
ink@0 787
              this.next();
ink@0 788
              return;
ink@0 789
            }
ink@0 790
          },
ink@0 791
          handleKeys: function(e) {
ink@0 792
            
ink@0 793
            if (/^(input|textarea)$/i.test(e.target.nodeName)) return;
ink@0 794
            
ink@0 795
            switch (e.keyCode) {
ink@0 796
              case 37: // left arrow
ink@0 797
                this.prev(); break;
ink@0 798
              case 39: // right arrow
ink@0 799
              case 32: // space
ink@0 800
                this.next(); break;
ink@0 801
              case 50: // 2
ink@0 802
                this.showNotes(); break;
ink@0 803
              case 51: // 3
ink@0 804
                this.switch3D(); break;
ink@0 805
            }
ink@0 806
          },
ink@0 807
          _touchStartX: 0,
ink@0 808
          handleTouchStart: function(e) {
ink@0 809
            this._touchStartX = e.touches[0].pageX;
ink@0 810
          },
ink@0 811
          handleTouchEnd: function(e) {
ink@0 812
            var delta = this._touchStartX - e.changedTouches[0].pageX;
ink@0 813
            var SWIPE_SIZE = 150;
ink@0 814
            if (delta > SWIPE_SIZE) {
ink@0 815
              this.next();
ink@0 816
            } else if (delta< -SWIPE_SIZE) {
ink@0 817
              this.prev();
ink@0 818
            }
ink@0 819
          },
ink@0 820
        };
ink@0 821
ink@0 822
        // Initialize
ink@0 823
        var slideshow = new SlideShow(query(".slide"));
ink@0 824
      })();
ink@0 825
    </SCRIPT>
ink@0 826
ink@0 827
    <!--[if lt IE 9]>
ink@0 828
    <script 
ink@0 829
      src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
ink@0 830
    </script>
ink@0 831
		<script>CFInstall.check({ mode: "overlay" });</script>
ink@0 832
    <![endif]-->
ink@0 833
    
ink@0 834
 -->
ink@0 835
ink@0 836
</BODY></HTML>