jQuery(document).ready(function(){

	// Prepend tab list to body -
	$("#thumbnails").prepend('<ul id="tabs-nav"></ul>')

	$('.photo').each(function(i){

		// Gives element a unique ID -
		this.id = 'tab'+i;

		// If a title does not exist then use the ID for anchor text -
		var title = (this.title) ? this.title : this.id;

		// Define contents of link (to go within list items) -
		var link = '<a href="#' + this.id + '">' + title + '</a>';

		// Append list items to UL -
		$('#tabs-nav').append('<li>'+link+'</li>');

		// Set the first tab to open
		// Hide all tab content, except the first one.
		if(i===0){
			$('.photo:not(#'+this.id+')').hide();
			$("#tabs-nav a:first").addClass("active");
		}	

	})
	
	
	$('#tabs-nav a').click(function(){
		// assign click event to links in tab navigation
		toggleTab(this);
	})
	
});


function toggleTab (theLink){

	// clear all open tabs
	$("#tabs-nav a").removeClass("active");

	var id;
	
	id = '#'+theLink.href.split('#')[1];
	theLink.className = "active";
	

	// Hide all TABS -
	$('.photo').hide();

	// Show the tab which matches anchor's href -
	$(id).fadeIn(1000);
	
	return false;
}