Fix Bug 977087 - Fix custom event shim for IE8.

ie8/popcorn.ie8.html

@@ -4,7 +4,7 @@
     <title>Popcorn Youtube Player Example</title>
       <script src="popcorn.ie8.js"></script>
       <script src="../popcorn.js"></script>
-      <script src="../wrappers/common/popcorn._mediaElementProto.js"></script>
+      <script src="../wrappers/common/popcorn._MediaElementProto.js"></script>
       <script src="../wrappers/jwplayer/popcorn.HTMLJWPlayerVideoElement.js"></script>
       <script src="../plugins/footnote/popcorn.footnote.js"></script>
       <script src="../plugins/flickr/popcorn.flickr.js"></script>
@@ -160,14 +160,9 @@
       <div>
         <h3>Description</h3>
         <p>
-          This demo will showcase how a Youtube flash video can be integrated into Popcorn. This  is done by making the flash video masquerade as HTML 5 video.<br />
-          Due to the Flash security model, this demo must be  run from a web server<br />
+          This demo will showcase how an HTML5 video can be integrated into Popcorn using our JWPlayer Wrapper. This is done by wrapping the HTML5 video in a flash object and making the flash object masquerade as HTML 5 video.<br />
+          Due to the Flash security model, this demo must be run from a web server<br />
           From 5 to 40 seconds, the footnote 'The video is "RiP: A Remix Manifesto", by Brett Gaylor' will appear below 'Footnote Area'.
-        <hr >
-          Youtube does support their player to be chromeless (hidden controls), but their controls are left in to provide richer interaction.<br />
-          Custom controls have been developed and tied into their player for this demo.<br />
-          Clicking play/pause or seeking in either the video or via custom controls will cause the other to update.<br />
-          The video can be specified in the HTML source by giving the youtube web site url (http://www.youtube.com/watch?v=VIDEOID) to either Popcorn.youtube or as the div src attribute.<br/>
         </p>
         <h4>Expected Events</h4>
         <ul>

ie8/popcorn.ie8.js

@@ -1,18 +1,135 @@
 (function() {
 
-  document.addEventListener = document.addEventListener || function( event, callBack ) {
+  if ( !document.addEventListener && !document.removeEventListener && !document.dispatchEvent ) {
+    var events = {};
 
-    event = ( event === "DOMContentLoaded" ) ? "onreadystatechange" : "on" + event;
+    var addEventListener = function( eventName, callBack ) {
 
-    document.attachEvent( event, callBack );
-  };
+      eventName = ( eventName === "DOMContentLoaded" ) ? "readystatechange" : eventName;
 
-  document.removeEventListener = document.removeEventListener || function( event, callBack ) {
+      if ( Event[ eventName.toUpperCase() ] || eventName === "readystatechange" ) {
+        document.attachEvent( "on" + eventName, callBack );
+        return;
+      }
 
-    event = ( event === "DOMContentLoaded" ) ? "onreadystatechange" : "on" + event;
+      if ( !events[ eventName ] ) {
+        events[ eventName ] = {
+          events: [],
+          queue: [],
+          active: false
+        };
+      }
 
-    document.detachEvent( event, callBack );
-  };
+      if ( events[ eventName ].active ) {
+        events[ eventName ].queue.push( callBack );
+      } else {
+        events[ eventName ].events.push( callBack );
+      }
+    };
+
+    var removeEventListener = function( eventName, callBack ) {
+
+      eventName = ( eventName === "DOMContentLoaded" ) ? "readystatechange" : eventName;
+
+      var i = 0,
+          listeners = events[ eventName ];
+
+      if ( Event[ eventName.toUpperCase() ] || eventName === "readystatechange" ) {
+        document.detachEvent( "on" + eventName, callBack );
+        return;
+      }
+
+      if ( !listeners ) {
+        return;
+      }
+
+      for ( i = listeners.events.length - 1; i >= 0; i-- ) {
+        if ( callBack === listeners.events[ i ] ) {
+          delete listeners.events[ i ];
+        }
+      }
+
+      for ( i = listeners.queue.length - 1; i >= 0; i-- ) {
+        if ( callBack === listeners.queue[ i ] ) {
+          delete listeners.queue[ i ];
+        }
+      }
+    };
+
+    var dispatchEvent = function( eventObject ) {
+      var evt,
+          self = this,
+          eventInterface,
+          listeners,
+          eventName = eventObject.type,
+          queuedListener;
+
+      // A string was passed, create event object
+      if ( !eventName ) {
+
+        eventName = eventObject;
+        eventInterface  = Popcorn.events.getInterface( eventName );
+
+        if ( eventInterface ) {
+
+          evt = document.createEvent( eventInterface );
+          evt.initCustomEvent( eventName, true, true, window, 1 );
+        }
+      }
+
+      listeners = events[ eventName ];
+
+      if ( listeners ) {
+        listeners.active = true;
+
+        for ( var i = 0; i < listeners.events.length; i++ ) {
+          if ( listeners.events[ i ] ) {
+            listeners.events[ i ].call( self, evt, self );
+          }
+        }
+
+        if ( listeners.queue.length ) {
+          while ( listeners.queue.length ) {
+            queuedListener = listeners.queue.shift();
+
+            if ( queuedListener ) {
+              listeners.events.push( queuedListener );
+            }
+          }
+        }
+
+        listeners.active = false;
+
+        listeners.events.forEach(function( listener ) {
+          if ( !listener ) {
+            listeners.events.splice( listeners.events.indexOf( listener ), 1 );
+          }
+        });
+
+        listeners.queue.forEach(function( listener ) {
+          if ( !listener ) {
+            listeners.queue.splice( listeners.queue.indexOf( listener ), 1 );
+          }
+        });
+      }
+    };
+
+    document.addEventListener = addEventListener;
+    document.removeEventListener = removeEventListener;
+    document.dispatchEvent = dispatchEvent;
+
+  }
+
+  if ( !Event.prototype.preventDefault ) {
+    Event.prototype.preventDefault = function() {
+      this.returnValue = false;
+    };
+  }
+  if ( !Event.prototype.stopPropagation ) {
+    Event.prototype.stopPropagation = function() {
+      this.cancelBubble = true;
+    };
+  }
 
   window.addEventListener = window.addEventListener || function( event, callBack ) {
 
@@ -58,9 +175,14 @@
       target : null,
       currentTarget : null,
       cancelable : false,
+      detail: false,
       bubbles : false,
       initEvent : function (type, bubbles, cancelable)  {
-          this.type = type;
+        this.type = type;
+      },
+      initCustomEvent: function(type, bubbles, cancelable, detail) {
+        this.type = type;
+        this.detail = detail;
       },
       stopPropagation : function () {},
       stopImmediatePropagation : function () {}