$(document).ready(function() {

	jQuery.fn.fadeToggle = function(speed, easing, callback) {
		return this.animate({opacity: 'toggle'}, speed, easing, callback);
	}; 

	//Default Action
	$("#buttons, span.buttons,.toggler").show();
	$(".tab-element").hide(); //Hide all content
	
	if (document.location.hash) {
		var h=document.location.hash;
		$el=$("a[href$='" + h +"']");
		$divel=$(h+"area");
		if (($el.length != 0 && h !='#top') || ($divel.length !=0 && h !='#top')) {
			$(h).show();
			$(h+"area").show();
			$el.addClass("active");
			$divel.addClass("active");
			var targetOffset = $(h).offset().top-100;
			$("html").animate({scrollTop: targetOffset}, 500);
		}
		else {
			$("#buttons a:first, span.buttons > a.acc:first").addClass("active"); //Activate first link
			$(".tab-element:first:not(.jqtoggleiv)").show(); //Show first area
		}
	}
	else {
		$("#buttons a:first, span.buttons > a.acc:first").addClass("active"); //Activate first link
		$(".tab-element:first:not(.jqtoggleiv)").show(); //Show first area
	}
	
	//On Click Event
	$("#buttons a,span.buttons > a.acc").click(function() {
		$el = $(this);
		var ActiveTab = $("#buttons a.active, span.buttons > a.active").attr("href"); //Find the active area
		var TabToShow = $el.attr("href"); //Find the ref attribute value to identify the area, that should be shown
		var parts = TabToShow.split("#");
		if (ActiveTab == TabToShow) {
			if ($el.hasClass("acc")) {
				$("#" +parts[1]).fadeToggle("slow");
			}
		}
		else {
			$("#buttons a, span.buttons a").removeClass("active"); //Remove any "active" class
			$el.addClass("active"); //Add "active" class to clicked link
			$(".tab-element").hide(); //Hide all areas
			$("#"+parts[1]).fadeToggle('slow'); //Fade in the active content
		} 
		return false;
	});

});