/**********************************************************
Author:
Adam Barry
Klestrup | partners
www.klestrup-partners.dk

Date: November 11 2007

© 2007 Adam Barry, all rights reserved
-----------------------------------------------------------

Name:
thumbnails script

-----------------------------------------------------------
Description:
A script that enables thumbnail/preview functionality to
multiple thumbnail structures. The construction of the
thumbnail list means that browsers that do not support
document.getElementsByTagName will still be able to view
the standard-images, although in new windows.

-----------------------------------------------------------
Usage:
Simply place a link to the this script in the head-section
of the XHTML page. The script will then automatically
execute on page load.

<script type="text/javascript" src="thumbnails.js"></script>

Make sure that your list structure has (1) an image element
where the class-name is "previewImage" and (2) a unordered
list with "thumbnails" as class-name according to the
example below.

-----------------------------------------------------------
Example:
<script type="text/javascript" src="thumbnails.js"></script>

<img class="previewImage" src="books/bookname/standard/image1.png" alt=""/>

<ul class="thumbnails">
	<li>
		<a href="components/imagegallery/standard/image1.png" class="selected">
			<img src="components/imagegallery/thumbs/image1.png" alt=""/>
			<span>1</span>
		</a>
	</li>
	<li>
		<a href="components/imagegallery/standard/image2.png">
			<img src="components/imagegallery/thumbs/image2.png" alt=""/>
			<span>2</span>
		</a>
	</li>
	<li>
</ul>

-----------------------------------------------------------
Dependencies:
This script depends on the windowOnLoad-script to execute

**********************************************************/

var imageGalleries = new Array();
function imageGallery (element,previewImage,thumbnails,currentPosition) {
	this.element = element;
	this.previewImage = previewImage;
	this.thumbnails = new Array();
	this.currentPosition = currentPosition;
}


function initImageGalleries () {
	if (!document.getElementsByTagName) return;

	var elements = document.getElementsByTagName("div");

	/* When an element with the classname 'imageGallery' is found
	   create a new entry in the imageGalleries array */
	for (var i = 0; i < elements.length; i++) {
		if (elements[i].className == "imageGallery") {
			imageGalleries.push(new imageGallery(elements[i],'','',''))
		}
	}

	/* If the imageGalleries array is empty do not proceed  */
	if (!imageGalleries[0]) return;

	/* Run through each imageGallery in the imageGalleries array */
	for (var x = 0; x < imageGalleries.length; x++) {
		//alert("Debug: Now processing imageGallery No. #"+x);
		var gallery = imageGalleries[x].element;

		/* Identify the previewImage of the current imageGallery
		   and store it in the imageGalleries array */
		var images = gallery.getElementsByTagName("img");

		for (var i = 0; i < images.length; i++) {
			if (images[i].className.indexOf('previewImage') == 0) {
				imageGalleries[x].previewImage = images[i];
			}
		}

		if (!imageGalleries[x].previewImage) return;
		var previewImage = imageGalleries[x].previewImage;

		/* Now that we have identified the previewImage let's
		   identify the thumbnail images and add them the the
		   imageGalleries array */
		var thumbnailList;
		var lists = gallery.getElementsByTagName("ul");

		for (var i = 0; i < lists.length; i++) {
			if (lists[i].className == 'thumbnails') {
				thumbnailList = lists[i];
			}
		}

		/* Identify the child items of the thumbnailList */
		var thumbnails = thumbnailList.getElementsByTagName("a");

		/* When a thumbnail element is found add it to thumbnails array in
		   the current imageGallery object */
		for (var i = 0; i < thumbnails.length; i++) {
			imageGalleries[x].thumbnails.push(thumbnails[i]);
		}

		/* Quit the function if no thumbnails have been found */
		if (!imageGalleries[x].thumbnails[0]) return;

		/* To keep track of which thumbnail is currently selected
		   find it an store it in the current imageGallery object */
		for (var i = 0; i < thumbnails.length; i++) {
			if (thumbnails[i].className == 'selected') {
				imageGalleries[x].currentPosition = i;
			}
		}

		/* The thumbnails have now been stored in the imageGallery object
		   so now add some functionality to them */
		for (var i = 0; i < thumbnails.length; i++) {
			thumbnails[i].onclick = function() {
				var parentNode = this.parentNode.parentNode.parentNode.parentNode;

				thumbnailHandler(parentNode,this);
				return false;	/* make sure the link is not actually followed */
			}
		}

		/* Make it possible to proceed to the next image by clicking the previewImage */
		previewImage.onclick = function() {
				var currentImageGallery;

			/* identify the image currently shown */
			for (var i = 0; i < imageGalleries.length; i++) {
				if (imageGalleries[i].previewImage == this) {
					currentImageGallery = imageGalleries[i].element;
				}
			}
			showNextImage(currentImageGallery);
		}

		/* Make it possible to navigate through the images by mouse scroll */
		initMouseScroll(previewImage);
	}

	/* Preload the images to make viewing faster */
	for (var i = 0; i < imageGalleries.length; i++) {
		preloadImages(imageGalleries[i].element);
	}
}
addLoadEvent(function(){initImageGalleries();});


function identifyImageGallery(imageGallery) {
	var currentImageGallery;

	/* Identify the position of the current imageGallery
	   in the imageGalleries array */
	for (var i = 0; i < imageGalleries.length; i++) {

		if (imageGalleries[i].element == imageGallery) {
			currentImageGallery = imageGalleries[i];
		}
	}

	return currentImageGallery;
}

function thumbnailHandler (imageGallery,thumbnail) {
	clearThumbnails(imageGallery);
	thumbnail.className+="selected";
	thumbnail.blur();
	showImage(imageGallery,thumbnail);
	setDisplayedThumbnail(imageGallery,thumbnail);
}

function clearThumbnails (imageGallery) {
	var currentImageGallery = identifyImageGallery(imageGallery);

	/* Loop through the thumbnails and make sure none of them
	   are selected */
	for (var i = 0; i < currentImageGallery.thumbnails.length; i++) {
		currentImageGallery.thumbnails[i].className = "";
	}
}

function showImage (imageGallery,thumbnail) {
	var currentImageGallery = identifyImageGallery(imageGallery);
	var path = thumbnail.href;

	currentImageGallery.previewImage.src = path;
}

function setDisplayedThumbnail(imageGallery,thumbnail) {
	var currentImageGallery = identifyImageGallery(imageGallery);

	for (var i = 0; i < currentImageGallery.thumbnails.length; i++) {
		if (currentImageGallery.thumbnails[i] == thumbnail) {
			currentImageGallery.currentPosition = i;
		}
	}
}

function showNextImage (imageGallery) {
	var currentImageGallery = identifyImageGallery(imageGallery);
	var noOfThumbnails = currentImageGallery.thumbnails.length-1;
	var nextImage;

	if (currentImageGallery.currentPosition < noOfThumbnails) {
		nextPosition = currentImageGallery.currentPosition + 1;
		nextImage = currentImageGallery.thumbnails[nextPosition];
	}
	else {
		nextImage = currentImageGallery.thumbnails[0];
	}

	thumbnailHandler(imageGallery,nextImage);
}

function showPreviousImage (imageGallery) {
	var currentImageGallery = identifyImageGallery(imageGallery);
	var noOfThumbnails = currentImageGallery.thumbnails.length-1;
	var previousImage;

	if (currentImageGallery.currentPosition > 0) {
		previousPosition = currentImageGallery.currentPosition - 1;
		previousImage = currentImageGallery.thumbnails[previousPosition];
	}
	else {
		previousImage = currentImageGallery.thumbnails[noOfThumbnails];
	}

	thumbnailHandler(imageGallery,previousImage);
}

function setDisplayedThumbnail(imageGallery,thumbnail) {
	var currentImageGallery = identifyImageGallery(imageGallery);

	for (var i = 0; i < currentImageGallery.thumbnails.length; i++) {
		if (currentImageGallery.thumbnails[i] == thumbnail) {
			currentImageGallery.currentPosition = i;
		}
	}
}


/*: Mouse scroll navigation
Functions relevant
----------------------------------------------------------*/

function initMouseScroll (previewImage) {
	if (previewImage.addEventListener) {
		previewImage.addEventListener ("DOMMouseScroll",wheelGallery,false); /* Firefox */
		previewImage.addEventListener ("mousewheel",wheelGallery,false); /* Safari  & Opera */
	} else if (previewImage.attachEvent) {
		previewImage.attachEvent ("onmousewheel",wheelGallery); /* Internet Explorer */
	} else {
		previewImage.DOMMouseScroll = wheelGallery;
	}
}

function eventTrigger (e) {
    if (! e) {
        e = event;
	}

    return e.target || e.srcElement;
}

function handleWheelGallery (delta,event) {

	/* Identify which object triggered the mouse scroll event */
	var obj = eventTrigger (event);
	var currentImageGallery;

	for (var i = 0; i < imageGalleries.length; i++) {
		if (imageGalleries[i].previewImage == obj) {
			currentImageGallery = imageGalleries[i].element;
		}
	}

	/* Mouse scroll down */
	if (delta < 0) {
		showNextImage(currentImageGallery);
	}
	/* Mouse scroll up */
	else {
		showPreviousImage(currentImageGallery);
	}
}

function wheelGallery (event) {
	var delta = 0;

	if (!event) { /* For IE. */
		event = window.event;
	}

	if (event.wheelDelta) { /* IE/Opera. */
		delta = event.wheelDelta/120;
		if (window.opera) {
			delta = -delta;
		}
	}

	else if (event.detail) { /** Mozilla case. */
			delta = -event.detail/3;
	}

	if (delta) {
		handleWheelGallery(delta,event);
	}

	if (event.preventDefault) {
		event.preventDefault();
	}

	event.returnValue = false;
}


/*: Pre-load thumbnail images
Functions relevant
----------------------------------------------------------*/

String.prototype.reverse = function () {
	var s = "";
	var i = this.length;

	while (i>0) {
		s += this.substring(i-1,i);
		i--;
	}
    return s;
}

function getFileName (string) {
	var reversePath = string.reverse();
	var splitPath = reversePath.split("/");
	var fileName = splitPath[0].reverse();
	return fileName;
}

function preloadImages (imageGallery) {
	var currentImageGallery;

	/* Identify the position of the current imageGallery
	   in the imageGalleries array */
	for (var i = 0; i < imageGalleries.length; i++) {

		if (imageGalleries[i].element == imageGallery) {
			currentImageGallery = imageGalleries[i];
		}
	}

	for (var i = 0; i < currentImageGallery.thumbnails.length; i++) {
		var path = currentImageGallery.thumbnails[i].href;
		var fileName = getFileName(path);

		fileName = new Image();
		fileName.src = path;
	}
}