$(document).ready(function(){
    $(".footer").pinFooter("relative");
    var the_tabs = $('.nav');
	the_tabs.click(function(e){
	    
		var container = "#main";
		/* "this" points to the clicked tab hyperlink: */
		var element = $(this);
		var url = element.attr('rel');
		element.data('page', url);
		/* Checking whether the AJAX fetched page has been cached: */
		if(!element.data('cache'))
		{	
			/* If no cache is present, show the gif preloader and run an AJAX request: */
			$(container).html('<table style="width:100%;height:100%;"><tr><td align="center" valign="middle"><img src="images/ajax_preloader1.gif" class="preloader" /></td></tr></table>');
			$.get(element.data('page'),function(msg){
				$(container).html(msg);
				
				/* After page was received, add it to the cache for the current hyperlink: */
				element.data('cache',msg);
			});
		}
		else $(container).html(element.data('cache'));
		//e.preventDefault();
		$(".footer").pinFooter("relative");
	})
	
	/* Emulating a click on the first tab so that the content area is not empty: */
	the_tabs.eq(0).click();
});