/*
index.js
========
This file contains anything related to the home page for
the edale theme.

Anything animation specific is instead in js/global-animation.js or js/home-animation.js

https://docs.google.com/document/d/19OR8ot3V48Xxy0T7NKPwuxVHY60Q5cejE3cCetNzZxQ/edit
*/

    /*
    VARIABLES
    =========
    */

        // Store all the slides (slideshow)
            var aSlideshowSlides = [];

        // Store the current slide
            var nCurrentSlide = 0;

        // Store the next slide index
            var nNextSlide = 0;

        // Store the slide timer in ms
            var nSlideTimeBeforeChange = 5000;

    /*
    On Document Loaded
    ==================
    Called by Jquery event handler when the document is
    ready (When content has been loaded)
    */

        $( document ).ready( function()
        {
            // Initalise the slideshow
                fSlideshowInit();
        });

    /*
	fSlideshowInit()
	================
	Initalises the slideshow by pre-loading images and storing all
	slideshow elements in an array
	*/

		function fSlideshowInit()
		{
			// Store itteration index
				var nIntterationIndex = 0;

			// Load all the slides
				$(".slide").each( function()
				{
					// Add this slide to the array
						aSlideshowSlides.push( $(this) );

					// If this is the first slide
						if( nIntterationIndex == 0 )
						{
							// Store the current slide
								nCurrentSlide = nIntterationIndex;
						}

					// Increment the index
						nIntterationIndex++;
				});

			// If we have more than one slide in the slideshow the lets start it, otherwise we don't have to do anything
				if( nIntterationIndex > 1 )
				{

					// Set timeout
						setTimeout(function ()
						{

							// Load the next slide
								fLoadNextSlide();

						}, nSlideTimeBeforeChange);
				}
		}

    /*
	fLoadNextSlide()
	=================
	Loads the next slide in the slideshow sequence by adding / removing
	slideshow-slide-active
	*/

		function fLoadNextSlide()
		{
			// Store the new slide index
				nNextSlide = nCurrentSlide + 1;

			// If we are currently on the last slide
				if( nNextSlide >= aSlideshowSlides.length )
				{
					// Show the first slide
						nNextSlide = 0;
				}

			// Set the opacity of the new slide
				$("#slide-" + nNextSlide ).css( { opacity : 0 } );

			// Add the active class to the slideshow
				$("#slide-" + nNextSlide ).addClass("slideshow-slide-active");

            // Add the slieshow transitional class
				$("#slide-" + nNextSlide ).addClass("slidshow-slide-transition");

			// Fade the current slide out
				$("#slide-" + nCurrentSlide ).fadeTo(2000, 0);

			// Fade the new slide in
				$("#slide-" + nNextSlide ).fadeTo( 2000, 1, function()
				{
					// Remove the active status from the old slide
						$("#slide-" + nCurrentSlide ).removeClass("slideshow-slide-active");

                    // Remove the slieshow transitional class
        				$("#slide-" + nCurrentSlide ).removeClass("slidshow-slide-transition");

                    // If the current class doesn't have the slide-scale class
                        if( !$("#slide-" + nCurrentSlide ).hasClass('slide-scale') )
                        {
                            // Add the slieshow scale class
                				$("#slide-" + nCurrentSlide ).addClass("slide-scale");
                        }

					// Update the index
						nCurrentSlide = nNextSlide;
				});

			// Set timeout
				setTimeout(function ()
				{
					// Load the next slide after time
						fLoadNextSlide();

				}, nSlideTimeBeforeChange);
		}