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

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [{
    "title": "",
    "image": "body/Intro2.png",
    "url": "",
    "firstline": '<span style="display:block; text-align:left;font-family:Arial;font-size:22px;">Acclaimed recognition</span>',
    "secondline": '<p><div id="quotes"><span style="font-weight:bold;"> “Since its inception, IPS has operated with one purpose – to be the most flexible, customer-oriented provider in our industry.”</span></p>' +
                     '<div id ="ipsname">--Sev Spagnolie, IPS Founder</div><br /></div>'
},
{
    "title": "",
    "image": "body/Intro3.png",
    "url": "",
    "firstline": '<span style="display:block; text-align:left;font-family:Arial;font-size:22px;">Passion for excellence</span>',
    "secondline": '<p><div id="quotes"><span style="font-weight:bold;"> “The IPS sourcing and production strategy is a continuously changing system based on continuous feedback from procurement, production and marketing teams, as well as client feedback."</span></p>' +
                   '<div id ="ipsname">--Scott Bennett, Chief Technology Officer at IPS</div><br /> </div>'
},
{
    "title": "",
    "image": "body/Intro1.png",
    "url": "",
    "firstline": '<span style="display:block; text-align:left;font-family:Arial;font-size:22px;">Problems turned opportunities</span>',
    "secondline": '<p><div id="quotes"><span style="font-weight:bold;"> “IPS is a customer-centric company and a premier provider and innovator of print solutions and strategies for some of North America’s largest businesses.”</span></p>' +
                   '<div id ="ipsname">--Dave Gandini, president and chief <br/>operating officer of IPS</div><br /></div>'
},   
{
    "title": "",
    "image": "body/Intro4.png",
    "url": "",
    "firstline": '<span style="display:block; text-align:left;font-family:Arial;font-size:22px;">Diversified partnerships</span>',
    "secondline": '<p><div id="quotes"><span style="font-weight:bold;"> “Our expertise in card services and print management allow us to take client challenges and turn them into marketing opportunities.”</span></p>' +
                  '<div id ="ipsname">--Bill Konves, Vice President of <br />Sales & Marketing at IPS</div><br /></div>'
}
];



$(document).ready(function() {

    
    $("#footerColor").css({ "margin-top": "439.5px" });
    $("#footerColor").css({ "z-index": "1" });
    $("#footer").css({ "margin-top": "375px" });
    $("#footer").css({ "z-index": "5" });
    $("#bottomMenu").css({ "z-index": "10" });
    $("#copyright").css({ "margin-top": "73px" });


    $('li.headlink').hover(
			function() { $('ul', this).css('display', 'block'); },
			function() { $('ul', this).css('display', 'none'); });


    // Set the background image of the new active container

   
    $("#headerimg" + 1).css({
    "background-image": "url(../images/body/Intro1.png",
        "display": "block",
        "z-index": currentZindex
    });



    // 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).animate({
            width: ['hide', 'swing'],

            opacity: 'hide'
        }, 1000, 'linear',
        // $("#headerimg" + currentContainer).fadeOut(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);
   

});