Untitled

/** http://docs.sublimevideo.net/playlists **/
/** Prototype version **/

var SublimeVideo = SublimeVideo || { playlists: {} };

document.observe("dom:loaded", function() {
  // Automatically instantiate all the playlists in the page
  $$('.interactive').each(function(el) { SublimeVideo.playlists[el.id] = new SublimeVideoPlaylist(el.id); });
});

var SublimeVideoPlaylist = Class.create({
  initialize: function(playlistWrapperId) {
    if (!$(playlistWrapperId)) return;

    this.playlistWrapperId = playlistWrapperId;
    this.videosCount = $$("#" + this.playlistWrapperId + " .video_wrap").size();

    var matches = $$("#" + this.playlistWrapperId + " video")[0].id.match(/^video([0-9]+)$/);
    this.firstVideoIndex = parseInt(matches[1], 10);
    this.lastVideoIndex = this.firstVideoIndex + this.videosCount - 1;

    this.setupObservers();

    this.loadDemo();
  },
  setupObservers: function() {
    $$("#" + this.playlistWrapperId + " li").each(function(thumb) {
      thumb.on("click", function(event) {
        event.stop();

        if (!thumb.hasClassName("active")) {
          this.clickOnThumbnail(thumb.readAttribute("id"));
        }
      }.bind(this));
    }.bind(this));
  },
  loadDemo: function() {
    // Only if not the first time here
    if (this.activeVideoId) this.reset();

    this.activeVideoId = "video" + this.firstVideoIndex;

    // Show first video
    this.showActiveVideo();
  },
  reset: function() {
    // Hide the current active video
    $$("#" + this.playlistWrapperId + " .video_wrap.active").first().removeClassName("active");

    // Get current active video and unprepare it
    // we could have called sublimevideo.unprepare() without any arguments, but this is faster
    sublimevideo.unprepare(this.activeVideoId);

    // Deselect its thumbnail
    this.deselectThumbnail(this.activeVideoId);
  },
  clickOnThumbnail: function(thumbnailId) {
    // Basically undo all the stuff and bring it back to the point before js kicked in
    this.reset();

    // Set the new active video
    this.activeVideoId = thumbnailId.replace(/^thumbnail_/, "");

    // And show the video
    this.showActiveVideo();

    // And finally, prepare and play it
    sublimevideo.prepareAndPlay(this.activeVideoId);
  },
  selectThumbnail: function(videoId) {
    $("thumbnail_" + videoId).addClassName("active");
  },
  deselectThumbnail: function(videoId) {
    $("thumbnail_" + videoId).removeClassName("active");
  },
  showActiveVideo: function() {
    // Select its thumbnail
    this.selectThumbnail(this.activeVideoId);

    // Show it
    $(this.activeVideoId).up().addClassName("active");
  },
  handleAutoNext: function(endedVideoId) {
    var nextId = parseInt(endedVideoId.replace(/^video/, ""), 10) + 1;
    if (nextId > 1 && nextId <= this.lastVideoIndex) {
      this.clickOnThumbnail("thumbnail_video" + nextId);
    }
  }
});

sublimevideo.ready(function() {
  // To autoplay a playlist:
  // - remove the "sublime" class of the first video in the playlist to autoplay
  // - uncomment the following line (you can replace "$$('.playlist')[0].id" by the id of the playlist to autoplay)
  // sublimevideo.prepareAndPlay(SublimeVideo.playlists[$$('.playlist')[0].id].activeVideoId);

  sublimevideo.onEnd(function(sv) {
    var matches = sv.element.id.match(/^video([0-9]+)$/);
    if (matches != undefined) {
      var playlistId = sv.element.up('.interactive').id;
      if (parseInt(matches[1], 10) < SublimeVideo.playlists[playlistId].lastVideoIndex) {
        SublimeVideo.playlists[playlistId].handleAutoNext(sv.element.id);
      }
      // Uncomment the following 4 lines if you want the whole playlist to loop
      // else {
      //   SublimeVideo.playlists[playlistId].loadDemo();
      //   sublimevideo.prepareAndPlay(SublimeVideo.playlists[playlistId].activeVideoId);
      // }
    }
  });
});