/* ======================================================================
  Image Scroller (vertical)

  Code based on the scrolling thumbnails method by Michael Falatine
  <4thorder@4thorder.us>

  Horizontal scroll replaced with vertical.
  Smooth scroll added with two delayed partial shifts.
  Added support for loading text as well as changing the image.

  Author: arc <www.arc.id.au>

  Date     Description                                       By
  --------|------------------------------------------------|----
  22May07  First release                                    arc
  29Jun07  Added AnnieToTheRescue                           arc
  07Oct07  Added HippoBabies                                arc
  25Jan08  Added BigGreenThing                              arc
  21Mar08  Pass start index to InitializePage()
           load new page not reconstruct insitu             arc
  12Dec08  Added When Coco Was a Kitten                     arc
  22May09  Added Grandpa Baby                               arc
  26Feb10  Added Hippo Birthday and Hippo 30 anniversary    arc
* ======================================================================*/

  var ImageArray = new Array
  (
    // All Thumbnails and Pics must be JPEGs and have tag '.jpg'
    // Thumbnail image filenames MUST be the SAME as the full sized image
    // All the thumbnail images are to be placed in the folder "Images-Books/Thumbnails"
    // All full sized images are to be placed in the folder "Images-Books/Pics"
    // Place single quotes around each filename
    // Place a comma after each filename EXCEPT for the LAST filename
    // Add new books at the top of list
    // increment initialize(xx) parameter in each books page to be index in list-2 (with wraparound)

      'HippoBirthday',      // start = 16
      'Hippo30Anniversary', // start = 17
      'GrandpaBaby',        // start = 0
      'Coco',               // start = 1
      'DoubleTrouble',      // start = 2
      'BigGreenThing-R',
      'AnnieToTheRescue',
      'MulgaBill',
      'LetsPlay-R',
      'WhenIWasABaby-R',
      'Chatterbox',
      'AnniesChair',
      'HippoBabies',
      'HippoOnTheHospitalRoof',
      'HippoInThePlayground',
      'HippoOnOurCaravan',
      'HippoOnOurRoof',
      'WhenTheWindChanged'

  )


function InitializePage(start)
{
  if (ImageArray!=null)
  {
    var idx = start;
    for (l=0; l<ImageArray.length; l++)
  	{
  		TRElement = document.createElement("tr");
  		document.getElementById('ImageContainer').appendChild(TRElement);
  		TDElement = document.createElement("td");
  		TRElement.appendChild(TDElement);
      ImgElement = document.createElement("img");
  		ImgElement.src="Images-Books/Thumbnails/"+ImageArray[idx++]+".jpg";
  		TDElement.appendChild(ImgElement);
      if (idx==ImageArray.length)
        idx = 0;
  	}
  }

  setIDs();
  attachEventhandlers();
}

function onclickHandler(e)
{
// Browser compatibility code
	var targ;
	if (!e)
  {
    var e = window.event;
  }

	if (e.target)
	{
    targ = e.target;
		var xpos = (e.pageX);
    var ypos = (e.pageY);
  }
	else if (e.srcElement)
	{
    var xpos = (event.x);
    var ypos = (event.y);
		targ = e.srcElement;
  }

// Strip file name from image src
	var spath = targ.getAttribute('src');

	fileName = spath.substring(spath.lastIndexOf("/")+1,spath.lastIndexOf("."));

  // now load the new page
  window.location = "DN-Books-"+fileName+".html";
}

// Attach event handlers to all images within container
function attachEventhandlers()
{
	ContainerElement=document.getElementById('ImageContainer')
	TDCol=ContainerElement.getElementsByTagName('TD');

	if (TDCol != null)
	{
		for (l=0; l<TDCol.length; l++)
		{
			IMGCol = TDCol.item(l).getElementsByTagName("IMG");
			IMGCol.item(0).style.cursor = "pointer"
			IMGCol.item(0).setAttribute('id',"Image"+l)
			IMGCol.item(0).onclick = onclickHandler;
		}
	}
}

// Set ID's for all table rows
function setIDs()
{
	ContainerElement=document.getElementById('ImageContainer')
	TRary = ContainerElement.getElementsByTagName('TR');
	if (TRary != null)
	{
		for (i=0; i<TRary.length; i++)
				{TRary.item(i).setAttribute('id',i)}
	}
}

// :::::::::::::::::::::::::
// ::: Scroll Functions ::
// :::::::::::::::::::::::::


function scrollUp()
{
/* to simulate smooth scroll add display offset and pause before changing images */
document.getElementById("ImgTable").style.marginTop = "-15em";
setTimeout(function(){scrollUp2();}, 200);
}

function scrollUp2()
{
/* to simulate smooth scroll add display offset and pause before changing images */
document.getElementById("ImgTable").style.marginTop = "-20em";
setTimeout(function(){rowUp();}, 200);
}

function rowUp ()
{
document.getElementById("ImgTable").style.marginTop = "-10em";

	ContainerElement = document.getElementById("ImageContainer");
	firstTR = document.getElementById("0");
	dupfirstTR = firstTR.cloneNode(true);
	ContainerElement.removeChild(firstTR);
	ContainerElement.appendChild(dupfirstTR);
	setIDs();
	attachEventhandlers();

}

function scrollDown()
{
	document.getElementById("ImgTable").style.marginTop = "-5em";
	setTimeout(function(){scrollDown2();}, 200);
}

function scrollDown2()
{
	document.getElementById("ImgTable").style.marginTop = "0em";
	setTimeout(function(){rowDown();}, 200);
}

function rowDown()
{
document.getElementById("ImgTable").style.marginTop = "-10em";

	lastTR = document.getElementById(TRary.length-1);
	duplastTR = lastTR.cloneNode(true);
	firstTR = document.getElementById("0");
	ContainerElement = document.getElementById("ImageContainer");
	ContainerElement.insertBefore(duplastTR, firstTR);
	ContainerElement.removeChild(lastTR);
	setIDs();
	attachEventhandlers();
}