Fixes

slides-local/iframes/mb-6.html

@@ -84,6 +84,7 @@
       tickBase: [π, π],
       ticks: [10, 10],
       lineWidth: 2,
+      zIndex: -3,
     }],
     ['add', 'axis', {
       axis: 0,
@@ -105,7 +106,7 @@
         return [x, y, .85];
       },
       opacity: 1,
-      doubleSided: false,
+      doubleSided: true,
       flipSided: true,
       zIndex: -50,
       color: 0xffffff,

slides-local/iframes/mb-8.html

@@ -52,7 +52,7 @@
         return [x, y, 1];
       },
       opacity: 1,
-      doubleSided: false,
+      doubleSided: true,
       flipSided: true,
       zIndex: -50,
       color: 0xffffff,
@@ -71,7 +71,7 @@
       },
       live: true,
       opacity: 1,
-      zIndex: 2,
+      zIndex: 500,
     }, {
       duration: 0,
     }],
@@ -92,7 +92,7 @@
       },
       live: true,
       opacity: 1,
-      zIndex: 2,
+      zIndex: 500,
       color: 0x20C050,
     }, {
       duration: 0,
@@ -114,7 +114,7 @@
       },
       live: true,
       opacity: 1,
-      zIndex: 2,
+      zIndex: 500,
       color: 0xC02050,
     }, {
       duration: 0,

slides-local/iframes/tubecurves/tubecurves.js

@@ -161,7 +161,8 @@ Acko.TubeCurves.prototype = {
   },
 
   getShader: function (id) {
-    return document.getElementById(id).innerText;
+    var el = document.getElementById(id);
+    return el.innerText || el.textContent;
   },
 
   initDebug: function () {           

slides-local/index.html

@@ -187,8 +187,8 @@ <h1>Sandboxes</h1>
 <section class="slide">
 
   <div class="box images t5">
-    <div><img src="images/webaudio.png"><br>Web Audio</div>
-    <div><img src="images/limbo.jpg"><br>Games</div>
+    <div><img src="images/webaudio.png" width="530"><br>Web Audio</div>
+    <div><img src="images/limbo.jpg" width="590"><br>Games</div>
   </div>
 
 </section>
@@ -290,7 +290,7 @@ <h1>Procedural Generation</h1>
 
 <section class="slide">
   <div class="box images">
-    <div><img src="images/procedural-textures.jpg"><br>Textures</div>
+    <div><img src="images/procedural-textures.jpg" width="720"><br>Textures</div>
     <div><img src="images/procedural-city.jpg"><br>3D Models</div>
   </div>
 </section>

slides-net/iframes/mathbox.html

@@ -8,7 +8,7 @@
     body { margin: 0; padding: 0 }
     canvas { display: block }
   </style>
-  <script type="text/javascript" charset="utf-8" src="../../../mathbox/build/MathBox-bundle.js"></script>
+  <script type="text/javascript" charset="utf-8" src="../../mathbox/build/MathBox-bundle.js"></script>
   <script type="text/javascript" charset="utf-8" src="../resources/mathbox.js"></script>
   <script type="text/javascript" charset="utf-8" src="../resources/physics.js"></script>
 </head>

slides-net/iframes/mb-6.html

@@ -84,6 +84,7 @@
       tickBase: [π, π],
       ticks: [10, 10],
       lineWidth: 2,
+      zIndex: -3,
     }],
     ['add', 'axis', {
       axis: 0,
@@ -105,7 +106,7 @@
         return [x, y, .85];
       },
       opacity: 1,
-      doubleSided: false,
+      doubleSided: true,
       flipSided: true,
       zIndex: -50,
       color: 0xffffff,

slides-net/iframes/mb-8.html

@@ -52,7 +52,7 @@
         return [x, y, 1];
       },
       opacity: 1,
-      doubleSided: false,
+      doubleSided: true,
       flipSided: true,
       zIndex: -50,
       color: 0xffffff,
@@ -71,7 +71,7 @@
       },
       live: true,
       opacity: 1,
-      zIndex: 2,
+      zIndex: 500,
     }, {
       duration: 0,
     }],
@@ -92,7 +92,7 @@
       },
       live: true,
       opacity: 1,
-      zIndex: 2,
+      zIndex: 500,
       color: 0x20C050,
     }, {
       duration: 0,
@@ -114,7 +114,7 @@
       },
       live: true,
       opacity: 1,
-      zIndex: 2,
+      zIndex: 500,
       color: 0xC02050,
     }, {
       duration: 0,

slides-net/iframes/tubecurves/tubecurves.js

@@ -161,7 +161,8 @@ Acko.TubeCurves.prototype = {
   },
 
   getShader: function (id) {
-    return document.getElementById(id).innerText;
+    var el = document.getElementById(id);
+    return el.innerText || el.textContent;
   },
 
   initDebug: function () {           

slides-net/index.html

@@ -40,8 +40,9 @@
       messageStyle: 'none'
     });
   </script>
-  <script type="text/javascript" src="../mathjax/MathJax.js?config=TeX-AMS_HTML"></script>
-
+  <script type="text/javascript"
+    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
+  </script>  
 </head>
 <body>
 
@@ -297,7 +298,7 @@ <h1>Procedural Generation</h1>
 
 <section class="slide">
   <div class="box images">
-    <div><img src="images/procedural-textures.jpg"><br>Textures</div>
+    <div><img src="images/procedural-textures.jpg" width="720"><br>Textures</div>
     <div><img src="images/procedural-city.jpg"><br>3D Models</div>
   </div>
 </section>
@@ -580,9 +581,17 @@ <h3>Slides on Acko.net soon.</h3>
 <!-- End slides. -->
 </div>
 
+<div id="message">
+  <p>Note: these slides use cutting edge CSS 3 and WebGL features. It is recommended to use Google Chrome to view them.</p>
+</div>
+
+<div id="video">
+<a href="http://www.youtube.com/watch?v=ONN3jBly364&list=UUyBAm31tEpZ17hka6ZvVqcg&index=2&feature=plcp" target="_blank"><span> ►</span> Watch Presentation Video</a></a>
+</div>
+
 <div id="controls">
-  <a href="javascript:$.deck('prev');return false;">‹</a>
-  <a href="javascript:$.deck('next');return false;">›</a>
+  <a href="javascript:$.deck('prev')">‹</a>
+  <a href="javascript:$.deck('next')">›</a>
 </div>
 
 </body>

slides-net/resources/layout.css

@@ -384,16 +384,52 @@ div.spotlight img {
   height: 1320px;
 }
 
-#controls {
+#message {
+  font-family: 'Klavika Web Basic', 'klavika-web', sans-serif;
+  font-weight: normal;
+  font-style: normal;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -640px;
-  margin-top: 360px;
+  margin-top: -360px;
   width: 1280px;
   text-align: center;
+  color: #999;
+}
+#video {
+  font-family: 'Klavika Web Basic', 'klavika-web', sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-right: 100px;
+  margin-top: 385px;
+  color: #999;
+  width: 300px;
+}
+#video span {
+  font-size: 80%;
+  padding-right: 10px;
+}
+#video a {
+  text-decoration: none;
+  color: #808080;
+}
+#controls {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -100px;
+  margin-top: 360px;
+  width: 200px;
+  text-align: center;
 }
 #controls a {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
   display: inline-block;
   padding: 10px 25px;
   background: #999;

slides-net/resources/slides.js

@@ -78,6 +78,8 @@ $(function() {
 	$(document).bind('deck.change', function (e, from, to) {
     var out = [];
 
+    $('#message').remove();
+
     function getTopSlide(step) {
       var $slide = $.deck('getSlide', step),
           $parents = $slide.parents('.slide');