(function($){  
$.fn.slideshow = function(options) {  
  return this.each(function() {  
    var obj = $(this);
    
    if (obj.children().size() <= 1) {
        return null;
    } else {
        obj.addClass('active');    
    }

    obj.children().wrap('<div class="slide" />');
    obj.children().wrapAll('<div class="slidesContainer" />');
    var slidesContainer = $('.slidesContainer', obj);
    
    obj.append(
    '<div class="slideshowOverlay">' +
    '    <p class="slideCaption"></p>' +
    '    <p class="slideshowNav">' +
    '        <a href="" class="prev">prev</a>' + 
    '        <a href="" class="pause play_pause">Play/Pause</a>' + 
    '        <a href="" class="next">next</a>' +
    '    </p>' +
    '    <p class="slideshowPager"></p>' +
    '</div>');    

    var defaults = {  
        timeout: 5000,
        random: false,
        fit: true,
        fx: 'fade',
        pause: false,
        pager: $('.slideshowPager', obj),
        prev: $('.prev', obj),
        next: $('.next', obj),
//        pagerAnchorBuilder: function(idx, slide) { 
//            return '<a href="#"><span class="tooltip">' + $('img',$(slide)).attr('alt').split() + '</span></a>'; 
//        },
        before: function () {
            var alt = $('img', this).attr('alt');
            $('.slideCaption', obj).fadeOut(300, function() {
                $(this).html(alt).fadeIn(500);
            });
        },
        after: function () {
        }
        
    };

    var cycleOptions = $.extend(defaults, options);  
  
    slidesContainer.cycle(cycleOptions);
      
      
    $(".play_pause", obj).toggle(
      function () {
        $(this).addClass('play');
        $(this).removeClass('pause');
        slidesContainer.cycle('pause');
      },
      function () {
        $(this).addClass('pause');
        $(this).removeClass('play');
        slidesContainer.cycle('resume');
      }
    );

    

  });  
 };  
})(jQuery);