/************************************/
/* PhotoAlbum.js                    */
/* JavaScript for Photo Album pages */
/* (c) Chris Daniels                */
/************************************/

var m_pictureInfo;           // an array of ImageData objects

var m_pictureIndex;          // the index of the currently selected picture
var m_pageIndex = -1;        // the index of the currently selected page 
var m_picsPerPage = 5;       // the number of pictures per page
var m_timerId = null;        // the ID of the timer
var m_slideshow = false;
var m_timePerPic = 1500;
var m_retryTime = 500;
var m_browserType;

/* ImageData class */
function ImageData(p_src,
                   p_smallSrc,
                   p_smallWidth,
                   p_smallHeight,
                   p_alt)
{
  this.src         = p_src;
  this.smallSrc    = p_smallSrc;
  this.smallWidth  = p_smallWidth;
  this.smallHeight = p_smallHeight;
  this.alt         = p_alt;
  this.image       = new Image();
  this.appended    = false;
}

/* Function to preload an image */
function loadImage(index)
{
  var imageData = m_pictureInfo[index];
  if ((m_browserType == "IE") && (imageData.appended == false))
  {
    /* IE */
    imageData.appended = true;
    document.appendChild(imageData.image);
  }
  imageData.image.src = imageData.src;
}

/* Function to initialise data */
function initialisePictureInfo(pictureInfo)
{
  var i;

  m_pictureInfo = pictureInfo;

  if (navigator.userAgent.indexOf("Opera")!=-1 && document.getElementById) 
  {
    m_browserType = "OP";
  }
  else if (document.all) 
  {
    m_browserType = "IE";
  }
  else if (document.layers) 
  {
    m_browserType = "NN";
  }
  else if (!document.all && document.getElementById) 
  {
    m_browserType = "MO";
  }
  else 
  {
    m_browserType = "IE";
  }
  
  // show the first picture
  changeImage(0);
}

function startSlideshow()
{
  if (m_timerId == null)
  {
    m_timerId = setTimeout(timerTick, m_timePerPic);
  }
  m_slideshow = true;

  // redisplay current picture and page in slideshow mode
  changeImage(m_pictureIndex);
  changePage(m_pageIndex);

  // kick off the loading of the next picture
  loadImage(getNextIndex());
}

function stopSlideshow()
{
  if (m_timerId != null)
  {
    // Cancel timer
    clearTimeout(m_timerId);

    m_timerId = null;
    m_slideshow = false;

    // redisplay current picture and page in non-slideshow mode
    changeImage(m_pictureIndex);
    changePage(m_pageIndex);
  }  
}

function timerTick()
{
  // Cancel timer
  clearTimeout(m_timerId);

  if (m_pictureInfo[getNextIndex()].image.complete == true)
  {
    showNext();

    // kick off the loading of the next picture
    loadImage(getNextIndex());
    
    // restart the timer
    m_timerId = setTimeout(timerTick, m_timePerPic);
  }
  else
  {
    // try again in 500 milliseconds' time
    m_timerId = setTimeout(timerTick, m_retryTime);
  }
}

function changeImage(index)
{
  if (index >= m_pictureInfo.length)
  {
    m_pictureIndex = 0;
  }
  else if (index < 0)
  {
    m_pictureIndex = m_pictureInfo.length - 1;
  }
  else
  {
    m_pictureIndex = index;
  }
  
  var src    = m_pictureInfo[m_pictureIndex].src;
  var alt    = m_pictureInfo[m_pictureIndex].alt;
  var theImage = document.getElementById('theImage');
  var theCaption = document.getElementById('theCaption');
  var thePictureNumber = document.getElementById('thePictureNumber');
  var theSlideshowControl = document.getElementById('theSlideshowControl');

  theImage.src = src;
  theImage.alt = alt;
  theCaption.innerHTML = alt;
  if (m_slideshow == true)
  {
    theSlideshowControl.innerHTML = '<input type="button" value="End slideshow" onclick="javascript:stopSlideshow();"/>';
    thePictureNumber.innerHTML = 'Picture ' + (m_pictureIndex + 1) + ' of ' + (m_pictureInfo.length);
  }
  else
  {
    theSlideshowControl.innerHTML = '<input type="button" value="Start slideshow" onclick="javascript:startSlideshow();"/><br/><br/>';
    thePictureNumber.innerHTML = '<a href="javascript:showPrev();">&lt;&lt;</a>&nbsp;' + 
                                 'Picture ' + (m_pictureIndex + 1) + ' of ' + (m_pictureInfo.length) + '&nbsp;' + 
                                 '<a href="javascript:showNext();">&gt;&gt;</a>';

  }

  // calculate which page should be displayed
  var pageIndex = getPageIndex(m_pictureIndex);

  if (pageIndex != m_pageIndex)
  {
    // page has changed
    changePage(pageIndex);
  }
}


function getPageIndex(pictureIndex)
{
  return ((pictureIndex - (pictureIndex % m_picsPerPage)) / m_picsPerPage);
}

function lastPageIndex()
{
  return ((m_pictureInfo.length - 1 - ((m_pictureInfo.length - 1)% m_picsPerPage)) / m_picsPerPage);
}

function changePage(index)
{
  if (index > lastPageIndex())
  {
    m_pageIndex = 0;
  }
  else if (index < 0)
  {
    m_pageIndex = lastPageIndex();
  }
  else
  {
    m_pageIndex = index;
  }  

  var lbound = m_pageIndex * m_picsPerPage;

  var ubound = lbound + m_picsPerPage;

  if (ubound > m_pictureInfo.length)
  {
     ubound = m_pictureInfo.length; 
  }

  var innerHTML = "";
  
  for (i = lbound; i < ubound; i++)
  {
    var src = m_pictureInfo[i].src;
    var thm = m_pictureInfo[i].smallSrc;
    var wid = m_pictureInfo[i].smallWidth;
    var hgt = m_pictureInfo[i].smallHeight;
    var alt = m_pictureInfo[i].alt;
    innerHTML += '<a href="javascript:changeImage(' + i + ');">' + 
                 '<img src="' + thm + '" alt="' + alt + '" width="' + wid + '" height="' + hgt + '" align="absmiddle" />' +
                 '</a> ';
  }

  var theNavigator = document.getElementById('theNavigator');
  var thePageNumber = document.getElementById('thePageNumber');
  if (m_slideshow == true)
  {
    thePageNumber.innerHTML = '';
    theNavigator.innerHTML = '';
  }
  else
  {
    thePageNumber.innerHTML = '<a href="javascript:prevPage();">&lt;&lt;</a>&nbsp;' + 
                              'Page ' + (m_pageIndex + 1) + ' of ' + (lastPageIndex() + 1) + '&nbsp;' + 
                              '<a href="javascript:nextPage();">&gt;&gt;</a>';
    theNavigator.innerHTML = innerHTML;
  }
}

function nextPage()
{
  changePage(m_pageIndex + 1);
}

function prevPage()
{
  changePage(m_pageIndex - 1);
}

function showNext()
{
  changeImage(m_pictureIndex + 1);
}

function showPrev()
{
  changeImage(m_pictureIndex - 1);
}

function getNextIndex()
{
  var index = m_pictureIndex + 1;
  if (index >= m_pictureInfo.length)
  {
    index = 0;
  }
  return index;
}