var showAllPopupsInSamePlace = true;
var stdPopupOffsetX = 20;
var stdPopupOffsetY = 10;
var popupFrontZ = 5;
var popupBackZ = 4;

var currentlyShownPopup = null;
var popupLocked = false;

var idToColIMap = new Array();
idToColIMap[1] = 3;
idToColIMap[2] = 2;
idToColIMap[3] = 3;
idToColIMap[4] = 1;
idToColIMap[5] = 2;
idToColIMap[6] = 3;
idToColIMap[7] = 0;
idToColIMap[8] = 1;
idToColIMap[9] = 2;
idToColIMap[10] = 3;

var idToRowIMap = new Array();
idToRowIMap[1] = 0;
idToRowIMap[2] = 1;
idToRowIMap[3] = 1;
idToRowIMap[4] = 2;
idToRowIMap[5] = 2;
idToRowIMap[6] = 2;
idToRowIMap[7] = 3;
idToRowIMap[8] = 3;
idToRowIMap[9] = 3;
idToRowIMap[10] = 3;

var popups = new Array();

var mainColPadding = 20;
var picW = 150;
var picH = 100;
var picHMargin = 12;
var picHPadding = 10;
var picVMargin = 12;
var popupW = 360;
var popupHOverlap = picHMargin / 2 + 4;
var popupVOverlap = 4;

function populatePopupsArray() {
  popups[1] = myGetElement('pu_1');
  popups[2] = myGetElement('pu_2');
  popups[3] = myGetElement('pu_3');
  popups[4] = myGetElement('pu_4');
  popups[5] = myGetElement('pu_5');
  popups[6] = myGetElement('pu_6');
  popups[7] = myGetElement('pu_7');
  popups[8] = myGetElement('pu_8');
  popups[9] = myGetElement('pu_9');
  popups[10] = myGetElement('pu_10');
}

function hideAllPopups() {
  var i = 0;
  for (i = 1; i <= 10; i++) {
    popups[i].style.visibility = 'hidden';
  }
  currentlyShownPopup = null;
}

function handlePicClick(id) {
  if (popupLocked) {
    var idNum = id.substring(3);
    var newPopupId = "pu_" + idNum;
    var popupForClickedPic = myGetElement(newPopupId);
    if (popupForClickedPic == currentlyShownPopup) {
      hideAllPopups();
      popupLocked = false;
      goToPageForPic(id);
    } else {
      showPopup(newPopupId);
    }
  } else {
    popupLocked = true;
  }
}

function maybeShowPopup(id) {
  if (!popupLocked)
    showPopup(id);
}

function showPopup(id) {
  var popupToShow = myGetElement(id);
  var idNum = id.substring(3);

  var col = myGetElement('main_column');
  var mainColL = col.offsetLeft;
  var mainColT = col.offsetTop;

  if (showAllPopupsInSamePlace) {
    if (popupToShow == currentlyShownPopup)
      return;
    var popupL = mainColL + stdPopupOffsetX;
    var popupT = mainColT + stdPopupOffsetY;
    popupToShow.style.left = popupL;
    popupToShow.style.top = popupT;

    if (currentlyShownPopup == null) {
      popupToShow.style.visibility = 'visible';
    } else {
      var oldH = currentlyShownPopup.offsetHeight;
      var newH = popupToShow.offsetHeight;
      if (oldH > newH) {
        currentlyShownPopup.style.zIndex = popupFrontZ;
        popupToShow.style.zIndex = popupBackZ;
      } else {
        popupToShow.style.zIndex = popupFrontZ;
        currentlyShownPopup.style.zIndex = popupBackZ;
      }
      popupToShow.style.visibility = 'visible';
      currentlyShownPopup.style.visibility = 'hidden';
    }
  } else {
    hideAllPopups();

    var firstColLeft = mainColL + mainColPadding;
    var colI = idToColIMap[idNum];
    var thisColLeft = firstColLeft + colI * (picW + picHMargin);
    var thisColRight = thisColLeft + picW;
    var popupR = thisColRight + popupHOverlap - picHPadding * 2;
    var popupL = popupR - popupW;
    if (popupL < firstColLeft) {
      popupL = firstColLeft - popupHOverlap;
    }

    var firstRowT = mainColT + mainColPadding;
    var rowI = idToRowIMap[idNum];
    var thisRowTop = firstRowT + rowI * (picH + picVMargin);
    var popupT = thisRowTop - popupVOverlap;

    popupToShow.style.left = popupL;
    popupToShow.style.top = popupT;
    popupToShow.style.visibility = 'visible';
  }
  currentlyShownPopup = popupToShow;
}

function maybeHidePopup(e) {
  if (currentlyShownPopup == null) {
    return;
  }
  var x = e.clientX;
  var y = e.clientY;

  var minX = currentlyShownPopup.offsetLeft;
  var minY = currentlyShownPopup.offsetTop;
  var maxX = minX + currentlyShownPopup.offsetWidth;
  var maxY = minY + currentlyShownPopup.offsetHeight;

  if (x < minX || x > maxX || y < minY || y > maxY) {
    currentlyShownPopup.style.visibility = 'hidden';
    currentlyShownPopup = null;
    popupLocked = false;
  }
}

function showToolTip(id) {
  var spanId = 'tts_' + id;
  var span = myGetElement(spanId);
  var spanL = span.offsetLeft;
  var spanW = span.offsetWidth;
  //alert("spanL: " + spanL);
  var spanT = span.offsetTop;
  //alert("spanT: " + spanT);
  var ttId = "tt_" + id;
  var tt = myGetElement(ttId);
  var mc = myGetElement('main_column');
  var mcL = mc.offsetLeft;
  var mcT = mc.offsetTop;
  tt.style.left = mcL + spanL + spanW + 26;
  tt.style.top = mcT + spanT - 6;
  tt.style.display = 'block';
  tt.style.visibility = 'visible';
}

function hideToolTip(id) {
  var ttId = "tt_" + id;
  var tt = myGetElement(ttId);
  tt.style.display = 'none';
}

function goToPageForPic(id) {
}

function getTarget(e) {
  if (document.all) {
    return e.srcElement;
  } else {
    return e.target;
  }
}

function myGetElement(id) {
  if (document.all)
    return document.all[id];
  else
    return document.getElementById(id);
}
function myGetElement(id) {
  if (document.all)
    return document.all[id];
  else
    return document.getElementById(id);
}