$(document).ready(function() {
    jQuery.preloadCssImages();

	var navigate = ($ .browser.webkit ?
		function($new, $old, trigger) {
			var dir = 'forward';
			if ($(trigger).is('.back-button')) dir = 'backward';
			
	 		if ($new.length > 0) {
	 			$old .css({'-webkit-animation-name': 'slide-out-'+dir, '-webkit-animation-duration': '300ms', '-webkit-animation-iteration-count': 1});
	 			$new .show().css({'-webkit-animation-name': 'slide-in-'+dir,  '-webkit-animation-duration': '300ms', '-webkit-animation-iteration-count': 1}).show();
				setTimeout(function() {
					$old .hide();
				}, 300);
	 		}
		} :
		function($new, $old, trigger) {
			var dir = 'forward';
			if ($(trigger).is('.back-button')) dir = 'backward';
			
			var INC =  {forward: '-=', backward: '+='};
			var STEP = {forward: '+',  backward: '-'};
			
	 		if ($new.length > 0) {
	 			$old .animate({left: INC[dir]+'320px'}, 300, function() { $old.hide(); });
				$new .css({left: STEP[dir]+'320px'}).show().animate({left: INC[dir]+'320px'}, 300);
	 		}
		});
    
});