////////////////////////////////////////////////
//
// Thumbnail picture handling functions
// for Imp In A Box...
//
// this fle needs the following values, defined here or
// commented out and defined in the calling html file...
   var sThumbPrefix = "thm";   // also suffix for filenames
   var sThumbClass  = "thumb";
//    var sImageFolder = "photos/website/";
//
// you can also comment out the following line and put it in the
// html file too if you want a different file extension, eg .gif
   var sPicFileExt = ".jpg";
//
// the following arrays should also be filled in the html file
// with the base file names of the picture files and the title/alt
// text for each pic.  The picture file extension should be left
// off and the thumbnail matching each pic file should be named
// after the pic file but with "_thm" appended, eg
// picfile.jpg and pcifile_thm.jpg - array entry is just picfile
// main photo filename & title array...
var arrPics = new Array();
var arrTitles = new Array();
var arrDescns = new Array();
//

////////////////////////////////////////////////
//
// showSelectedPic() is the onclick handler for the
// thumbnail image links...
//
// nPicId: id suffix for this thumbnail pic link
//         eg. 01, 02... for thm01, thm02 etc
//
function showSelectedPic(nPicId)
  {
  // clear current timer setting...
  clearTimeout(tmrMainPic);
  // get path of file to load...
  var sPicFile = "";
  var elThm = document.getElementById(sThumbPrefix+nPicId);
  var nLen = elThm.src.length;
  sPicFile = elThm.src.substr(0, nLen - 8);
  sPicFile +=  elThm.src.substr(nLen - 4, 4);
  // set it as the current pic...
  crntPic = nPicId;
  // and go switch it in...
  var el = document.getElementById("mainpic");
  el.src = sPicFile;
  // change the title text too...
  el = document.getElementById("title");
  if (el)
    el.innerHTML = arrTitles[crntPic];
  // and the description...
  el = document.getElementById("descn");
  if (elc)
    el.innerHTML = arrDescns[crntPic];
  }

////////////////////////////////////////////////
//
// fadeSelectedPic() is the onclick handler for the
// thumbnail image links...
//
// nPicId: id suffix for this thumbnail pic link
//         eg. 1, 2... for thm1, thm2 etc
//
function fadeSelectedPic(nPicId)
  {
  // clear current timer setting...
  clearTimeout(tmrMainPic);
  // get path of file to load...
  var elThm = document.getElementById(sThumbPrefix+nPicId);
  var nLen = elThm.src.length;
  var sPicFile = elThm.src.substr(0, nLen - 8);
  sPicFile +=  elThm.src.substr(nLen - 4, 4);
  // set it as the current pic...
  crntPic = nPicId;
  // and go fade it in...
  fadePic(sPicFile, arrTitles[crntPic], arrDescns[crntPic]);
  }

//
// drawThumbnailArray()
//
// draws the array of thumbnails into the page
// call at the point where thumbnails should appear
//
function drawThumbnailArray()
  {
  for (var i = 0; i < arrPics.length; i++)
    {
    if (arrPics[i] != "")
      document.write("<a onclick='return fadeSelectedPic(" + i + ");'><img id='" + sThumbPrefix + i + "' src='" + getThumbFile(i) + "' alt='" + getTitle(i) +  "' title='" + getTitle(i) + "'></a>");
    }
  }


function getThumbFile(ndx)
  {
  return sImageFolder + arrPics[ndx] + "_" + sThumbPrefix + sPicFileExt;
  }

function getTitle(ndx)
  {
  return arrTitles[ndx];
  }

function getDescn(ndx)
  {
  return arrDescns[ndx];
  }
//
/// end of file ////////////////////////////////
/////////////////////////////////////////////////////////
//
// Photo fade/dissolve and control handler
//
// pre-cache control and rollover images...
var ctrlsLo = new Object();      // resting buttons
var ctrlsHi = new Object();      // mouse over button

if (document.images)
  {
  ctrlsLo["ctrlprev"] = new Image(17, 15);   // menu images - normal
  ctrlsLo["ctrlprev"].src = "imgs/ctrlprev_0.gif";
  ctrlsLo["ctrlpause"] = new Image(15, 15);
  ctrlsLo["ctrlpause"].src = "imgs/ctrlpause_0.gif";
  ctrlsLo["ctrlplay"] = new Image(16, 15);
  ctrlsLo["ctrlplay"].src = "imgs/ctrlplay_0.gif";
  ctrlsLo["ctrlnext"] = new Image(17, 15);
  ctrlsLo["ctrlnext"].src = "imgs/ctrlnext_0.gif";

  ctrlsHi["ctrlprev"] = new Image(17, 15);   // menu images - highlight
  ctrlsHi["ctrlprev"].src = "imgs/ctrlprev_1.gif";
  ctrlsHi["ctrlpause"] = new Image(15, 15);
  ctrlsHi["ctrlpause"].src = "imgs/ctrlpause_1.gif";
  ctrlsHi["ctrlplay"] = new Image(16, 15);
  ctrlsHi["ctrlplay"].src = "imgs/ctrlplay_1.gif";
  ctrlsHi["ctrlnext"] = new Image(17, 15);
  ctrlsHi["ctrlnext"].src = "imgs/ctrlnext_1.gif";
  }

function setImage(name, state)
  {
  if (document.images)
    {
    if (state == 'hi')
      {
      document.images[name].src = ctrlsHi[name].src;
      return true;
      }
    else if (state == 'lo')
      {
      document.images[name].src = ctrlsLo[name].src;
      return true;
      }
    }
  return false;
  }

// next pic in cycle...
var nextPic = new Image(728, 448);
// working vars for fade/dissolve...
var dwellTime = 4000;
var crntPic = 0;
var tmrMainPic = 0;
var tmrFade = 0;
var mainPic;
var auxPic;

////////////////////////////////////////
//
// ctrl(code)
//
// Show the selected picture depending on
// which control was clicked...
//
function ctrl(code)
  {
  // clear current timer setting...
  clearTimeout(tmrMainPic);
  // calc which pic is next...
  switch (code)
    {
    case -1:
    case 1:
      crntPic = calcNextPic(code);
      break;

    case 0:
      break;

    case 2:
      setTimeout("playNextPic()", 750);
      return;
    }
  //dbg alert("ctrl("+code+"), crntPic="+crntPic);
  fadePic(sImageFolder + arrPics[crntPic] + sPicFileExt, arrTitles[crntPic], arrDescns[crntPic]);
  }

////////////////////////////////////////
//
// waitThenPlayNextPic()
//
// set timer to call playNextPic() in a little while...
//
function waitThenPlayNextPic(waitTime)
  {
  // set timer to fade pic in a bit...
  tmrMainPic = setTimeout('playNextPic()', waitTime);
  // pre-load next pic into browser cache ready...
  var next = calcNextPic(1);
  nextPic.src = sImageFolder + arrPics[next] + sPicFileExt;
  }

////////////////////////////////////////
//
// playNextPic()
//
// show the next picture and set timer to
// do it again in a wee while...
//
function playNextPic()
  {
  //alert("playNextPic(), crntPic="+crntPic);
  // fade into next picture...
  crntPic = calcNextPic(1);
  fadePic(sImageFolder + arrPics[crntPic] + sPicFileExt, arrTitles[crntPic], arrDescns[crntPic]);
  // set timer to do it again...
  tmrMainPic = setTimeout('playNextPic()', dwellTime);
  // pre-load next pic into browser cache ready...
  var next = calcNextPic(1);
  nextPic.src = sImageFolder + arrPics[next] + sPicFileExt;
  }

////////////////////////////////////////
//
// calcNextPic()
//
// determine which pic will be shown next
// depending on which direction we're going.
// +1 forwards, -1 backwards, 0 stop...
//
function calcNextPic(dir)
  {
  var next = crntPic;
  switch (dir)
    {
    case -1:
      next--;
      if (next < 0)
        next = arrPics.length - 1;
      break;

    case 1:
      next++;
      if (next >= arrPics.length)
        next = 0;
      break;

    default:
      break;
    }
  return next;
  }

////////////////////////////////////////
//
// fadePic(sPicFile)
//
// dissolve to the specified pic by creating a new
// picture (aux) at zero opacity, and placing it
// over the top of the current pic (main)...
//
// sPicFile: path to target pic file
//

function fadePic(sPicFile, sTitle, sDescn)
  {
  // load the new pic and wait for it to complete loading
  // so we can check it's width & height for positioning...
  mainPic = document.getElementById("mainpic");
  auxPic = document.getElementById("auxpic");
  //if we're fading to the same pic don't bother...
  if (mainPic.src.substr(-sPicFile.length, sPicFile.length) == sPicFile)
    return;
  // sort out title and description change...
  var el = document.getElementById("title");
  if (el)
    {
    //dbg alert("current title: " + el.innerHTML);
    el.style.visibility = "hidden";
    el.innerHTML = sTitle;
    } 
    
  el = document.getElementById("descn");
  if (el)
    {
    //dbg alert("current descn: " + el.innerHTML);
    el.style.visibility = "hidden";
    el.innerHTML = sDescn;
    } 
    
  // prepare auxPic...
  auxPic.style.filter = "alpha(opacity=0)";
  auxPic.style.opacity = 0;
  auxPic.style.MozOpacity = 0;
  // load auxPic...
  auxPic.onload = fadePic2;   // sneaky trick!
  auxPic.src = sPicFile;
  // the rest of the process, carried out by fadePic2()
  // starts only when the new image has loaded.
  }

function fadePic2()
  {
  // Called as the onload event handler for the new
  // image so runs only when the new image has completely
  // loaded and we can determine its size.
  // first get the old pic's size and position
  // so we can work out where to put the new one...
  var left = findPosX(mainPic);
  var top = findPosY(mainPic);
  // boj for bloody IE...
  var sBrowser = getBrowserType();
  if (sBrowser.indexOf("MSIE") != - 1)
    {
    left += 1;
    top += 1;
    }
  // adjust left for relative width of old & new pix...
  left -= (auxPic.width - mainPic.width) / 2;
  // position the new pic centrally...
  auxPic.style.left = left + "px";
  auxPic.style.top = top + "px";
  // fade auxPic up over mainPic...
  doFade(0.05);
  }

////////////////////////////////////////
//
// do fade from mainPic to auxPic in 25
// steps - one every 10ms...
//
function doFade(progress)
  {
  auxPic.style.filter = "alpha(opacity=" + Math.floor(progress * 100) + ")";
  mainPic.style.filter = "alpha(opacity=" + Math.floor((1.0 - progress) * 100) + ")";
  auxPic.style.opacity = progress;
  mainPic.style.opacity = 1.0 -   auxPic.style.opacity;
  auxPic.style.MozOpacity = progress;
  mainPic.style.MozOpacity = 1.0 - auxPic.style.MozOpacity;
  //alert("progress=" + progress + ", filter=" + auxPic.style.filter);
  if (progress < 0.99)
    {
    tmrFade = setTimeout("doFade(" + (progress + 0.05) + ")", 10);
    }
  else
    {
    mainPic.src = auxPic.src;
    if (arrTitles[crntPic])
      document.images["mainpic"].title = arrTitles[crntPic];
    else
      document.images["mainpic"].title = "";
    mainPic.style.filter = "alpha(opacity=100)";
    mainPic.style.opacity = 1.0;
    mainPic.style.MozOpacity = 1.0;
    auxPic.style.filter = "alpha(opacity=0)";
    auxPic.style.opacity = 0;
    auxPic.style.MozOpacity = 0;
    // make new title and description visible...
    var el = document.getElementById("title");
    if (el)
      el.style.visibility = "visible";
    el = document.getElementById("descn");
    if (el)
      el.style.visibility = "visible";
    }
  }

// functions to find the position of an element...
// updated 2/9/2007, MT
// fixes IE offsetParent problem
function findPosX(obj)
  {
  var curleft = obj.offsetLeft;
  while (obj.offsetParent)
    {
    obj = obj.offsetParent;
    curleft += obj.offsetLeft;
    }
  //alert("curleft="+curleft);
  return curleft;
  }

function findPosY(obj)
  {
  var curtop = obj.offsetTop;
  while (obj.offsetParent)
    {
    obj = obj.offsetParent;
    curtop += obj.offsetTop;
    }
  //alert("curtop="+curtop);
  return curtop;
  }

// functions for finding browser type (incl version)...
function getBrowserType()
  {
  var sName = "";
  var sVersion = "";
  var ua = navigator.userAgent;
  var vo = 0;
  //alert("appName:   " + navigator.appName + "\nuserAgent:  " + navigator.userAgent + "\nappVersion: " + navigator.appVersion);
  // test for Firefox...
  if ((vo = ua.indexOf("Firefox")) != -1)
    {
    sName = "Firefox";
    vo += 8;
    sVersion = ua.substring(vo);
    }
  else if ((vo = ua.indexOf("Netscape")) != -1)
    {
    sName = "Netscape";
    vo += 9;
    sVersion = ua.substring(vo, vo + 3);
    }
  else if ((vo = ua.indexOf("Opera")) != -1)
    {
    sName = "Opera";
    vo += 6;
    sVersion = ua.substring(vo, vo + 3);
    }
  else if ((vo = ua.indexOf("Safari")) != -1)
    {
    sName = "Safari";
    vo = ua.indexOf("Version/") + 8;
    sVersion = ua.substring(vo, vo + 5);
    }
  else if ((vo = ua.indexOf("MSIE")) != -1)
    {
    sName = "MSIE";
    vo += 5;
    sVersion = ua.substring(vo, ua.indexOf(";", vo));
    }
  return sName + " v" + sVersion;
  }

//
///// End of File ///////////////////////////////////////