//Start Jquery
$(document).ready(function () {
    //hide the text
    $('#BannerContainer').children('div').hide();
    function animateNextPortfolio(nextP) {
        //check if there is a next image, otherwise go back to first
        if (nextP.length == 1) {
            $(nextP).fadeIn(3000, function () {
                //set delay to banner image to visible longer on page
                //then banner image/text fade out and call for next banner image
                window.setTimeout(function () {
                    $(nextP).find('p').fadeOut(1000)//text
                    $(nextP).fadeOut(2000); //image
                    animateNextPortfolio($(nextP).next('div'));
                }, 4000);
            });
            // fading paragraph beside banner
            window.setTimeout(function (
            ) {
                $(nextP).find('p').fadeIn(1000); //text
            }, 1000);
        } else {
            // restart banner image/text animation for new cycle
            animateFirstPortfolio();
        }
    }
    function animateFirstPortfolio() {
        // fading first banner image/text
        $('#BannerContainer').children('div:first').fadeIn(1000, function () {
            //set delay to banner for visible longer on page
            //then banner image/text fade out and call for next banner
            window.setTimeout(function () {
                animateNextPortfolio($('#BannerContainer').children('div:first').next('div'));
                $('#BannerContainer').children('div:first').fadeOut(3000); //image
                $('#BannerContainer').children('div:first').find('p').fadeOut(1000); //text
            }, 4000);
        });
        // set delay to fade the banner text while banner image is fading
        window.setTimeout(function () {
            $('#BannerContainer').children('div:first').find('p').fadeIn(500); //text
        }, 500);
    }
    animateFirstPortfolio(); //start animation
});