SPG.components.pager

/**
 * componenets.pager
 *   Pagination component
 *
 * @example
 *   var pager = new SPG.components.pager({
 *	itemsQuantity: 1000,
 *	itemsPerPage: 10,
 *      displayPagesQuantity: 7,
 *      currentPageNumber: 1,
 *	onchange: function(index, quantity, page) {
 *
 *	    // Some code there
 *	    
 *	}
 *  });
 *   
 *  $(document.body).append(pager.element); 
 *
 * @interface
 *   VARIABLES
 *   element - jquery DOM object 
 *   options - options object
 *   current - number of the current page
 *
 *   METHODS
 *   configure - changes the configuration options
 *   first - changes current page to the first
 *   last - changes current page to the last
 *   count - counts and returns the quantity of pages
 *   next - changes current page to the next
 *   prev - changes current page to the previous
 *   onchange - fires "onchange" event
 *   render - renders paginator
 */

SPG.utils.namespace.register('components.pager');

SPG.components.pager = function(options) {

    this.options = $.extend({
        
        itemsQuantity: 30,
        itemsPerPage: 10,
        displayPagesQuantity: 7,
        currentPageNumber: 1,
        onchange: function() {},
        fire: true
    
    }, options);
    
    this.current = this.options.currentPageNumber;
    
    this.element = $(document.createElement('ul'));
    this.element.addClass('pager');
    this.build();
    
    if(this.options.fire) {
        this.onchange();
    }
}

SPG.components.pager.prototype = {
    
    // VARIABLES
    buttons: null,
    element: null,
    options: null,
    current: null,
    
    
    // METHODS
    configure: function(options) {
        this.options = $.extend(this.options, options);
        
        if(options.currentPageNumber) {
            this.current = options.currentPageNumber;
        }
    },
    
    count: function() {
        return Math.ceil(this.options.itemsQuantity / this.options.itemsPerPage);
    },
    
    next: function() {
        if(this.current < this.count()) {
            this.current++;
            this.onchange();
            this.render();
        }
    },
    
    prev: function() {
        if(this.current > 0) {
            this.current--;
            this.onchange();
            this.render();
        }
    },
    
    first: function() {
        this.current = 1;
        this.onchange();
        this.render();
    },
    
    last: function() {
        this.current = this.count();
        this.onchange();
        this.render();
    },
    
    onchange: function() {
        var index = (this.current - 1) * this.options.itemsPerPage;
        var quantity = this.options.itemsPerPage;
        var left = this.options.itemsQuantity - index;
        
        if(left < this.options.itemsPerPage) {
            quantity = left;
        }
        
        this.options.onchange(index, quantity, this.current);
    },
    
    build: function() {
        
        var that = this;
        
        this.element.empty();
        
        this.buttons = {};
        
        this.buttons.elseFirst   = $(document.createElement('li'));
        this.buttons.elseSecond  = $(document.createElement('li'));
        this.buttons.next        = $(document.createElement('li'));
        this.buttons.prev        = $(document.createElement('li'));
        
        this.buttons.pages = [];
        
        for(var i = 0; i < this.options.displayPagesQuantity && i < this.count(); i++) {
            this.buttons.pages[i] = $(document.createElement('li'));
            this.buttons.pages[i].appendTo(this.element);
        }
        
        this.buttons.elseFirst.addClass('else')
                    .html('...')
                    .prependTo(this.element);
        
        this.buttons.prev.addClass('prev')
                    .prependTo(this.element)
                    .click(function() { that.prev(); });
            
        this.buttons.elseSecond.addClass('else')
                    .html('...')
                    .appendTo(this.element);
                      
        this.buttons.next.addClass('next')
                    .appendTo(this.element)
                    .click(function() { that.next(); });
        
        this.render();
    },
    
    render: function() {
        
        var pagesQuantity = this.count();
        var pageNumber = 1;
        var half = Math.ceil(this.options.displayPagesQuantity / 2);
        
        if(pagesQuantity > this.options.displayPagesQuantity) {
            
            if(this.current > half) {
                pageNumber = (this.current + 1) - half;
            }
            
            if(this.current > pagesQuantity - half) {
                pageNumber = pagesQuantity - this.options.displayPagesQuantity + 1;
            }
        }
        
        var that = this;
        
        this.element.find('.selected').removeClass('selected');
        
        for(var i = 0; i < this.options.displayPagesQuantity && i < pagesQuantity; i++) {
            
            var button = this.buttons.pages[i];
            
            if(pageNumber == this.current) {
                button.addClass('selected');
            }
            
            button.unbind('click');
            button.bind('click', {number: pageNumber}, function(e) {
                that.current = e.data.number;
                that.render();
                that.onchange();
            });
            
            button.html(pageNumber);
            
            pageNumber++;
        }
        
        if(pagesQuantity > this.options.displayPagesQuantity) {
            
            
            var prevVisibility = 'hidden';
            var nextVisibility = 'hidden';
            
            if(this.current > half) {
                prevVisibility = 'visible';
            } 
            
            if(pageNumber - 1 < pagesQuantity) {
                nextVisibility = 'visible';
            }
            
            this.buttons.elseFirst.css('visibility', prevVisibility);
            this.buttons.prev.css('visibility', prevVisibility)
            
            this.buttons.elseSecond.css('visibility', nextVisibility);
            this.buttons.next.css('visibility', nextVisibility);
        }
    }
    
    
};