// Javascript used by the Stonyx webpages
// © 2009-2011 Stonyx
// All Rights Reserved


// Global variables

// Speed of transitions
var gnSpeed = 1250;
// Global variable signaling which page we're going to
var gsGoToPage = "";
// Global variable signaling if we are already processing a click
var gbClicked = false;

// Functions

// Setup our transitions, etc. once the document is ready to be worked on
$(document).ready(function()
{
	// Hide the main content and footer image
	$("#MainContent").hide();
	$("#" + gsPage + "footer").css("opacity", 0);

	// Scroll to the correct place
	window.scrollTo(0, gnScroll);

	// Set things up to be called when the document finishes loading
	$(window).load(LoadExternalLinks());
	$(window).load(PreloadImages());
	$(window).load(OnLoadTransitions());

	// Initialize the Fancybox
	if (gsPage == "resources")
	{
		$("a.fancyboxiframe").fancybox(
		{
			"centerOnScroll" : true,
			"height" : "95%",
			"width" : "95%",
			"type" : "iframe"
		});
	}

	// Add some special effect when hovering and clicking the different buttons
	$("#stonyx").hover(function(){OnHoverTransitions("stonyx")},
		function(){OffHoverTransitions("stonyx")});
	$("#contact").hover(function(){OnHoverTransitions("contact")},
		function(){OffHoverTransitions("contact")});
	$("#resources").hover(function(){OnHoverTransitions("resources")},
		function(){OffHoverTransitions("resources")});
	$("#aboutus").hover(function(){OnHoverTransitions("aboutus")},
		function(){OffHoverTransitions("aboutus")});
	if (gsPage != "stonyx")
		$("#stonyx").click(function(){return OnClickTransitions("stonyx")});
	if (gsPage != "contact")
		$("#contact").click(function(){return OnClickTransitions("contact")});
	if (gsPage != "resources")
		$("#resources").click(function(){return OnClickTransitions("resources")});
	if (gsPage != "aboutus")
		$("#aboutus").click(function(){return OnClickTransitions("aboutus")});
})


// Function that allows opening a link in a new window even when using strict xhtml mode
function LoadExternalLinks()
{
	// Check if a needed function is supported
	if (document.getElementsByTagName)
	{
		// Some needed variables
		var i;
		var aAnchors = document.getElementsByTagName("a");

		// Loop thru all the anchors and change their target if rel="external" is specified
		for (i = 0; i < aAnchors.length; i++)
		{
			if (aAnchors[i].getAttribute("href") && aAnchors[i].getAttribute("rel") == "external")
				aAnchors[i].target = "_blank";
		}
	}
}


// Preload images to speed things up
function PreloadImages()
{
	// Check if the image object is supported
	if (document.images)
	{
		// Declare some needed variables
		var i;
		var aoImages = new Array;

		// Loop thru and load the images
		for (i = 0; i < gsImages.length; i++)
		{
			aoImages[i] = new Image;
			aoImages[i].src = gsImages[i];
		}
	}
}


// Function called to do some transitions when the page is loaded
function OnLoadTransitions()
{
	// Fade in the footer image and then work on the Main Content
	$("#" + gsPage + "footer").animate({opacity: 1}, gnSpeed / 4, function()
	{
		// Figure out the height of the main content from the Height Test div and then hide it
		var nHeight = $("#HeightTest").height();
		$("#HeightTest").hide();

		// Set the Main Content height to zero, show it, and slide it down
		$("#MainContent").height(0);
		$("#MainContent").show();
		$("#MainContent").animate({height: nHeight}, gnSpeed - gnSpeed / 4, "easeOutBack");
	});
}


// Function that does the transitions when something is hovered over
function OnHoverTransitions(sButton)
{
	// Change the button to the hover image
	if ((gsPage != sButton && gsGoToPage != sButton) ||
		(gsPage == sButton && gsGoToPage != ""))
	{
		$("#" + sButton).stop();
		$("#" + sButton).css("opacity", 1);
		$("#" + sButton).attr("src", "images/" + sButton + "hover.png");
	}
}


// Function that does the transitions when something is no longer hovered over
function OffHoverTransitions(sButton)
{
	// Change the button back to the non hover image
	if ((gsPage != sButton && gsGoToPage != sButton) ||
		(gsPage == sButton && gsGoToPage != ""))
	{
		$("#" + sButton).stop();
		$("#" + sButton).css("opacity", 1);
		$("#" + sButton).attr("src", "images/" + sButton + ".png");
	}
}


// Function that does the transitions when something get's clicked
function OnClickTransitions(sPage)
{
	// Check if we are already processing a click
	if (gbClicked)
		return false;

	// Slide up the main content and fade out the footer image
	$("#MainContent").animate({height: 0}, gnSpeed - gnSpeed / 4, "easeInBack", function(){
		$("#MainContent").hide();
		$("#" + gsPage + "footer").animate({opacity: 0}, gnSpeed / 4);});

	// Set correct image to fade in to
	var sImage;
	if (sPage == "stonyx")
		sImage = "images/" + sPage + ".png";
	else
		sImage = "images/" + sPage + "selected.png";

	// Fade in the button corresponding to the page we're changing to and fade out
	// button corresponding to the page we're leaving
	// Wrap img element in a span
	$("#" + sPage).wrap("<span style='position: relative;'></span>")
	// Select the newly created span
	.parent()
	// Prepend a new image inside the span
	.prepend("<img>")
	// Select the newly created image
	.find(":first-child")
	// Set the image
	.attr("src", sImage);

	// Wrap img element in a span
	$("#" + gsPage).wrap("<span style='position: relative;'></span>")
	// Select the newly created span
	.parent()
	// Prepend a new image inside the span
	.prepend("<img>")
	// Select the newly created image
	.find(":first-child")
	// Set the image
	.attr("src", "images/" + gsPage + ".png");

	// Position the images
	$("#" + sPage).css({"position" : "absolute", "left" : 0, "top" : this.offsetTop});
	$("#" + gsPage).css({"position" : "absolute", "left" : 0, "top" : this.offsetTop});

	// Animate the images
	$("#" + sPage).animate({opacity: 0}, gnSpeed);
	$("#" + gsPage).animate({opacity: 0}, gnSpeed);

	// Using the global variable since the local one will be unavailable to the setTimeout function
	gsGoToPage = sPage;

	// Method for loading the new page after the sliding is done depends whether we are using IE
	if ($.browser.msie)
		setTimeout('window.location = "stonyx.php?page=" + gsGoToPage + "&scroll=" +' +
			'document.documentElement.scrollTop', gnSpeed);
	else
		setTimeout('window.location = "stonyx.php?page=" + gsGoToPage + "&scroll=" +' +
			'window.pageYOffset', gnSpeed);

	// Signal that we are processing a click
	gbClicked = true;

	// Return false so the click doesn't change pages on its own right away
	return false;
}