jQuery.fn.createImageNavigator = function() {
  // State
  var selectedImageIndex = 0;
  var numImages = $(this).find('li').length;
  var self = $(this);
  
  // Add image counts
  $.each($(this).find('.name'), function(num) {
    $(this).html('<span>(' + (num + 1) + ' of ' + numImages + ')</span>' + $(this).text());
  });
  
  // Add image frame
  $(document.createElement('img'))
    .attr({'src': '../../../assets/theme/images/backgrounds/image-frame.png', 'class': 'image-frame'})
    .appendTo(this);
    
  // Add navigation buttons
  $(document.createElement('a'))
    .attr({'href': '#', 'class': 'photo-navigation-left'})
    .text('Previous Photo')
    .appendTo(this)
    .click(function() {
      if (selectedImageIndex > 0) {
        self.find('li:eq(' + selectedImageIndex + ')').fadeOut();
        self.find('li:eq(' + (selectedImageIndex - 1) + ')').fadeIn();
        selectedImageIndex -= 1;
      } else {
        self.find('li:eq(' + selectedImageIndex + ')').fadeOut();
        self.find('li:eq(' + (numImages - 1) + ')').fadeIn();
        selectedImageIndex = (numImages - 1);
      }
      return false;
    });
  
  $(document.createElement('a'))
    .attr({'href': '#', 'class': 'photo-navigation-right'})
    .text('Next Photo')
    .appendTo(this)
    .click(function() {
      if (selectedImageIndex + 1 < numImages) {
        self.find('li:eq(' + selectedImageIndex + ')').fadeOut();
        self.find('li:eq(' + (selectedImageIndex + 1) + ')').fadeIn();
        selectedImageIndex += 1;
      } else {
        self.find('li:eq(' + selectedImageIndex + ')').fadeOut();
        self.find('li:eq(0)').fadeIn();
        selectedImageIndex = 0;
      }
      return false;
    });
  
  // Show the first image
  $(this)
    .find('li:first')
    .show();
};