Review comment fixes, style fixes.

plugins/code/popcorn.code.html

@@ -10,6 +10,9 @@
 
    document.addEventListener('DOMContentLoaded', function () {
      output = document.getElementById('output');
+     var $ = function( id ) {
+       return document.getElementById( id.substring( 1 ) );
+     };
 
      var p = Popcorn('#video')
 
@@ -17,7 +20,7 @@
         start: 1,
         end: 3,
         onStart: function( options ) {
-          output.innerHTML = 'Test 1 - onStart (no onEnd)';
+          $('#test1').innerHTML = 'Yes';
         }
       })
 
@@ -25,10 +28,10 @@
         start: 5,
         end: 8,
         onStart: function( options ) {
-          output.innerHTML = 'Test 2 - onStart';
+          $('#test2a').innerHTML = 'Yes';
         },
         onEnd: function ( options ) {
-          output.innerHTML = 'Test 2 - onEnd';
+          $('#test2b').innerHTML = 'Yes';
         }
       })
 
@@ -36,13 +39,16 @@
         start: 10,
         end: 14,
         onStart: function( options ) {
-          output.innerHTML = 'Test 3 - onStart [Frames: ';
-        },
-        onFrame: function ( options ) {
-          output.innerHTML += '.';
+          $('#test3a').innerHTML = 'Yes';
         },
+        onFrame: (function() {
+          var count = 0;
+          return function ( options ) {
+            $('#test3b').innerHTML = 'Yes (count = ' + ++count + ')';
+          }
+        })(),
         onEnd: function ( options ) {
-          output.innerHTML += '] Test 3 - onEnd';
+          $('#test3c').innerHTML = 'Yes';
         }
       })
 
@@ -76,7 +82,15 @@
   </div>
   <div style="width:700px">
     <div>Code Plugin Output</div>
-    <div id="output" style="position:relative;float:left;width:300px;height:400px"></div>
+    <table cellpadding="5px">
+      <tr><th>Test</th><th>Completed</th></tr>
+      <tr><td>Test 1 - onStart (1s)</td><td><span id="test1">No</span></td></tr>
+      <tr><td>Test 2a - onStart (5s)</td><td><span id="test2a">No</span></td></tr>
+      <tr><td>Test 2b - onEnd (8s)</td><td><span id="test2b">No</span></td></tr>
+      <tr><td>Test 3a - onStart (10s)</td><td><span id="test3a">No</span></td></tr>
+      <tr><td>Test 3b - onFrame (10s-14s)</td><td><span id="test3b">No</span></td></tr>
+      <tr><td>Test 3c - onEnd (14s)</td><td><span id="test3c">No</span></td></tr>
+    </table>
   </div>
 </body>
 </html>

plugins/code/popcorn.code.js

@@ -28,7 +28,7 @@
    * Example:
      var p = Popcorn('#video')
 
-        /* onStart function only
+        // onStart function only
         .code({
           start: 1,
           end: 4,
@@ -37,7 +37,7 @@
           }
         })
 
-        /* onStart + onEnd only
+        // onStart + onEnd only
         .code({
           start: 6,
           end: 8,
@@ -49,7 +49,7 @@
           }
         })
 
-        /* onStart, onEnd, onFrame
+        // onStart, onEnd, onFrame
         .code({
           start: 10,
           end: 14,
@@ -68,7 +68,7 @@
   *
   */
 
-  Popcorn.plugin( "code" , function() {
+  Popcorn.plugin( 'code' , function() {
 
       function get( name, options ) {
         return options._instance[name];
@@ -82,20 +82,16 @@
       var step = ( function() {
 
         var buildFrameRunner = function( runner ) {
-          var _runner = runner;
-
           return function( f, options ) {
 
-            var _options = options;
             var _f = function() {
               f();
-              if ( get( 'running', _options ) ) {
-                _runner( _f );
+              if ( get( 'running', options ) ) {
+                runner( _f );
               }
             };
 
             _f();
-
           };
         };
 
@@ -116,10 +112,10 @@
       return {
         manifest: {
           about: {
-            name: "Popcorn Code Plugin",
-            version: "0.1",
-            author: "David Humphrey (@humphd)",
-            website: "http://vocamus.net/dave"
+            name: 'Popcorn Code Plugin',
+            version: '0.1',
+            author: 'David Humphrey (@humphd)',
+            website: 'http://vocamus.net/dave'
           },
           options: {
             start: {elem:'input', type:'text', label:'In'},
@@ -133,15 +129,15 @@
 
         _setup : function( options ) {
           if ( !options.onStart || !( typeof options.onStart === 'function' ) ) {
-            throw "Popcorn Code Plugin Error: onStart must be a function.";
+            throw 'Popcorn Code Plugin Error: onStart must be a function.';
           }
 
           if ( options.onEnd && !( typeof options.onEnd === 'function' ) ) {
-            throw "Popcorn Code Plugin Error: onEnd  must be a function.";
+            throw 'Popcorn Code Plugin Error: onEnd  must be a function.';
           }
 
           if ( options.onFrame && !( typeof options.onFrame === 'function' ) ) {
-            throw "Popcorn Code Plugin Error: onFrame  must be a function.";
+            throw 'Popcorn Code Plugin Error: onFrame  must be a function.';
           }
 
           options._instance = { running: false };