// Speed of the automatic slideshow
var slideshowSpeed;
var slide_present = 0;

// Path of images
var path = "/Images/slider/";

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [{
    "title": "",
    "image": "",
    "url": "",
    "firstline": "",
    "secondline": "",
    "time_interval": ""
}
];
photos.pop();

function addPhoto(photo1) {
    photos.push(photo1);
    slide_present = 1;
}

$(document).ready(function () {

    // If there are no slides, don't display slider.
    if (slide_present == 0) {
        $("#header").css({ "display": "none" });
    }

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

        });

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

        });

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

            // Start playing the animation
            navigate("next");
        });

        var activeContainer = 1;
        var currentImg = 0;
        var animating = false;

        // This function will start/continue the slideshow and call 'showImage' function
        //to display the appropriate slide.
        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);
            clearTimeout(intervalID);

            //Set the timer to a new value.
            slideshowSpeed = photos[currentImg - 1].time_interval * 1000;
            //Call the reccursive 'navigate' function again after the new time interval.
            intervalID = setTimeout(function () {
                navigate("next");
            }, slideshowSpeed);

        };

        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(" + photoObject.image + ")",
                "display": "block"
                //"z-index": currentZindex 
            });

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

            // Set the new header text
            $("#firstline")
            .attr("href", photoObject.url)
            .html(photoObject.firstline);
            $("#secondline")
			.attr("href", photoObject.url)
			.html(photoObject.secondline);

            // Fade out the current container
            // and display the header text when animation is complete
            $("#headerimg" + currentContainer).fadeOut(function () {
                setTimeout(function () {
                    $("#headertxt").css({ "display": "block" });
                    animating = false;
                }, 300);
            });

        };

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

            // Clear the interval
            clearTimeout(intervalID);
        };

        // Start playing the animation
        intervalID = setTimeout(function () {
            navigate("next");
        }, 0);

    }
});