function topCenter() {
		$("#center").css({
			marginTop: (window.innerHeight / 2) - 250
		});
	}

	var slideshowTimer = null;
	var currentSlide = 1;
	function slideshow() {
		slideshowTimer = setInterval(function() {
			// Clear out any old B-slides that might be around
			$(".slide.inactive").remove();

			// Figure out our next slide
			currentSlide++;
			if(currentSlide > 17) currentSlide = 1;
			slide = (currentSlide < 10)
				? "0" + currentSlide
				: currentSlide;

			// Add the DOM element (Slide B) underneath the existing slide (Slide A)
			$(".slide.active").before('<div class="slide inactive" style="position: absolute; top: 0; left: -8px; width: 1200px; height: 500px;"></div>');
			$(".slide.inactive").css({
				background: "url(/images/slideShow/" + slide + ".jpg)"
			});

			// Wait for 500ms, then fade from A to B
			setTimeout(function() {
				$(".slide.active").animate({
					opacity: 0
				}, 1000, function() {
					// Remove A
					$(this).remove();
					// Move B to A
					$(".slide.inactive").removeClass("inactive").addClass("active");
				});
			}, 500);
		}, 3500);
	}

	function init() {
		topCenter();
		slideshow();
		$(".navigation.subPortfolio").each(function() {
			$(this).css({
				top: 250 - ($(this).outerHeight() / 2)
			});
		});
	}

	function flipOut(layer) {
		if(typeof layer != "string")
			return;

		$(".navigation.main li").removeClass("selected");

		var id = $(".flipLayer.flipped").each(function() {
			$(this).animate({
				left: 370 - $(this).outerWidth()
			}, 500).removeClass("flipped");
		}).attr("id");

		// Close or open subNav
		if(id == "layer_portfolio") {
			var idSub = $(".flipSubLayer.flipped").attr("id");
			if(typeof idSub != "undefined")
				flipOutSub(idSub.split("_")[2], true);
		}
		else if (layer == "portfolio" && lastFlipOutSub)
			setTimeout(function() {
				flipOutSub(lastFlipOutSub);
			}, 250);

		// Effectively closes the currently flipped layer
		if(id == "layer_" + layer)
			return;

		$("#layer_" + layer).addClass("flipped").animate({
			left: 370
		}, 500);

		$("#nav_" + layer).addClass("selected");
	}

	var lastFlipOutSub = null;
	function flipOutSub(layer, retain) {
		if(typeof layer != "number" && typeof layer != "string")
			return;

		if(!retain)
			$(".navigation.portfolio li").removeClass("selected");

		var id = $(".flipSubLayer.flipped").each(function() {
			$(this).animate({
				opacity: 0
			}, 500, function() {
				$(this).removeClass("flipped").css({
					visibility: "hidden"
				});
			});
		}).attr("id");

		// Effectively closes the currently flipped layer
		if (id == "layer_portfolio_" + layer && !retain) {
			lastFlipOutSub = null;
			return;
		}

		lastFlipOutSub = layer;

		$("#layer_portfolio_" + layer).addClass("flipped").css({
			visibility: "visible",
			opacity: 0
		}).animate({
			opacity: 1
		}, 500);

		$("#nav_portfolio_" + layer).addClass("selected");
	}

	var currentAlbum = 0;
	function loadAlbum(id, skipTransition) {
		if(typeof skipTransition != "boolean")
			skipTransition = false;

		var id = id.split("_");
		var layer = id[1];
		id = id[2];

		currentAlbum = id * 1;

		clearInterval(slideshowTimer);
		$(".slide").remove();

		// Close the nav menus
		if (!skipTransition) {
			flipOutSub(id, true);
			setTimeout(function(){
				flipOut(layer);
			}, 250);
		}

		// Load up the link info
		var links = $("#source_linkHolder_" + id).html();
		$("#albumLinkHolder").html(links);
		$("#albumLinkHolder span").hover(function() {
			$(this).addClass("hover");
		}, function() {
			$(this).removeClass("hover");
		});

		// Bind the links
		$("#albumLinkHolder span").bind("click", function() {
			var subID = ($(this).html() * 1) - 1;
			centerOnImage(id, subID);
		});

		// Load up the album description
		var desc = $("#source_descHolder_" + id).html();
		$("#albumDescription").html(desc);

		$("#albumImageHolder").css({
			width: ($("#source_imgTotalWidth_" + id).html() * 1) + 2000
		});

		$("#albumInfo").css({
			visibility: "visible",
			opacity: 0
		}).animate({
			opacity: 1
		}, 500);

		$(".slideArrow").css({
			visibility: "visible"
		});

		// Load up the album images
		var images = $("#source_imgHolder_" + id).html().split("|");
		var dest = $("#albumImages");
		dest.empty();
		for (var i in images) {
			var url = images[i];
			dest.append('<img id="album_img_' + i + '" class="albumImage" src="' + url + '" height="500" alt="" />');
		}

		centerOnImage(id, 0, true);
	}

	function albumPrevious() {
		if (currentIndex == 0) {
			var albumIDs = $("#source_albumIDs").html().split("|");
			var nextAlbum = 0;
			nextIndex = 0;

			for(var i in albumIDs) {
				if(albumIDs[i] == currentAlbum) {
					nextAlbum = (i * 1) - 1;
					break;
				}
			}
			if(nextAlbum < 0)
				return;

			loadAlbum("subNav_portfolio_" + albumIDs[nextAlbum], true);
			return;
		}
		centerOnImage(currentAlbum, (currentIndex - 1));
	}
	function albumNext() {
		var size = $("#source_linkHolder_" + currentAlbum).html().split("|").length;
		var nextIndex = currentIndex + 1;

		if (nextIndex >= size) {
			var albumIDs = $("#source_albumIDs").html().split("|");
			var nextAlbum = 0;
			nextIndex = 0;

			for(var i in albumIDs) {
				if(albumIDs[i] == currentAlbum) {
					nextAlbum = (i * 1) + 1;
					break;
				}
			}
			if(nextAlbum >= albumIDs.length)
				return;

			loadAlbum("subNav_portfolio_" + albumIDs[nextAlbum], true);
			return;
		}

		centerOnImage(currentAlbum, nextIndex);
	}

	var currentIndex = 0;
	var currentlyAnimating = false;
	function centerOnImage(album, index, force) {
		if(currentlyAnimating)
			return;
		currentlyAnimating = true;

		if(typeof force != "boolean")
			force = false;
		if(index == currentIndex && !force)
			return;

		$("#album_img_" + currentIndex).animate({
			paddingRight: 0,
			paddingLeft: 0
		}, 500);

		currentIndex = index;
		var widths = $("#source_imgWidthHolder_" + album).html().split("|");

		var offset = 0;
		for (var i in widths) {
			if( i >= index)
				break;
			offset += (widths[i] * 1);
		}

		var middler = widths[index] / 2;

		/**
		 * Here's a breakdown of where these numbers come from and why
		 *   386     : The total visible width of the album canvas space divided in half (center line)
		 *   		 :   Includes the offset introduced by the "INFO" button on the far bottom right
		 *   offset  : The pixel offset introduced by EACH image, normalized down to account for a 500px static height
		 *           :   so an image originally 400x1000 would have a normalized width of 200.
		 *   pads    : The total pixels introduced by padding between images
		 *   middler : The centerline of the currently targeted image
		 *
		 * Put them together and you'll have an image centered directly centered above the "1 | 2 | 3 | 4" link list
		 */
		$("#albumImageHolder").animate({
			left: currentIndex == 0
				? 386 - middler
				: 386 - 500 - offset - middler
		}, 500, function() {
			currentlyAnimating = false;
		});

		$("#album_img_" + currentIndex).animate({
			paddingLeft: (currentIndex == 0)
				? 0
				: 500,
			paddingRight: (currentIndex < widths.length)
				? 386 - (widths[index] / 2)
				: 0
		}, 500);
	}

	$(function() {
		init();

		$(window).bind("resize", topCenter);

		$(".navigation li").hover(function() {
			$(this).addClass("hover");
		}, function() {
			$(this).removeClass("hover");
		});

		$("#nav_firm").bind("click", function(){
			flipOut("firm");
		});
		$("#nav_portfolio").bind("click", function(){
			flipOut("portfolio");
		});
		$("#nav_contact").bind("click", function(){
			flipOut("contact");
		});

		$(".navigation.firm li").bind("click", function() {
			if($(this).hasClass("selected"))
				return;

			var id = $(this).attr("id");

			$(".navigation.firm li").removeClass("selected");
			$(this).addClass("selected");

			$(".layer_firm.selected").removeClass("selected").animate({
				opacity: 0
			}, 500, function() {
				$(this).css({
					display: "none"
				});
			});

			$("#layer_" + id).css({
				opacity: 0,
				display: "block"
			}).animate({
				opacity: 1
			}, 500, function() {
				$(this).addClass("selected");
			});
		});

		$(".navigation.portfolio li").bind("click", function() {
			var id = $(this).attr("id").split("_");
			flipOutSub(id[2]);
		});

		$(".navigation.subPortfolio li").bind("click", function() {
			loadAlbum($(this).attr("id"));
		});

		var infoAnimating = false;
		$("#albumInfo").bind("click", function() {
			infoAnimating = true;
			var ele = $("#albumDescriptionHolder");
			if(ele.hasClass("flipped"))
				ele.removeClass("flipped").animate({
					right: -450
				}, 500, function() {
					infoAnimating = false;
				});
			else
				ele.addClass("flipped").animate({
					right: 0
				}, 500, function() {
					infoAnimating = false;
				});
		});


		$("#albumPrevious").bind("click", function() {
			albumPrevious();
		});
		$("#albumNext").bind("click", function() {
			albumNext();
		});

	});