PythonSlideShow

Annotated template_H5p10n.html

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