/***************************************/
/* Animated sliding pages script       */
/* (c) 2010 Vita Smid <me@ze.phyr.us>  */
/*                                     */
/* Does anybody read this?             */
/***************************************/

zephyrus = {
	SWITCH_DURATION: 1000,
	switchInProgress: false
};


$(document).ready(function () {
	// AJAXify menu links.
	zephyrus.ajaxify($('#masthead a, #menu a, a.ajax'));

	// If the URL fragment looks like a page href, load the page straight away.
	// FIXME: should we really animate this load?
	if (document.location.hash[1] == '/') {
		zephyrus.loadPage(document.location.hash.substring(1));
	}
});


zephyrus.ajaxify = function (links) {
	links.click(function (e) {
		zephyrus.loadPage(this.href);
		e.preventDefault();
	});
};


zephyrus.loadPage = function (href) {
	// We need to prevent race conditions when the user clicks this link and another one is loading in the meantime.
	if (!zephyrus.switchInProgress) {
		zephyrus.switchInProgress = true;
		$('#container').prepend('<div id="loader">&nbsp;</div>');
		$.get(href, zephyrus.switchPage);
	}
};


zephyrus.switchPage = function (data) {
	$('#loader').remove();

	var loc = '/' + data.lang + '/' + data.page;

	// Track the page load with GA.
	(typeof _gaq !== 'undefined') && _gaq.push(['_trackPageview', loc]);

	// Set title and URL.
	document.title = data.title;
	document.location.hash = loc;

	// Set active menu item.
	$('#menu li').removeClass('active');
	$('#menu li.' + data.page).addClass('active');

	// Set page class.
	$('body').attr('class', data.page);

	/*
	 * Replace page content.
	 */
	// Prepare elements...
	var container = $('#container'), content = $('#content');
	var replacement = $('<div id="content-replacement" />').html(data.contents);

	// ...and measurements.
	var containerWidth = container.width();
	var containerPadding = container.css('padding-top'); // When the <div>s are absolutely positioned, we must simulate the padding by appropriate positioning.
	var contentMargin = content.offset().left;

	// Insert the replacement just after the right edge of container.
	replacement.css({'position': 'absolute', 'top': containerPadding, 'left': containerWidth + 'px'}).appendTo(container);

	// Position the old content exactly where it is now (we replace the regular flow & padding by absolute position).
	content.css({'position': 'absolute', 'top': containerPadding, 'left': contentMargin + 'px'});

	// Animate container height expansion/contraction so that it can accomodate the new content.
	container.animate({'height': replacement.outerHeight()}, zephyrus.SWITCH_DURATION, function () {
		// Sometimes the height is just wrong after the animation, for reasons unknown. This CSS reset saves the day...
		$(this).css('height', 'auto');
	});

	// Animate old content disappearance.
	content.animate({'left': -content.outerWidth()}, zephyrus.SWITCH_DURATION);

	// Animate replacement appearance. When done, destroy original content and put the new content into the normal flow of the document.
	replacement.animate({'left': contentMargin}, zephyrus.SWITCH_DURATION, function () {
		content.remove();
		replacement.css('position', 'static').attr('id', 'content');
		zephyrus.switchInProgress = false;

		// Slimbox has to be registered on the new content. This is the autoloading function from slimbox2.js.
		replacement.find("a[rel^='lightbox']").slimbox({loop: true}, null, function(el) {
			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
		});

		zephyrus.ajaxify(replacement.find('a.ajax'));
	});
}