// -=-=-=-=-=-=-=-=

function showCollectionMatrix() {
  // show a collection matrix of primary products for selection
  var availwidth = document.getElementById('collectiontext').offsetWidth;
  var thumbhgap = 20; thumbvgap = 26;
  var thumbcols = 4;
  var thumbwidth_default = 160; thumbheight_default = 134;
  var initleftpos = 50;
  var leftpos = initleftpos;
  var toppos = 64;

  var thumbwidth = ((availwidth - 2 * (initleftpos-1)) - ((thumbcols - 1) * thumbhgap) ) / thumbcols;
  var thumbheight = thumbheight_default * thumbwidth / thumbwidth_default;

  for (var j = 0; j < ProductMain.length; j++)
  {
    var prodselix = ProductMainIndex[j];
    if (prodselix >= 0)
    {
      var prodname = ProductMain[j];
      document.write( "<div class=\"collmatrixsel\" style=\"left: "
                    + leftpos + "px; top: "
                    + toppos + "px; width: "
                    + (thumbwidth + thumbhgap) + "px;\">");

      document.write( "<a class=\"imglink\"" // + " onClick=\"gotoProduct(" + prodselix + ",false); return false;\""
                    + " href=\"" + catalogURL(prodselix,false) + "\">");
      document.write( "<img class=\"collmatrixpic\"" 
                   +  " onError=\"this.src=\'" + prodfillsrc + "\';\" "
                   +  " width=\"" + thumbwidth + "\" height=\"" + thumbheight + "\""
                   +  " alt=\"" + prodname + "\" src=\"products/thumb160_"
                      + prodname + ".jpg\""
                   + ">" );
      document.write( "</a>");

      document.write( "<a class=\"collmatrixlink\"" // + " onClick=\"gotoProduct(" + prodselix + ",false); return false;\""
                    + " href=\"" + catalogURL(prodselix,false) + "\">");
      document.write( "<div class=\"collmatrixcaption\">" + prodname + "</div>");
      document.write( "</a>");
      document.write( "</div>");

      leftpos += thumbwidth + thumbhgap;
      if (((j + 1) % thumbcols) == 0)
      {
        leftpos = initleftpos;
        toppos += thumbheight + thumbvgap;
      } 
    }
  }
}