/*
   <ul>
   <li><img src=""></li>
   </ul>
 */
(function($){
  $.fn.slidershow = function(options){
    var options = $.extend({},$.fn.slidershow.default_options,options || {});
    var dom     = $(this);
    var lists   = dom.find("li");

    dom.find("li").hide();
    dom.wrap("<div class='slidershow-wrapper' />");
    var currentIndex = null;
    var navigation = null;
    var next    = function(){
      var nextLi = dom.data("current") && dom.data("current").next();
      if(!nextLi || !nextLi.size()){nextLi = lists[0];}
      show(nextLi);
      return nextLi;
    }
    var buildNavigation = function(){
      navigation = $("<div class='slidershow-navigation'></div>");
      lists.each(function(index,li){
        var span = $("<span class='slidershow-span'>" + (index + 1) + "</span>");
        span.click(function(){ stop(); show($(this).data("li")); start(); });
        span.data("li",$(li));
        $(li).data("span",span);
        navigation.append(span);
      });
      dom.after(navigation);
    }

    var caption = null;
    var buildCaption = function(){
      var captionOverlay = $("<div class='slidershow-caption-overlay'>&nbsp;</div>");
      caption = $("<div class='slidershow-caption'></div>");
      captionOverlay.css("opacity",0.6);
      dom.after(caption).after(captionOverlay);
    }

    var show    = function(li) {
      navigation && navigation.find("span").removeClass("selected");
      dom.find("li:visible").hide();
      $(li).fadeIn();
      dom.data("current",$(li));
      var span;
      if(span = $(li).data("span")) {
        span.addClass("selected");
      }
      if(caption) {
        caption.html($(li).find("img").attr("alt"));
      }
    }
    var start   = function(li) {
      if(lists.size()<2) {
        return;
      }
      dom.data("timer",setTimeout(function(){ next(); start ()},options.delay) );
    }
    var stop    = function(li) {
      clearTimeout(dom.data("timer"));
    }

    if(options.stop_on_hover) {
      dom.mouseover(stop);
      dom.mouseout(start);
    }

    if(options.navigation) {
      buildNavigation();
    }
    if(options.caption) {
      buildCaption();
    }
    next();
    start();
  }
  $.fn.slidershow.default_options = {
    width: 200,
    height: 200,
    delay: 4000,
    caption: true,
    navigation: true,
    stop_on_hover: true
  }
})(jQuery)