projIndex = imgArray.length/2;
scrollMin = 3;

function scrollImage (scrollDir) {
  if (projIndex <= scrollMin) return;

  if (scrollDir == 0) {
    imgAtHigh = projIndex-2;
    imgAtTop = projIndex-1;
    imgAtMid = 0;
    imgAtBot = 1;
    imgAtLow = 2;
  }
  else if (scrollDir != 999){
    imgAtHigh += scrollDir;
    imgAtTop += scrollDir;
    imgAtMid += scrollDir;
    imgAtBot += scrollDir;
    imgAtLow += scrollDir;
    if (imgAtHigh >= projIndex || imgAtHigh < 0) imgAtHigh -= (projIndex*scrollDir);
    if (imgAtTop >= projIndex || imgAtTop < 0) imgAtTop -= (projIndex*scrollDir);
    if (imgAtMid >= projIndex || imgAtMid < 0) imgAtMid -= (projIndex*scrollDir);
    if (imgAtBot >= projIndex || imgAtBot < 0) imgAtBot -= (projIndex*scrollDir);
    if (imgAtLow >= projIndex || imgAtLow < 0) imgAtLow -= (projIndex*scrollDir);
  }

  document.imghi.src = imgArray[imgAtHigh*2];
  document.imgtop.src = imgArray[imgAtTop*2];
  document.middle.src = imgArray[imgAtMid*2];
  document.bottom.src = imgArray[imgAtBot*2];
  document.imglow.src = imgArray[imgAtLow*2];

  displayDes (imgAtMid);
}

function selectTheImage (imgSelect) {
  newPath = imgArray[imgSelect*2].replace(".jpg", ".htm");
  window.location = newPath;
}

function displayDes (tPos) {
  if (tPos == 0) {
    nPos = 0;
  }
  else {
    nPos = (tPos * 122) * -1;
  }
  var elt = getElt ("display", "textbox");
  setEltTop (elt, nPos)
}

function createLayout () {
  document.writeln (headerText);
  document.writeln (introText);
  document.writeln ("<table width=700>");
  
  if (projIndex <= scrollMin) {
    for (imgNo = 0; imgNo < projIndex; ++imgNo) {
      document.writeln("<tr><td height=120 align=center valign=middle width=200><a href='javascript:selectTheImage("+imgNo+")'><img alt='' src='"+imgArray[imgNo*2]+"' width=120 height=90 border=0></a></td>");
      document.writeln("<td valign=middle><div align=left class='smaller'>"+imgArray[(imgNo*2)+1]+"</div></td></tr>");
    }
  }

  else {
    document.writeln ("<tr height=20><td align=center width=200><a href=\"javascript:scrollImage(1)\"><img src=../Support/up-arrow.gif width=60 border=0></a></td><td width=500></td></tr>");
    document.writeln ("<tr height=60><td align=center valign=middle><a href=\"javascript:selectTheImage(imgAtHigh)\"><img src=./Images/blank.jpg border=0 width=60 height=45 name=imghi></a></td><td></td></tr>");
    document.writeln ("<tr height=80><td align=center valign=middle><a href=\"javascript:selectTheImage(imgAtTop)\"><img src=./Images/blank.jpg border=0 width=80 height=60 name=imgtop></a></td><td></td></tr>");
    document.writeln ("<tr height=120><td align=center valign=middle><a href=\"javascript:selectTheImage(imgAtMid)\"><img src=./Images/blank.jpg name=middle width=120 height=90 border=0></a></td>");
    document.writeln ("<td valign=center>");
    document.writeln ("<DIV ID=\"display\" CLASS=\"transback\"><TABLE WIDTH=500 HEIGHT=120 CLASS=\"transback\"><TR><TD> </TD></TR></TABLE>");

    document.writeln ("<DIV ID=\"textbox\" CLASS=\"transback\"><TABLE WIDTH=500 CELLPADDING=0 BORDER=0 CLASS=\"transback\">");

    for (imgNo = 0; imgNo < projIndex; ++imgNo) {
      document.writeln ("<TR><TD HEIGHT=120 valign=middle><div class='smaller'>"+imgArray[(imgNo*2)+1]+"</div></TD></TR>");
    }

    document.writeln ("<TR><TD HEIGHT=120> </TD></TR></TABLE></DIV>");

    document.writeln ("</TD></TR></DIV>"); 
    document.writeln ("</td></tr>");
    document.writeln ("<tr height=80><td align=center valign=middle><a href=\"javascript:selectTheImage(imgAtBot)\"><img src=./Images/blank.jpg border=0 width=80 height=60 name=bottom></a></td><td></td></tr>");
    document.writeln ("<tr height=60><td align=center valign=middle><a href=\"javascript:selectTheImage(imgAtLow)\"><img src=./Images/blank.jpg border=0 width=60 height=45 name=imglow></a></td><td></td></tr>");
    document.writeln ("<tr height=20><td align=center><a href=\"javascript:scrollImage(-1)\"><img src=../Support/down-arrow.gif width=60 border=0></a></td><td></td></tr>");
  }

  document.writeln ("</table>");
  scrollImage(0);

}


/* The following code has been extracted from 
   xbdhtml.js (Cross-Browser Nav4/Gecko/IE DHTML API) 
   14 May 98, Eric Krock, Copyright Netscape Communications.
*/


/* This is a simplified version of the JavaScript Client Sniffer code 
   found at http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html.
   The check for 'gecko' has been amended to allow for the Opera browser
*/

function Is () {   
  // convert all characters to lowercase to simplify testing
  var agt=navigator.userAgent.toLowerCase()

  // --- BROWSER VERSION ---
  this.major = stringToNumber(navigator.appVersion)
  this.minor = parseFloat(navigator.appVersion)

  this.nav  = ((agt.indexOf('mozilla')!=-1) && ((agt.indexOf('spoofer')==-1)
              && (agt.indexOf('compatible') == -1)))
  this.nav2 = (this.nav && (this.major == 2))
  this.nav3 = (this.nav && (this.major == 3))
  this.nav4 = (this.nav && (this.major == 4))
  this.nav5 =	(this.nav && (this.major == 5))
  this.nav6 = (this.nav && (this.major == 5))

  this.ie   = (agt.indexOf("msie") != -1)
  this.ie3  = (this.ie && (this.major == 2))
  this.ie4  = (this.ie && (this.major == 3))
  this.ie5  = (this.ie && (this.major == 4))

  this.gecko = (agt.indexOf("gecko") != -1)

  this.opera = (agt.indexOf("opera") != -1)
     
  this.nav4up = this.nav && (this.major >= 4)
  this.ie4up  = this.ie  && (this.major >= 4)
}


var is = new Is();

/* CALLING SYNTAX: each Name is a string which is an element's 
   ID attribute value or a LAYER tag's NAME attribute value.

   getElt (topLevelElementName, childElementName, grandchildElementName ...
                 targetElementName)

   Example of getting a top-level element: 
   var fooElement = getElt ("foo")

   Example of getting a nested element: 
   var fooElement = getElt ("bar", "baz", "foo")
   ... where baz is foo's containing parent, and bar is a top-level 
       element which is baz's containing parent.
*/

function getElt () 
{ if (is.nav4)
  {
    var currentLayer = document.layers[getElt.arguments[0]];
    for (var i=1; i<getElt.arguments.length && currentLayer; i++)
    {   currentLayer = currentLayer.document.layers[getElt.arguments[i]];
    }
    return currentLayer;
  } 
  else if(document.getElementById && document.getElementsByName)
  { 
    var name = getElt.arguments[getElt.arguments.length-1];
    if(document.getElementById(name))                      //First try to find by id
       return document.getElementById(name);
    else if (document.getElementsByName(name))             //Then if that fails by name
	   return document.getElementsByName(name)[0];
  }
  else if (is.ie4up) {
    var elt = eval('document.all.' + getElt.arguments[getElt.arguments.length-1]);
    return(elt);
  }
}

/* Sets top edge of elt in pixels. */
function setEltTop (elt, y) 
{ if (is.nav4)     elt.top=y;
  else if (is.ie4up) elt.style.pixelTop=y;
  else if (is.opera) elt.style.pixelTop=y;
  else if (is.gecko) elt.style.top= (y + "px");
}

/* A version of stringToNumber that returns 0 if there is NaN returned, or number is part of a string, like 100px... */
function stringToNumber(s)
{
        return parseInt(('0' + s), 10)
}