my star wars constructor dealie [...that I borrowed]

gistfile1.txt

/*
 * Star Wars opening crawl from 1977
 *
 * I freaking love Star Wars, but could not find
 * a web version of the original opening crawl from 1977.
 * So I created this one.
 *
 * I wrote an article where I explain how this works:
 * http://timpietrusky.com/star-wars-opening-crawl-from-1977
 *
 * Watch the Start Wars opening crawl on YouTube.
 * http://www.youtube.com/watch?v=7jK-jZo6xjY
 *
 * Stuff I used:
 * - CSS (animation, transform)
 * - HTML audio (the opening theme)
 * - SVG (the Star Wars logo from wikimedia.org)
 *   http://commons.wikimedia.org/wiki/File:Star_Wars_Logo.svg
 * - JavaScript (to sync the animation/audio)
 *
 * Thanks to Craig Buckler for his amazing article
 * which helped me to create this remake of the Star Wars opening crawl.
 * http://www.sitepoint.com/css3-starwars-scrolling-text/
 *
 * Sound copyright by The Walt Disney Company.
 *
 *
 * 2013 by Tim Pietrusky
 * timpietrusky.com
 *
 */
StarWars = (function() {

  /*
   * Constructor
   */
  function StarWars(args) {
    // Context wrapper
    this.el = $(args.el);

    // Audio to play the opening crawl
    this.audio = this.el.find('audio').get(0);

    // Start the animation
    this.start = this.el.find('.start');

    // The animation wrapper
    this.animation = this.el.find('.animation');

    this.skip = this.el.find('.skip-starwars');

    // Remove animation and shows the start screen
    this.reset();

    // Start the animation on click
    //this.start.bind('click', $.proxy(function() {
    //  this.start.hide();
    //  this.audio.play();
    //  this.el.append(this.animation);
    //}, this));

    // Reset the animation and shows the start screen
    $(this.audio).bind('ended', $.proxy(function() {
      this.next();
    }, this));

    this.skip.on('click', $.proxy(function () {
      this.next();
    }, this));

    $(this.audio).bind('canplaythrough', $.proxy(function () {
      var that = this;
      this.coverTimeoutID = null;
      this.start.hide();
      this.audio.play();
      this.el.append(this.animation);

      this.coverTimeoutID = window.setTimeout(function () {
        $('<div/>').addClass('cover').css({
          background: '#000',
          left: '0px',
          top: '0px',
          right: '0px',
          bottom: '0px',
          'z-index': '9999999',
          display: 'none',
          position: 'absolute'
        }).appendTo('body').fadeIn();
      }, 92000);
    }, this));
  }

  /*
   * Resets the animation and shows the start screen.
   */
  StarWars.prototype.reset = function() {
    this.start.show();
    this.cloned = this.animation.clone(true);
    this.animation.remove();
    this.animation = this.cloned;
  };

  /*
   * My asshole modification
   */
  StarWars.prototype.next = function () {
    this.el.fadeOut($.proxy(function () {
      this.audio.pause();
      window.clearTimeout(this.coverTimeoutID);
      $('.cover').remove();
      NewWorld.start();
    }, this));
    //window.location = "/part2.html";
  };

  return StarWars;
})();

var debg =new StarWars({
  el : '.starwars'
});