/////////////////////////////////////////
//Declare global array ready for background colors
var bgColorArray = new Array();

//Declare global array ready h1 names
var headingNames = new Array();

/////////////////////////////////////////
//Declare function to reset headings
function resetHeadings() {                
	$("h1").each(
        function(index, value) {
        	$(value).animate({ backgroundColor: bgColorArray[index], color: bgColorArray[11] }, 200,
            function() {
            	$(value).removeClass("on");
            });
		});
}

/////////////////////////////////////////
//Declare function to fade out content
function fadeOutContent() {
	$("div#container > div > div").delay(200).fadeOut(500,
		function() {
			$("div").removeClass("visible");
		}).delay(10);
}

/////////////////////////////////////////
//Declare function to activate the new heading
function activateHeading(newHeading, anchorAnimated) {
	$(newHeading).animate({ backgroundColor: bgColorArray[11], color: bgColorArray[12] }, 300,
        function() {
			$(newHeading).addClass("on");
		});
}

/////////////////////////////////////////
//Declare function to activate the new content
function fadeInContent(newContent, anchorToAnimate) {
	var contentLayer = newContent + "Content";
	$(contentLayer).fadeIn(500,
        function() {
        	$(contentLayer).addClass("visible");
        	animateAnchor(anchorToAnimate);
        });
}

/////////////////////////////////////////
//Declare function to animate anchor
function animateAnchor(anchorToAnimate) {
	$("a[name='" + anchorToAnimate + "']").animate({ color: "red" }, 500, 
		function() {
			$("a[name='" + anchorToAnimate + "']").animate({ color: bgColorArray[11] }, 700);
		});
}

/////////////////////////////////////////
// Begin when document is ready
$(document).ready(
    function(event) {

    	//Load colors from stylesheet and names from id's into arrays
    	$("h1").each(
            function(index, value) {
            	bgColorArray[index] = $(value).css("backgroundColor");
            	headingNames[index] = $(value).attr("id") + "Content";
            });

    	//Add background color as text color to array
    	bgColorArray[11] = $("body").css("backgroundColor");

    	//Add active text color to array
    	bgColorArray[12] = "#999";

    	//Assign id for content divs
    	$("h1 ~ div").each(
			function(index, value) {
				$(value).attr("id", headingNames[index]);
			});

    	// Fade all content in
    	$("h1").hide();
    	$("h1").fadeIn(1500);
    	$("#uppercase").css("backgroundColor", bgColorArray[11]);
    	$("#uppercase").css("color", bgColorArray[12]);
    	$("#uppercaseContent").fadeIn(1500);


    	//Mouseenter
    	$("h1").mouseenter(
            function(event) {
            	$(event.target).animate({ opacity: 0.85 }, 100)
            });



    	// Mouseleave
    	$("h1").mouseleave(
            function(event) {
            	$(event.target).animate({ opacity: 1 }, 100)
            });



    	// What happens when a heading is clicked
    	$("h1").click(
			function(event) {
				resetHeadings();
				fadeOutContent();
				activateHeading(event.target);
				fadeInContent("#" + $(event.target).attr("id"));
			});



    	// What happens when a link with class goto is clicked
    	$("a.goTo").click(
            function(event) {

            	var goToId = $(event.target).attr("href");
            	var anchorToAnimate = $(event.target).attr("type");

            	resetHeadings();
            	fadeOutContent();
            	activateHeading(goToId);
            	fadeInContent(goToId, anchorToAnimate);

            });

    });