<div tal:define="docinfo options/docinfo; pageinfo options/pageinfo;  
  start pageinfo/start; end pageinfo/end; rows pageinfo/rows; cols pageinfo/cols;
  current pageinfo/current; grpsize pageinfo/groupsize">

<div class="thumbruler">
  <span tal:condition="python:(start>1)">
    <a tal:attributes="href python:here.getLink(param='start',val=max(start-grpsize,1))">&lt;</a>
  </span>
  <select tal:attributes="onChange python:'location.href=\''+here.getLink(param='start',val=None)+'&start=\'+this.options[this.selectedIndex].value'">
    <option tal:repeat="grp python:range(pageinfo['numgroups'])" 
      tal:attributes="selected python:(start==grp*grpsize+1); value python:(grp*grpsize+1)"
      tal:content="python:(grp*grpsize+1)"/>
  </select>
  <span tal:condition="python:(start+grpsize<int(docinfo['numPages']))">
    <a tal:attributes="href python:here.getLink(param='start',val=start+grpsize)">&gt;</a>
  </span>
</div>
<table>
  <tr tal:repeat="row python:range(rows)">
    <tal:block tal:repeat="idx python:range(start+row*cols,start+(row+1)*cols)">
      <td align="center" tal:condition="python:(idx<=end)"
		  	tal:attributes="class python:here.getStyle(idx,current,'thumb')">
		<a tal:attributes="href python:here.getLink(param='pn',val=idx)">
		  <img class="thumbimg" border="0" tal:attributes="src string:${docinfo/imageURL}&pn=$idx&dw=100&dh=100"/>
		  <div class="thumbcap" tal:content="idx"/>
		</a>
	  </td>
    </tal:block>
  </tr>
</table>
</div>