/*
$(document).ready(function(){
	var originalText = $("#about p").html(); //Get body text from the original html
	
	$("ul#aboutmenu li a").hover(function(){ //Mouse over state
		
		var altText = $(this).attr("title"); //Get the title information from the link to be used as replacement copy
		var nameOfClass = $(this).parent().attr("class"); //Get the class name of this link
		
		$("#about p").html(altText).fadeIn("slow"); //Fade in the new text replacing the original text
		$("#about h2").addClass(nameOfClass).fadeIn("slow"); //Fade in the new title text using class name
		
		$(this).append("<div class='active'><div>").children(".active").animate({opacity:1}, 200); //Create a new element with the appropriate background state to fade in in top of the original link
		
		return false;
		
	}, function() { //Mouse off state
		
		var nameOfClass = $(this).parent().attr("class"); //Get the class name of the link mouse is currently leaving
		
		$("#about p").stop().css("opacity","1").html(originalText); //Stop any animations of text, return to normal opacity and restore original text
		$("#about h2").stop().css("opacity","1").removeClass().addClass("about"); //Stop any animations of title, return to normal opacity and return to original class
		
		$("li."+nameOfClass+" div.active").stop().fadeOut(200, function() { //Fade away hover state
			$(this).remove(); //Remove faded element from HTML
		});
	});

});
*/

$(document).ready(function(){
	$("ul#aboutmenu li a").blend({speed:200});
	
	var originalText = $("#about p").html(); //Get body text from the original html
	
	$("ul#aboutmenu li a").hover(function(){ //Mouse over state
		
		var altText = $(this).attr("title"); //Get the title information from the link to be used as replacement copy
		var nameOfClass = $(this).parent().attr("class"); //Get the class name of this link
		
		$("#about p").html(altText).fadeIn("slow"); //Fade in the new text replacing the original text
		$("#about h2").addClass(nameOfClass).fadeIn("slow"); //Fade in the new title text using class name
		
		return false;
		
	}, function() { //Mouse off state
		
		var nameOfClass = $(this).parent().attr("class"); //Get the class name of the link mouse is currently leaving
		
		$("#about p").stop().css("opacity","1").html(originalText); //Stop any animations of text, return to normal opacity and restore original text
		$("#about h2").stop().css("opacity","1").removeClass().addClass("about"); //Stop any animations of title, return to normal opacity and return to original class
	});
});

/* //This one also works, it's partially taken from: http://www.alistapart.com/articles/sprites2 but I liked mine better
$(document).ready(function(){
	
	// remove link background images since we're re-doing the hover interaction below 
	// (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)
	// we also want to only remove the image on non-selected nav items, so this is a bit more complicated
	$("ul#aboutmenu").children("li").each(function() {
		var current = $(this).attr("class");
	});
	
	var originalText = $("#about p").html();


	// create events for each nav item
	attachNavEvents("ul#aboutmenu", "classroom");
	attachNavEvents("ul#aboutmenu", "character");
	attachNavEvents("ul#aboutmenu", "community");
	attachNavEvents("ul#aboutmenu", "competition");


	function attachNavEvents(parent, myClass) {
		$(parent + " li." + myClass).hover(function() {
		
			var altText = $(this).children("a").attr("title");
			var nameOfClass = $(this).attr("class");
			
			$("#about p").html(altText).fadeIn("slow");
			$("#about h2").addClass(nameOfClass).fadeIn("slow");
		
			$(this).append('<div class="active"></div>');
			$("div.active").animate({opacity:1}, 200);
		}, function() {
		
			var nameOfClass = $(this).attr("class");
			$("#about p").stop().css("opacity","1").html(originalText);
			$("#about h2").stop().removeClass();
			$("#about h2").stop().addClass("about");
		
			$("div.active").fadeOut(200, function() {
				$(this).remove();
			});
		});
	}



});
*/