// Javascript Gallery with Trailing Image Preview

/* 
Author: Scott Ord, Pentura Solutions
Copyright 2005-2006
This code may be modified as long as this comment stays intact
*/

// Allows you to display an arbitrary number of images in a row/column
// gallery format, with page-to-page navigation as well as previous and
// next page functions.

// Integrated pop-up preview feature, displays larger images that follow
// the mouse withing the extents of the image thumbnail

// The thumbnail images should be numbered sequentially with the name 'thumb'
// i.e. thumb1.jpg, thumb2.jpg
// The preview images should be numbered sequentially with the name 'preview'
// i.e. preview1.jpg, preview2.jpg

// Do not use leading zeroes, as the indexing depends on a counter variable

// Passed as a parameter, this dictates the number of photos
// that the gallery will display
var numImages;

// Path to the thumbnail image directory
var thumbPath;

// Path to the preview image directory
var previewPath;

// Set the number of rows and columns
var numRows = 4;

var numCols = 3;

// Calculate the number of images per page based 
// on numRows and numCols
var imagesPerPage = numRows * numCols;

// Calculate the number of pages required by dividing
// total images by number per page and rounding up
var numPages;

// Keep track of the current page
var currentPage = 1;

// Determine whether to show image trail (preview)
// Defaults to 1, change if necessary
var showTrail = 1;

// Determine whether to show Title, Description, Price
// Defaults to 1, change if necessary
var showText = 1;

// Common implementation of a mod function
function mod(x, y) {
    return x - Math.floor(x / y) * y;
}

// Initialization function, pass in the path to your thumbs, previews, and the number of images
// Note: Must be called from the actual body of the document, doensn't actually seem to work from 'onload'

// param newThumbPath: Desired path to the thumbs
// param newPreviewPath: Desired path to the previews
// param newNumImages: Number of gallery images

function init(newThumbPath, newPreviewPath, newNumImages, newShowTrail, newShowText) {

	currentPage = 1;

	numImages = newNumImages;
	
	// Calculate the number of pages required by dividing
	// total images by number per page and rounding up	
	numPages = Math.ceil(numImages / imagesPerPage);
	
	thumbPath = newThumbPath;
	previewPath = newPreviewPath;
	
	showTrail = newShowTrail;
	showText = newShowText;
}

// Function to generate the page numbers to allow for navigation
// Generates plain HTML list items with named links, use CSS to
// display inline for best results

// param position: Whether it is the top or bottom (optional) navigation element

function generateTOC(position) {

	// Left and right arrow navigation?

	// Write the HTML with named list items for each page reference
	// Each reference will call jumpToPage with its page number as a parameter

	// Styled as an inline list	
	document.write("<ul>");
	for (var i=0; i < numPages; i++) {
		document.write("<li><a name=\"link\" href=\"#\" onClick=\"jumpToPage(" + (i+1) + ");\">&nbsp;" + (i+1) + "&nbsp;</a></li>\n");
	}
	// Close the list
	document.write("</ul>");
	
	// Get the array of list items that display the page navigation
	var linkList = document.getElementsByName("link");

	// Color the first page reference, as that is the page displayed on load
	if (position == "top") {
		linkList[0].style.color="#FFFFFF";
	}
	
	else if (position == "bottom") {
		linkList[numPages].style.color="#FFFFFF";		
	}

	
}

// Function to generate the placeholders for the images
// Generates plain HTML named image tags, again, use CSS
// to style to your liking.

function generateImages() {

	// Start paragraph, allows for easier styling of images with CSS
	document.write("<p>");

	for (var i=0; i < imagesPerPage; i++) {
	
		// Handles the case where we have less total images than would normally fit on a page
		// i.e. numImages < imagesPerPage
		if (i < numImages) {
	
			if (showTrail == 1) {
			
				if (showText == 1) {
				
				// Write the image tag, path to the image, filename, CSS class		
				// Uses span tags and ids to manipulate image tags with innerHTML for the imageTrail
				// We must pass the index to showtrail, as this allows it to fetch the descriptions
				
				document.write("<span id=\"thumbSpan" + (i+1) + "\" class=\"thumbSpan\">" +
					"<img src=\"" + thumbPath + "thumb" + (i+1) + ".jpg\" class=\"thumb\" id=\"thumb" + (i+1) + "\"" +
					"onmouseover=\"showtrail('" + previewPath + "preview" + (i+1) + ".jpg', " + i + ");\" onmouseout=\"hidetrail();\" /></span>");
				}
				
				else {
					document.write("<span id=\"thumbSpan" + (i+1) + "\" class=\"thumbSpan\">" +
						"<img src=\"" + thumbPath + "thumb" + (i+1) + ".jpg\" class=\"thumb\" id=\"thumb" + (i+1) + "\"" +
						"onmouseover=\"showtrail('" + previewPath + "preview" + (i+1) + ".jpg', '-1');\" onmouseout=\"hidetrail();\" /></span>");
				
				}
			}
			
			else {
				// Write the image tag, path to the image, filename, CSS class		
				// Uses span tags and ids to manipulate image tags with innerHTML for the imageTrail
				document.write("<span id=\"thumbSpan" + (i+1) + "\"class=\"thumbSpan\">" +
					"<img src=\"" + thumbPath + "thumb" + (i+1) + ".jpg\" class=\"thumb\" id=\"thumb" + (i+1) + "\"></span>");
			}
			
			// This will insert a line break at the end of a row
			if ( mod( (i+1), numCols) == 0 ) {
				document.write("<br>");
			}
		}
	}
	// Close the paragraph
	document.write("</p>");
}

// Skips directly to a page

// param page: Page to skip to

function jumpToPage(page) {	
	
	// Get the array of list items that display the page navigation
	var linkList = document.getElementsByName("link");
	
	// Color the old current page back to the old color
	linkList[currentPage-1].style.color="#4F3610";
	
	// Same for bottom nav
	linkList[numPages + (currentPage-1)].style.color="#4F3610";
	
	// Update the page reference
	currentPage = page;
	
	// Change the color of the current page so the user can
	// tell which page they're browsing
	linkList[page-1].style.color="#FFFFFF";
	
	// Same for bottom nav
	linkList[numPages + (page-1)].style.color="#FFFFFF";
	
	
	
	// Calculate the correct offset to display the images for this page
	var offset = (page - 1) * imagesPerPage;
	
	var threshold = offset + imagesPerPage;
	
	// Grab a reference to all of the thumbs on the page
	//var spanList = document.getElementsByName("thumbSpan");
	var thumbList = document.getElementsByName("thumb");
	
    for (i=0; i < imagesPerPage; i++) {
    
    	var thumb = document.getElementById("thumb" + (i+1));
    	var thumbSpan = document.getElementById("thumbSpan" + (i+1));
    	
    	// Shows the current image number for debugging
    	//alert(offset+i+1);
    	    	
    	// If the image has been previously hidden, unhide it.
    	//if (thumbList[i].style.display = "none") {
    	if (thumb.style.display = "none") {
    		//thumbList[i].style.display = "";
    		thumb.style.display = "";
    	}
    	
    	// Before we try to display it, check to see if the image is out of range
    	if ( ((i+1) + offset) > numImages) {
    		//thumbList[i].style.display = "none";
    		thumb.style.display = "none";
    	}
    	
    	// If it's not out of range, change the image
    	else {
    	
    		if (showTrail == 1) {
    		
    			if (showText == 1) {
    			
					var newSpanHTML = "<img src=\"" + thumbPath + "thumb" + (i+1 + offset) + ".jpg\" class=\"thumb\" id=\"thumb" + (i+1) + "\"" +
						"onmouseover=\"showtrail('" + previewPath + "preview" + (i+1 + offset) + ".jpg', " + (i + offset) + ");\" " +
						"onmouseout=\"hidetrail();\" />"
					thumbSpan.innerHTML = newSpanHTML;
    			}
    			
    			else {
					var newSpanHTML = "<img src=\"" + thumbPath + "thumb" + (i+1 + offset) + ".jpg\" class=\"thumb\" id=\"thumb" + (i+1) + "\"" +
						"onmouseover=\"showtrail('" + previewPath + "preview" + (i+1 + offset) + ".jpg', '-1');\" " +
						"onmouseout=\"hidetrail();\" />"
					thumbSpan.innerHTML = newSpanHTML;
    			
    			}
    		}
    		
    		else {
				var newSpanHTML = "<img src=\"" + thumbPath + "thumb" + (i+1 + offset) + ".jpg\" class=\"thumb\" id=\"thumb" + (i+1) + "\"/>"
	    		thumbSpan.innerHTML = newSpanHTML;
    		
    		}
    	
    		
    		
    	}
    }
}

// Displays the previous page in the gallery
function previous()
{
	if(currentPage == 1)
	{
		jumpToPage(numPages);
	}
	else
	{
		jumpToPage(currentPage-1);
	}
}

// Displays the next page in the gallery
function next()
{
	if(currentPage == numPages)
	{
		jumpToPage(1);
	}
	else
	{
		jumpToPage(currentPage+1);
	}
}