/*
* Author:      Marco Kuiper (http://www.marcofolio.net/)
*/

// Speed of the automatic slideshow
var slideshowSpeed = 6000;
var siteImageFolder = '/images/HomeCarousel/';

// Variable to store the images we need to set as background
// which also includes some text and url's.

/*

// usuually image/copy to appear is in this array
this is modified to have .NET set the array in the head control code behind

var photos = [  {
"title" : "France",
"image" : "france.jpg",
"url": "poop.aspx",
"firstline" : "Fancy invading",
"secondline" : "France?"
}, {
"title" : "Cove",
"image" : "cove.jpg",
"url": "poop.aspx",
"firstline" : "Secluded coves",
"secondline" : "Yaaar!"
}
];

*/

$(document).ready(function () {


    // Backwards navigation
    $("#back").click(function () {
        stopAnimation();
        navigate("back");
    });

    // Forward navigation
    $("#next").click(function () {
        stopAnimation();
        navigate("next");
    });

    var interval;
    $("#control").toggle(function () {
        stopAnimation();
    }, function () {
        // Change the background image to "pause"
        $(this).css({ "background-image": "url(/temp/btn_pause.png)" });

        // Show the next image
        navigate("next");


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

    var displayedOnlyImage = false;

    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 currentZindex = -1;
    var showImage = function (photoObject, currentContainer, activeContainer) {
        animating = true;

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

        // Set the background image of the new active container
        $("#headerimg" + activeContainer).css({
            "background-image": "url(/images/HomeCarousel/" + photoObject.image + ")",
            "display": "block",
            "z-index": currentZindex
        });

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

        // Set the new header text
        if (photoObject.title.length < 1) {
            $("#header .titleLine").hide();
        }
        else {
            $("#header .titleLine").html(photoObject.title);
        }

        if (photoObject.firstline.length < 1) {
            $("#firstline").hide();
        }
        else {
            $("#firstline").html(photoObject.firstline);
        }

        if (photoObject.secondline.length < 1) {
            $("#secondline").hide();
        }
        else {
            $("#secondline")
			        .attr("href", photoObject.url)
			        .html(photoObject.secondline);
        }

        // Fade out the current container
        // and display the header text when animation is complete
        if (photos.length > 1) {
            $("#headerimg" + currentContainer).fadeOut(2000, function () {
                setTimeout(function () {
                    $("#headertxt").css({ "display": "block" });
                    animating = false;
                }, 500); // 500 is delay before copy appears over image
            });
        }
        else {
            $("#headertxt").css({ "display": "block" });
        }

    };

    var stopAnimation = function () {
        // Change the background image to "play"
        $("#control").css({ "background-image": "url(/temp/btn_play.png)" });

        // Clear the interval
        clearInterval(interval);
    };

    // We should statically set the first image
    navigate("next");

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

});