Page_pane = function($container, pageSize){

    this._cn = $container;
    this.pageSize = Math.max(1,pageSize || 20);
    var self = this;
    
    this.init = function(){
        var t = '<fieldset id="navPane" class="navPane">' +
        '<legend>Записей:</legend>' +
        '<img id="btn_start" src="./img/start.png" title="На первую страницу" class="navPaneBtn">' +
        '<img id="btn_prev" src="./img/prev.png" title="Предыдущая" class="navPaneBtn">' +
        '<select id="select_page" style="width:45px;"></select>' +
        '<img id="btn_next" src="./img/next.png" title="Следующая" class="navPaneBtn">' +
        '<img id="btn_end" src="./img/end.png" title="Последняя" class="navPaneBtn">' +
        '</fieldset>';
        this._cn.html(t);
        this._cn.find('#btn_start').bind('click', this, function(event){
            event.data.set_page(1, true);
        });
        this._cn.find('#btn_prev').bind('click', this, function(event){
            event.data.set_page(event.data.page - 1, true);
        });
        this._cn.find('#btn_next').bind('click', this, function(event){
            event.data.set_page(event.data.page + 1, true);
        });
        this._cn.find('#btn_end').bind('click', this, function(event){
            event.data.set_page(event.data.pages, true);
        });
        this._cn.find('#select_page').bind('change', this, function(event){
            event.data.set_page(event.target.value, true);
        });
        this.set(0);
    }
    
    this.set_pageSize = function(value){
        this.pageSize = Math.max(1, value);
    }
    
    this.set = function(rec_count){
        this.page = 0;
        this.pages = 0;
        if (rec_count > 0) {
            this.pages = Math.ceil(rec_count / this.pageSize);
            this._cn.find('#navPane legend').text('Записей: ' + rec_count);
            this.set_page(1, false);
            this._cn.find('#navPane').show();
        }
        else 
            this._cn.find('#navPane').hide();
    }
    
	this.width = function(){
		this._cn.find('#navPane').width();
	}
	this.height = function(){
		this._cn.find('#navPane').height();
	}
    
    this.onPageChange = function(page_pane){
    }
    
    this.page = 0;
    this.pages = 0;
    
    //internal
    this.set_page = function(value, raiseEvent){
        var p = Math.max(1, Math.min(value, this.pages));
        if (p != this.page) {
            enable_btn(this._cn.find('#btn_start'), p > 1);
            enable_btn(this._cn.find('#btn_prev'), p > 1);
            enable_btn(this._cn.find('#btn_next'), p < this.pages);
            enable_btn(this._cn.find('#btn_end'), p < this.pages);
            var select_page = this._cn.find('#select_page');
            select_page.unbind('change');
            select_page.children().remove().empty();
            
            for (var i = 1; i <= this.pages; i++) 
                select_page.append($('<option value="' + i + '" ' + (i == p ? 'selected' : '') + ' >' + i + '</option>'))
            
            select_page.bind('change', this, function(event){
                event.data.set_page(event.target.value, true);
            });
            
            this.page = p;
            if (raiseEvent && this.onPageChange) 
                this.onPageChange(this);
        }
    }

    function enable_btn(btn, value){
        btn.css({
            cursor: value ? 'pointer' : 'default',
            opacity: value ? 1 : 0.3
        });
    }
}