// work out what the new product ID should be based on the newly selected dimensions..
function selectDimension(number, nCount, selectedValue, boolFirstTime) {
  var nNewProductID = selectedValue; // default at current..
  arySelected[number] = arrMatrix[selectedValue]['componentdetail'+number];
  for(var nProductID in arrMatrix) {
    nDim = 1;
    while (arrMatrix[nProductID]['componentdetail'+nDim] == arySelected[nDim]) {
        if (nDim == nCount) {
          nNewProductID = nProductID;
          break;
        } 
        nDim++;
    }
  }
  populateSelect(number, nCount, nNewProductID, boolFirstTime);
}

function getDimensionImage(nProductID, nDimension, bSelected) {
  var sImageName = '';
  
  if (nDimension == 1) { // color dimension only: using exact name for now!
    sImageName = arrMatrix[nProductID]['product_weblinxcustomtext1'].toString();
  } else { // size and third dimension (currently not used)
    var sDimensionValue = arrMatrix[nProductID]['componentdetail'+nDimension].toString().toLowerCase();
  
    for(var n=0;n<sDimensionValue.length;n++) {
      nChar = sDimensionValue.charCodeAt(n);
      if (
        (nChar >= 97 && nChar <= 122) // a-z
        ||
        (nChar >= 48 && nChar <= 57) // 0-9
        ) {
        sImageName += sDimensionValue.charAt(n);
      }
    }

    var sImageState = '1'; // default = normal/not selected
    if (arrMatrix[nProductID]['product_stock'] <= 0)
      sImageState = '0';
    else if (bSelected)
      sImageState = '2';
    
    sImageName += "-"+sImageState+".gif";
  }

  return "/images/matrix/"+sImageName;
}

function displayImage() {
  arrOptions['dimension'+nDim][ sDimensionValue ] = nProductID;        
  var objAttribute = nsc("<img src=\""+getDimensionImage(nProductID, nDim, bDimensionIsSelected)+"\" onclick=\"selectDimension("+nDim+","+nCount+", "+nProductID+", false)\" width=\"23\" height=\"25\"/>");
   
  objAttribute.attr({ 
    title: sDimensionValue,
    alt: sDimensionValue
  });
  
  if (bDimensionIsSelected) {
    arySelected[ nDim ] = sDimensionValue;
    objTable.find('#selecteddimension-'+nDim).text(sDimensionValue);
    objAttribute.attr("class", "selected");
   }
  
  objContent.append( objAttribute );
}
function populateSelect(number,nCount,selectedValue,boolFirstTime) {

  // hide our old dropdowns..
  nsc('#matrixitemoptions').hide();
  // remove our new matrix selector table (if it exists)
  nsc('#matrixselector').remove();

  // build the selected dimensions array if it's empty..
  if (arySelected.length == 0) 
    for(var i = 1;i<=nCount;i++) 
      arySelected[ i ] = arrMatrix[selectedValue]['componentdetail'+i];

  var aryDone = new Array();
  var aryIndex = new Array();
  var aryDone = new Array();
  var nProductId = 0;
  var arrOptions = {};
  var objTable = nsc('<table id=\"matrixselector\" />');
  for(var nDim =1;nDim<=nCount;nDim++) {
    objTable.append("<tr><th><span id=\"dimension-"+nDim+"\"></span><span id=\"selecteddimension-"+nDim+"\" /></tr>");
    objTable.find("#dimension-"+nDim).html( nsc('#matrixtitle'+nDim).text() );

    arrOptions['dimension'+nDim] = {};
    var sDimensionName = nsc('#matrixtitle').text();
    var objRow = nsc("<tr>").attr("class", sDimensionName);
    objRow.append("<td>");
    var objContent = objRow.find("td").eq(0);
    for (var nProductID in arrMatrix) {
      var sDimensionValue = arrMatrix[ nProductID ]['componentdetail'+nDim];
      var bDimensionIsSelected = (arrMatrix[selectedValue]['componentdetail'+nDim] == sDimensionValue);
       var sColor = arrMatrix[ nProductID ]['product_weblinxcustomtext3'];
      if ((bDimensionIsSelected && nProductID == selectedValue) || (!bDimensionIsSelected && !arrOptions['dimension'+nDim][ sDimensionValue ])) {
 
        // print all my colors
        if(nDim == 1) {
          arrOptions['dimension'+nDim][ sDimensionValue ] = nProductID;        
          var objAttribute = nsc("<img src=\""+getDimensionImage(nProductID, nDim, bDimensionIsSelected)+"\" onclick=\"selectDimension("+nDim+","+nCount+", "+nProductID+", false);selectVariation('"+sColor+"')\" width=\"23\" height=\"25\"/>");
   
          objAttribute.attr({ 
            title: sDimensionValue,
            alt: sDimensionValue
          });
          if (bDimensionIsSelected) {
            arySelected[ nDim ] = sDimensionValue;
            objTable.find('#selecteddimension-'+nDim).text(sDimensionValue);
            objAttribute.attr("class", "selected");
          }
          objContent.append( objAttribute );
        }
        
        // only print my sizes if we are in the same group of selected colors
        if(nDim > 1 && arrMatrix[selectedValue]['componentdetail1'] == arrMatrix[nProductID]['componentdetail1']) {
          arrOptions['dimension'+nDim][ sDimensionValue ] = nProductID;        
          var objAttribute = nsc("<img src=\""+getDimensionImage(nProductID, nDim, bDimensionIsSelected)+"\" onclick=\"selectDimension("+nDim+","+nCount+", "+nProductID+", false);selectVariation('"+sColor+"')\" width=\"23\" height=\"25\"/>");
   
          objAttribute.attr({ 
            title: sDimensionValue,
            alt: sDimensionValue
          });
          if (bDimensionIsSelected) {
            arySelected[ nDim ] = sDimensionValue;
            objTable.find('#selecteddimension-'+nDim).text(sDimensionValue);
            objAttribute.attr("class", "selected");
          }
          objContent.append( objAttribute );
        }
      }
    }

    // if dimension name != size.. then sort it
     if (nDim != 2) {
      var objDimensions = objRow.find("img").get();
      objDimensions.sort(function(a,b) { 
        var keyA = nsc(a).attr("title").toUpperCase()
        var keyB = nsc(b).attr("title").toUpperCase()
        if (keyA < keyB) return -1
        if (keyA > keyB) return 1
        return 0
      });
      objContent.empty().append(objDimensions);
    } 

    objTable.append(objRow);
  }
  nsc('#matrixitemoptions').after( objTable );

  triggerProductChanged(selectedValue);
}