$(document).ready(function() {
        var activeContainer = 1;
        var currentImg = 0;
        var animating = false;
        var navigate = function(direction) {
                // Check if no animation is running. If it is, prevent the action
                if(animating) {
                        return;
                }

                // Check which current image we need to show
                if(direction == "next") {
                        currentImg++;
                        if(currentImg == photos.length + 1) {
                                currentImg = 1;
                        }
                } else {
                        currentImg--;
                        if(currentImg == 0) {
                                currentImg = photos.length;
                        }
                }

                // Check which container we need to use
                var currentContainer = activeContainer;
                if(activeContainer == 1) {
                        activeContainer = 2;
                } else {
                        activeContainer = 1;
                }

                showImage(photos[currentImg - 1], currentContainer, activeContainer);
        };

        var stopAnimation = function() {
           // Clear the interval
           clearInterval(interval);
        };
        var currentZindex = -1;
        var showImage = function(photoObject, currentContainer, activeContainer) {
                animating = true;

                // Make sure the new container is always on the background
                currentZindex--;

                $("#home-splash a").attr("href", photoObject.href);
                $("#home-splash a").attr("target", photoObject.target);

                // Clear previous img and set the background image of the new active container
                $("#home-splashImg" + activeContainer).empty();
                $('<img src="' + photoObject.image + '" width="670" height="340" />').appendTo("#home-splashImg" + activeContainer);
                $("#home-splashImg" + activeContainer).css({
                        "display" : "block",
                });

                $("#home-splashImg" + activeContainer + " img").css({
                        "z-index" : currentZindex
                });

                // Hide the header text
                $("#home-splash-text").css({"display" : "none"});

                // Set the new header text
                if (photoObject.firstline == "") { $("#home-splash-text p").css('display','none'); } 
                else { $("#home-splash-text p").html(photoObject.firstline); 
						 $("#home-splash-text p").css('display','block');
				}

                // Fade out the current container and display the header text when animation is complete
                $("#home-splashImg" + currentContainer).fadeOut(function() {
                        setTimeout(function() {
                                $("#home-splash-text").fadeIn(200);
                                animating = false;
                        }, 500);
                });
        };
        // We should statically set the first image
        navigate("next");

        // Start playing the animation
        interval = setInterval(function() {
                navigate("next");
        }, slideshowSpeed);
});