// mjh-photo-reel.js
// Copyright Matthew J Heaton 2010

var nCells = 3;               // number of cells in the reel
var nThumbImageSize = 186;    // size of images for the reel
var szPhotoPath = 'photo';    // path to full size photos
var szReelPath = 'photo/thumb'; // path to the reel (thumb-sized) images

var szPhoto = [
"your-photo1.jpg",
"your-photo2.jpg",
// and so on...
];

var nImage = 1;
var divHolder;
var divScroller;
var TimerReel=0;
var nScroll = 0;
var imgReel = new Array(nCells);
var imgScroll = new Array(nCells+2);
var nBorder = 1;
var nThumbItemSize = nThumbImageSize + nBorder + nBorder;
var nAutoScroll = -10;
var TimerAutoScroll=0;
var nPhotoCount =0 ;


function CreatePhotoReel()
{
  nThumbItemSize = nThumbImageSize + nBorder + nBorder;
  for( nPhotoCount=0; szPhoto[nPhotoCount]; nPhotoCount++ );
  
  nImage = RandomNumber(nPhotoCount-1);

  var divReel = document.getElementById('PhotoReel');
  divReel.style.left='0px';
  divReel.style.top='0px';
  divReel.style.width=(nThumbItemSize*nCells)+'px';
  divReel.style.height= nThumbItemSize+'px';
  divReel.style.position='relative';

  divHolder = document.createElement('div');
  divHolder.style.position='absolute';
  divHolder.style.left='0px';
  divHolder.style.top='0px';
  divHolder.style.width= (nThumbItemSize*nCells)+'px';
  divHolder.style.height=nThumbImageSize+6+'px';//220px';
  divHolder.style.overflow='hidden';
  divHolder.style.visibility='visible';
  for (var i=0; i<nCells; i++)
    imgReel[i] = CreateReelPhoto(divHolder);
  SetReelImages();
  divReel.appendChild(divHolder);

  divScroller = document.createElement('div');
  divScroller.style.position='absolute';
  divScroller.style.left=-nThumbItemSize+'px';
  divScroller.style.top='0px';
  divScroller.style.width= (nThumbItemSize*(nCells+2))+'px';
  divScroller.style.height=nThumbImageSize+6+'px';//220px';
  divScroller.style.overflow='hidden';
  divScroller.style.visibility='hidden';
  for (i=0; i<nCells+2; i++)
    imgScroll[i] = CreateReelPhoto(divScroller);
  SetScrollerImages();
  divReel.appendChild(divScroller);
  
  if (nAutoScroll)
      TimerAutoScroll = setTimeout('PhotoReel('+nAutoScroll+')', 4000);
}

function CreateReelPhoto(elemParent)
{
//  while (nImageIndex<0) nImageIndex+=nPhotoCount;
//  nImageIndex%= nPhotoCount;
  
  var elemImage = document.createElement('div');
  elemImage.style.display='block';
  elemImage.style.cssFloat=elemImage.style.styleFloat='left';
  elemImage.style.width= nThumbImageSize+'px';
  elemImage.style.height= nThumbImageSize+'px';
//  elemImage.style.backgroundImage='url("photo/thumb/'+szPhoto[nImageIndex]+'")';
  elemImage.style.backgroundPosition='center';
  elemImage.style.backgroundRepeat='no-repeat';
  elemImage.style.border='solid 1px rgb(250,250,250)';
  var elemNew = elemParent.appendChild(elemImage);
//  elemNew.nImageIndex = nImageIndex;
  elemNew.onmousedown = DoImageShow;
  elemNew.style.cursor= 'pointer';
  return elemNew;
}

function DoImageShow()
{
  clearTimeout(TimerAutoScroll);
  var infoImage = szPhoto[this.nImageIndex].split('?');
  ImageShow(szPhotoPath+'/'+infoImage[0], infoImage.length>1? infoImage[1]: null);
}

function PhotoReelLeft()
{
  clearTimeout(TimerAutoScroll);
  nAutoScroll = 10;
  PhotoReel(nAutoScroll);
}

function PhotoReelRight()
{
  clearTimeout(TimerAutoScroll);
  nAutoScroll = -10;
  PhotoReel(nAutoScroll);
}

function PhotoReel(nOffset)
{
  divScroller.style.visibility = 'visible';
  divHolder.style.visibility = 'hidden';

  nImage += nOffset<0?1:-1;
  while(nImage<0) nImage+=nPhotoCount;
  nImage%=nPhotoCount;

  SetReelImages();
  TimerReel = setTimeout('ScrollReel('+nOffset+')', 10);
}

function
SetReelImages()
{
  for (i=0; i<nCells; i++)
  {
    var nReelIndex = (nImage+nPhotoCount+i)%nPhotoCount;
    imgReel[i].nImageIndex = nReelIndex
    imgReel[i].style.backgroundImage = 'url("'+szReelPath+'/'+szPhoto[nReelIndex]+'")';
  }
}

function
SetScrollerImages()
{
    for (i=0; i<nCells+2; i++)
    {
      var nScrollIndex = (nImage-1+nPhotoCount+i)%nPhotoCount;
      imgScroll[i].nImageIndex = nScrollIndex;
      imgScroll[i].style.backgroundImage = 'url("'+szReelPath+'/'+szPhoto[nScrollIndex]+'")';
    }
    divScroller.style.left = -nThumbItemSize+'px';
}

function ScrollReel(nOffset)
{
  nScroll += nOffset;
  if (nScroll > -nThumbItemSize && nScroll < nThumbItemSize)
  {
    divScroller.style.left = -nThumbItemSize + nScroll + 'px';
    szTimer = 'ScrollReel('+nOffset+')';
    TimerReel = setTimeout(szTimer, 10);
  }
  else
  {
    divScroller.style.visibility = 'hidden';
    divHolder.style.visibility = 'visible';
    nScroll = 0;
    if (TimerAutoScroll) clearTimeout(TimerAutoScroll);

    SetScrollerImages();

    if (nAutoScroll)
    {
      TimerAutoScroll = setTimeout('PhotoReel('+nAutoScroll+')', 4000);
    }
  }
}

function RandomNumber(nMaxNumber)
{
  var nRandom;
  if (Math.random)
  {
    nRandom = Math.round(Math.random()*nMaxNumber);
  }
  else
  {
    var dateNow = new Date();
    nRandom = (dateNow.getTime()) % (nMaxNumber+1);
  }
  return nRandom;
}