// Keep track of which image we're current looking at
var curImage = null;

// Reposition the gallery to be at the center of the page
// even when the page has been scrolled
function adjust(){
		// Locate the gallery
		var obj = id("gallery");
		
		// Make sure that the gallery exists
		if ( !obj ) return;
		
		// Find its current height and width
		var w = getWidth( obj );
		var h = getHeight( obj );
		
		// Position the box, vertically, in the middle of the window
		var t = scrollY() + ( windowHeight() / 2 ) - ( h / 2 );
		
		// But no heigher than the top of the page
		if ( t < 0 ) t = 0;
		
		// Position the box, horizontally, in the middle of the window
		var l = scrollX() + ( windowWidth() / 2 ) - ( w / 2 );
		
		// But no less than the left of the page
		if ( l < 0 ) l = 0;
		
		// Set the adjusted position of the element
		setY( obj, t );
		setX( obj, l );
};

// Readjust the position of the gallery every time
// the user scrolls the page or resizes the browser
window.onresize = document.onscroll = adjust;

// Start a slideshow of all the images within a particular gallery
function startShow(obj) {
		// Locate all the individual images of the gallery
		var elem = tag( "li", obj );
		
		// Locate the overall display gallery
		var gallery = id("gallery");
		
		// Go through each of the matched gallery images
		for ( var i = 0; i < elem.length; i++ )  new function() {
				// Remember which current element is being referenced
				var cur = elem[i];
				
				// We're going to show a new image every 5 seconds
				setTimeout(function(){
						// Show the specific image
						showImage( cur );
						
						// And start fading it out after 3.5 seconds
						// (for a 1 second fade)
						setTimeout(function(){
								fadeOut( gallery, 0, 10 );
						}, 3500 );
				}, i * 5000 );
						
		};
		
		// And then hide the overlay when it's all over
		setTimeout( hideOverlay, 5000 * elem.length );
		
		// But show the overlay, as the slideshow is just starting
		showOverlay();
}

// Hide the grey overlay and the current gallery
function hideOverlay() {
		// Make sure that we reset the current image
		curImage = null;
		
		// and hide the overlay and gallery
		hide( id("overlay") );
		hide( id("gallery") );
}

// Show the grey overlay
function showOverlay() {
		// Find the overlay
		var over = id("overlay");
		
		// Make it as tall and wide as the entire page
		// (this helps with scrolling)
		over.style.height = pageHeight() + "px";
		over.style.width = pageWidth() + "px";
		
		// And fade it in
		fadeIn( over, 50, 10 );
}

// Find the previous image and show it
function prevImage() {
		// Locate the previous gallery image and show it
		showImage( prev( curImage ) );
		
		// Prevent the link from operating as normal
		return false;
}

// Find the next image and show it
function nextImage() {
		// Locate the next gallery image and show it
		showImage( next( curImage ) );
		
		// Prevent the link from operating as normal
		return false;
}

// Show the current gallery image
function showImage(cur) {
		// Remember which image we're currently dealing with
		curImage = cur;
		
		// Find the gallery image
		var img = id("gallery_image");
		
		// Remove the image, if there's one already there
		if ( img.firstChild )
				img.removeChild( img.firstChild );
				
		// And add our new image in, instead
		img.appendChild( cur.firstChild.cloneNode( true ) );

		// We're setting the caption of the gallery image to
		// the 'alt' contents of the regular image
		id("gallery_title").innerHTML = cur.firstChild.firstChild.alt;
		
		// Hide the next link if we're at the end of the slideshow
		if ( !next(cur) )
				hide( id("gallery_next") );
				
		// Otherwise, make sure that it's visible
		else
				show( id("gallery_next") );
		
		// Hide the previous link if we're at the start of the slideshow
		if ( !prev(cur) )
				hide( id("gallery_prev") );
				
		// Otherwise, we need to be sure that it's visible
		else
				show( id("gallery_prev") );
		
		// Locate the main gallery
		var gallery = id("gallery");
		
		// Set the correct class (so that it's the correct size)
		gallery.className = cur.className;
		
		// Then fade it in smoothly
		fadeIn( gallery, 100, 10 );
		
		// Make sure that the gallery is positioned in the right place
		// on the screen
		adjust();
}

// Wait for the document to finish loading before modifying
// or traversing the DOM
window.onload = function() {
		/*
		 * Create the following DOM structure:
		 * <div id="overlay"></div>
		 * <div id="gallery">
		 *     <div id="gallery_image"></div>
		 *     <div id="gallery_prev"><a href="">&laquo; Prev</a></div>
		 *     <div id="gallery_next"><a href="">Next &raquo;</a></div>
		 *     <div id="gallery_title"></div>
		 * </div>
		 */
		 
		// Create the transparent, gray, overlay
		var overlay = document.createElement("div");
		overlay.id = "overlay";

		// Make it so that when the grey background is clicked,
		// the gallery and background are hidden
		overlay.onclick = hideOverlay;
		
		// Add the overlay into the DOM
		document.body.appendChild( overlay );
		
		// Create the overall gallery holder
		var gallery = document.createElement("div");
		gallery.id = "gallery";
		
		// And add in all the organization divs
		gallery.innerHTML = '<div id="gallery_image"></div>' +
				'<div id="gallery_prev"><a href="">&laquo; Prev</a></div>' +
				'<div id="gallery_next"><a href="">Next &raquo;</a></div>' +
				'<div id="gallery_title"></div>';
		
		// Add the gallery into the DOM
		document.body.appendChild( gallery );
		
		// Handle support for which the next and previous links
		// are clicked within the gallery
		id("gallery_next").onclick = nextImage;
		id("gallery_prev").onclick = prevImage;
		
		// Locate all the galleries on the site
		var g = byClass( "gallery", "ul" );
		
		// Go through all of them
		for ( var i = 0; i < g.length; i++ ) {
				// And locate all the links to the slideshow images
				var link = tag( "a", g[i] );
				
				// Go through each of the image links
				for ( var j = 0; j < link.length; j++ ) {
						// Make it such that, when clicked, they display the
						// image gallery instead of going to the imagae
						link[j].onclick = function(){
								// Show the gray background
								showOverlay();
								
								// Show the image, in the gallery
								//showImage( this.parentNode );
								
								// Make sure that the browser doesn't go the
								// image, like it normally would
								return false;
						};
				}
				
				// We're going to create some extra contextual information
				// surrounding the slideshow
				
				// Create the slideshow header, wrapper
				var div = document.createElement("div");
				div.className = "slideshow";
				
				// Show the name of the slideshow, based upon the 
				// title of the gallery
				var span = document.createElement("span");
				span.innerHTML = g[i].title;
				div.appendChild( span );
				
				// Create a link so that we can view all the
				// gallery images as a slideshow
				var a = document.createElement("a");
				a.href = "";
				a.innerHTML = "&raquo; View as a Slideshow";
				
				// Make it so that it starts the slideshow
				// whenever it's clicked
				a.onclick = function(){
						startShow( this.parentNode.nextSibling );
						return false;
				};
				
				// Add the new navigation and header to the page
				div.appendChild( a );
				g[i].parentNode.insertBefore( div, g[i] );
		}
};