jQuery(document).ready(function(){
  var _toolbar = "\
  <div class='jp-toolbar'>\
      <span class='left'>Page:  </span>\
      <span class='right'>\
          <span class='numbers'>\
          </span>\
      </span>\
  </div>\
  "; 
  jQuery(".target").append(_toolbar);
  jQuery(".target").prepend(_toolbar);

  var _records = jQuery(".record");
  var _per_pagina = 3;
  var _page = 1;
  var _pages = Math.ceil(_records.size() / _per_pagina);
  for(var _x= 1;_x <= _pages; _x++){
    //wrap
    var _page_start = (_x - 1) * _per_pagina;
    var _page_stop = _page_start + _per_pagina;
    var _slice = _records.slice(_page_start, _page_stop);
    _slice.wrapAll('<div class="jp-page" id="page-'+_x+'" />');


    if(_x==1 && _pages > 1)
        jQuery('<a href="#" class="prev"><< prev</a><span> | </span>')
        .appendTo(".jp-toolbar > .right > .numbers");
    
    
    if(_x == _page){
        jQuery('<a class="jp-handler jp-active" href="#'+_x+'"></a>')
        .text(_x)
        .appendTo(".jp-toolbar > .right > .numbers")
    }else{
        jQuery('<a class="jp-handler" href=\"#'+_x+'\"></a>')
        .text(_x)
        .appendTo(".jp-toolbar > .right > .numbers");
    }
    
    jQuery("<span> | </span>")
    .appendTo(".jp-toolbar > .right > .numbers");
    
    if(_x == _pages && _pages > 1)
        jQuery('<a href="#" class="next">next >></a>')
        .appendTo(".jp-toolbar > .right > .numbers");
  }

   var _jpages = jQuery(".jp-page");
   _jpages.hide();
   _jpages.eq((_page - 1)).show();
  
   if(_page == 1)
      jQuery(".prev").hide();
   if(_page == _pages)
      jQuery(".next").hide();


   //events
   jQuery(".jp-handler")
   .click(function(){
      
      _jpages.hide();
      
      jQuery(".jp-toolbar").find(".jp-active").removeClass("jp-active");
      var _id = parseInt(jQuery(this).text()) - 1;
      
      alert("Prima del click : " + _page);
      _page = (_id + 1);
      alert("Dopo il click : " + _page);


      jQuery(".jp-toolbar")
      .eq(0)
      .find(".jp-handler")
      .eq(_id)
      .addClass("jp-active");
      
      jQuery(".jp-toolbar")
      .eq(1)
      .find(".jp-handler")
      .eq(_id)
      .addClass("jp-active");
      
      _jpages.eq(_id).show();
      
      if(_page != 1)
          jQuery(".prev").show();
      else
          jQuery(".prev").hide();
      
      if(_page != _pages)
          jQuery(".next").show();
      else
          jQuery(".next").hide();
      
      return false;
    });

    jQuery(".prev")
    .click(function(){

        _jpages.hide();

        var _id = (parseInt(jQuery(".jp-toolbar").find(".jp-active").eq(0).text()) - 1);
        _id--;

        alert("Prima del click : " + _page);
        _page = (_id + 1);
        alert("Dopo il click : " + _page);

      

        jQuery(".jp-toolbar")
        .find(".jp-active")
        .removeClass("jp-active");
        
        _jpages.eq(_id).show();
        
        jQuery(".jp-toolbar")
        .eq(0)
        .find(".jp-handler")
        .eq(_id)
        .addClass("jp-active");
        
        jQuery(".jp-toolbar")
        .eq(1)
        .find(".jp-handler")
        .eq(_id)
        .addClass("jp-active");
        
        if(_page != 1)
            jQuery(".prev").show();
        else
            jQuery(".prev").hide();
        
        if(_page != _pages)
            jQuery(".next").show();
        else
            jQuery(".next").hide();
            
        return false;   
    });
  
    jQuery(".next")
    .click(function(){

        _jpages.hide();

        var _id = parseInt(jQuery(".jp-toolbar").find(".jp-active").eq(0).text()) - 1;
        _id++;

        alert("Prima del click : " + _page);
        _page = (_id + 1);
        alert("Dopo il click : " + _page);


        jQuery(".jp-toolbar")
        .find(".jp-active")
        .removeClass("jp-active");
        
        _jpages.eq(_id).show();
        
        jQuery(".jp-toolbar")
        .eq(0)
        .find(".jp-handler")
        .eq(_id)
        .addClass("jp-active");
        
        jQuery(".jp-toolbar")
        .eq(1)
        .find(".jp-handler")
        .eq(_id)
        .addClass("jp-active");
        
        if(_page != 1)
            jQuery(".prev").show();
        else
            jQuery(".prev").hide();
        
        if(_page != _pages)
            jQuery(".next").show();
        else
            jQuery(".next").hide();
            
        return false;   
    });
});