//Handling scrolling interfaces
(function($) {
  $.fn.scroller = function(){
    $(this).each(function() {
      var $this = $(this),
        $scrollNav = $this.parents('.section').filter(':first').find('.nav-scroller'),
        $pagerNav = $this.parents('.section').filter(':first').find('.nav-pager'),
        count = 0,
        scrollOffset = 0,
        containerDimension,
        containerWidth,
        itemDimension,
        itemWidth,
        numItems,
        numPerRow,
        numToShow,
        frames;

      if($this.attr('data-scroll-offset')) {
        scrollOffset = parseInt($this.attr('data-scroll-offset'), 10);
      }

      if($this.hasClass('vertical')) {
        containerDimension = $this.parent().height() + scrollOffset;
        containerWidth = $this.parent().width();
        itemDimension = $this.children().outerHeight();
        itemWidth = $this.children().outerWidth();
        numItems = $this.children().length;
        numPerRow = Math.floor(containerWidth / itemWidth);
        numToShow = (Math.floor(containerDimension / itemDimension) * numPerRow) || 1;
        frames = Math.ceil(numItems / numToShow);
        $this.height((itemDimension * numItems / numPerRow));
      } else {
        containerDimension = $this.parent().width();
        itemDimension = $this.children().outerWidth();
        numItems = $this.children().length;
        numToShow = Math.floor(containerDimension / itemDimension) || 1;
        frames = Math.ceil(numItems / numToShow);
        $this.width((containerDimension * frames));
      }

      //If this scroller is displaying text for the current frame, add the text for the first item
      if($scrollNav.children('.current').length > 0) {
        $scrollNav.children('.current').text($this.children('li:eq('+count+')').attr('title'));
      }

      //Shift the relative position when the nav-scroller links are clicked
      $scrollNav.find('a').click(function(e) {
        var $link = $(this);
        $link.addClass('no-outline');
        var action = $link.parent().attr('class');
        if(action === 'prev') {
          if(count > 0) {
            count--;
          } else {
            count = frames-1;
          }
        } else if (action === 'next') {
          if(count < (frames-1)) {
            count++;
          } else {
            count = 0;
          }
        }
        var moveTo = containerDimension * count;
        if($this.hasClass('vertical')) {
          $this.animate({top: '-'+moveTo},600, function() { $link.trigger("animation-finished"); });
        } else {
          $this.animate({left: '-'+moveTo},600, function() { $link.trigger("animation-finished"); });
        }

        //If this scroller has a nav-pager
        if($pagerNav.length > 0) {
          $pagerNav.children('.current').removeClass('current');
          $pagerNav.children('li:eq('+count+')').addClass('current');
        }

        //If this scroller is displaying text for the current frame
        if($scrollNav.children('.current').length > 0) {
          $scrollNav.children('.current').text($this.children('li:eq('+count+')').attr('title'));
        }
        e.preventDefault();
      });

      //If this scroller has a nav-pager, add click events to it
      if($pagerNav.length > 0) {
        $pagerNav.children().children('a').click(function(e) {
          var $link = $(this);
          $link.addClass('no-outline');
          var $pagerParent = $(this).parent();
          if(!$pagerParent.hasClass('current')) {
            count = $pagerParent.prevAll().length;
            var moveTo = containerDimension * count;
            if($this.hasClass('vertical')) {
              $this.animate({top: '-'+moveTo},600, function() { $link.trigger("animation-finished"); });
            } else {
              $this.animate({left: '-'+moveTo},600, function() { $link.trigger("animation-finished"); });
            }
            $pagerNav.children('.current').removeClass('current');
            $pagerParent.addClass('current');
          }
          e.preventDefault();
        });
      }

    });
    return $(this);
  };
})(jQuery);