window.addEvent('domready', function() {
	var thumbnailsPerPage = 24;
	
	var thumbnailBox = $("thumbnail-images");
	
	if (!thumbnailBox) {
		return;
	}
	
	var isVideoGallery = thumbnailBox.hasClass("video");
	
	var mailLink = $E("#canvas .controls .mail");
	var downloadLink = $E("#canvas .controls .download");
	var imageNumDisplay = $("current-image-num");
	var animating = false;

	// Set up the position on the main image so we can manipulate it.
	(function() {
		var el = $E("#canvas .large img");
		
		if (!el) {
			return;
		}
		
		var img = new Image;
		
		img.onload = function () {
			el.setStyles({
				position: 'absolute',
				top: el.offsetTop,
				left: el.offsetLeft
			});
		};
		
		img.src = el.src;
	})();
	
	function loadMainImage(el, src, descEl, thumb, index) {
		var img = new Image;
		
		var shrunk = false, loaded = false;
		
		function open() {
			if (shrunk && loaded) {
				el.src = src;
				descEl.innerHTML = thumb.title;
				
				// Change the links at the bottom of the page.
				var file = src.split('media/').getLast()
				mailLink.href = "send.php?file=" + file;
				var fullimage = thumb.getAttribute("data-fullimage") || file;
				downloadLink.href = "../download.php?from=membergallery&file=" + fullimage;
				$("sendFile").value = file;
				imageNumDisplay.innerHTML = (currentPage-1)*thumbnailsPerPage + index+1;
				
				var fx = new Fx.Styles(el, {
					onComplete: function() {
						animating = false;
					}
				});
				
				var ratio = img.width/img.height;
				var left = 350 - (img.width * 0.5);
				var width = 683;
				var height = 512;
				
				if (ratio > 1) {
					width = img.width;
					height = width / ratio;
				} else {
					height = img.height;
					width = height * ratio;
				}
				
				fx.start({
					width: [50, width],
					height: [50, height],
					top: [thumb.offsetTop, 0],
					left: [thumb.offsetLeft + thumb.offsetParent.offsetLeft, left]
				});
			}
		}
		
		var shrinkFx = new Fx.Styles(el, {
			duration: 250,
			onComplete: function() {
				shrunk = true;
				
				open();
			}
		});
		
		shrinkFx.start({
			width: 0,
			height: 0
		});
		
		img.onload = function() {
			loaded = true;
			open();
		}
		
		img.src = src;
	}
	
	function setOne(many, one, cls) {
		$$(many).each(function(i) {
			i.removeClass(cls);
		});
		one.addClass(cls);
	}
	
	function changeVideo(link, thumb) {
		// Load the main display.
		$("mediaplayer").parentNode.innerHTML = '<embed id="mediaplayer" src="mediaplayer.swf" width="650" height="400" allowscriptaccess="always" allowfullscreen="true" flashvars="width=650&height=400&file=' + link + '&displayheight=400&displaywidth=650&autostart=true&backcolor=0x000000&frontcolor=0xffffff&lightcolor=0xffffff&searchbar=false" />';
		$E("#canvas .large p").innerHTML = thumb.title;
		
		// Change the highligh in the thumbnail list.
		setOne("#canvas .thumbnails img", thumb, "active");
	}

	
	function changeImage(link, thumb, index) {
		if (isVideoGallery) {
			return changeVideo(link, thumb);
		}
		
		if (animating) {
			return;
		}
		
		animating = true;
		
		// Load the main display.
		loadMainImage($E("#canvas .large img"), link, $E("#canvas .large p"), thumb, index);
		
		// Change the highligh in the thumbnail list.
		setOne("#canvas .thumbnails img", thumb, "active");
	}
	
	// Set up change page links.
	var pageLinks = $$("#canvas .thumbnails .pages a");
	
	var currentPage = (function() {
		var page = 1;
		pageLinks.each(function(link, i) {
			if (link.hasClass("active")) {
				page = i+1;
			}
		});
		return page;
	})();

	pageLinks.each(function(link, i) {
		link.addEvent("click", function(e) {
			var e = new Event(e);
			e.preventDefault();
			
			var xhr = new XHR({
				onSuccess: function(response) {
					// Append response text to div.
					$("thumbnail-images").innerHTML = response;
					// Reset progress cursor.
					$(document.body).setStyle("cursor", "default");
					
					// Show active link.
					setOne(pageLinks, link, "active");
					currentPage = i+1;
					enableThumbnailHover();
					
					// Load the first image from the new page.
					var thumb = currentThumb();
					changeImage(thumb.parentNode.href, thumb, 0)
				},
				
				onFailure: function() {
					// Request failed, but allow them to click something again.
					animating = false;
					$(document.body).setStyle("cursor", "default");
				}
			});
			
			xhr.send("thumbnails.php" + link.search);
			
			return false;
		});
	});

	// Set up events in the thumbnails area.
	$E("#canvas .thumbnails").addEvent("click", function(e) {
		var e = new Event(e);
		
		// Handle thumbnail clicks.
		if (e.target.tagName == "IMG") {
			var index = $$("#canvas .thumbnails img").indexOf(e.target);
			if (!$(e.target).hasClass("active")) {
				changeImage(e.target.parentNode.href, e.target, index);
			}
			
			e.preventDefault();			
			return false;
		}
	});
	
	// Set up hover over thumbnails.
	function enableThumbnailHover() {
		if (isVideoGallery) {
			return;
		}
		
		var hovering = false;
		
		var hoverImage = new Element("img", {
			styles: {
				position: "absolute",
				height: "100px",
				display: "none"
			}
		});
		$("canvas").appendChild(hoverImage);
		
		$$("#canvas .thumbnails img").addEvent("mouseover", function(e) {
			var e = new Event(e);
			var thumb = e.target;
			
			hovering = true;
			
			hoverImage.setStyle("display", "block");
			hoverImage.setStyle("top", thumb.offsetTop);
			hoverImage.setStyle("right", 962-thumb.parentNode.parentNode.parentNode.offsetLeft);
			hoverImage.src = thumb.src;
		});
		
		$$("#canvas .thumbnails img").addEvent("mouseout", function(e) {
			hovering = false;
			(function () {
				if (!hovering) {
					hoverImage.setStyle("display", "none");
				}
			}).delay(1000);
		});
	}
	
	enableThumbnailHover();
	
	
	function activeThumb(thumbs) {
		var activeThumb = 0;
		thumbs.each(function(t,i) {
			if (t.hasClass("active")) {
				activeThumb = i;
				return false;
			}
		});
		
		return activeThumb;
	}
	
	function currentThumb() {
		var thumbs = $$("#canvas .thumbnails img");
		var active = activeThumb(thumbs);

		return thumbs[active];
	}
	
	function nextThumb() {
		var thumbs = $$("#canvas .thumbnails img");
		var active = activeThumb(thumbs);
		var next = active+1;
		
		if (next >= thumbs.length) {
			next = 0;
		}
		return {index: next, element: thumbs[next]};
	}
	
	function prevThumb() {
		var thumbs = $$("#canvas .thumbnails img");
		var active = activeThumb(thumbs);
		var next = active-1;
		
		if (next < 0) {
			next = thumbs.length-1;
		}
		return {index: next, element: thumbs[next]};
	}
	
	
	// Set up gallery list tab.
	var gal = $("galleries");
	var galleryOpen = false;
	
	var fx = new Fx.Styles($E("#galleries .body"), {
		onComplete: function() {
			if (galleryOpen) {
				gal.removeClass("active");
			}
			
			galleryOpen = !galleryOpen;
		}
	});

	$E("#galleries .head").addEvent("click", function(e) {
		var e = new Event(e);
		e.preventDefault();
		
		if (galleryOpen) {
			fx.start({
				width: 126,
				height: 0
			});
		} else {
			gal.addClass("active");
			fx.start({
				width: 455,
				height: 600
			});
		}
		
		return false;
	});

	// Set up gallery select block links.
	$("galleries").addEvent("click", function(e) {
		var e = new Event(e);
		var target = $(e.target);
		var item;
		
		while (target && target.id !== "galleries") {
			if (target.hasClass("item")) {
				item = target;
				break;
			}
			target = $(target.parentNode);
		}
		
		if (!item) {
			return;
		}
		
		window.location = $E("a", item).href;
	});
	
	
	// Set up mail-to events.
	var mailMode = false;
	
	function closeMailBox() {
		var e = $("mailto-box");
		if(e) {
			e.setStyle("display", "none");
		}
		
		mailMode = false;
	}
	
	var element = null;
	
	element = $E("#mailto-box form");
	
	if(element) {
		element.addEvent("submit", function(e) {
			var e = new Event(e);
			e.preventDefault();
			
			var form = e.target;
			var queryString = [];
			
			for (var i=0; i<form.elements.length; i++) {
				var field = form.elements[i];
				if (field.name) {
					queryString.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value));
				}
			}
			queryString = queryString.join("&");
			
			var ajax = new XHR({
				onSuccess: function(response) {
					var json = Json.evaluate(response);
					$("mailto-response").innerHTML = json.response;
					if (json.valid) {
						closeMailBox.delay(2000);
					}
				},
				
				onFailure: function() {
					$("mailto-response").innerHTML = "Error contacting mail server. Please try again later.";
				}
			});
			ajax.send("send.php", queryString);
			return false;
		});
	}
	
	element = $E("#mailto-box a");
	
	if(element) {
		element.addEvent("click", function(e) {
			var e = new Event(e);
			e.preventDefault();
			
			closeMailBox();
			
			return false;
		});
	}
	
	function startMailSend() {
		var e = $("mailto-box");
		if(e) {
			e.setStyle("display", "block");
		}
		
		e = $("mailto-response");
		if(e) {
			e.innerHTML = '';
		}
		
		mailMode = true;
	}
	
	// Set up previous and next buttons.
	$E("#canvas .controls").addEvent("click", function(e) {
		var e = new Event(e);
		var next;

		if ($(e.target).hasClass("prev")) {
			next = prevThumb();
		} else if ($(e.target).hasClass("next")) {
			next = nextThumb();
		} else if ($(e.target).hasClass("mail")) {
			e.preventDefault();
			e.stopPropagation();
			startMailSend();
			return false;
		} else if ($(e.target).hasClass("download")) {
			return;
		}
		
		changeImage(next.element.parentNode.href, next.element, next.index);
		
		e.preventDefault();
		return false;
	});
	
	// Set up key handlers.
	document.addEvent("keyup", function(e) {
		var e = new Event(e), next;
		
		if (mailMode) {
			return;
		}
		
		if (e.code === 39 || e.code === 40) {
			// Right and down keys.
			next = nextThumb();
		} else if (e.code === 37 || e.code === 38) {
			// Left and up keys.
			next = prevThumb();
		} else {
			return;
		}
		
		changeImage(next.element.parentNode.href, next.element, next.index);
	});
	
	// On entering the page, animate by sliding down.
	(function() {
		var loadfx = $("content-canvas").effect("height", {
			duration: 1000
		});
		loadfx.start(0, $("canvas").getStyle("height"));
	})();
});