Ember JS Paging with numbering

var get = Ember.get;
 
/**
  @extends Ember.Mixin
 
  Implements common pagination management properties for controllers.
*/
Ember.PaginationSupport = Ember.Mixin.create({
  /**
   */
  total: 0,
 
  /**
   */
  rangeStart: 0,
 
  /**
   */
  rangeWindowSize: 15,

  pagenumbering:Em.ArrayController.create({
    content: []
  }),
 
  /**
   */
  rangeStop: Ember.computed('total', 'rangeStart', 'rangeWindowSize', function() {
    var rangeStop = get(this, 'rangeStart') + get(this, 'rangeWindowSize'),
    total = get(this, 'total');
    if (rangeStop < total) {
      return rangeStop;
    }
    return total;
  }).cacheable(),
 
  /**
   */
  page: Ember.computed('rangeStart', 'rangeWindowSize', function() {
    return (get(this, 'rangeStart') / get(this, 'rangeWindowSize')) + 1;
  }).cacheable(),

  calculateNumbering: function() {    
    var self = this;

    self.get('pagenumbering').set('content',[]);   

    var totalpages = get(this, 'totalPages');
    var pages = 10;
    var start = 1;
  
    if(totalpages < 10) {
      pages = totalpages;
    }

    if(get(this, 'page') > 5) {
      start = get(this, 'page')-4;     
      pages = get(this, 'page')+5;
      if(pages >= totalpages) {        
        pages = totalpages;
      }     
    } 
    for(var i = start;i <= pages;i++) {
      var activeclass = "";
      if(get(this, 'page') == i) {
        activeclass = "active";        
      }
      self.get('pagenumbering').pushObject({"activeclassname":activeclass,"page":i,"start":(i*get(this, 'rangeWindowSize'))-get(this, 'rangeWindowSize')});
    }
  },

  goToPage:function(e) {
    var selectedpage = e.context.page;
    this.set('rangeStart', e.context.start);
  },
 
  /**
   */
  totalPages: Ember.computed('total', 'rangeWindowSize', function() {
    return Math.ceil(get(this, 'total') / get(this, 'rangeWindowSize'));
  }).cacheable(),
 
  /**
   */
  hasPrevious: Ember.computed('rangeStart', function() {
    return get(this, 'rangeStart') > 0;
  }).cacheable(),
 
  /**
   */
  hasNext: Ember.computed('rangeStop', 'total', function() {
    return get(this, 'rangeStop') < get(this, 'total');
  }).cacheable(),
 
  /**
  */
  didRequestRange: Ember.K,
 
  /**
   */
  nextPage: function() {
   if (get(this, 'hasNext')) {
      this.incrementProperty('rangeStart', get(this, 'rangeWindowSize'));
    }
  },
 
  /**
   */
  previousPage: function() {
    if (get(this, 'hasPrevious')) {     
      this.decrementProperty('rangeStart', get(this, 'rangeWindowSize'));
    }
  },

  rangeDidChange: Ember.observer(function() {    
    this.didRequestRange(get(this, 'rangeStart'), get(this, 'rangeStop'));
  }, 'rangeStart', 'rangeStop')
});


App.pagingview = Ember.View.extend({
  template: Ember.Handlebars.compile( 
  '<div class="pagination pagination-centered">'+
    '<ul>'+
    '<li><a {{action previousPage target="controller"}}>Prev</a></li>'+
    '{{#each pagenumbering}}'+
      '<li {{bindAttr class="activeclassname"}}><a {{action goToPage this target="controller"}}>{{this.page}}</a></li>'+
      '{{/each}}'+
      '<li><a {{action nextPage target="controller"}}>Next</a></li>'+
      '</ul>'+
  '</div>'
  ) 
});