(function ($) {

  $.fn.showcase = function (options) {

    $('ul.slides', this).hide();

    options = options || {};

    $.extend(options, {
      slideExpr: 'ul.slides li'
    });

    return this.each(function () {

      if (this.cycleTimeout) {
        clearTimeout(this.cycleTimeout);
      }

      this.currentFrame = 0;
      this.interval = undefined;

      var $cont = $(this);
      $cont.addClass('showcase');
      var $slides = $(options.slideExpr, this);
      this.frameCount = $slides.length;

      $('ul.slides').after(
        '<div class="current-frame">' +
          '<img src="#" />' +
          '<div class="title"></div>' +
          '<div class="content"></div>' +
        '</div>' +
        '<ul class="controls">' +
        '</ul>'
      );

      var sc = this;

      // add numbered controls

      for (var i = 0; i < $slides.length; i++) {
        $('ul.controls', this).append('<li><a href="javascript:;" class="ui-corner-all"><span>' + (i + 1) + '</span></a></li>');
      }

      var i = 0;
      $('ul.controls a').each (function () {
        var j = i;
        var that = this;
        $(this).click(function () {
          that.blur();
          setFrame(sc, j);
        });
        i++;
      });

      // add next/prev controls

      $('ul.controls', this).append('<li><a href="javascript:;" class="ui-corner-all next"><span class="ui-icon ui-icon-seek-next">&nbsp;</span></a></li>');
      $('ul.controls a.next', this).click(function () {
        $('ul.controls a.next').blur();
        nextFrame(sc);
      });

      $('ul.controls', this).prepend('<li><a href="javascript:;" class="ui-corner-all prev"><span class="ui-icon ui-icon-seek-prev">&nbsp;</span></a></li>');
      $('ul.controls a.prev', this).click(function () {
        $('ul.controls a.prev').blur();
        previousFrame(sc);
      });

      setFrame(this, 0);

    });
  };

})(jQuery);

function nextFrame(sc) {
  setFrame(sc, (sc.currentFrame + 1) % sc.frameCount);
}

function previousFrame(sc) {
  setFrame(sc, (sc.frameCount + sc.currentFrame - 1) % sc.frameCount);
}

function setFrame(sc, i) {
  sc.currentFrame = i;
  $('.current-frame', sc).prepend('<img src="' + $($('ul.slides img', sc)[i]).attr('src') + '" />');
  var img = $('.current-frame img'),
      newImg = $(img[0]),
      oldImg = $(img[1]);
  newImg.load(function () {
    oldImg.fadeOut(function () {
      oldImg.remove()
    });
    $('.current-frame .title', sc).html($($('ul.slides .title', sc)[i]).html());
    $('.current-frame .content', sc).html($($('ul.slides .content', sc)[i]).html());
    clearInterval(sc.interval);
    sc.interval = setInterval(function () {
      nextFrame(sc);
    }, 8000);
  });
  $('ul.controls a', sc).removeClass('current');
  $($('ul.controls a', sc)[i + 1]).addClass('current');
};

$(document).ready(function () {
  $('.showcase').showcase();
});