﻿(function($){

  var current_index = 0;
  var moving = false;
  var interval;

  $.fn.slidingPanes = function(options) {
    var settings = {
      speed: 250,
      paneContainerSelector: '',
      play: 1,
      delay: 8000
    }
    
    return this.each(function() {
      if (options) {
        $.extend(settings, options);
      }
      
      var control_list = $(this).find('ul').eq(0);
      var control_count = $(control_list).find('li').length;

      var panel_list = $(this).find('.' + settings.paneContainerSelector).eq(0);
      var panel_width = $(panel_list).find('div').eq(0).width();
      
      var prev_index = 0;
      
      if (settings.play == 1) {
        createAnimation(control_list, panel_list, panel_width, current_index);
      }
      
      if (settings.play == 1) {
        $(this).hover(function() {
          clearInterval(interval);
        }, function() {
          createAnimation(control_list, panel_list, panel_width, current_index);        
        });
      }
      
      $.each($(control_list).find('li'), function() {
        $(this).click(function() {
          if (!moving) {
            moving = true;
            
            // get the index of the node the user has just clicked on
            var index = $(control_list).find('li').index(this);
            
            clearControlState(control_list, index);
            
            // animate panel
            $(panel_list).animate({
              left: '-=' + (panel_width * (index - current_index))
            }, settings.speed, function() {
              current_index = index;
              moving = false;
            });
          }
        });
      });      
    });

    function createAnimation(control_list, panel_list, panel_width, control_index) {
      var control_count = $(control_list).find('li').length;
      
      if (control_index != (control_count - 1)) {
        control_index++;
      }
      
      interval = setInterval(function() {  
        if (!moving) {
          moving = true;
          
          clearControlState(control_list, control_index);
          
          $(panel_list).animate({
            left: '-=' + (panel_width * (control_index - current_index))
          }, settings.speed, function() {
            current_index = control_index;

            if (control_index >= (control_count - 1)) {
              control_index = 0;
            } else {
              control_index++;
            }
            
            moving = false;
          });
        }
      }, settings.delay);
    }
    
    function clearControlState(control_list, toMakeActiveIndex) {
      // set ALL nodes to inactive to clear their state and then
      // set the current control node active according to its panel
      
      var control_count = $(control_list).find('li').length;
      
      for (curIndex = 0; curIndex < control_count; curIndex++) {
        $(control_list).find('li').eq(curIndex).removeClass('active');
      }
      
      $(control_list).find('li').eq(toMakeActiveIndex).addClass('active');      
    }
  };
 
})(jQuery);
