$(document).ready(function(){

	var colors = ['blue','green','red', 'orange'];
	var Tabs = {
		'Home':'about.html',
		'Contact Me':'contact.html'
	};
	var tabLineColor = {
		blue:'lightblue',
		green:'lightgreen',
		red:'red',
		orange:'orange'
	};

	/* Looping through the Tabs object: */
	$.each(Tabs,function(tname,pname){
		/* Sequentially creating the tabs and assigning a color from the array: */
		var tmp = $('<li><a href="#" class="tab '+colors[3]+'">'+tname+' <span class="left" /><span class="right" /></a></li>');

		/* Setting the page data for each hyperlink: */
		tmp.find('a').data('page',pname);

		/* 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('#overLine').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: */
		$('#overLine').remove();
		/* Creating a new line by passing a second parameter: */
		$('<div>',{
			id:'overLine',
			css:{
				display:'none',
				width:element.outerWidth()-2,
				background:tabLineColor[bg] 
			}}).appendTo(element).fadeIn('slow');

		if(!element.data('cache')){
			$('#contentHolder').html('<img src="img/ajax-loader.gif" width="32" height="32" class="preloader" />');

			$.get(element.data('page'),function(msg){
				$('#contentHolder').html(msg);
				element.data('cache',msg);
			});
		}
		else{
			 $('#contentHolder').html(element.data('cache'));
		}
		e.preventDefault();
		return true;
	});
	/* Emulating a click on the first tab so that the content area is not empty: */
	the_tabs.eq(0).click();
});