// This is CUAJAX Gallery Version 1.00 by Lucas Castro.
// Original implementation of Lightbox Gallery by Steven Dagenais.
// --------------------------------------------------------------------------------
//
// INSTRUCTIONS:
// -------------
//
// 1. Ensure that the button that shuffles the gallery pages LEFT has the following event: onclick="shuffleGallery(0)" (and that this image starts hidden).
// 2. Ensure that the button that shuffles the gallery pages RIGHT has the following event: onclick="shuffleGallery(1)".
// 3. Each thumbnail image on the gallery page must be created using the following template:
//        <a id="cgi-gallery1" href="images/gallery/out_001.jpg" rel="lightbox[outdoors]"><img id="cgi-thumb1" src="images/thumbs/out_001.jpg" /></a>
//        cgi-gallery == a prefix which you can change freely. The number afterward must be kept (starting from 1).
//        images/gallery/ == the path of the full images.
//        out == the name of the gallery (must be used as the id of the link that calls up the gallery (see below).
//        cgi-thumb == a prefix which you can change freely. The number afterward must be kept (starting from 1).
//        images/thumbs/ == the path of the thumbnail images.
//
// 4. To call up a gallery (there can be multiple galleries per page (e.g., exteriors, interiors, finishings, etc) use the following template:
//        <a id="out" onclick="startAjaxGallery(this.id)"><img src="images/cgi-out.jpg" /><h2>Exteriors<br />Gallery</h2></a>
//        id="out" == the name of the gallery for coding purposes. This name MUST BE USED IN THE FILENAMES of the thumbnails and the full images.
//        onclick="startAjaxGallery(this.id)" == the event call that starts up the entire CUAJAX Gallery. You must have one of these for each gallery in the page.
//
//        ALTERNATIVELY, if you have only one gallery, you can insert the following code within the <body> tag:
//        <script type="text/javascript">startAjaxGallery("main");< /script>
//        NOTE: you must remove the space before /script.
//
// 5. Change the constants below to match the values for this project.
//
// 6. Ensure that all thumbnails and all full images are named the same --> [gallery name]_[image number].jpg (e.g., out_001.jpg, or in_015.jpg).
//
// 7. Insert the following code before any other DIVs in your <body> tag.
//		<div id="cuajax-loadingimage" style="visibility:hidden;">
//    		<img id="cuajax-loadinggif" src="gallery/images/loading.gif" />
//	    </div>
//
// 8. Insert the following code into your main CSS file.
//	#cuajax-loadingimage{
//		position:fixed;
//		top:0px;
//		left:0px;
//		height:100%;
//		width:100%;
//		padding-top:215px;
//		z-index:100;
//		background:url("../gallery/images/fadeblack.png") repeat;
//	}
//	#cuajax-loadinggif{
//		border:solid 16px #FFFFFF;
//		background-color:#FFFFFF
//	}
//
// --------------------------------------------------------------------------------

	// CONSTANTS unique to this project. Change these to adapt this code for new projects.
	var cag_imagesPerPage=3; // maximum number of images per gallery page.
	var cag_loadingImageDIV="cuajax-loadingimage"; // name of a hidden DIV or IMG with a "loading" type of animation.
	var cag_thumbsDIV="bsr-thumbs-cont"; // div containing the thumbnails (to be displayed once a gallery is selected).
	var cag_originalDIV="bsr-buttons-cont"; // div that should be hidden once a gallery is displayed.
	var cag_thumbPath="images/thumbs/"; // folder where thumbnails are located.
	var cag_fullPath="images/gallery/"; // folder where full-sized images are located.
	var cag_scrollLeftImage="bsr-prevthumb"; // button used to scroll left for galleries with multiple pages.
	var cag_scrollRightImage="bsr-nextthumb"; // button used to scroll right for galleries with multiple pages.
	var cag_thumbImage="bsr-thumb"; // PREFIX of sequence of IMG tags that contain thumbnails (e.g., "cgi-thumb" for sequence: cgi-thumb1, cgi-thumb2, etc).
	var cag_fullAnchor="bsr-gallery"; // PREFIX of sequence of Anchor tags that contain links to full images (e.g., "cgi-gallery" for sequence: cgi-gallery1, cgi-gallery2, etc).
	
	
	// Regular variables that do NOT need to be changed for each project.
	var cag_i, cag_j, cag_k, cag_req, cag_image, cag_currentGallery;
	var cag_currentIndex=0;
	var cag_thumbNames=new Array();
	var cag_photoNames=new Array();
	var cag_photoExists=new Boolean(true);
	var cag_galleryMod;
	var cag_gallerySize;
	var cag_fileName="";
	var cag_tid;
	var cag_tempMod;
	var cag_tempLength;
	var cag_tempString;
	var cag_tempName="";
	var cag_doneLoad=new Boolean(false);
	var cag_browser=navigator.appName;
	var cag_tempIDName="";
	var cag_tempAnchor;
	var cag_imgLoader = new Image();

	// Creates the XMLHttpRequest object to start AJAX.
	function getRequest()
	{
		if(window.XMLHttpRequest)
		{
			return new XMLHttpRequest;
		}
		else if(window.ActiveXObject)
		{
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
		else
		{
			return 0;
		}
	}

	// Start the whole process of the AJAX gallery loading.
	function startAjaxGallery(cag_galleryID)
	{
		// Startup AJAX.
		cag_req = getRequest();
		if (cag_req!=0)
		{
			// Start the gallery loading process.
			startGallery(cag_galleryID);
		}
		else
		{
			alert("Your browser does not support AJAX. This page cannot be properly displayed.");
		}
	}
	
	function resetVariables()
	{
		cag_galleryMod=0;
		cag_gallerySize==0;
		cag_currentIndex=0;
		cag_thumbNames=[];
		cag_photoNames=[];
		cag_galleryMod=0;
		cag_fileName="";
		cag_tid=null;
		cag_tempMod=0;
		cag_tempLength=0;
		cag_tempString="";
		cag_tempName="";
		cag_doneLoad=false;
	}
	
	// Starts the gallery loading process, now that XMLHttpRequest is created.
	function startGallery(cag_GID)
	{
		// Check to see if the user is trying to open the current gallery. If so, change nothing.
		if (cag_currentGallery!=cag_GID) // New gallery selected.
		{
			// Hide left arrow (because we always start on page 1 of a new gallery).
			document.getElementById(cag_scrollLeftImage).style.visibility = "hidden";
			
			// Reset variables.
			resetVariables();
	
			// Set the name of the current gallery.
			cag_currentGallery=cag_GID;
			
			// Start the "loading" animation (make the div with the animation gif visible).
			document.getElementById(cag_loadingImageDIV).style.visibility = "visible";

			// Look for file to load based on current position in the array, and the name of the current gallery.
			lookForFile((cag_currentIndex +1), cag_currentGallery);
		}
	}
	
	function lookForFile (cag_indexNumber, cag_shortName) // Limited to file index of 0 to 999.
	{
		// Prepare the cag_fileName.
		if (cag_indexNumber<10 && cag_indexNumber>=0) 
		{
			cag_fileName=cag_shortName + '_00' + cag_indexNumber + '.jpg';
		}
		else if (cag_indexNumber<100 && cag_indexNumber>9)
		{
			cag_fileName=cag_shortName + '_0' + cag_indexNumber + '.jpg';
		}
		else if (cag_indexNumber>99 && cag_indexNumber<1000)
		{
			cag_fileName=cag_shortName + '_' + cag_indexNumber + '.jpg';
		}
		else
		{
			alert("Error: there are too many files in this gallery. Loading failed.");
		}

		// Load cag_fileName.
		loadFile();
	}
	
	cag_imgLoader.onload = function (evt)
	{
		// Not done loading.
		cag_doneLoad=false;
		
		// Load the file into the thumbnail array, and the full image array.
		cag_thumbNames[cag_currentIndex]=cag_thumbPath + cag_fileName;
		cag_photoNames[cag_currentIndex]=cag_fullPath + cag_fileName;
		
		// Increase the image index.
		cag_currentIndex++;
		
		// If we have one full page of images, load the gallery.
		if (cag_currentIndex == (cag_imagesPerPage+1))
		{
			preloadGallery();
		}
		else
		{
			// Continue looking for images to load.
			lookForFile((cag_currentIndex +1), cag_currentGallery);
		}
	}
	
	cag_imgLoader.onerror = function (evt)
	{
		// Done loading.
		cag_doneLoad=true;

		noMoreImages();
	}

	function loadFile()
	{
		cag_tempName=(cag_thumbPath + cag_fileName);
		//alert(cag_tempName + " is loading.");
		cag_imgLoader.src=cag_tempName;
	}
	
	function preloadGallery()
	{
		// Hide right shuffle arrow.
		document.getElementById(cag_scrollRightImage).style.visibility = "visible";					

		// Now actually display the gallery
		document.getElementById(cag_thumbsDIV).style.visibility = "visible";
		if(cag_originalDIV!=null)document.getElementById(cag_originalDIV).style.visibility = "hidden";

		// Stop the "loading" animation.
		document.getElementById(cag_loadingImageDIV).style.visibility = "hidden";

		cag_gallerySize=cag_thumbNames.length;

		loadGallery();
	}
	
	function noMoreImages() // We have found all available images.
	{
		// Run code to check for errors (or if the next file name exists).
		// If no errors, run code to display the gallery.

		// Stop the "loading" animation.
		document.getElementById(cag_loadingImageDIV).style.visibility = "hidden";

		// Display the gallery, unless there is nothing to display say that the gallery is empty.
		cag_gallerySize=cag_thumbNames.length;
		if (cag_gallerySize==0 || cag_thumbNames[0]=="" || cag_thumbNames[0]==null)
		{
			document.getElementById(cag_thumbsDIV).style.visibility = "hidden";
			if(cag_originalDIV!=null)document.getElementById(cag_originalDIV).style.visibility = "visible";
			alert("This gallery is currently empty.");
		}
		else if (cag_gallerySize>0)
		{
			loadGallery();
			
			// Hide right shuffle arrow.
			if (cag_gallerySize<=cag_imagesPerPage) document.getElementById(cag_scrollRightImage).style.visibility = "hidden";					

			// Now actually display the gallery
			document.getElementById(cag_thumbsDIV).style.visibility = "visible";
			if(cag_originalDIV!=null)document.getElementById(cag_originalDIV).style.visibility = "hidden";
		}
		else
		{
			alert("Error loading the gallery. Please reload the page and try again.");
		}
	}

// --------------------------------------------------------------------
// Functions to work with the gallery (loading, updating, shuffling, etc).
// --------------------------------------------------------------------


	function backToGallery()
	{
		// Go back to main gallery category selection.
//		document.getElementById(cag_thumbsDIV).style.visibility = "hidden";
//		alert("1");
//		if(cag_originalDIV!=null)document.getElementById(cag_originalDIV).style.visibility = "visible";
		window.location.reload();
	}

	function loadAndLink(cag_numbToLoad)
	{
		var galleryanchor;
		
		if (cag_numbToLoad<cag_imagesPerPage)
		{
			document.getElementById(cag_scrollRightImage).style.visibility = "hidden";
		}
		else if (cag_numbToLoad+cag_galleryMod==cag_gallerySize)
		{
			document.getElementById(cag_scrollRightImage).style.visibility = "hidden";
		}

		for (cag_j=0;cag_j<cag_imagesPerPage;cag_j++)
		{
			// If there is an image (out of cag_imagesPerPage) to load, load it
			cag_image=document.getElementById(cag_thumbImage + (cag_j+1));
			galleryanchor=document.getElementById(cag_fullAnchor + (cag_j+1));
			if(cag_j<cag_numbToLoad)
			{
				cag_image.style.visibility = "visible";
				galleryanchor.style.visibility = "visible";
				// Display thumbnail #cag_i+1
				cag_image.src=cag_thumbNames[cag_j + cag_galleryMod];
				// Link the thumbnail to the appropriate full image
				galleryanchor.href=cag_photoNames[cag_j + cag_galleryMod];
			}
			else
			{
				cag_image.style.visibility = "hidden";
				galleryanchor.style.visibility = "hidden";
			}
		}
		
		// Stop the "loading" animation.
		document.getElementById(cag_loadingImageDIV).style.visibility = "hidden";
		
		if (cag_currentIndex == (cag_imagesPerPage+1))
		{
			// Continue looking for images to load.
			lookForFile((cag_currentIndex +1), cag_currentGallery);
		}
	}

	function loadGallery()
	{
		// Make sure that the proper number of images are displayed (max cag_imagesPerPage at a time)
		if ((cag_gallerySize-cag_galleryMod)>cag_imagesPerPage)
		{
			loadAndLink(cag_imagesPerPage);
			
		}
		else if (cag_gallerySize>cag_imagesPerPage)
		{
			loadAndLink(cag_gallerySize-cag_galleryMod);
		}
		else
		{
			loadAndLink(cag_gallerySize);
		}
	}

	// Shuffles the gallery left or right, for galleries with (cag_imagesPerPage+1) or more images
	function shuffleGallery(cag_direction)
	{
		// Start the "loading" animation.
		document.getElementById(cag_loadingImageDIV).style.visibility = "visible";

		// Left
		if (cag_direction==0)
		{
			cag_galleryMod-=cag_imagesPerPage;
			if (cag_galleryMod<1) document.getElementById(cag_scrollLeftImage).style.visibility = "hidden";
			if (cag_gallerySize>cag_imagesPerPage) document.getElementById(cag_scrollRightImage).style.visibility = "visible";			
			loadGallery();
			
		}// Right
		else if (cag_direction==1)
		{
			if(cag_doneLoad==false)
			{
				cag_k = cag_imagesPerPage+cag_imagesPerPage+cag_galleryMod+1;
				if (cag_thumbNames.length < cag_k)
				{
					pauseShuffle();
				}
				else
				{
					cag_galleryMod+=cag_imagesPerPage;
					if (cag_galleryMod>(cag_imagesPerPage-1)) document.getElementById(cag_scrollLeftImage).style.visibility = "visible";

					// Define the size of the gallery according to number of loaded images.
					cag_gallerySize=cag_thumbNames.length;
					
					loadGallery();
				}
			}
			else
			{
				cag_galleryMod+=cag_imagesPerPage;
				if (cag_galleryMod>(cag_imagesPerPage-1)) document.getElementById(cag_scrollLeftImage).style.visibility = "visible";
				loadGallery();
			}
		}
	}

	function pauseShuffle()
	{
		cag_tid=setTimeout("shuffleGallery(1)", 500);
	}