function preloadImg(sImg) {
   var oImg = new Image();
   oImg.src = sImg;
}
function preloadAll() {
   for (var i=0; i<iCount; i++) {
      var sImg = getImgPath(i);
      preloadImg(sImg);
   }
}
function getImgPath(iNum) {
   iNum = iNum + 1; // Images named 1-based, iNum is zero-based
   var sNum = iNum < 10 ? '0' + iNum : iNum;
   return sBaseImg.replace('%n',sNum);
}
function diagramReset() {
   iIndex = 0;
   diagramShow(iIndex);
}
function diagramShowAll() {
   iIndex = aAreas.length - 1;
   diagramShow(iIndex, true);
}
function diagramPrevious() {
   if (iIndex > 0) {
      iIndex--;

      if (iIndex == 0)
         diagramReset();
      else
         diagramShow(iIndex);
   }
}
function diagramNext() {
   if (iIndex < aAreas.length - 1) {
      iIndex++;
      diagramShow(iIndex);
   }
}
function diagramShow(iNum, bHideBalloon) {
   var oProc = document.getElementById('diagram');
   if (oProc) {
      var oInfo = document.getElementById('diagramInfo');
      var oDesc = document.getElementById('diagramDesc');
      oProc.style.position = "relative"; // Essential for relative co-ords!
      if (oProc != null && oInfo != null & oDesc != null) {
         var aInfo = oInfo.getElementsByTagName('LI');
         var iSlide = aAreas[iNum][0];
         var sImage = getImgPath(iSlide);
         var sStyle = "url('%p') no-repeat".replace('%p',sImage);
         while (oDesc.childNodes.length > 0)
            oDesc.removeChild(oDesc.childNodes[0]);
         if (iNum == 0) {
            for (var i=0; i<aInfo[iNum].childNodes.length; i++) {
               oDesc.appendChild(aInfo[iNum].childNodes[i].cloneNode(true));
            }
         }
         else {
            //var oH3 = aInfo[0].getElementsByTagName('H3')[0];
            //oDesc.appendChild(oH3.cloneNode(true));
            var oH4 = aInfo[0].getElementsByTagName('H4')[0];
            oDesc.appendChild(oH4.cloneNode(true));
            var sSlide = '%n of %c';
            sSlide = sSlide.replace('%n',iIndex);
            sSlide = sSlide.replace('%c',aAreas.length - 1);
            var oNum = document.createElement('P');
            oNum.className = 'slide-num';
            oNum.appendChild(document.createTextNode(sSlide));
            oDesc.appendChild(oNum);
         }
         oProc.style.background = sStyle;
         if (iNum > 0 && !bHideBalloon) {
            var iRight = aAreas[iNum][3];
            var iTop = aAreas[iNum][2];
            diagramBalloon(iNum,iRight,iTop);
         }
         else
            diagramClose();
         diagramButtons(iNum);
      }
   }
}
function diagramButtons(iNum) {
   var bHasPrev = iNum > 0;
   var bHasNext = iNum < aAreas.length - 1;

   var oBReset = document.getElementById('diagramBReset');
   var oBShowAll = document.getElementById('diagramBShowAll');
   var oBPrev = document.getElementById('diagramBPrev');
   var oBNext = document.getElementById('diagramBNext');

   oBReset.disabled = !bHasPrev;
   oBShowAll.disabled = !bHasNext;
   oBPrev.disabled = !bHasPrev;
   oBNext.disabled = !bHasNext;

   oBReset.src = bHasPrev ?
      '/Images/Diagrams/Buttons/reset.gif' :
      '/Images/Diagrams/Buttons/reset_roll.gif';

   oBShowAll.src = bHasNext ?
      '/Images/Diagrams/Buttons/show_all.gif' :
      '/Images/Diagrams/Buttons/show_all_roll.gif';

   oBPrev.src = bHasPrev ?
      '/Images/Diagrams/Buttons/prev.gif' :
      '/Images/Diagrams/Buttons/prev_roll.gif';

   oBNext.src = bHasNext ?
      '/Images/Diagrams/Buttons/next.gif' :
      '/Images/Diagrams/Buttons/next_roll.gif';

   diagramBSetCursor(oBReset);
   diagramBSetCursor(oBShowAll);
   diagramBSetCursor(oBPrev);
   diagramBSetCursor(oBNext);
}
function diagramBOver(oButton, sImgRoll) {
   oButton.src = '/Images/Diagrams/Buttons/' + sImgRoll;
   diagramBSetCursor(oButton);
}
function diagramBOut(oButton, sImg, sImgRoll) {
   oButton.src = '/Images/Diagrams/Buttons/' +
      (oButton.disabled ? sImgRoll : sImg);
   diagramBSetCursor(oButton);
}
function diagramBSetCursor(oButton) {
   oButton.style.cursor =
      (oButton.disabled ? 'auto' : 'pointer');
}

function diagramGetArea(e) {
   var iX = (typeof(window.event) != "undefined") ?
      e.offsetX : e.layerX;
   var iY = (typeof(window.event) != "undefined") ?
      e.offsetY : e.layerY;
   var iArea =
      -1;
   for (var i=0; i<aAreas.length; i++) {
      if (aAreas[i][0] <= iIndex) {
         if (
            iX >= aAreas[i][1] &&
            iY >= aAreas[i][2] &&
            iX <= aAreas[i][3] &&
            iY <= aAreas[i][4]
         ) {
            iArea = i;
            break;
         }
      }
      else
         break;
   }
   return iArea;
}

function diagramMove(e) {
   var oSrc;
   if (typeof(window.event) != "undefined") {
      e = window.event;
      oSrc = e.srcElement;
   }
   else {
      oSrc = e.target;
   }
   var intN = diagramGetArea(e);
   var oProc = document.getElementById('diagram');
   oProc.style.cursor =
      intN != -1 ? 'pointer' : 'auto';
}
function diagramClick(e) {
   if (typeof(window.event) != "undefined")
      e = window.event;
   var iNum = diagramGetArea(e);
   if (iNum != -1) {
      var iRight = aAreas[iNum][3];
      var iTop = aAreas[iNum][2];
      diagramBalloon(iNum, iRight, iTop);
   }
}
function diagramBalloon(intN, iX, iY) {
   if (intN != -1) {
      // Adjust to place balloon closer to icon
      iY += 20;
      iX -= 20;
   	var oInfo =
         document.getElementById('diagramInfo');
      var oInfoLI =
         oInfo.getElementsByTagName('LI')[intN];
   	var oBalloon =
         document.getElementById('diagramBalloon');
      var oBalloonP =
         oBalloon.getElementsByTagName('P')[0];
      for (var iChild=0; iChild<oBalloonP.childNodes.length; iChild++)
         oBalloonP.removeChild(oBalloonP.childNodes[0]);
      for (var iChild=0; iChild<oInfoLI.childNodes.length; iChild++)
         oBalloonP.appendChild(oInfoLI.childNodes[iChild].cloneNode(true));
      oBalloon.style.display = 'block';
      oBalloon.style.position = 'absolute';
      oBalloon.style.left = iX + 'px';
      oBalloon.style.top = (iY - oBalloon.clientHeight) + 'px';
   }
   else {
      diagramClose();
   }
}
function diagramClose() {
   document.getElementById('diagramBalloon').style.display = 'none';
}
function diagramX (e) {
   var iX = typeof(window.event) != "undefined" ?
      window.event.pageX : e.clientX + document.body.scrollLeft
   	  + document.documentElement.scrollLeft;
   return iX;
}
function diagramY (e) {
   var iY = typeof(window.event) != "undefined" ?
      window.event.pageY : e.clientY + document.body.scrollTop
   	  + document.documentElement.scrollTop;
   return iY;
}

window.onload = diagramReset;