text: // PLUGIN: Subtitle
  
  (function ( Popcorn ) {
  
    var i = 0,
        createDefaultContainer = function( context, id ) {
  
          var ctxContainer = context.container = document.createElement( "div" ),
              style = ctxContainer.style,
              media = context.media;
  
          var updatePosition = function() {
            var position = context.position();
            // the video element must have height and width defined
            style.fontSize = "18px";
            style.width = media.offsetWidth + "px";
            style.top = position.top  + media.offsetHeight - ctxContainer.offsetHeight - 40 + "px";
            style.left = position.left + "px";
  
            setTimeout( updatePosition, 10 );
          };
  
          //ctxContainer.id = id || Popcorn.guid();
          ctxContainer.id = id || "subtitle-overlay";
          //style.position = "absolute";
          //style.color = "white";
          //style.textShadow = "black 2px 2px 6px";
          //style.fontWeight = "bold";
          //style.textAlign = "center";
          //updatePosition();
  
          context.media.parentNode.appendChild( ctxContainer );
  
          return ctxContainer;
        };
  
    /**
     * Subtitle popcorn plug-in
     * Displays a subtitle over the video, or in the target div
     * Options parameter will need a start, and end.
     * Optional parameters are target and text.
     * 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
     * Target is the id of the document element that the content is
     *  appended to, this target element must exist on the DOM
     * Text is the text of the subtitle you want to display.
     *
     * @param {Object} options
     *
     * Example:
       var p = Popcorn('#video')
          .subtitle({
            start:            5,                 // seconds, mandatory
            end:              15,                // seconds, mandatory
            text:             'Hellow world',    // optional
            target:           'subtitlediv',     // optional
          } )
     *
     */
  
    Popcorn.plugin( "subtitle" , {
  
        manifest: {
          about: {
            name: "Popcorn Subtitle Plugin",
            version: "0.1",
            author: "Scott Downe",
            website: "http://scottdowne.wordpress.com/"
          },
          options: {
            start: {
              elem: "input",
              type: "text",
              label: "Start"
            },
            end: {
              elem: "input",
              type: "text",
              label: "End"
            },
            target: "subtitle-container",
            text: {
              elem: "input",
              type: "text",
              label: "Text"
            }
          }
        },
  
        _setup: function( options ) {
          var newdiv = document.createElement( "div" );
  
          newdiv.id = "subtitle-" + i++;
          newdiv.style.display = "none";
  
          // Creates a div for all subtitles to use
          ( !this.container && ( !options.target || options.target === "subtitle-container" ) ) &&
            createDefaultContainer( this );
  
          // if a target is specified, use that
          if ( options.target && options.target !== "subtitle-container" ) {
            // In case the target doesn't exist in the DOM
            options.container = document.getElementById( options.target ) || createDefaultContainer( this, options.target );
          } else {
            // use shared default container
            options.container = this.container;
          }
  
          document.getElementById( options.container.id ) && document.getElementById( options.container.id ).appendChild( newdiv );
          options.innerContainer = newdiv;
  
          options.showSubtitle = function() {
            options.innerContainer.innerHTML = options.text || "";
          };
        },
        /**
         * @member subtitle
         * 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.innerContainer.style.display = "block";
          options.showSubtitle( options, options.text );
        },
        /**
         * @member subtitle
         * 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.innerContainer.style.display = "none";
          options.innerContainer.innerHTML = "";
        },
  
        _teardown: function ( options ) {
          options.container.removeChild( options.innerContainer );
        }
  
    });
  
  })( Popcorn );
  