title: XSLT - loop, count, position() with variables
body: <p>Apologies in advance - total novice here and struggling after reading pretty much every XSLT thread in here. So I desperately need several aspirins and your guidance!!</p>
  
  <p>I have three incoming parameters/variables that need to be processed using xslt version 1.0. </p>
  
  <pre><code>&lt;!-- Variables in the XSL --&gt;
  &lt;xsl:variable name="tw"&gt;125&lt;/xsl:variable&gt;
  &lt;xsl:variable name="rows"&gt;4&lt;/xsl:variable&gt;
  &lt;xsl:variable name="cols"&gt;6&lt;/xsl:variable&gt;
  </code></pre>
  
  <p>I want to end up with the <strong>calculated values</strong> (the pixels) in the '<strong>background-positions</strong>' of the HTML as seen below:-</p>
  
  <pre><code>&lt;div style="background-position:-0px -0px;"&gt;&lt;img src="images/thumbs/1.jpg" alt="one" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-125px -0px;"&gt;&lt;img src="images/thumbs/2.jpg" alt="two" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-250px -0px;"&gt;&lt;img src="images/thumbs/3.jpg" alt="three" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-375px -0px;"&gt;&lt;img src="images/thumbs/4.jpg" alt="four" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-500px -0px;"&gt;&lt;img src="images/thumbs/5.jpg" alt="five" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-625px -0px;"&gt;&lt;img src="images/thumbs/6.jpg" alt="six" /&gt;&lt;/div&gt;
  
  &lt;div style="background-position:-0px -125px;"&gt;&lt;img src="images/thumbs/7.jpg" alt="seven" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-125px -125px;"&gt;&lt;img src="images/thumbs/8.jpg" alt="eight" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-250px -125px;"&gt;&lt;img src="images/thumbs/9.jpg" alt="nine" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-375px -125px;"&gt;&lt;img src="images/thumbs/10.jpg" alt="ten" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-500px -125px;"&gt;&lt;img src="images/thumbs/11.jpg" alt="11" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-625px -125px;"&gt;&lt;img src="MIB/images/thumbs/12.jpg" alt="12" /&gt;&lt;/div&gt;
  
  &lt;div style="background-position:-0px -250px;"&gt;&lt;img src="images/thumbs/13.jpg" alt="13" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-125px -250px;"&gt;&lt;img src="/mages/thumbs/14.jpg" alt="14" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-250px -250px;"&gt;&lt;img src="images/thumbs/15.jpg" alt="15" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-375px -250px;"&gt;&lt;img src="images/thumbs/16.jpg" alt="16" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-500px -250px;"&gt;&lt;img src="images/thumbs/17.jpg" alt="17" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-625px -250px;"&gt;&lt;img src="images/thumbs/18.jpg" alt="18" /&gt;&lt;/div&gt;
  
  &lt;div style="background-position:-0px -375px;"&gt;&lt;img src="images/thumbs/19.jpg" alt="19" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-125px -375px;"&gt;&lt;img src="images/thumbs/20.jpg" alt="20" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-250px -375px;"&gt;&lt;img src="images/thumbs/21.jpg" alt="21" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-375px -375px;"&gt;&lt;img src="images/thumbs/22.jpg" alt="22" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-500px -375px;"&gt;&lt;img src="images/thumbs/23.jpg" alt="23" /&gt;&lt;/div&gt;
  &lt;div style="background-position:-625px -375px;"&gt;&lt;img src="images/thumbs/24.jpg" alt="24" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I realise that I need to loop (somehow) and keep a count (somehow) and having seen numerous looping and counting examples I expected the process to be straight forward but then I read about <code>position()</code> and <code>number</code> and so many other things that my head is spinning. I have no clue how or where to position the counting loop within a <code>for-each</code> statement or even if a <code>for-each</code> is the best solution. None of my feeble attempts produced well formed XSL so you can see I am getting no where fast.</p>
  
  <p>So here's hoping one of the guru's here can help me start the process off and assist in my understanding of xslt.</p>
  
  <p>The image data is coming from an XML file and I am able to process the img src and alt without a problem so it's just the pixel calculations, looping, counting etc that is the problem</p>
  
  <pre><code>&lt;xsl:for-each select="DATASET/ITEM"&gt;
  &lt;div style="background-position:-{rowpos}px -{colpos}px;"&gt;&lt;img src="{thumbnailimage}" alt="{imagealttext}" /&gt;&lt;/div&gt;
  &lt;/xsl:for-each&gt;
  &lt;!-- rowpos and colpos are the calculated values that are generated from whatever loop and count process is used --&gt;
  </code></pre>
  
  <p>So for clarification:</p>
  
  <p><strong>Calculation.</strong> There are 3 variables which would produce 6 calculated values. tw=125. The width is used for the background positions so depending on the row/column the calculated values are as shown in the example - e.g. tw-tw, tw, tw*2, tw*3, tw*4 and tw*5 (a total of 6 calculations). The number of rows and number of columns determines how and where each thumbnail is positioned using the calculated pixel values - which in the case above are 0px, -125px, -250px, -375px, -500px and -675px.</p>
  
  <p>Further expansion of the calculations:- Row and Column positions are determined by the width of a thumbnail image. The position of each thumbnail is determined by the number of rows and number of columns. A 3 row by 3 column grid with 150px wide thumbs will require 9 thumbnails therefore 9 sets of px values but only 2 unique calculations would be required e.g. tw*2 and tw*3 as shown below:-</p>
  
  <pre><code>&lt;div style="background-position: -0px -0px;" /&gt;&lt;img src="image 1.jpg" alt="Alt text 1" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -125px -0px;" /&gt;&lt;img src="image 2.jpg" alt="Alt text 2" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -250px -0px;" /&gt;&lt;img src="image 3.jpg" alt="Alt text 3" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -375px -0px;" /&gt;&lt;img src="image 4.jpg" alt="Alt text 4" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -500px -0px;" /&gt;&lt;img src="image 5.jpg" alt="Alt text 5" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -0px -125px;" /&gt;&lt;img src="image 6.jpg" alt="Alt text 6" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -125px -125px;" /&gt;&lt;img src="image 7.jpg" alt="Alt text 7" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -250px -125px;" /&gt;&lt;img src="image 8.jpg" alt="Alt text 8" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -375px -125px;" /&gt;&lt;img src="image 9.jpg" alt="Alt text 9" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -500px -125px;" /&gt;&lt;img src="image 10.jpg" alt="Alt text 10" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -0px -250px;" /&gt;&lt;img src="image 11.jpg" alt="Alt text 11" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -125px -250px;" /&gt;&lt;img src="image 12.jpg" alt="Alt text 12" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -250px -250px;" /&gt;&lt;img src="image 13.jpg" alt="Alt text 13" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -375px -250px;" /&gt;&lt;img src="image 14.jpg" alt="Alt text 14" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -500px -250px;" /&gt;&lt;img src="image 15.jpg" alt="Alt text 15" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -0px -375px;" /&gt;&lt;img src="image 16.jpg" alt="Alt text 16" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -125px -375px;" /&gt;&lt;img src="image 17.jpg" alt="Alt text 17" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -250px -375px;" /&gt;&lt;img src="image 18.jpg" alt="Alt text 18" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -375px -375px;" /&gt;&lt;img src="image 19.jpg" alt="Alt text 19" /&gt;&lt;/div&gt;
  &lt;div style="background-position: -500px -375px;" /&gt;&lt;img src="image 20.jpg" alt="Alt text 20" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>XML file</strong> The image src and alt text come from an XML file:-</p>
  
  <pre><code>&lt;DATASET&gt;
  &lt;ITEM&gt;
     &lt;THUMBNAILIMAGE&gt;image1.jpg&lt;/THUMBNAILIMAGE&gt;
     &lt;IMAGEALTTEXT&gt;Alt text 1&lt;/IMAGEALTTEXT&gt;
  &lt;/ITEM&gt;
  &lt;ITEM&gt;
     &lt;THUMBNAILIMAGE&gt;image2.jpg&lt;/THUMBNAILIMAGE&gt;
     &lt;IMAGEALTTEXT&gt;Alt text 2&lt;/IMAGEALTTEXT&gt;
  &lt;/ITEM&gt;
  ......
  &lt;ITEM&gt;
     &lt;THUMBNAILIMAGE&gt;image20.jpg&lt;/THUMBNAILIMAGE&gt;
     &lt;IMAGEALTTEXT&gt;Alt text 20&lt;/IMAGEALTTEXT&gt;
  &lt;/ITEM&gt;
  &lt;/DATASET&gt;
  </code></pre>