$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */
	
	/* Defining an array with the tab text and AJAX pages: */
	var Tabs = {
		'Home<plus></plus>'						: 'pages/index.html',
		'Hours/Info<plus></plus>'				: 'pages/Hours.html',
		'FAQ<plus></plus>'						: 'pages/FAQ.html',
		'Brews<plus>+</plus>Brewers'			: 'pages/Brewers.html',
		'Volunteer Info<plus></plus>'			: 'pages/Volunteer.html',
		'Beer Glossary<plus></plus>'			: 'pages/Glossary.html',
		'Activities<plus>+</plus>Music'			: 'pages/Activities.html'
	}
	
	/* The available colors for the tabs: */
	var colors = ['black','black','black','black','black','black','black'];
	
	/* The colors of the line above the tab when it is active: */
	var topLineColor = {
		black:'#E1B129',
		green:'lightgreen',
		red:'red',
		blue:'orange'
	}
	
	/* Looping through the Tabs object: */
	var z=0;
	$.each(Tabs,function(i,j){
		
		/* Sequentially creating the tabs and assigning a color from the array: */
		var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' </a></li>');
		
		/* Setting the page data for each hyperlink: */
		tmp.find('a').data('page',j);
		
		/* Adding the tab to the UL container: */
		$('ul.tabContainer').append(tmp);
	})


	/* Caching the tabs into a variable for better performance: */
	var the_tabs = $('.tab');
			

	the_tabs.click(function(e){
							

		/* "this" points to the clicked tab hyperlink: */
		var element = $(this);

			
	
		/* If it is currently active, return false and exit: */
		if(element.find('#overLine2').length)		return false;
			
		/* Detecting the color of the tab (it was added to the class attribute in the loop above): */
		var bg = element.attr('class').replace('tab ','');

		/* Removing the line: */
			$('#overLine2').remove();
	
	
		/* 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: */
			$('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');

			$.get(element.data('page'),function(msg){
				$('#contentHolder').html(msg);
				
				/* After page was received, add it to the cache for the current hyperlink: */
				element.data('cache',msg);
			});
		}
		else $('#contentHolder').html(element.data('cache'));
		
		e.preventDefault();
	})
	
});