diff --git a/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/page_navigation_render.xml b/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/page_navigation_render.xml
index cf5393428e1273efb93bd12ac63fcfb95204f499..4904653e4a46a24c8dbc389e51c0b8bcd2d25834 100644
--- a/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/page_navigation_render.xml
+++ b/product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/page_navigation_render.xml
@@ -2,10 +2,7 @@
 <ZopeData>
   <record id="1" aka="AAAAAAAAAAE=">
     <pickle>
-      <tuple>
-        <global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
-        <tuple/>
-      </tuple>
+      <global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
     </pickle>
     <pickle>
       <dictionary>
@@ -43,61 +40,65 @@
            xmlns:tal="http://xml.zope.org/namespaces/tal"\n
            xmlns:metal="http://xml.zope.org/namespaces/metal"\n
            xmlns:i18n="http://xml.zope.org/namespaces/i18n">\n
-  <tal:block metal:define-macro="page_navigation">\n
-    <tal:block tal:condition="python: here.total_pages > 1">\n
-      <tal:block tal:condition="not: is_gadget_mode">\n
-        <tal:block tal:condition="python: here.current_page > 0">\n
-          <input\n
-            id="listbox_first_page" type="image" src="2leftarrowv.png"\n
-            title="First Page" name="firstPage:method"\n
-            class="listbox_first_page"\n
-            tal:attributes="id string:${field_id}_first_page;\n
-                            name string:${field_id}_firstPage:method;\n
-                            src string:${portal_url_string}/images/2leftarrowv.png"\n
-            i18n:domain="ui" i18n:attributes="title" />\n
-          <input\n
-            id="listbox_previous_page" type="image" src="1leftarrowv.png"\n
-            title="Previous Page" name="previousPage:method"\n
-            class="listbox_previous_page"\n
-            tal:attributes="id string:${field_id}_previous_page;\n
-                            name string:${field_id}_previousPage:method;\n
-                            src string:${portal_url_string}/images/1leftarrowv.png"\n
-            i18n:domain="ui" i18n:attributes="title" />\n
-        </tal:block>\n
-        <input id="listbox_set_page" name="page_start" onblur="this.value=this.defaultValue"\n
-               tal:attributes="id string:${field_id}_set_page;\n
-                               name string:${field_id}_page_start;\n
-                               value python:here.current_page + 1;\n
-                               size python:len(str(here.total_pages));\n
-                               onkeypress string:submitFormOnEnter(event, this.form, \'${field_id}_setPage\')" />\n
-                               / \n
-        <tal:block content="here/total_pages" />\n
-        <tal:block tal:condition="python: here.current_page < here.total_pages - 1">\n
-          <input\n
-            id="listbox_next_page" type="image" src="1rightarrowv.png"\n
-            title="Next Page" name="nextPage:method" class="listbox_next_page"\n
-            tal:attributes="id string:${field_id}_next_page;\n
-                            name string:${field_id}_nextPage:method;\n
-                            src string:${portal_url_string}/images/1rightarrowv.png"\n
-            i18n:domain="ui" i18n:attributes="title" />\n
-          <input\n
-            id="listbox_last_page" type="image" src="2rightarrowv.png"\n
-            title="Last Page" name="lastPage:method" class="listbox_last_page"\n
-            tal:attributes="id string:${field_id}_last_page;\n
-                            name string:${field_id}_lastPage:method;\n
-                            src string:${portal_url_string}/images/2rightarrowv.png"\n
-            i18n:domain="ui" i18n:attributes="title" />\n
-        </tal:block>\n
-      </tal:block>\n
-      \n
-      <tal:block tal:condition="is_gadget_mode"\n
-                      tal:define="max_lines      python: here.getMaxLineNumber();\n
-                                total_page     python: here.total_pages;\n
-                                page_id        python: here.current_page;\n
-                                current_page   python: page_id + 1;\n
-                                previous_page  python: current_page - 1;\n
-                                next_page      python: current_page + 1;">\n
-        <tal:block tal:condition="python: here.current_page > 0">\n
+  \n
+\n
+  <!-- First & Previous button navigation --> \n
+  <tal:block metal:define-macro="first_previous_page_navigation">\n
+\n
+    <tal:block tal:condition="python: here.current_page > 0">\n
+      <button id="listbox_first_page" \n
+              type="image" src="2leftarrowv.png"\n
+              title="First Page" name="firstPage:method"\n
+              class="listbox_first_page"\n
+              tal:attributes="id string:${field_id}_first_page;\n
+                              name string:${field_id}_firstPage:method;\n
+                              src string:${portal_url_string}/images/2leftarrowv.png"\n
+              i18n:domain="ui" i18n:attributes="title">\n
+        <span class="image"/>\n
+      </button>\n
+      <button id="listbox_previous_page" type="image" src="1leftarrowv.png"\n
+              title="Previous Page" name="previousPage:method"\n
+              class="listbox_previous_page"\n
+              tal:attributes="id string:${field_id}_previous_page;\n
+                              name string:${field_id}_previousPage:method;\n
+                              src string:${portal_url_string}/images/1leftarrowv.png"\n
+              i18n:domain="ui" i18n:attributes="title">\n
+        <span class="image"/>\n
+      </button>\n
+\n
+    </tal:block>\n
+\n
+  </tal:block>\n
+\n
+  <!-- Next & Last button navigation --> \n
+  <tal:block metal:define-macro="next_last_page_navigation">\n
+\n
+    <tal:block tal:condition="python: here.current_page < here.total_pages - 1">\n
+      <button id="listbox_next_page" type="image" src="1rightarrowv.png"\n
+              title="Next Page" name="nextPage:method" class="listbox_next_page"\n
+              tal:attributes="id string:${field_id}_next_page;\n
+                              name string:${field_id}_nextPage:method;\n
+                              src string:${portal_url_string}/images/1rightarrowv.png"\n
+              i18n:domain="ui" i18n:attributes="title">\n
+        <span class="image"/>\n
+      </button>\n
+      <button id="listbox_last_page" type="image" src="2rightarrowv.png"\n
+              title="Last Page" name="lastPage:method" class="listbox_last_page"\n
+              tal:attributes="id string:${field_id}_last_page;\n
+                              name string:${field_id}_lastPage:method;\n
+                              src string:${portal_url_string}/images/2rightarrowv.png"\n
+              i18n:domain="ui" i18n:attributes="title" >\n
+        <span class="image"/>\n
+      </button>\n
+\n
+    </tal:block>\n
+\n
+  </tal:block>\n
+\n
+  <!-- First & Previous button navigation (asynchronous mode) --> \n
+  <tal:block metal:define-macro="first_previous_page_navigation_asynchronous">\n
+\n
+    <tal:block tal:condition="python: here.current_page > 0">\n
           <button tal:define ="params python: {field_id+\'_firstPage:method\':\'\', \'list_style\':list_style}"\n
                  title="First Page" \n
                  name="firstPage"\n
@@ -123,40 +124,136 @@
             <span class="image"/>\n
           </button>\n
         </tal:block>\n
-        <input id="listbox_set_page" name="page_start" onblur="this.value=this.defaultValue"\n
-               tal:define="params python: {field_id+\'_setPage:method\':\'\',field_id+\'_page_start\':\'this.value\',\'list_style\':list_style}"\n
-               tal:attributes=\'id string:${field_id}_set_page;\n
-                               name string:${field_id}_page_start;\n
-                               value python:here.current_page + 1;\n
-                               size python:len(str(here.total_pages));\n
-                               onkeypress python:"if(event.keyCode==13){" + real_context.KnowledgePad_generateAjaxCall(context_url+"/"+form_id,box,dom_id,params).replace("\\"this.value\\"","this.value")+ "return false;;}"\'/>\n
-                               / \n
-        <tal:block content="here/total_pages" />\n
-        <tal:block tal:condition="python: current_page < total_page">\n
-          <button tal:define ="params python: {field_id+\'_nextPage:method\':\'\',\'page_start\':here.current_page+1,\'list_style\':list_style}"\n
-                 title="Next Page"\n
-                 name="nextPage"\n
-                 type="button"\n
-                 class="listbox_next_page"\n
-                 tal:attributes="id    string:${field_id}_next_page;\n
-                                 onclick python: real_context.KnowledgePad_generateAjaxCall(context_url+\'/\'+form_id,box,dom_id,params)"\n
-                                 i18n:domain="ui" i18n:attributes="title">\n
+   \n
+  </tal:block>\n
+\n
+  <!-- Next & Last button navigation (asynchronous mode) --> \n
+  <tal:block metal:define-macro="next_last_page_navigation_asynchronous">\n
+    <tal:block tal:condition="python: current_page < total_page">\n
+      <button tal:define ="params python: {field_id+\'_nextPage:method\':\'\',\'page_start\':here.current_page+1,\'list_style\':list_style}"\n
+              title="Next Page"\n
+              name="nextPage"\n
+              type="button"\n
+              class="listbox_next_page"\n
+              tal:attributes="id string:${field_id}_next_page;\n
+                              onclick python: real_context.KnowledgePad_generateAjaxCall(context_url+\'/\'+form_id,box,dom_id,params)"\n
+              i18n:domain="ui" i18n:attributes="title">\n
             <span class="image"/>\n
-          </button>\n
-          <button tal:define ="params python: {field_id+\'_lastPage:method\':\'\',\'total_size\':int(here.total_size), \'list_style\':list_style}"\n
-                 title="Last Page"\n
-                 name="lastPage"\n
-                 type="button"\n
-                 class="listbox_last_page"\n
-                 tal:attributes="id    string:${field_id}_last_page;\n
-                                 onclick python: real_context.KnowledgePad_generateAjaxCall(context_url+\'/\'+form_id,box,dom_id,params)"\n
-                                 i18n:domain="ui" i18n:attributes="title">\n
+       </button>\n
+       <button tal:define ="params python: {field_id+\'_lastPage:method\':\'\',\'total_size\':int(here.total_size), \'list_style\':list_style}"\n
+               title="Last Page"\n
+               name="lastPage"\n
+               type="button"\n
+               class="listbox_last_page"\n
+               tal:attributes="id string:${field_id}_last_page;\n
+                               onclick python: real_context.KnowledgePad_generateAjaxCall(context_url+\'/\'+form_id,box,dom_id,params)"\n
+               i18n:domain="ui" i18n:attributes="title">\n
             <span class="image"/>\n
-          </button>\n
-        </tal:block>\n
+       </button>\n
+    </tal:block>\n
+\n
+  </tal:block>\n
+\n
+  <!-- Type in listbox navigation --> \n
+  <tal:block metal:define-macro="type_in_page_navigation">\n
+    <input id="listbox_set_page" name="page_start" onblur="this.value=this.defaultValue"\n
+           tal:attributes="id string:${field_id}_set_page;\n
+                           name string:${field_id}_page_start;\n
+                           value python:here.current_page + 1;\n
+                           size python:len(str(here.total_pages));\n
+                           onkeypress string:submitFormOnEnter(event, this.form, \'${field_id}_setPage\')" />\n
+    / <tal:block content="here/total_pages" />\n
+  </tal:block>\n
+\n
+  <!-- Type in listbox page number navigation (asyncronous) --> \n
+  <tal:block metal:define-macro="type_in_page_navigation_asynchronous">\n
+\n
+    <input id="listbox_set_page" name="page_start" onblur="this.value=this.defaultValue"\n
+           tal:define="params python: {field_id+\'_setPage:method\':\'\',field_id+\'_page_start\':\'this.value\',\'list_style\':list_style}"\n
+           tal:attributes=\'id string:${field_id}_set_page;\n
+                           name string:${field_id}_page_start;\n
+                           value python:here.current_page + 1;\n
+                           size python:len(str(here.total_pages));\n
+                           onkeypress python:"if(event.keyCode==13){" + real_context.KnowledgePad_generateAjaxCall(context_url+"/"+form_id,box,dom_id,params).replace("\\"this.value\\"","this.value")+ "return false;;}"\'/>\n
+    / <tal:block content="here/total_pages" />\n
+  </tal:block>\n
+\n
+  <!-- Show list of direct listbox page selection -->\n
+  <tal:block metal:define-macro="text_link_page_navigation">\n
+    <tal:block tal:repeat="page_index page_index_list ">\n
+      <a tal:attributes="href python: \'%s_setPage?%s_page_start=%s&list_selection_name=%s&listbox_uid:list=[]\' %(field_id, field_id, page_index, selection_name);\n
+                         class python: test(page_index==current_page, \'selected\', \'\');\n
+                         title string:Page ${page_index}"\n
+         tal:content="page_index"/>\n
+    </tal:block>\n
+  </tal:block>\n
+\n
+  <!-- Show list of direct listbox page selection (asynchronous) -->\n
+  <tal:block metal:define-macro="text_link_page_navigation_asynchronous">\n
+    <tal:block tal:repeat="page_index page_index_list ">\n
+      <a tal:define="params python: {field_id+\'_setPage:method\':\'\',field_id+\'_page_start\':page_index,\'list_style\':list_style, \'list_selection_name\':selection_name, \'listbox_uid\':[]}"\n
+         tal:attributes="onclick python: real_context.KnowledgePad_generateAjaxCall(context_url+\'/\'+form_id,box,dom_id,params);\n
+                         class python: test(page_index==current_page, \'selected\', \'\');\n
+                         title string:Page ${page_index}"\n
+         tal:content="page_index"/>\n
+    </tal:block>\n
+  </tal:block>\n
+\n
+\n
+  <!-- Text navigation (i.e. 1 2 3 4 .. n links)-->\n
+  <tal:block metal:define-macro="text_navigation"\n
+                   tal:define="offset python: 7;\n
+                               all_page_index_list python: range(1, here.total_pages + 1);\n
+                               page_index_list python: all_page_index_list[max(current_page-offset, 1)-1: min(current_page+offset, len(all_page_index_list))];">\n
+\n
+    <!-- Non gadget mode -->\n
+    <tal:block tal:condition="not: is_gadget_mode">\n
+      <tal:block metal:use-macro="real_context/page_navigation_render/macros/first_previous_page_navigation" />\n
+      <tal:block metal:use-macro="real_context/page_navigation_render/macros/text_link_page_navigation" />\n
+      <tal:block metal:use-macro="real_context/page_navigation_render/macros/next_last_page_navigation" />\n
+    </tal:block>\n
+\n
+    <!-- Gadget mode -->\n
+    <tal:block tal:condition="is_gadget_mode"\n
+               tal:define="max_lines      python: here.getMaxLineNumber();\n
+                           total_page     python: here.total_pages;\n
+                           page_id        python: here.current_page;\n
+                           current_page   python: page_id + 1;\n
+                           previous_page  python: current_page - 1;\n
+                           next_page      python: current_page + 1;">\n
+      <tal:block metal:use-macro="real_context/page_navigation_render/macros/first_previous_page_navigation_asynchronous" />\n
+      <tal:block metal:use-macro="real_context/page_navigation_render/macros/text_link_page_navigation_asynchronous" />\n
+      <tal:block metal:use-macro="real_context/page_navigation_render/macros/next_last_page_navigation_asynchronous" />\n
+    </tal:block>\n
+\n
+  </tal:block>\n
+\n
+  <!-- Slider navigation with input  (i.e. first, previous, next, last links)-->\n
+  <tal:block metal:define-macro="page_navigation">\n
+    <tal:block tal:condition="python: here.total_pages > 1">\n
+\n
+      <!-- Non gadget mode -->\n
+      <tal:block tal:condition="not: is_gadget_mode">\n
+        <tal:block metal:use-macro="real_context/page_navigation_render/macros/first_previous_page_navigation" />\n
+        <tal:block metal:use-macro="real_context/page_navigation_render/macros/type_in_page_navigation" />\n
+        <tal:block metal:use-macro="real_context/page_navigation_render/macros/next_last_page_navigation" />\n
+      </tal:block>\n
+\n
+      <!-- Gadget mode -->\n
+      <tal:block tal:condition="is_gadget_mode"\n
+                 tal:define="max_lines      python: here.getMaxLineNumber();\n
+                             total_page     python: here.total_pages;\n
+                             page_id        python: here.current_page;\n
+                             current_page   python: page_id + 1;\n
+                             previous_page  python: current_page - 1;\n
+                             next_page      python: current_page + 1;">\n
+        <tal:block metal:use-macro="real_context/page_navigation_render/macros/first_previous_page_navigation_asynchronous" />\n
+        <tal:block metal:use-macro="real_context/page_navigation_render/macros/type_in_page_navigation_asynchronous" />\n
+        <tal:block metal:use-macro="real_context/page_navigation_render/macros/next_last_page_navigation_asynchronous" />\n
       </tal:block>\n
     </tal:block>\n
   </tal:block>\n
+\n
 </tal:block>\n
 
 
diff --git a/product/ERP5/bootstrap/erp5_xhtml_style/bt/revision b/product/ERP5/bootstrap/erp5_xhtml_style/bt/revision
index 8ea0a3e6f1099fb1b729b3dfc57bbf3c120f451d..14e963ae25a763ee1f1d13138a5a7ef66f0e8194 100644
--- a/product/ERP5/bootstrap/erp5_xhtml_style/bt/revision
+++ b/product/ERP5/bootstrap/erp5_xhtml_style/bt/revision
@@ -1 +1 @@
-971
\ No newline at end of file
+975
\ No newline at end of file