function animate(titleID, imgID, divImgID, index, upSrc, downSrc, numberOfAds, downNavPath, upNavPath) {
    //var imgHeight = $("#" + imgID).height();
    var imgHeight = '244';
    $("#" + imgID).fadeOut(1500, function() {
        var i; //loop variable
        var height = 0; //variable to calculate the summed height of the title divs

        var moveUp = true; //do we need to move the title divs up or down?

        if ($("#" + titleID).css("top") == "-" + imgHeight + "px") {
            moveUp = false;
        }
        if (moveUp) {
            $("#" + imgID).attr("src", upSrc);
            $("#" + imgID).unbind();
            $("#" + imgID).click(function() { window.location.href = upNavPath });
        }
        else {
            $("#" + imgID).attr("src", downSrc);
            $("#" + imgID).unbind();
            $("#" + imgID).click(function() { window.location.href = downNavPath });
        }
        //loop through the title divs to find the summed height and adjust the position of each title div as needed
        if (moveUp) {
            for (i = 0; i < index + 1; i++) {
                //change the css class of the active title
                if (index == i)
                    $("#" + titleID).attr('class', 'adTitleSelected');
                else
                    $("#" + titleID.toString().substr(0, titleID.toString().length - 1) + (i)).attr('class', 'adTitle');

                //position the title div at the top, and position the upper title divs at the top if they are not there already
                if ($("#" + titleID.toString().substr(0, titleID.toString().length - 1) + i).css("top") != "-" + imgHeight + "px") {
                    $("#" + titleID.toString().substr(0, titleID.toString().length - 1) + i).animate({
                        top: "-" + imgHeight + "px"
                    }, 1500);
                }
                height = height + $("#" + titleID.toString().substr(0, titleID.toString().length - 1) + i.toString()).height();
            }
            if (gAuto)
                $("#" + divImgID).animate({
                    top: height + 8 * (index + 1) + 2
                }, 1500, function() { animateRecursive(); });
            else {
                $("#" + divImgID).animate({ top: height + 8 * (index + 1) + 2 }, 1500);
            }
        }
        else {

            if ($("#" + titleID).attr('class') != 'adTitleSelected') {
                var xIndex = 0
                for (i = index; i <= numberOfAds; i++) {
                    //change the css class of the active title
                    $("#" + titleID.toString().substr(0, titleID.toString().length - 1) + (i)).attr('class', 'adTitle');

                    if (index == i)
                        $("#" + titleID).attr('class', 'adTitleSelected');
                    //position the title div at the top, and position the upper title divs at the top if they are not there already
                    if ($("#" + titleID.toString().substr(0, titleID.toString().length - 1) + (i + 1)).css("top") != "0px") {
                        $("#" + titleID.toString().substr(0, titleID.toString().length - 1) + (i + 1)).animate({
                            top: "0px"
                        }, 1500);
                    }
                }

                for (i = 0; i <= index; i++) {
                    height = height + $("#" + titleID.toString().substr(0, titleID.toString().length - 1) + (i)).height();
                }
                if (gAuto)
                    $("#" + divImgID).animate({ top: height + 8 * (index + 1) + 2 }, 1500, function() { animateRecursive(); });
                else {
                    $("#" + divImgID).animate({ top: height + 8 * (index + 1) + 2 }, 1500);
                }
            }

        }
    }).fadeIn(3000);  ;
}
var gMaxIndex;
var gAuto;
var gID;
var gIndex;
var gDown = false;
function startAnimation(maxIndex) { startAnimationByID('divAdTitle', maxIndex); }
function startAnimationByID(id, maxIndex) { gMaxIndex = maxIndex; gID = id; gAuto = true; gIndex = -1; animateRecursive(); }
function stopAdAnimation() { gAuto = false; }
function animateRecursive() {
    if (gAuto) {
        if (gDown)
            gIndex--;
        else
            gIndex++;
        if (gIndex == gMaxIndex)
        { gDown = true; }
        else { gDown = false; }

        $("div[id*='" + gID + gIndex + "']").click();
    }
}