[jQuery] Howto: Adding a pause button to jcarousel

[Jeremy Mikola]

I'm using jcarousel (in vertical alignment) for a project and
discovered a need for a button to pause/resume the plugin from auto-
scrolling through its contents.  I was a bit surprised that I wasn't
able to find any previous example of this online; all the more reason
to share, though.  Feedback and criticism is more than welcome.

I was working off of Jan Sorgalla's original documentation:
http://sorgalla.com/projects/jcarousel/

The only snafu I ran into was the prev and next buttons reactivating
playback on their own.  The quickest solution I found was to override
the startAuto() method which is called after each animation to restore
the timer and do a simple check to see if we're in a pause state.

----------

$(document).ready(function(){
  $('#jcarousel').jcarousel({
    vertical: true,
    scroll: 1,
    auto: 5,
    initCallback: function(jc, state) {
      if (state == 'init') {
        // Insert a play/pause button between the prev/next buttons
        $('div.jcarousel-prev-vertical').after('<div class="jcarousel-
toggle-vertical" style="display:block;"></div>');

        /* Override the internal startAuto() method, which is called
after
         * animations complete, to prevent next/prev buttons from
reactivating
         * the timer while in the pause state.
         */
        jc.startAutoOrig = jc.startAuto;
        jc.startAuto = function() {
          if (!jc.paused) {
            jc.startAutoOrig();
          }
        }

        jc.pause = function() {
          $('div.jcarousel-toggle-vertical')
            .removeClass('jcarousel-play-vertical')
            .addClass('jcarousel-pause-vertical');
          jc.paused = true;
          jc.stopAuto();
        };

        jc.play = function() {
          $('div.jcarousel-toggle-vertical')
            .removeClass('jcarousel-pause-vertical')
            .addClass('jcarousel-play-vertical');
          jc.paused = false;
          jc.startAuto();
        };

        // Click event for playback toggle button, conditionally calls
play/pause
        $('div.jcarousel-toggle-vertical').click(function(){
          if (this.timer === null) {
            jc.play();
          } else {
            jc.pause();
          }
        });
      }

      jc.play();
    }
  });
});