// Author : Chris Tolley
// Date   : 5/29/2007

// The class definition for the photo viewer for the listing pages
// sLargeImgId is the img tag that holds the large image
// sContainerId is the id of the div tag that holds the thumbnails
// sControlDivId is the id of the div tag that holds the controls
// iNumPerPage is the number of thumbs per "page"
// Note: the photos must be containerd inside anchor tags that call
//		 cPhotoViewer.showLargeImage
function cPhotoViewer( sLargeImgId, sContainerId, sControlDivId, iNumPerPage )
{
	// If the large images isn't set, return
	if( ! sLargeImgId || sLargeImgId.length == 0 )
		return;
		
	// If the container id isn't set, return
	if( ! sContainerId || sContainerId.length == 0 )
		return;
		
	// If the control div id isn't set, return
	if( ! sControlDivId || sControlDivId.length == 0 )
		return;
		
	// Get the large img and the thumbnail container from the document
	this.oLargeImg = document.getElementById( sLargeImgId );
	
	// Get the thumbnail container from the document
	this.oContainer = document.getElementById( sContainerId );
	
	// Get the control div from the document
	this.oControls = document.getElementById( sControlDivId );
	
	// Get the number of thumbs to show per page
	this.iNumThumbsPerPage = ( iNumPerPage && iNumPerPage > 0 )? iNumPerPage: 6;
	
	// The current page number
	this.iCurrentPageNum = -1;
	
	// The index of the currently selected thumb
	this.iCurrentlySelected = 0;
	
	// If we couldn't get the large img, control div, or the container, return
	if( ! this.oLargeImg || ! this.oContainer || ! this.oControls )
		return;
		
	// The array that holds all of the photo viewers thumbnails
	this.arThumbs = new Array();
	
	// Store all of the thumbs in the array of thumbs
	var iNumThumbs = 0;
	for( var n = 0; n < this.oContainer.childNodes.length; ++n )
	{
		if( this.oContainer.childNodes[n].nodeType == 1 )
		{
			this.oContainer.childNodes[n].style.display = '';
			this.arThumbs[iNumThumbs++] = this.oContainer.childNodes[n];
		}// End if
	}// End for n
			
	// Get a named reference to this object
	var self = this;

	// Builds the controls for the photo viewer
	this.buildControls = function()
	{
		// Clear out the control container
		while( self.oControls.firstChild )
			self.oControls.removeChild( self.oControls.firstChild );
			
		// Rebuild the controls
		var sNumPhotos = self.arThumbs.length + ' photos ';
		self.oControls.appendChild( document.createTextNode( sNumPhotos ) );

		// Foreach page, build the link to that page
		var iMaxPages = Math.ceil( self.arThumbs.length / self.iNumThumbsPerPage );
		for( var n = 0; n < iMaxPages; ++n )
		{
			// If this is the current page
			if( n == self.iCurrentPageNum )
			{
				var oPage = document.createElement( 'span' );
				oPage.appendChild( document.createTextNode( n + 1 ) );
			}// End if
			else
			{
				// Otherwise, build a link to the page
				var oPage = document.createElement( 'a' );
				oPage.href = 'javascript:window.oPhotoViewer.showPage( "' + n + '" );';
				oPage.appendChild( document.createTextNode( n + 1 ) );
			}// End else
			
			// Put the page link into the controls div
			self.oControls.appendChild( oPage );
		}// End for n
	}// End cPhotoViewer.buildControls

	// Called when the user wants to see a different page
	this.showPage = function( iPageNum )
	{
		// If the user didn't enter a page number, return
		if( iPageNum < 0 )
			return;

		// If we are already on the page, return
		if( iPageNum == self.iCurrentPageNum )
			return;

		// If the requested page is greater than the max page number, use the
		// max page num instead
		var iMaxPages = Math.round( self.arThumbs.length / self.iNumThumbsPerPage );
		if( iPageNum > iMaxPages )
			iPageNum = iMaxPages;
			
		// Set the current page to the page that was passed in
		self.iCurrentPageNum = iPageNum;

		// Remove all of the child nodes from the container
		while( self.oContainer.firstChild )
			self.oContainer.removeChild( self.oContainer.firstChild );
			
		// Calculate the index for the first thumb of the current page
		var iFirstThumb = self.iNumThumbsPerPage * self.iCurrentPageNum;
		
		// Put each thumbnail into the container
		for( var n = 0; ( n < self.iNumThumbsPerPage ) && 
						( n + iFirstThumb < self.arThumbs.length ); ++n )
		{
			self.oContainer.appendChild( self.arThumbs[n + iFirstThumb] );
			
			// If this is the first node on the page, show its large image
			if( n == 0 )
				eval( self.oContainer.lastChild.href );
			else
				self.oContainer.lastChild.getElementsByTagName('img')[0].className = '';
		}// End for n
		
		// Rebuild the controls to reflect our new page
		self.buildControls();
	}// End cPhotoViewer.showPage
	
	
	// Called when the user clicks on a thumbnail
	// sLargePath is the path to the full sized image
	// iIndex is the index value for the thumb
	this.showLargeImage = function( sLargePath, iIndex )
	{
		// If the path isn't set, return
		if( ! sLargePath || sLargePath.length == 0 )
			return;
			
		// Show the large image to the user
		self.oLargeImg.src = sLargePath;
		
		// Set the new currently selected image index
		self.iCurrentlySelected = iIndex;
		
		// Calculate the offset to use when setting the styles for the currently
		// selected thumbnail
		var iOffset = self.iNumThumbsPerPage * self.iCurrentPageNum;
		
		// Foreach node in the container, set its style
		for( var n = 0; n < self.oContainer.childNodes.length; ++n )
		{
			if( ( n + iOffset ) == self.iCurrentlySelected )
				self.oContainer.childNodes[n].getElementsByTagName('img')[0].className = 'slct';
			else
				self.oContainer.childNodes[n].getElementsByTagName('img')[0].className = '';
		}// End for n
	}// End cPhotoViewer.showLargeImage
}// End cPhotoViewer class definition