// Initialise a variable to hold the home-page-holder jQuery object
// This makes running functions using it much faster after the first time
	var oHomePageHolder = null;

/**************************************************************************************************************************
 * fFixPositions()
 * =======================================================================================================================
 *
 * WHY DOES IT EXIST?
 * ===================
 * There is a bug in modern browsers where, if a box is centered with a CSS transform and it is on a subpixel position,
 * the images render blurry.
 *
 * WHAT DOES IT DO?
 * =================
 * This function mimics transforming a box to the middle of the screen, by calculating where on the page it should go to
 * be centered, then sets the top/left variables to position it
 *
 * FLOW OF THE FUNCTION
 * =====================
 * 1) If the oHomePageHolder object hasn't yet been initialised, initialise it with a jQuery version of the object
 * 2) Calculate the position variables for the home-page-holder box
 * 		2.a) Calculate the 'top' variable, by subtracting half of the page height by half of the home-page-holder height
 * 		2.b) Calculate the 'left' variable, by subtracting half of the page width by half of the home-page-holder width
 * 3) Set CSS variables for the home-page-holder box using the calculated variables above
 * 		3.a) Set the 'top' attribute of the home-page-holder box to match the calculated 'top' variable
 * 		3.b) Set the 'left' attribute of the home-page-holder box to match the calculated 'left' variable
 **************************************************************************************************************************/

	function fFixPositions()
	{
		// 1) If the oHomePageHolder object hasn't yet been initialised, initialise it with a jQuery version of the object
		// ================================================================================================================
			if(oHomePageHolder==null)
			{
				// Initialise the jQuery object using a class selector and store it in a global variable
					oHomePageHolder = $(".home-page-holder");
			}

		// 2) Calculate the position variables for the home-page-holder box
		// =================================================================
			// 2.a) Calculate the 'top' variable, by subtracting half of the page height by half of the home-page-holder height
				// This works by getting the outerHeight of the window, dividing it by two and then rounding it down to the lowest integer (to make it a whole number)
				// Then, it subtracts from the above total the rounded down home-page-holder height divided by 2, leaving us with an integer that will be our 'top' value
					var nTop = Math.floor((window.innerHeight)/2)-Math.floor($(".home-page-holder").outerHeight()/2);

			// 2.b) Calculate the 'left' variable, by subtracting half of the page width by half of the home-page-holder width
				// This works by getting the outerWidth of the window, dividing it by two and then rounding it down to the lowest integer (to make it a whole number)
				// Then, it subtracts from the above total the rounded down home-page-holder width divided by 2, leaving us with an integer that will be our 'left' value
					var nLeft = Math.floor((window.innerWidth)/2)-Math.floor($(".home-page-holder").outerWidth()/2);

		// 3) Set CSS variables for the home-page-holder box using the calculated variables above
		// =======================================================================================
			// 3.a) Set the 'top' attribute of the home-page-holder box to match the calculated 'top' variable
				oHomePageHolder.css("top", nTop+"px");

			// 3.b) Set the 'left' attribute of the home-page-holder box to match the calculated 'left' variable
				oHomePageHolder.css("left", nLeft+"px");
	}

/**************************************************************************************************************************
 * window.onload ( jQuery implementation, $(window).on("load") )
 * =======================================================================================================================
 *
 * WHY DOES IT EXIST?
 * ===================
 * Certain javascript functions need to run once the page has fully loaded, this includes repositioning the
 * home-page-holder box, starting the slideshow and animating the fading objects, like the logo and 'ENTER' link
 *
 * WHAT DOES IT DO?
 * =================
 * This function is triggered once everything on the page has loaded, it then triggers the slideshow and runs fFixPositions
 * to correctly center the home-page-holder box
 *
 * FLOW OF THE FUNCTION
 * =====================
 * 1) Use an on() call on the window jQuery object to add a trigger to the 'load' event
 * 		1.a) Animate the logo to fade in by setting its opacity from 0 to 1 over the space of 500 milliseconds (0.5 seconds)
 * 		1.b) Animate the slideshow to fade in by setting its opacity from 0 to 1 over the space of 500 milliseconds (0.5 seconds)
 * 		1.c) Animate the enter link by waiting 500 milliseconds (0.5 seconds), then settings its opacity from 0 to 1 over the space of 500 milliseconds
 * 		1.d) Run the fFixPositions function to correctly center the home-page-holder box
 * 		1.e) Run setInterval to create a looping function that runs every 3000 milliseconds (3 seconds)
 * 			1.e.i) Get the last slide, of the slideshow, fade it out over 1500 milliseconds (1.5 seconds)
 * 				1.e.i.1) When it finishes fading out, move it to the top of the slideshow then make it visible
 **************************************************************************************************************************/
 	// 1) Use an on() call on the window jQuery object to add a trigger to the 'load' event
		$(window).on("load", function(){
			// 1.a) Animate the logo to fade in by setting its opacity from 0 to 1 over the space of 500 milliseconds (0.5 seconds)
				$(".logo").animate({opacity:1}, 500);

			// 1.b) Animate the slideshow to fade in by setting its opacity from 0 to 1 over the space of 500 milliseconds (0.5 seconds)
				$(".slide-holder").animate({opacity:1}, 500);

			// 1.c) Animate the enter link by waiting 500 milliseconds (0.5 seconds), then settings its opacity from 0 to 1 over the space of 500 milliseconds
				$(".enter-link").delay(500).animate({opacity:1}, 500);

			// 1.d) Run the fFixPositions function to correctly center the home-page-holder box
				fFixPositions();

			// 1.e) Run setInterval to create a looping function that runs every 3000 milliseconds (3 seconds)
				setInterval(function(){
					// 1.e.i) Get the last slide, of the slideshow, fade it out over 1500 milliseconds (1.5 seconds)
						$(".slide-holder .slide:last-of-type").fadeOut(1500, function(){
							// 1.e.i.1) When it finishes fading out, move it to the top of the slideshow then make it visible
								$(this).insertBefore($(".slide-holder .slide:first-of-type")).show();
						});
				}, 3000);
		});

/**************************************************************************************************************************
 * window.onresize ( jQuery implementation, $(window).on("resize") )
 * =======================================================================================================================
 *
 * WHY DOES IT EXIST?
 * ===================
 * The fFixPositions function call above would only run when the page loads, this means it won't recalculate when the page
 * is resized, such as when it's loaded in a browser window and the window is resized
 *
 * WHAT DOES IT DO?
 * =================
 * This function is triggered when the window is resized, and calls the fFixPositions function to recalculate the
 * home-page-holder box
 *
 * FLOW OF THE FUNCTION
 * =====================
 * 1) Use an on() call on the window jQuery object to add a trigger to the 'resize' event
 * 		1.a) In the triggered function, run the fFixPositions function
 **************************************************************************************************************************/

	// 1) Use an on() call on the window jQuery object to add a trigger to the 'resize' event
		$(window).on("resize", function(){
			// 1.a) In the triggered function, run the fFixPositions function
				fFixPositions();
		});