var Pager = Class.create();
Pager.prototype =
{
	initialize: function( element, size )
	{
		this.size = size;
		this.position = 0;
		this.navigators = this.createNavigators( element );
		this.prevButton = this.createPrevButton( element );
		this.nextButton = this.createNextButton( element );
		this.renderize();
	},
	
	createNavigators: function( element )
	{
		var navigators = element.select( 'li' );
		var i = 0;
		navigators.each( function( item ) { item.observe( 'click', this.select.bind( this, i++ ) ) }.bind( this ) );
		return navigators;
	},
	
	createPrevButton: function( element )
	{
		var prevButton = element.select( '.previous' )[ 0 ];
		prevButton.observe( 'click', this.previous.bind( this ) );
		return prevButton;
	},
	
	createNextButton: function( element )
	{
		var nextButton = element.select( '.next' )[ 0 ];
		nextButton.observe( 'click', this.next.bind( this ) );
		return nextButton;
	},
	
	select: function( index )
	{
		this.position = this.size * ( Math.floor( index / this.size ) );
		this.renderize();
	},
	
	previous: function()
	{
		this.position -= this.size;
		this.renderize();
	},
	
	next: function()
	{
		this.position += this.size;
		this.renderize();
	},
	
	renderize: function()
	{
		this.navigators.each( function( item ) { item.hide() } );
		var last = this.position + this.size > this.navigators.length ? this.navigators.length : this.position + this.size;
		for( var i = this.position; i < last; i++ )
			this.navigators[ i ].show();

		this.enableButton( this.prevButton, this.position > 0 );
		this.enableButton( this.nextButton, this.position + this.size < this.navigators.length );
	},
	
	enableButton: function( button, v )
	{
		button.setStyle( { cursor: ( v ? 'pointer' : 'default' ) } );
		v ? Field.enable( button ) : Field.disable( button );
	}
}