// resize popup window to fit image
function ResizeToFit(dlg, picHeight, picWidth) {
 var imgWidth;
 var imgHeight;
 imgWidth = picWidth + 60; 
 imgHeight = picHeight + 145;
 dlg.resizeTo(imgWidth, imgHeight);
}

// build popup window
//function mssDisplayImages(img, name, width, height){
function mssDisplayImages(num, name, width, height){
  showBigImage(num);
 /*var newid = 'hiddenim'+num;
 var obj = document.getElementById(newid);
 if (!obj) return;
 obj.style.display='block';*/
}

function mssSwitchImages(num, bigImg, name, width, height) {
  // image array: mssMultiImages[]
  var lnkID = 'prodlnk';
  var imgID = 'prodimg';
  var lnk = document.getElementById(lnkID);
  var img = document.getElementById(imgID);
  if (!(lnk && img)) {return;}
  if (!( mssMultiImages && (num>=0) && (num<mssMultiImages.length) )) {return;}
  var newImg = mssMultiImages[num];
  var newLnk = "mssDisplayImages("+num+", '"+(name.replace(/^\s\s*/, '').replace(/\s\s*$/, '').replace('\'', '\\'))+"', '"+width+"', '"+height+"');";
  img.src = newImg.src;
  lnk.onclick=function(){}
  lnk.href="javascript:"+newLnk;
}

// Functions to control the big zoomed image

function hideBigImage() {
  var imholder = document.getElementById('hiddenim');
  if (!imholder) return;
  imholder.style.display='none';
}

function switchBigImage(num) {
  var bigImg = document.getElementById('bigImage');
  if (!bigImg) return;
  if (mssBigImages.length <= num) return;
  
  var newImg = mssBigImages[num];
  bigImg.src = newImg.src;
  
}

function showBigImage(num) {
  var imholder = document.getElementById('hiddenim');
  if (!imholder) return;
  switchBigImage(num);
  imholder.style.display='block';
  
  //var holdingCell = document.getElementById('bigImageHolder');
  var bigImageTable = document.getElementById('bigImageTable');
  var maxWidth = 0;
  var maxHeight = bigImageTable.offsetHeight;
  for (var i=0; i<mssBigImages.length; i++) {
    maxWidth = (mssBigImages[i].width > maxWidth) ? mssBigImages[i].width : maxWidth;
    maxHeight = (mssBigImages[i].height > maxHeight) ? mssBigImages[i].height : maxHeight;
  }
  //holdingCell.style.width = maxWidth + 'px';
  bigImageTable.style.width = (maxWidth + 92) + 'px';  
  bigImageTable.style.height = (maxHeight) + 'px';

}

var numBigImagesLoaded = 0;

function makeThumbs() {
  function addAndCheck() {
    window.numBigImagesLoaded++;
    //alert('addAndCheck count: '+window.numBigImagesLoaded+' of '+mssBigImages.length);    
    if (numBigImagesLoaded==mssBigImages.length) {makeThumbsReal();}
  }
    
  for (var i=0; i<mssBigImages.length; i++) {
    mssBigImages[i].onload = addAndCheck;
    mssBigImages[i].src = mssBigImages[i].src;
  } 
}

function makeThumbsReal() {
  var thumbMaxWidth = 80;
  var thumbMaxHeight = 55;
  var thumbHeight, thumbWidth; 
  var thumbHolder = document.getElementById('thumbsHolder');
  if (!thumbHolder) return;
  for (var i=0; i<mssBigImages.length; i++) {
    var elem = document.createElement('img');
    elem.setAttribute('src', mssBigImages[i].src);
    
    // figure out which axis is the limiting factor:
    var heightWidthRatio = mssBigImages[i].height / mssBigImages[i].width;
    var maxHeightWidthRatio = thumbMaxHeight / thumbMaxWidth;
    if (heightWidthRatio > maxHeightWidthRatio) {
      // height is the limiting factor
      thumbHeight = thumbMaxHeight;
      thumbWidth = Math.round(thumbHeight / heightWidthRatio);
    } else {
      // width is the limiting factor
      thumbWidth = thumbMaxWidth;
      thumbHeight = Math.round(thumbWidth * heightWidthRatio);
    }
    elem.setAttribute('width', thumbWidth);
    elem.setAttribute('height', thumbHeight);
    elem.style.display='block';
    elem.onmouseover = retrieveChangeFunction(i);
    thumbHolder.appendChild(elem);
  }
}

function retrieveChangeFunction(num) {
  return function() {
    switchBigImage(num);
  }
}