$(function() {
	
	// load the relevant styles that we only want applied if javascript is enabled
	//$('head').append('<link rel="stylesheet" href="styles/js.css" type="text/css" />');
		
	// add active class to 1st tab panel
	$("ul.tab-links li.selected a.ui-tab:eq(0)").addClass("active");
	
	// show first panel
	var panel_1 = $("ul.tab-links li.selected a.ui-tab:eq(0)").attr("href");
	$(panel_1).removeClass("panel-hide");
	$(panel_1).addClass("panel-active");
	
	// When a tab is clicked
	$("a.ui-tab").click(function () {
		// switch all active tabs off
		// addition of the 'off' class and its corresponding css is to get round IE6 not clearing the background image when no longer the active tab
		$(".active .slide").addClass("off"); 
		$(".off").css("background-image", "none"); 
		$(".active").removeClass("active");
		
		// switch clicked tab on
		$(".off").attr("style", "");
		$(".off").removeClass("off");
		$(this).addClass("active");
		// hide all elements with the class 'show'
		$(".panel-active").addClass("panel-hide");
		$(".panel-active").removeClass("panel-active");
	
		// Now figure out what the 'href' attribute value is and find the element with that id.
		// Then show it.
		var content_show = $(this).attr("href");
		//$(".ui-tabpanel-selected").removeClass("ui-tabpanel-selected");
		
		//$(content_show).addClass("ui-tabpanel-selected");
		$(content_show).removeClass("panel-hide");
		$(content_show).addClass("panel-active");
		// do not perform default action. i.e. do not append #tab-content_id to URL
		return false;
	});
});