var images = ['banner-2.jpg', 'banner-3.jpg', 'banner-4.jpg'];
var path = 'Content/images/'
var index = 0;

$(function() {
    var banner = $('#banner');
    $.each(images, function(i, item) {
        images[i] = $('<span></span>').css('background-image', 'url(' + path + item + ')', 'cursor', 'pointer');
        new Image().src = path + item;
        //images[index].appendTo(banner);
    });
    images[0].click(function() {
        window.location.href = "/services/Procurement-Consulting.html";
    });
    images[1].click(function() {
        window.location.href = "/services/Managed-Services.html";
    });
    images[2].click(function() {
        window.location.href = "/services/Standard-Offering.html";
    });
    
    setInterval(function() {
        var cItem = banner.find('h2');
        cItem.fadeOut(1000, function() { $(this).remove(); });
        images[index].hide();
        images[index].appendTo(banner);
        images[index].fadeIn(1000, function() {
            index++;
            if (index == images.length)
                index = 0;
        });
    }, 10000);
});