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

// Speed of the automatic slideshow
var slideshowSpeed = 10000;

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [{
    "image": "BannerEMC.png",
    "firstline": "EMC Testing",
    "secondline": "MS Testing provide our clients with some of the fastest turnaround times in the industry. All EMC testing is completed in our brand new state-of-the-art testing facility and our unique business model allows us to deliver your reports quicker than many of our leading competitors."
}, {
    "image": "BannerMarine.png",
    "firstline": "Marine Type Approval",
    "secondline": "Our technical expertise and experience have allowed us to place ourselves as the leading marine type approval laboratory in the world. We have built a reputation within the industry on the basis of our client service, flexibilty and knowledge."
}, {
    "image": "BannerEnviro.png",
    "firstline": "Environmental Testing",
    "secondline": "We help clients that have vibration and climatic testing needs succeed by providing the expertise and ability to bring their product to market. Unlike other laboratories our clients' point of contact will be our experienced technical staff who are there to guide you every step of the way."
}
];



$(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 = 10;
    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" + currentContainer).css({
            "z-index": 10
        });

        $("#headerimg" + activeContainer).css({
            "background-image": "url(images/" + photoObject.image + ")",
            "display": "block",
            "z-index": 9
        });

        // Hide the header text
        //        $("#headertxt").css({ "display": "none" });
        $("#headertxt" + currentContainer).css({
            "z-index": 15
        });

        $("#headertxt" + activeContainer).css({
            "z-index": 14
        });
        $("#firstline" + activeContainer).text(photoObject.firstline);
        $("#secondline" + activeContainer).text(photoObject.secondline);

        // Fade out the current container
        $("#headerimg" + currentContainer).fadeOut('slow');
        $("#headertxt" + currentContainer).css({ "display": "none" });
        $("#headertxt" + activeContainer).fadeIn('slow');
        animating = false;
    };

    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);

});