////////////////////////////////////////////////
//
// Thumbnail picture handling functions
// for PanPage CMS...
//
function sGetVersion() {return "3.0Beta";}
// this file needs the following values, defined here or
// commented out and defined in the calling html file...
var sThumbPrefix = "thm";
var sThumbClass  = "pp_thumb";
//    var sImageFolder = "photos/website/";
//
// the following arrays should be filled in the html file
// with the pathnames of the picture file and thumbnail file
// and the title/alt text for each pic...
var arrPics = new Array();
var arrThumbs = new Array();
var arrTitles = new Array();
//
// next pic in cycle...
var nextPic = new Image(570, 448);
// config vars for transitions...
var maxCycles = 5;          // stop after this number of cycles
var dwellTime = 4000;       // display each image for this number of ms
var fadeIncrement = 0.05    // fade up/down by this amount at each step
var fadeDelay = 10;         // wait this no. of ms between fade steps
var nTransition = 0;        // 0:fade, 1:slide l-r, 2:slide r-l, 3:slide l-r then r-l,
                            // 5:slide t-b, 6:slide b-t
var nTransitDir = 0;        // 0:r-l, 1:l-r, 5:t-b, 6:b-t
var crntPic = 0;            // start with this pic (array index)
// working vars...
var tmrDwell = 0;
var tmrTransition = 0;
var numCycles = maxCycles - 1;
var elMainPic;
var elAuxPic;
//gallery css classes and ids...
var captionID = "pp_gallerycaption";
var mainPicID = "pp_gallerymainpic";
var auxPicID = "pp_galleryauxpic";
// video control image file extension...
var videoControlExtension;
if (videoControlExtension == '')
  videoControlExtension = 'png';

/////////////////////////////////////////////////////////
//
// Gallery video 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(13, 11);   // menu images - normal
  ctrlsLo["ctrlprev"].src = "imgs/ctrlprev_0." + videoControlExtension;
  ctrlsLo["ctrlpause"] = new Image(11, 11);
  ctrlsLo["ctrlpause"].src = "imgs/ctrlpause_0." + videoControlExtension;
  ctrlsLo["ctrlplay"] = new Image(13, 11);
  ctrlsLo["ctrlplay"].src = "imgs/ctrlplay_0." + videoControlExtension;
  ctrlsLo["ctrlnext"] = new Image(13, 11);
  ctrlsLo["ctrlnext"].src = "imgs/ctrlnext_0." + videoControlExtension;

  ctrlsHi["ctrlprev"] = new Image(13, 11);   // menu images - highlight
  ctrlsHi["ctrlprev"].src = "imgs/ctrlprev_1." + videoControlExtension;
  ctrlsHi["ctrlpause"] = new Image(11, 11);
  ctrlsHi["ctrlpause"].src = "imgs/ctrlpause_1." + videoControlExtension;
  ctrlsHi["ctrlplay"] = new Image(13, 11);
  ctrlsHi["ctrlplay"].src = "imgs/ctrlplay_1." + videoControlExtension;
  ctrlsHi["ctrlnext"] = new Image(13, 11);
  ctrlsHi["ctrlnext"].src = "imgs/ctrlnext_1." + videoControlExtension;
  }

function setControlImage(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;
  }
////////////////////////////////////////////////
//
// playSelectedPic() 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 playSelectedPic(nPicId)
  {
  // clear current timer setting...
  clearTimeout(tmrDwell);
  // set new current pic...
  crntPic = nPicId;
  // and transition it in...
  playPic(arrPics[crntPic], arrTitles[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++)
    {
    document.write("<a onclick='return playSelectedPic(" + i + ");'><img class='" + sThumbClass + "' id='" + sThumbPrefix + i + "' src='" + arrThumbs[i] + "' alt='" + arrTitles[i] + "'></a>");
    }
  }


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

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

    case 0:
      bContinuous = false;
      // do nothing more - transition in progress...
      // will finish but no more will start...
      return;

    case 2:
      numCycles = maxCycles;
      bContinuous = true;
      setTimeout("playNextPic()", 750);
      return;
    }
  playPic(arrPics[crntPic], arrTitles[crntPic]);
  }

////////////////////////////////////////
//
// playPic()
//
// transitions to the selected picture...
//
function playPic(sPicFile, sCaption)
  {
  switch (nTransition)
    {
    case 1:
    case 2:
    case 3:
    case 5:
    case 6:
    case 7:
      slidePic(sPicFile, sCaption);
      break;
    case 0:
    default:
      fadePic(sPicFile, sCaption);
      break;
    }
  }
////////////////////////////////////////
//
// waitThenPlayNextPic()
//
// set timer to call playNextPic() in a little while...
//
function waitThenPlayNextPic(waitTime)
  {
  numCycles = maxCycles;
  bContinuous = true;
  // set timer to fade pic in a bit...
  tmrDwell = setTimeout('playNextPic()', waitTime);
  // pre-load next pic into browser cache ready...
  var next = calcNextPic(1);
  nextPic.src = arrPics[next];
  }

////////////////////////////////////////
//
// playNextPic()
//
// show the next picture and set timer to
// do it again in a wee while...
//
function playNextPic()
  {
  // check for max cycles...
  if (crntPic == 0 && maxCycles > 0)
    {
    if (numCycles <= 0)
      {
      bContinuous = false;
      return;
      }
    numCycles--;
    }
  // fade into next picture...
  crntPic = calcNextPic(1);
  // transition to the next pic...
  playPic(arrPics[crntPic], arrTitles[crntPic]);
  // pre-load next pic into browser cache ready...
  var next = calcNextPic(1);
  nextPic.src = arrPics[next];
  // set timer to do it again - allowing for fade up time since we
  // get here after the first fade increment, not the last!
  //tmrDwell = setTimeout('playNextPic()', dwellTime + fadeDelay / fadeIncrement);
  }

////////////////////////////////////////
//
// 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, sCaption)
//
// 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
// sCaption: caption text for next pic
//

function fadePic(sPicFile, sCaption)
  {
  // load the new pic and wait for it to complete loading
  // so we can check it's width & height for positioning...
  elMainPic = document.getElementById(mainPicID);
  //dbg alert("fadePic(): src=" + elMainPic.src + ", alt=" + elMainPic.alt);
  elAuxPic = document.getElementById(auxPicID);
  //if we're fading to the same pic don't bother...
  if (elMainPic.src.substr(-sPicFile.length, sPicFile.length) == sPicFile)
    return;
  // sort out caption change...
  var elCap = document.getElementById(captionID);
  if (elCap)
    {
    //dbg alert("current caption: " + elcap.innerHTML);
    elCap.style.visibility = "hidden";
    elCap.innerHTML = sCaption;
    }
  // prepare auxPic...
  elAuxPic.style.filter = "alpha(opacity=0)";
  elAuxPic.style.opacity = 0;
  elAuxPic.style.MozOpacity = 0;
  // load auxPic...
  elAuxPic.onload = fadePic2;   // sneaky trick!
  elAuxPic.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(elMainPic);
  var top = findPosY(elMainPic);
  // boj for bloody IE...
  //var sBrowser = getBrowserType();
  //if (sBrowser.indexOf("MSIE") != -1  && (sBrowser.indexOf("v7") != -1 || sBrowser.indexOf("v6") != -1) &&
  //    document.body.parentElement.clientWidth % 2 == 1)
  //  {
  //  left -= 1;
  //  }
  // adjust left for relative width of old & new pix...
  left -= (elAuxPic.width - elMainPic.width) / 2;
  // position the new pic centrally...
  elAuxPic.style.top = top + "px";
  elAuxPic.style.left = left + "px";
  // fade auxPic up over mainPic...
  doFade(fadeIncrement);
  }

////////////////////////////////////////
//
// do fade from mainPic to auxPic in fadeIncrement
// steps - one every fadeDelay ms...
//
function doFade(progress)
  {
  elAuxPic.style.filter = "alpha(opacity=" + Math.floor(progress * 100) + ")";
  elMainPic.style.filter = "alpha(opacity=" + Math.floor((1.0 - progress) * 100) + ")";
  elAuxPic.style.opacity = progress;
  elMainPic.style.opacity = 1.0 - elAuxPic.style.opacity;
  elAuxPic.style.MozOpacity = progress;
  elMainPic.style.MozOpacity = 1.0 - elAuxPic.style.MozOpacity;
  //dbg alert("progress=" + progress + ", filter=" + auxPic.style.filter);
  if (progress < 1.0 - fadeIncrement)
    {
    tmrTransition = setTimeout("doFade(" + (progress + fadeIncrement) + ")", fadeDelay);
    }
  else
    {
    elMainPic.onload = fadePic3;
    elMainPic.src = elAuxPic.src;
    // remainder of process starts when MainPic image has loaded
    }
  }
//
//// fadePic3
//
// onload func for mainPic...
// finish off by making mainPic opaque and auxPic transparent again but 
// do this after mainPic's source has changed to avoid a flash.
//
function fadePic3()
  {  
  if (arrTitles[crntPic])
    {
    document.images[mainPicID].title = arrTitles[crntPic];
    document.images[mainPicID].alt = arrTitles[crntPic];
    }
  else
    {
    document.images[mainPicID].title = "";
    document.images[mainPicID].alt = "";
    }
  elMainPic.style.filter = "alpha(opacity=100)";
  elMainPic.style.opacity = 1.0;
  elMainPic.style.MozOpacity = 1.0;
  elAuxPic.style.filter = "alpha(opacity=0)";
  elAuxPic.style.opacity = 0;
  elAuxPic.style.MozOpacity = 0;
  // make new caption visible...
  var elCap = document.getElementById(captionID);
  if (elCap)
    {
    elCap.style.visibility = "visible";
    }
  // set timer to do it again...
  if (bContinuous)
    tmrDwell = setTimeout('playNextPic()', dwellTime);
  }

////////////////////////////////////////
//
// slidePic(sPicFile, sCaption)
//
// slide to the specified pic by creating a new
// picture (aux) width/height displaced, and sliding it
// over the top of the current pic (main)...
//
// sPicFile: path to target pic file
// sCaption: caption text for next pic
//

function slidePic(sPicFile, sCaption)
  {
  // load the new pic and wait for it to complete loading
  // so we can check it's width & height for positioning...
  elMainPic = document.getElementById(mainPicID);
  //dbg alert("slidePic(): src=" + elMainPic.src + ", alt=" + elMainPic.alt);
  elAuxPic = document.getElementById(auxPicID);
  //if we're sliding to the same pic don't bother...
  if (elMainPic.src.substr(-sPicFile.length, sPicFile.length) == sPicFile)
    return;
  // sort out caption change...
  var elCap = document.getElementById(captionID);
  if (elCap)
    {
    //dbg alert("current caption: " + elcap.innerHTML);
    elCap.style.visibility = "hidden";
    elCap.innerHTML = sCaption;
    }
  // prepare auxPic...
  elAuxPic.style.filter = "alpha(opacity=0)";
  elAuxPic.style.opacity = 0;
  elAuxPic.style.MozOpacity = 0;
  // calc direction of this tranistion...
  switch (nTransition)
    {
    case 1:
      nTransitDir = 1;
      break;
    case 2:
      nTransitDir = 0;
      break;
    case 3:
      nTransitDir = nTransitDir == 1 ? 0 : 1;
      break;
    case 5:
      nTransitDir = 5;
      break;
    case 6:
      nTransitDir = 6;
      break;
    case 7:
      nTransitDir = nTransitDir == 5 ? 6 : 5;
      break;
    }
  // load auxPic...
  elAuxPic.onload = slidePic2;   // sneaky trick!
  elAuxPic.src = sPicFile;
  // the rest of the process, carried out by slidePic2()
  // starts only when the new image has loaded.
  }

function slidePic2()
  {
  // 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(elMainPic);
  var top = findPosY(elMainPic);
  // boj for bloody IE...
  //var sBrowser = getBrowserType();
  //if (sBrowser.indexOf("MSIE") != -1  && (sBrowser.indexOf("v7") != -1 || sBrowser.indexOf("v6") != -1) &&
  //    document.body.parentElement.clientWidth % 2 == 1)
  //  {
  //  left -= 1;
  //  }
  // adjust left & top for relative size of old & new pix...
  left -= (elAuxPic.width - elMainPic.width) / 2;
  top -= (elAuxPic.height - elMainPic.height) / 2;
  // position the new pic out of view left...
  switch (nTransitDir)
    {
    case 0:   // slide r-l
      left += elAuxPic.width;
      break;
    case 1:   // slide l-r
      left -= elAuxPic.width;
      break;
    case 5:   // slide t-b
      top -= elAuxPic.height;
      break;
    case 6:   // slide b-t
      top += elAuxPic.height;
      break;
    }
  nAuxWidth = elAuxPic.width;
  nAuxHeight = elAuxPic.height;
  elAuxPic.style.top = top + "px";
  elAuxPic.style.left = left + "px";
  // make width zero and opacity one...
  elAuxPic.style.filter = "alpha(opacity=100)";
  elAuxPic.style.opacity = 1;
  elAuxPic.style.MozOpacity = 1;
  // slide auxPic in over mainPic...
  doSlide(fadeIncrement);
  }

////////////////////////////////////////
//
// do slide from mainPic to auxPic in fadeIncrement
// steps - one every fadeDelay ms...
//
function doSlide(progress)
  {
  switch (nTransitDir)
    {
    case 0:   // slide r-l
      elAuxPic.style.left = nAuxWidth - progress * nAuxWidth + "px";
      break;
    case 1:   // slide l-r
      elAuxPic.style.left = progress * nAuxWidth - nAuxWidth + "px";
      break;
    case 5:   // slide t-b
      elAuxPic.style.top = progress * nAuxHeight - nAuxHeight + "px";
      break;
    case 6:   // slide b-t
      elAuxPic.style.top = nAuxHeight - progress * nAuxHeight + "px";
      break;
    }
  //dbg alert("progress=" + progress + ", filter=" + auxPic.style.filter);
  if (progress < 1.0 - fadeIncrement)
    {
    tmrTransition = setTimeout("doSlide(" + (progress + fadeIncrement) + ")", fadeDelay);
    }
  else
    {
    elMainPic.onload = slidePic3;
    elMainPic.src = elAuxPic.src;
    // remainder of process happens when main pic image has loaded...
    }
  }

function slidePic3()
  {
  if (arrTitles[crntPic])
    {
    document.images[mainPicID].title = arrTitles[crntPic];
    document.images[mainPicID].alt = arrTitles[crntPic];
    }
  else
    {
    document.images[mainPicID].title = "";
    document.images[mainPicID].alt = "";
    }
  elAuxPic.style.filter = "alpha(opacity=0)";
  elAuxPic.style.opacity = 0;
  elAuxPic.style.MozOpacity = 0;
  elMainPic.style.filter = "alpha(opacity=100)";
  elMainPic.style.opacity = 1.0;
  elMainPic.style.MozOpacity = 1.0;
  // make new caption visible...
  var elCap = document.getElementById(captionID);
  if (elCap)
    {
    elCap.style.visibility = "visible";
    }
  // set timer to do it again...
  if (bContinuous)
    tmrDwell = setTimeout('playNextPic()', dwellTime);
  }

/************************
 these functions are in 
 pp_top.js so commented 
 out here
*************************
// functions to find the position of an element...
// updated 2/9/2007, MT: fixes IE offsetParent problem
// updated 6/6/2011, MT: stops at first relative positioned parent
// updated 9/6/2011, MT: accounts for borders in IE6/7
function findPosX(obj)
  {
  var curleft = obj.offsetLeft;
  while (obj.offsetParent)
    {
    obj = obj.offsetParent;
    if (obj.currentStyle)
      {
      if (obj.currentStyle["position"] == "relative")
        break;
      curleft += parseInt(obj.currentStyle["borderLeftWidth"]);
      }
    if (window.getComputedStyle && window.getComputedStyle(obj, null).position == "relative")
      break;
    curleft += obj.offsetLeft - obj.scrollLeft;
    }
  return curleft;
  }

function findPosY(obj)
  {
  var curtop = obj.offsetTop;
  while (obj.offsetParent)
    {
    obj = obj.offsetParent;
    if (obj.currentStyle)
      {
      if (obj.currentStyle["position"] == "relative")
        break;
      curtop += parseInt(obj.currentStyle["borderTopWidth"]);
      }
    if (window.getComputedStyle && window.getComputedStyle(obj, null).position == "relative")
      break;
    curtop += obj.offsetTop - obj.scrollTop;
    }
  return curtop;
  }
*/
// functions for finding browser type (incl version)...
function getBrowserType()
  {
  var sName = "";
  var sVersion = "";
  var ua = navigator.userAgent;
  var vo = 0;
  //dbg 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 ///////////////////////////////////////