var viewer = 'popupViewer';
var port = 'viewPort'
var prodArray1 = [['stacey_placemat.jpg','stacey_napkin.jpg','stacey_setting.jpg'], ['Stacey - Placemat', 'Stacey - Napkin', 'Stacey - Setting']];
var prodArray2 = [['kristen_placemat.jpg','kristen_napkin.jpg','kristen_setting.jpg'], ['Kristen - Placemat', 'Kristen - Napkin', 'Kristen - Setting']];
var prodArray3 = [['erica_placemat.jpg','erica_napkin.jpg','erica_setting.jpg'], ['Erica - Placemat', 'Erica - Napkin', 'Erica - Setting']];
var galArray1 = [['mshuntley.jpg','msspillane.jpg','mswoodhouse.jpg'], ['My Jane\'s - Ms. Huntley','My Jane\'s - Ms. Spillane','My Jane\'s - Ms. Woodhouse']];
var galArray2 = [['anna.jpg','barbara.jpg','carol.jpg'], ['Tea & Tulips - Anna','Tea & Tulips - Barbara','Tea & Tulips - Carol']];
var galArray3 = [['gracey.jpg','kylie.jpg','molls.jpg'], ['Netty\'s Bouquet - Gracey','Netty\'s Bouquet - Kylie','Netty\'s Bouquet - Molls']];
var currentAry = null;
var currentImg = -1;
function showPopout(bShow, y, x, ary, idx) {
  var viewEl = document.getElementById(viewer);
  var portEl = document.getElementById(port);
  var nameEl = document.getElementById("productName");
  currentAry = ary;
  currentImg = idx;
  if (bShow){
    portEl.src = '';
    portEl.src = imagePath + ary[0][idx];
    viewEl.style.left = x + 'px';
    viewEl.style.top = y + 'px';
    nameEl.innerText = nameEl.textContent = ary[1][idx]
    viewEl.style.display='block';
  }
  else
  {
    viewEl.style.display='none';
  }
  return 0;
}
function scrollImage(dir){
  portEl = document.getElementById(port);
  nameEl = document.getElementById("productName");
  if(dir == 'next'){
    if(currentImg == (currentAry[0].length - 1))
      currentImg = -1;     
    portEl.src = imagePath + currentAry[0][++currentImg];
  }
  else
  {
    if(currentImg == 0)
      currentImg = currentAry[0].length;
    portEl.src = imagePath + currentAry[0][--currentImg];
  }
  nameEl.innerText = nameEl.textContent = currentAry[1][currentImg]
}

function doSomething() {
  alert('doing something');
}