var app = angular.module('app', ['firebase']);

app.controller('ctrl', function($scope) {
  var ref = new Firebase('https://fbutil.firebaseio.com/paginate');
  $scope.scrollItems = $scrollArray(ref, 'number');
});

app.factory('$scrollArray', function($firebaseArray) {
  return function(ref, field) {
    // create a special scroll ref
    var scrollRef = new Firebase.util.Scroll(ref, field);
    // generate a synchronized array with the ref
    var list = $firebaseArray(scrollRef);
    // store the scroll namespace on the array for easy ref
    list.scroll = scrollRef.scroll;
    
    return list;
  }
});

// just some scroll magic to show the bottom of the list as new records are loaded
app.directive('scrollToBottom', function () {
  var unbind;
  return {
    restrict: 'A',
    scope: { scrollToBottom: "=" },
    link: function (scope, element) {
      if( unbind ) { unbind(); }
      unbind = scope.$watchCollection('scrollToBottom', function () {
        // assumes we have jQuery, which handles the pretty animation
        // otherwise, just use this code instead:
        // element[0].scrollTop = element[0].scrollHeight;
        $(element).animate({scrollTop: element[0].scrollHeight});
      });
    }
  }
});