$(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 = {
		'A'	: 'http://www.4playtheband.co.uk/tabs/a.php',
		'B'	: 'http://www.4playtheband.co.uk/tabs/b.php',
		'C'	: 'http://www.4playtheband.co.uk/tabs/c.php',
		'D'	: 'http://www.4playtheband.co.uk/tabs/d.php',
        'E'	: 'http://www.4playtheband.co.uk/tabs/e.php',
		'F'	: 'http://www.4playtheband.co.uk/tabs/f.php',
		'G'	: 'http://www.4playtheband.co.uk/tabs/g.php',
		'H'	: 'http://www.4playtheband.co.uk/tabs/h.php',
		'I'	: 'http://www.4playtheband.co.uk/tabs/i.php',
		'J'	: 'http://www.4playtheband.co.uk/tabs/j.php',
		'K'	: 'http://www.4playtheband.co.uk/tabs/k.php',
		'L'	: 'http://www.4playtheband.co.uk/tabs/l.php',
		'M'	: 'http://www.4playtheband.co.uk/tabs/m.php',
		'N'	: 'http://www.4playtheband.co.uk/tabs/n.php',
		'O'	: 'http://www.4playtheband.co.uk/tabs/o.php',
		'P'	: 'http://www.4playtheband.co.uk/tabs/p.php',
		'Q'	: 'http://www.4playtheband.co.uk/tabs/q.php',
		'R'	: 'http://www.4playtheband.co.uk/tabs/r.php',
		'S'	: 'http://www.4playtheband.co.uk/tabs/s.php',
		'T'	: 'http://www.4playtheband.co.uk/tabs/t.php',
		'U'	: 'http://www.4playtheband.co.uk/tabs/u.php',
		'V'	: 'http://www.4playtheband.co.uk/tabs/v.php',
		'W'	: 'http://www.4playtheband.co.uk/tabs/w.php',
		'X'	: 'http://www.4playtheband.co.uk/tabs/x.php',
		'Y'	: 'http://www.4playtheband.co.uk/tabs/y.php',
		'Z'	: 'http://www.4playtheband.co.uk/tabs/z.php',
	}
	
	/* The available colors for the tabs: */
	var colors = ['blue','green','red','orange'];
	
	/* The colors of the line above the tab when it is active: */
	var topLineColor = {
		blue:'pink',
		green:'lightgreen',
		red:'purple',
		orange:'green'
	}
	
	/* 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+' <span class="left" /><span class="right" /></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('#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 with jQuery 1.4 by passing a second parameter: */
		$('<div>',{
			id:'overLine',
			css:{
				display:'none',
				width:element.outerWidth()-2,
				background:topLineColor[bg] || 'white'
			}}).appendTo(element).fadeIn('slow');
		
		/* 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="images/ajax-loader.gif" 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();
	})
	
	/* Emulating a click on the first tab so that the content area is not empty: */
	the_tabs.eq(0).click();
});