1. Finishing up data-entry.

2. Adding some audio.
3. Smooth transitions.

css/style.css

@@ -5,40 +5,60 @@ html, body {
   padding: 0;
 }
 
-#main-container {
+#timeline-container {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  width: 640px;
+  height: 400px;
 }
 
 .video-container {
-  border: 1px solid #000;
-  width: 500px; 
+  position: absolute;
+  width: 640px; 
   height: 400px;
 }
 
 .video-container iframe {
   border: none;
-  width: 500px;
+  width: 640px;
   height: 400px;
 }
 
 .video-container-off {
   display: none;
+  z-index: 1;
 }
 
 .video-container-on {
   display: block;
+  z-index: 10;
+}
+
+.video-container-loading {
+  visibility: hidden;
+  display: block;
+  z-index: 1;
 }
 
 .transition-container {
-  border: 1px solid #000;
-  width: 500px; 
+  width: 640px; 
   height: 400px;
-  background: rgba( 0, 0, 0, 0.5 );
+  position: absolute;
 }
 
 .transition-container-off {
   display: none;
+  z-index: 1;
 }
 
 .transition-container-on {
   display: block;
+  z-index: 10;
+}
+
+.transition-container-loading {
+  display: block;
+  visibility: hidden;
+  z-index: 1;
 }

external/popcorn/popcorn.code.js

@@ -0,0 +1,182 @@
+// PLUGIN: Code
+
+(function ( Popcorn ) {
+
+  /**
+   * Code Popcorn Plug-in
+   *
+   * Adds the ability to run arbitrary code (JavaScript functions) according to video timing.
+   *
+   * @param {Object} options
+   *
+   * Required parameters: start, end, template, data, and target.
+   * Optional parameter: static.
+   *
+   *   start: the time in seconds when the mustache template should be rendered
+   *          in the target div.
+   *
+   *   end: the time in seconds when the rendered mustache template should be
+   *        removed from the target div.
+   *
+   *   onStart: the function to be run when the start time is reached.
+   *
+   *   onFrame: [optional] a function to be run on each paint call
+   *            (e.g., called ~60 times per second) between the start and end times.
+   *
+   *   onEnd: [optional] a function to be run when the end time is reached.
+   *
+   * Example:
+     var p = Popcorn('#video')
+
+        // onStart function only
+        .code({
+          start: 1,
+          end: 4,
+          onStart: function( options ) {
+            // called on start
+          }
+        })
+
+        // onStart + onEnd only
+        .code({
+          start: 6,
+          end: 8,
+          onStart: function( options ) {
+            // called on start
+          },
+          onEnd: function ( options ) {
+            // called on end
+          }
+        })
+
+        // onStart, onEnd, onFrame
+        .code({
+          start: 10,
+          end: 14,
+          onStart: function( options ) {
+            // called on start
+          },
+          onFrame: function ( options ) {
+            // called on every paint frame between start and end.
+            // uses mozRequestAnimationFrame, webkitRequestAnimationFrame,
+            // or setTimeout with 16ms window.
+          },
+          onEnd: function ( options ) {
+            // called on end
+          }
+        });
+  *
+  */
+
+  Popcorn.plugin( "code" , function( options ) {
+    var running = false;
+
+    // Setup a proper frame interval function (60fps), favouring paint events.
+    var step = (function() {
+
+      var buildFrameRunner = function( runner ) {
+        return function( f, options ) {
+
+          var _f = function() {
+            running && f();
+            running && runner( _f );
+          };
+
+          _f();
+        };
+      };
+
+      // Figure out which level of browser support we have for this
+      if ( window.webkitRequestAnimationFrame ) {
+        return buildFrameRunner( window.webkitRequestAnimationFrame );
+      } else if ( window.mozRequestAnimationFrame ) {
+        return buildFrameRunner( window.mozRequestAnimationFrame );
+      } else {
+        return buildFrameRunner( function( f ) {
+          window.setTimeout( f, 16 );
+        });
+      }
+
+    })();
+
+    if ( !options.onStart || typeof options.onStart !== "function" ) {
+
+      if ( Popcorn.plugin.debug ) {
+        throw new Error( "Popcorn Code Plugin Error: onStart must be a function." );
+      }
+      options.onStart = Popcorn.nop;
+    }
+
+    if ( options.onEnd && typeof options.onEnd !== "function" ) {
+
+      if ( Popcorn.plugin.debug ) {
+        throw new Error( "Popcorn Code Plugin Error: onEnd  must be a function." );
+      }
+      options.onEnd = undefined;
+    }
+
+    if ( options.onFrame && typeof options.onFrame !== "function" ) {
+
+      if ( Popcorn.plugin.debug ) {
+        throw new Error( "Popcorn Code Plugin Error: onFrame  must be a function." );
+      }
+      options.onFrame = undefined;
+    }
+
+    return {
+      start: function( event, options ) {
+        options.onStart( options );
+
+        if ( options.onFrame ) {
+          running = true;
+          step( options.onFrame, options );
+        }
+      },
+
+      end: function( event, options ) {
+        if ( options.onFrame ) {
+          running = false;
+        }
+
+        if ( options.onEnd ) {
+          options.onEnd( options );
+        }
+      }
+    };
+  },
+  {
+    about: {
+      name: "Popcorn Code Plugin",
+      version: "0.1",
+      author: "David Humphrey (@humphd)",
+      website: "http://vocamus.net/dave"
+    },
+    options: {
+      start: {
+       elem: "input",
+       type: "text",
+       label: "In"
+      },
+      end: {
+        elem: "input",
+        type: "text",
+        label: "Out"
+      },
+      onStart: {
+        elem: "input",
+        type: "function",
+        label: "onStart"
+      },
+      onFrame: {
+        elem: "input",
+        type: "function",
+        label: "onFrame"
+      },
+      onEnd: {
+        elem: "input",
+        type: "function",
+        label: "onEnd"
+      }
+    }
+  });
+})( Popcorn );

external/popcorn/popcorn.image.js

@@ -0,0 +1,140 @@
+// PLUGIN: IMAGE
+
+(function ( Popcorn ) {
+
+/**
+ * Images popcorn plug-in
+ * Shows an image element
+ * Options parameter will need a start, end, href, target and src.
+ * Start is the time that you want this plug-in to execute
+ * End is the time that you want this plug-in to stop executing
+ * href is the url of the destination of a link - optional
+ * Target is the id of the document element that the iframe needs to be attached to,
+ * this target element must exist on the DOM
+ * Src is the url of the image that you want to display
+ * text is the overlayed text on the image - optional
+ *
+ * @param {Object} options
+ *
+ * Example:
+   var p = Popcorn('#video')
+      .image({
+        start: 5, // seconds
+        end: 15, // seconds
+        href: 'http://www.drumbeat.org/',
+        src: 'http://www.drumbeat.org/sites/default/files/domain-2/drumbeat_logo.png',
+        text: 'DRUMBEAT',
+        target: 'imagediv'
+      } )
+ *
+ */
+  Popcorn.plugin( "image", {
+      manifest: {
+        about: {
+          name: "Popcorn image Plugin",
+          version: "0.1",
+          author: "Scott Downe",
+          website: "http://scottdowne.wordpress.com/"
+        },
+        options: {
+          start: {
+            elem: "input",
+            type: "number",
+            label: "In"
+          },
+          end: {
+            elem: "input",
+            type: "number",
+            label: "Out"
+          },
+          href: {
+            elem: "input",
+            type: "text",
+            label: "Link URL"
+          },
+          target: "image-container",
+          src: {
+            elem: "input",
+            type: "text",
+            label: "Source URL"
+          },
+          text: {
+            elem: "input",
+            type: "text",
+            label: "TEXT"
+          }
+        }
+      },
+      _setup: function( options ) {
+        var img = document.createElement( "img" ),
+            target = document.getElementById( options.target );
+
+        options.link = document.createElement( "a" );
+        options.link.style.position = "relative";
+        options.link.style.textDecoration = "none";
+
+
+        if ( !target && Popcorn.plugin.debug ) {
+          throw new Error( "target container doesn't exist" );
+        }
+        // add the widget's div to the target div
+        target && target.appendChild( options.link );
+
+        img.addEventListener( "load", function() {
+
+          // borders look really bad, if someone wants it they can put it on their div target
+          img.style.borderStyle = "none";
+
+          if ( options.href ) {
+            options.link.href = options.href;
+          }
+
+          options.link.target = "_blank";
+
+          var fontHeight = ( img.height / 12 ) + "px",
+              divText = document.createElement( "div" );
+
+          Popcorn.extend( divText.style, {
+
+            color: "black",
+            fontSize: fontHeight,
+            fontWeight: "bold",
+            position: "relative",
+            textAlign: "center",
+            width: img.width + "px",
+            zIndex: "10"
+          });
+
+          divText.innerHTML = options.text || "";
+          options.link.appendChild( divText );
+          options.link.appendChild( img );
+          divText.style.top = ( img.height / 2 ) - ( divText.offsetHeight / 2 ) + "px";
+          options.link.style.display = "none";
+        }, false );
+
+        img.src = options.src;
+      },
+
+      /**
+       * @member image
+       * The start function will be executed when the currentTime
+       * of the video  reaches the start time provided by the
+       * options variable
+       */
+      start: function( event, options ) {
+        options.link.style.display = "block";
+      },
+      /**
+       * @member image
+       * The end function will be executed when the currentTime
+       * of the video  reaches the end time provided by the
+       * options variable
+       */
+      end: function( event, options ) {
+        options.link.style.display = "none";
+      },
+      _teardown: function( options ) {
+        document.getElementById( options.target ) && document.getElementById( options.target ).removeChild( options.link );
+      }
+  });
+})( Popcorn );