/*Created by Trevor Lewis Jan 2007
Last updated 27 May 2007.
Provides behaviours for display of a series of images from the gallery.
Allows you to click on a thumbnail to go to the larger image, hiding the 
thumbnails. Clicking on the larger image will hide the larger images and
take you back to the thumbnails. There is also a navigation feature at
bottom of the larger images that allows you to select a number to take
you to that particular image, or to select the 'next' or 'previous' image
in the series.
*/

/* Define global variables.
numslides is the maximum index of the array of images (slides).
currentslide is the index of the current slide from the array, so slide one
is index 0.
numselect is the index for the array of 'slidelist' items. This includes
the 'previous' (index 0) and the 'next' (maximum index) items, as well as
the individual listed numbers.
*/

// variables for the slide show
var numslides=0, currentslide=0, numselect=0;
var series = new Array();  // the series of larger images
var selection = new Array();  // the navigation numbers

// variable for the appearing effect
var FadeTimer=0;
var FadeID;

function MakeSlideShow() {
   if (!document.getElementsByTagName) return false;
   if (!document.getElementById) return false;
      // find all images within the slideshow division
      if (!document.getElementById("slideshow")) return false;
      var slideshow = document.getElementById("slideshow");
      var imgs=slideshow.getElementsByTagName("img");
      for (var i=0; i<imgs.length; i++) {
         numslides = i;
         series[numslides]=imgs[i];
         // hide all the images to begin with
         imgs[i].style.display="none";
         // event handler for clicking on an image
         imgs[i].onclick=GotoSlide;
      }; // end for loop
      
      // setup the selector list, which makes use of the numslides variable
      MakeSelector();
      
      // find all the thumbnail divs within the div 'lightbox' and populate the array
      if (!document.getElementById("lightbox")) return false;
      var lightbox = document.getElementById("lightbox");
      var thumbs = lightbox.getElementsByTagName("div");
      for (var i=0; i<thumbs.length; i++) {
         if (thumbs[i].className != "thumbnail") continue;
         // event handler for clicking on a thumbnail
         thumbs[i].onclick=GotoSlide;
      }; // end for loop
      
      // find all list items in the selector 'slidelist'
      if (!document.getElementById("slidelist")) return false;
      var slidelist = document.getElementById("slidelist");
      var items=slidelist.getElementsByTagName("li");
      for (var i=0; i<items.length; i++) {
         numselect = i;
         selection[numselect]=items[i];
         // event handlers for clicking on the navigation numbers
         // and for moving the mouse over the numbers.
         items[i].onclick=GotoSlide;
         items[i].onmouseover=AddHighlight;
         items[i].onmouseout=RemHighlight;
      }; // end for loop
      
   return;
}; // end MakeSlideShow()
			

function GotoSlide(e) {
   if (!document.getElementById) return false;
   if (!document.getElementById("lightbox")) return false;
   if (!document.getElementById("selector")) return false;
   // get the event object
   if (!e) var e = window.event;
   // identify which link was clicked-on
   var targ = (e.target) ? e.target : e.srcElement;
   if (targ.nodeType == 3) targ = targ.parentNode;  // fix Safari bug
   var whichlink = targ.id;
   // parse the link id to identify where the link has come from and the slide number
   // the link id is structured with the first part being 'slide', 'thumb' or 'select'
   // The second part identifies the image number.
   parts = whichlink.split("_");
   where = parts[0];
   var i = parseInt(parts[1])-1;  // convert to integer and change to an index
   if (i < 0) i=0;  // check that it isn't less than zero
   if (i > numslides) i=numslides;  // check that it isn't greater than the number of slides
   
   // NOTE: in each case where there is reference to the 'selection' array,
   // an offset of two is added to the 'currentslide' to be able to correctly
   // identify the correcponding element in the 'selection' array. This is
   // because there is two elements (namely the 'previous' and the
   // 'LeftEllipsis' items) in the array before the first number that
   // corresponds with a slide.
   
   switch(where) {
      case "slide":
      	// a slide has been clicked on to return to the lightbox
         series[currentslide].style.display="none";
         selection[currentslide+2].style.color="#777";
         selection[currentslide+2].style.backgroundColor="white";
         document.getElementById("selector").style.display="none";
         document.getElementById("lightbox").style.display="block";
         document.getElementById("statement").style.display="block";
         break;
         
      case "thumb":
      	// a thumbnail image has been clicked on to go the the large slide
         currentslide = i;
         document.getElementById("lightbox").style.display="none";
         document.getElementById("statement").style.display="none";
         FadeIn();
         document.getElementById("selector").style.display="block";
         SelectorRange();
         selection[currentslide+2].style.color="#333";
         selection[currentslide+2].style.backgroundColor="#E6E6E6";
         break;
         
      case "select":
      	// a number in the selector was clicked on to select a slide
         series[currentslide].style.display="none";  // hide the current slide
         // reset the appearance of the selector device underneath the images
         selection[currentslide+2].style.color="#777";
         selection[currentslide+2].style.backgroundColor="white";
         selection[currentslide+2].style.borderColor="#E6E6E6";
      	 currentslide = i;  // reset the current slide to the selection
      	 // series[currentslide].style.display="block";  // display the new selected slide
      	 FadeIn();
      	 // highlight the appropriate selector item to indicate the current image
      	 SelectorRange();
      	 selection[currentslide+2].style.color="#333";
      	 selection[currentslide+2].style.backgroundColor="#E6E6E6";
      	 break;
      	 
      case "previous":
      	// the 'previous' button was clicked on in the selector
         if (currentslide == 0) break;
         series[currentslide].style.display="none";
         selection[currentslide+2].style.color="#777";
         selection[currentslide+2].style.backgroundColor="white";
         selection[currentslide+2].style.borderColor="#E6E6E6";
         currentslide--;
         FadeIn();
         SelectorRange();
         selection[currentslide+2].style.color="#333";
         selection[currentslide+2].style.backgroundColor="#E6E6E6";
         break;
         
      case "next":
      	// the 'next' button was clicked on in the selector
         if (currentslide == numslides) break;
         series[currentslide].style.display="none";
         selection[currentslide+2].style.color="#777";
         selection[currentslide+2].style.backgroundColor="white";
         selection[currentslide+2].style.borderColor="#E6E6E6";
         currentslide++;
         FadeIn();
         SelectorRange();
         selection[currentslide+2].style.color="#333";
         selection[currentslide+2].style.backgroundColor="#E6E6E6";
         break;
         
      default:
      	break;
      	
   };  // end switch
};  // end GotoSlide


function FadeIn() {
	var timer=0;
	var slide=series[currentslide];
	// display the slide, but make it transparent
	slide.style.display="block";
	slide.style.opacity=0;
	slide.style.MozOpacity=0;
	slide.style.KhtmlOpacity=0;
	slide.style.filter="alpha(opacity=0)";
	for (i=1; i<=100; i++) {
      window.setTimeout("setOpacity("+i+");",(timer*4));
      timer++;
	};
};


function setOpacity(value) {
	var slide=series[currentslide];
	slide.style.opacity=(value/100);
	slide.style.MozOpacity=(value/100);
	slide.style.KhtmlOpacity=(value/100);
	slide.style.filter="alpha(opacity="+value+")";
};


function AddHighlight(e) { //highlights the object moused over in the selector
   // get the event object
   if (!e) var e = window.event;
   // identify which link was clicked-on
   var targ = (e.target) ? e.target : e.srcElement;
   if (targ.nodeType == 3) targ = targ.parentNode;  // fix Safari bug
   var whichlink = targ.id;
   
   if (whichlink == "previous") {
      selection[0].style.color="#333";
      selection[0].style.backgroundColor="#E6E6E6";
      return;
   } else if (whichlink == "next") {
      selection[numselect].style.color="#333";
      selection[numselect].style.backgroundColor="#E6E6E6";
      return;
   } else {
      // parse the link id to identify where the link has come from and the slide number
      // the link id is structured with the first part being 'slide', 'thumb' or 'select'
      // The second part identifies the image number.
      parts = whichlink.split("_");
      where = parts[0];
      var i = parseInt(parts[1]);  // convert to integer; corresponds to index
      if (i < 0) i=0;  // check that it isn't less than zero
      if (i > numslides+1) i=numslides+1;  // check that it isn't greater than the number of slides
      if (where != "select") return false;
      selection[i+1].style.color="#333";
      selection[i+1].style.backgroundColor="#E6E6E6";
   };
}; // end AddHighlight


function RemHighlight(e) { //remove the highlight as moused out of the selector
   // get the event object
   if (!e) var e = window.event;
   // identify which link was clicked-on
   var targ = (e.target) ? e.target : e.srcElement;
   if (targ.nodeType == 3) targ = targ.parentNode;  // fix Safari bug
   var whichlink = targ.id;
   
   if (whichlink == "previous") {
      selection[0].style.color="#777";
      selection[0].style.backgroundColor="white";
      return;
   } else if (whichlink == "next") {
      selection[numselect].style.color="#777";
      selection[numselect].style.backgroundColor="white";
      return;
   } else {
      // parse the link id to identify where the link has come from and the slide number
      // the link id is structured with the first part being 'slide', 'thumb' or 'select'
      // The second part identifies the image number.
      parts = whichlink.split("_");
      where = parts[0];
      var i = parseInt(parts[1]);  // convert to integer; corresponds to index
      if (i < 0) i=0;  // check that it isn't less than zero
      if (i > numslides+1) i=numslides+1;  // check that it isn't greater than the number of slides
      if (where != "select") return false;
      if (i != currentslide+1) {
         selection[i+1].style.color="#777";
         selection[i+1].style.backgroundColor="white";
      };
   };
}; // end RemHighlight


function MakeSelector() { // this creates a list of numbers in
// a div below the displayed images. The numbers correspond with
// the images in the series and clicking on the numbers, on 'next'
// or on 'previous' allows selection of an image for display.
	if (!document.getElementById) return false;
	if (!document.getElementById("maincol")) return false;
	if (!document.createElement) return false;
	var column = document.getElementById("maincol");
	var wrapselector = document.createElement("div");
	wrapselector.setAttribute("id", "selector");
	var listing = document.createElement("ul");
	listing.setAttribute("id", "slidelist");
	wrapselector.appendChild(listing);
	
	// make the 'previous' item in the list
	var previous = document.createElement("li");
	var previous_text = document.createTextNode("previous ");
	previous.setAttribute("id", "previous");
	previous.appendChild(previous_text);
	listing.appendChild(previous);
	
	// make the 'LeftEllipsis' item in the list
	var LeftEllipsis = document.createElement("li");
	var LeftEllipsis_text = document.createTextNode("... ");
	LeftEllipsis.setAttribute("id", "LeftEllipsis");
	LeftEllipsis.appendChild(LeftEllipsis_text);
	listing.appendChild(LeftEllipsis);
	
	// make the 'RightEllipsis' item in the list
	var RightEllipsis = document.createElement("li");
	var RightEllipsis_text = document.createTextNode("... ");
	RightEllipsis.setAttribute("id", "RightEllipsis");
	RightEllipsis.appendChild(RightEllipsis_text);
	listing.appendChild(RightEllipsis);
	
	// make the 'next' item in the list
	var next = document.createElement("li");
	var next_text = document.createTextNode(" next");
	next.setAttribute("id", "next");
	next.appendChild(next_text);
	listing.appendChild(next);
	
	// make the numbered list items that link to the images
	for (var i=1; i <= numslides+1; i++) {
		var listitem = document.createElement("li");
		var listitem_text = document.createTextNode(i);
		listitem.setAttribute("id", "select_"+i);
		listitem.style.border="1px solid #8FC0CD";
		listitem.appendChild(listitem_text);
		listing.insertBefore(listitem, RightEllipsis);
	};
	
	column.appendChild(wrapselector);
	wrapselector.style.display="none";
	return;
}; // end MakeSelector


function SelectorRange() { // This displays or updates a the range
// of slide items that are listed in the selector. This is to
// prevent the list from running off the edge of the page.
// The list is displayed in two blocks of five numbers (images).

	if (!document.getElementById) return false;
	if (!document.getElementById("selector")) return false;
	var LeftEllipsis = document.getElementById("LeftEllipsis");
	var RightEllipsis = document.getElementById("RightEllipsis");
	
	// Determine which block of five the current slide occurs
	var Range = 1 + Math.floor(currentslide/5);
	// Determine how many blocks of five are required for the total number of slides
	var maxRange = Math.ceil(numslides/5);
	
	// If the selected slide number is greater than two blocks of five away
	// from the start (ie. it has a number >10), then display the left ellipsis
	// and hide all list numbers in the blocks before the selected slide.
	// Else, the selected slide is in the first two blocks, so the left
	// ellipsis is not required; hide it.
	if (Range >= 2 && maxRange > 2) {
		LeftEllipsis.style.display="inline";
		for (var i=1; i < ((Range-1)*5); i++) {
			document.getElementById("select_" + i).style.display="none";
		};
	} else {
		LeftEllipsis.style.display="none";
	};
	
	// If the selected slide is more than two blocks (of five) away from the
	// end of the slide list, then display the right ellipsis and hide all the
	// list numbers in the blocks after the selected slide.
	// Else, the selected slide is in the last two blocks, so the right ellipsis
	// is not required; hide it.
	if (maxRange - Range >= 2) {
		RightEllipsis.style.display="inline";
		for (var i=(5*Range + 6); i <= (numslides+1); i++) {
			document.getElementById("select_" + i).style.display="none";
		};
	} else {
		RightEllipsis.style.display="none";
	};
	
	// Display a range of slide numbers that includes the selected slide.
	var start=5*(Range-1)+1;
	if (numslides-start < 5) start=start-5;
	for (var i=start; i<(5*Range + 6); i++) {
		if (i > (numslides + 1)) break;
		document.getElementById("select_" + i).style.display="inline";
	};
	return;
		
}; // end SelectorRange
	


function MakeRollovers() {
	if (!document.getElementById("index")) return false;
	var seriesthumbs = document.getElementById("index");
	var seriesmenu = document.getElementById("menu");
	var thumb=seriesthumbs.getElementsByTagName("img");
	var menu=seriesmenu.getElementsByTagName("a");
	if (thumb.length == menu.length) {
		for (var i=0; i<thumb.length; i++) {
			// event handlers for moving the mouse over the index thumbs and menu items
			thumb[i].onmouseover=MenuHighlight;
			thumb[i].onmouseout=MenuHighlight;
			menu[i].onmouseover=MenuHighlight;
			menu[i].onmouseout=MenuHighlight;
		};
	};
}; // end MakeRollovers


function MenuHighlight(e) {
	// This function highlights the thumbnail image in the 'index'
	// and the corresponding item in the menu list when either of 
	// the objects are moused-over on the 'gallery.html' page
	
	// get the event object
	if (!e) var e = window.event;
	// identify what was moused-over
	var targ = (e.target) ? e.target : e.srcElement;
	if (targ.nodeType == 3) targ = targ.parentNode; // fix Safari bug
	// get the type of event
	var whichevent = e.type;
	// get the id of the item mouse-over
	var whichobject = targ.id;
	parts = whichobject.split("_"); // split the id at the underscore
	var where = parts[0]; // get the location of the event
	var i = parseInt(parts[1]); // get the id number
	
	var indexId = "thumb_" + i; // this is the thumbnail to modify
	var menuId = "series_" + i; // this is the menu item to modify
	
	if (whichevent == "mouseover") {  // if onMouseOver
		document.getElementById(menuId).style.backgroundColor="#d0d0d0";
		document.getElementById(menuId).style.color="#333";
		document.getElementById(indexId).style.borderColor="#777";
	} else if (whichevent == "mouseout") { // if onMouseOut
		document.getElementById(menuId).style.backgroundColor="white";
		document.getElementById(menuId).style.color="#777";
		document.getElementById(indexId).style.borderColor="#FFF";
	};
}; // end MenuHighlight


function Initialise() {
	if (document.getElementById) {
		MakeSlideShow();
		MakeRollovers();
    };
}; // end Initialise


// set everything up when the page loads
window.onload=Initialise;