/// <reference path="jquery-1.4.1-vsdoc.js" />

function SetupBanner(config) {
    var container = $("#homepage-banner");
    container.css("position", "relative");

    for (var c in config) {       
        for (var i in config[c].images) {
            var cimg = config[c].images[i];

            // the first image is already in the page, use it
            // else build out from the config file
            //if (c == 0 && i == 0) {
            //    cimg.img = $("#homepage-banner-static-image");
            //}
            //else {       
                // build image        
                var img = $("<img src='" + cimg.src + "'/>");
                img.attr("alt", cimg.alt);
                img.attr("title", cimg.alt);
                img.css("position", "absolute");
                img.css("top", "0");
                img.css("left", "0");
                //img.css("height", container.css("height"));
                //img.css("width", container.css("width"));
                img.hide();
                cimg.img = img;

                // wire link, add to container
                var link = $("<a href='" + config[c].url + "'/>");
                link.prepend(img);
                container.append(link);
            //}
        }
    }

    var primaryDelay = 3000; // hold time for 
    var primaryFade = 1000; // time to fade 1B in over 1A
    var secondaryDelay = 5000; // hold time for 1B   
    //var secondaryFade1 = 750; // time to fade 1B out
    //var secondaryFade2 = 1500; // time to fade 2A in

    if(config.length > 0)
        StartText(0);

    // Fade in/out the "Are you ready to:" block
    function StartText(i) {
        var img0 = config[1].images[0].img;

        $(img0).css("opacity", 0);
        $(img0).css("top", "100px");
        $(img0).show();

        $(img0).animate({ opacity: '1' }, 1000)
               .delay(1000)
               .animate({ opacity: '0' }, 500, function () {
                   $(this).hide();
                   StartEText(i);
               });
    }

    // Fade in/out the E-text from bottom of box
    function StartEText(i) {
        var img1 = config[i].images[1].img;

        $(img1).css("opacity", 0);
        $(img1).css("top", "100px");
        $(img1).show();

        $(img1).animate({ opacity: '1' }, 1000)
               .delay(1000)
               .animate({ opacity: '0' }, 500, function () {
                   $(this).hide();
                   StartPrimary(i);
               });
    }

    // Fade in/out the first, zoomed-in picture of a resident
    function StartPrimary(i) {
        var img2 = config[i].images[2].img;

        $(img2).css("left", "-10px");
        $(img2).css("opacity", 0);
        $(img2).show();

        $(img2).animate({ left: "+=10", opacity: 1 }, primaryFade)
               .delay(primaryDelay)
               .animate({ opacity: 0 }, primaryFade, function () {
                    $(this).hide();
                    StartSecondary(i);
                });
    }

    // Fade in/out the second, zoomed-out-with-name picture of a resident
    // After that's completed, move on to the next set
    function StartSecondary(i) {
        var j = (i + 1) % config.length;
        var img3 = config[i].images[3].img;

        $(img3).css("left", "10px");
        $(img3).css("opacity", 0);
        $(img3).show();

        $(img3).animate({ left: "-=10", opacity: 1 }, primaryFade)
               .delay(secondaryDelay)
               .animate({ opacity: 0 }, primaryFade, function () {
                    $(this).hide();
                    StartText(j);
                });
    }
}