/*
* Author:      Marco Kuiper (http://www.marcofolio.net/)
*/
// Speed of the automatic slideshow
var slideshowSpeed = 3000;
// Speed of the automatic slideshow
var transitionSpeed = 1000;
// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [{
    "title": "1",
    "image": "../images/pagebg/1.jpg",
    "url": "",
    "firstline": "1",
    "secondline": ""
}, {
    "title": "",
    "image": "../images/pagebg/2.jpg",
    "url": "",
    "firstline": "",
    "secondline": ""
}, {
    "title": "",
    "image": "../images/pagebg/3.jpg",
    "url": "",
    "firstline": "",
    "secondline": ""
}, {
    "title": "",
    "image": "../images/pagebg/4.jpg",
    "url": "",
    "firstline": "",
    "secondline": ""
}, {
    "title": "",
    "image": "../images/pagebg/5.jpg",
    "url": "",
    "firstline": "",
    "secondline": ""
}, {
    "title": "",
    "image": "../images/pagebg/6.jpg",
    "url": "",
    "firstline": "",
    "secondline": ""
}, {
    "title": "",
    "image": "../images/pagebg/7.jpg",
    "url": "",
    "firstline": "",
    "secondline": ""
}, {
    "title": "",
    "image": "../images/pagebg/8.jpg",
    "url": "",
    "firstline": "",
    "secondline": ""
}, {
    "title": "",
    "image": "../images/pagebg/9.jpg",
    "url": "",
    "firstline": "",
    "secondline": ""
}, {
    "title": "",
    "image": "../images/pagebg/10.jpg",
    "url": "",
    "firstline": "",
    "secondline": ""
}, {
    "title": "",
    "image": "../images/pagebg/11.jpg",
    "url": "",
    "firstline": "",
    "secondline": ""
}, {
    "title": "",
    "image": "../images/pagebg/12.jpg",
    "url": "",
    "firstline": "",
    "secondline": ""
}, {
    "title": "",
    "image": "../images/pagebg/13.jpg",
    "url": "",
    "firstline": "",
    "secondline": ""
}, {
    "title": "",
    "image": "../images/pagebg/14.jpg",
    "url": "",
    "firstline": "",
    "secondline": ""
}, {
    "title": "",
    "image": "../images/pagebg/15.jpg",
    "url": "",
    "firstline": "",
    "secondline": ""
}, {
    "title": "",
    "image": "../images/pagebg/16.jpg",
    "url": "",
    "firstline": "",
    "secondline": ""
}];
$(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(images/btn_pause.png)" });
        // Show the next image
        navigate("next");
        // Start playing the animation
        interval = setInterval(function() {
            navigate("next");
        }, slideshowSpeed);
    });
    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/" + photoObject.image + ")",
            "display": "block",
            "z-index": currentZindex
        });
        // Hide the header text
        $("#headertxt").css({ "display": "none" });
        // Set the new header text
        $("#firstline").html(photoObject.firstline);
        $("#secondline").attr("href", photoObject.url).html(photoObject.secondline);
        $("#pictureduri").attr("href", photoObject.url).html(photoObject.title);
        // Fade out the current container
        // and display the header text when animation is complete
        $("#headerimg" + currentContainer).fadeOut(transitionSpeed, function() {
            setTimeout(function() {
                $("#headertxt").css({ "display": "block" });
                animating = false;
            }, 500);
        });
    };
    var stopAnimation = function() {
        // Change the background image to "play"
        $("#control").css({ "background-image": "url(images/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);
});