(function($) {
  $.fn.UISliderSelector = function() {
    // Variables.
    var $slider        = this;
    var sliderID       = $slider.attr('id');
    var selectorClass  = 'selector';
    var sliderIsMoving = false;
    var pageViewAttr   = 'view';
    
    // Add the selector element to the slider wrapper.
    $slider.prepend('<div class="' + selectorClass + '"></div>');
    var $selector = $slider.find('.' + selectorClass).first();
    
    // Add base CSS styling.
    addCssStyling();
    
    // Move the selector to the first list item.
    var defaultPageView  = $slider.find('li').first().attr(pageViewAttr);
    selectItem(defaultPageView, false, false);
    
    // Add select-on-click behavior;
    addClickBehavior();
    
    // Functions.
    function selectItem(pageViewTitle, animateMode, changingViewsMode) {
      if (sliderIsMoving) {
        return false;
      } else {
        sliderIsMoving = true;

        // Retrieve the DOM elements as jQuery objects.
        var oldSelected = $slider.find('li.selected');
        var newSelected = $slider.find('li[' + pageViewAttr + '="' + pageViewTitle + '"]');
        
        // Calculate the new width and left-offset of the selector.
        var newXOffset = newSelected.position().left; 
        var newYOffset = newSelected.position().top;
        var newWidth   = newSelected.outerWidth();
        var newHeight  = newSelected.outerHeight();
        
        if (animateMode) {
          // Animate the slider.
          var oldXOffset = $selector.position().left;
          var oldYOffset = $selector.position().top;
          var leftChange = '+=' + (newXOffset - oldXOffset);
          var topChage   = '+=' + (newYOffset - oldYOffset);
          
          oldSelected.removeClass('selected');
          
          $selector.animate({
            left  : leftChange,
            top   : topChage,
            width : newWidth,
            height: newHeight
          }, 400, function() {
            // Executed when animation is finished.
            // oldSelected.removeClass('selected');
            newSelected.addClass('selected');
            sliderIsMoving = false;
          });
        } else {
          // Move the slider without animating.
          $selector.css({
            'left'  : newXOffset,
            'width' : newWidth,
            'height': newHeight
          });
          oldSelected.removeClass('selected');
          newSelected.addClass('selected');
          sliderIsMoving = false;
        }
        //oldSelected.removeClass('selected');
      }
      
      // Always true, except on page load.
      if (changingViewsMode) {
        changeSliderViews(oldSelected.attr(pageViewAttr), pageViewTitle);
      }
    }
    function addCssStyling() {
      $slider.css({
        //'display'  : 'inline-block',
        //'overflow' : 'hidden',
        //'position' : 'relative'
      });
      $slider.find('ul').css({
        //'display'    : 'inline-block',
        //'list-style' : 'none',
        'position'   : 'relative'
      });
      $slider.find('li').css({
        //'cursor'  : 'pointer',
        //'display' : 'inline-block',
        //'float'   : 'left'
      });
      $selector.css({
        //'margin'   : '-1px',
        'position' : 'absolute'
      });
    }
    function addClickBehavior() {
      $('#' + sliderID + ' li').click(function() {
        if (!$(this).hasClass('selected')) {
          var pageViewTitle = $(this).attr(pageViewAttr);
          selectItem(pageViewTitle, true, true);
        }
      });
    }
    
    // Return the object for chaining.
    return this;
  }
})(jQuery);