/**
 * Slideshow Lite plugin for jQuery
 *
 * v0.5.3
 *
 * Copyright (c) 2009 Fred Wu
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */

/**
 * Configuration options:
 *
 * pauseSeconds  float    number of seconds between each photo to be displayed
 * fadeSpeed     float    number of seconds for the fading transition, the value should not exceed 'pauseSeconds'
 * width         integer  width of the slideshow, in pixels
 * height        integer  height of the slideshow, in pixels
 * caption       boolean  display photo caption?
 * cssClass      string   name of the CSS class, defaults to 'slideshowlite'
 */

(function($) {
  $.fn.slideshow = function(options) {

    var defaults = {
      pauseSeconds: 2,
      fadeSpeed: 0.5,
      width: 468,
      height: 120,
      caption: true,
      cssClass: 'slideshowlite'
    };

    var options = $.extend(defaults, options);

    // ----------------------------------------
    // slideshow objects and variables
    // ----------------------------------------

    var 
      target = this,
      items  = $(target).children("a"),
      instance;

    // ----------------------------------------
    // some mandontory styling
    // ----------------------------------------
    
    if (!$(this).hasClass(options.cssClass)) {
      $(this).addClass(options.cssClass);
    }

    $(this).css({
      width: options.width + "px",
      height: options.height + "px"
    });

    // ----------------------------------------
    // create anchor links to make the structure simpler for manupilation
    // ----------------------------------------

    $(this).children("img").wrap(document.createElement("a"));
    $(this).children("a").attr("target", "blank");

    // ----------------------------------------
    // create pagination and caption
    // ----------------------------------------

    $(this).append("<ul></ul><ol></ol>");

    var 
      pagination = $(this).children("ul"), 
      caption = $(this).children("ol"),
      paginationContent = '',
      captionContent = '',
      i;

    $(this).children("a").each(function() {
      i = $(this).index();
      paginationContent += "<li><span>" + (i + 1) + "</span></li>";
      captionContent += "<li>" + $("#" + $(target).attr("id") + " img:nth(" + i + ")").attr("alt") + "</li>";
    });
    pagination.append(paginationContent).fadeTo(0, 0.8);
    caption.append(captionContent).fadeTo(0, 0.6).hide();

    // ----------------------------------------
    // shortcuts
    // ----------------------------------------
    
    var 
      firstItem   = $(target).children("a:first"),
      lastItem    = $(target).children("a:last"),
      currentItem = firstItem;

    // ----------------------------------------
    // pagination highlight
    // ----------------------------------------
    
    var paginationHighlight = function(sequence) {
      pagination.children("li").removeClass("current");
      pagination.children("li:nth(" + sequence + ")").addClass("current");
    }

    // ----------------------------------------
    // caption
    // ----------------------------------------
    
    var showCaption = function(sequence) {
      caption.show().children("li").hide();
      caption.children("li:nth(" + sequence + ")").fadeIn();
    }

    // ----------------------------------------
    // slideshow logic
    // ----------------------------------------

    var makeSlideshow = function() {
      // pagination click
      pagination.children("li").click(function() {
        if (!$(this).hasClass("current")) {
          // select the current item after the pagination click
          currentItem = $(target).children("a:nth(" + $(this).index() + ")");
          currentItem.show();
          startSlideshow();
        }
      });

      // pagination highlight
      paginationHighlight(currentItem.index());

      // show caption
      if (options.caption == true) {
        showCaption(currentItem.index());
      }

      // show the current slide
      currentItem.fadeIn(options.fadeSpeed * 1000, function() {
        $(target).children("a").hide();
        $(this).show().css("z-index", 1);
      });

      // prepare for the next slide
      // determines the next item (or we need to rewind to the first item?)
      if (currentItem.children("img").attr("src") == lastItem.children("img").attr("src")) {
        currentItem = firstItem;
        currentItem.css("z-index", 2);
      } else {
        currentItem = currentItem.next();
      }
    };

    var startSlideshow = function() {
      clearInterval(instance);
      makeSlideshow();
      instance = setInterval(makeSlideshow, options.pauseSeconds * 1000);
    };

    // ----------------------------------------
    // start the slideshow!
    // ----------------------------------------

    startSlideshow();
  };
})(jQuery);