// Set up initial variables
var banners, bannerLinks, currentBannerID, nextBannerID, currentBanner, nextBanner, currBannerLink, nextBannerLink, hereArrowPos, interval, timeDelay, stopped;

$(document).ready(function () {

    $('#hereArrow').addClass("hereArrow0"); // initial arrow state at position 0

    banners = [$('#banner1'), $('#banner2'), $('#banner3')];
    bannerLinks = [$('#bannerLink1'), $('#bannerLink2'), $('#bannerLink3')];

    currentBannerID = 0; // which banner in the array are we on?
    nextBannerID = 1;    // which banner are we going to?

    // don't display banners 2 and 3
    $("#playPauseBannerBtn").removeClass("invisible");
    banners[1].hide();
    banners[2].hide();

    // reduce opacity of links to hidden banners
    bannerLinks[1].fadeTo('fast', 0.6);
    bannerLinks[2].fadeTo('fast', 0.6);


    currentBanner = banners[currentBannerID];
    currBannerLink = bannerLinks[currentBannerID];
    nextBanner = banners[nextBannerID];

    // add hover over effect to the buttons
    for (var x = 0; x < bannerLinks.length; x++) {

        bannerLinks[x].hover(function () {
            fadeButton($(this), "in");
        },
    function () {
        fadeButton($(this), "out");
    });
    }

    // rotation settings
    timeDelay = 12000;
    startRotateBanners();
});

// function to start timed banner rotation
function startRotateBanners() {
    if (interval != undefined) {
        clearInterval(interval);
    }

    interval = setInterval("rotateBanners()", timeDelay);
}

// function to stop timed banner rotation
function stopRotateBanners() {
    if (interval != undefined) {
        clearInterval(interval);
    }
}

// function called by button hover event
function fadeButton(bannerID, inOutFlag) {

    // check to see if button is active, otherwise add effect
    if (bannerID.attr("id") != bannerLinks[currentBannerID].attr("id")) {
        switch (inOutFlag) {
            case "in": bannerID.fadeTo('fast', 1); break;
            case "out": bannerID.fadeTo('fast', 0.6); break;
        }
    }
}

function playPauseBanner() {
    if (stopped) {
        startRotateBanners();
    } else {
        stopRotateBanners();
    }
}

// Pause the banner if user hovers mouse over it, unless it's stopped already
$('.homepageBanner').mouseenter(function () {
    stopRotateBanners();
}).mouseleave(function () {
    if (!stopped) {
        startRotateBanners();
    }
});

$("#playPauseBannerBtn").click(function () {
    if (stopped != true) {
        stopped = true;
        stopRotateBanners();
        $(this).addClass("paused");
    }
    else {
        stopped = false;
        $(this).removeClass("paused");
        startRotateBanners();
        rotateBanners();
    }
});

// Change the banner on button click
$('#bannerLink1').click(function () {
    stopped = true;
    stopRotateBanners();
    nextBanner = $('#banner1');
    nextBannerID = 0;
    rotateBanners();
    $("#playPauseBannerBtn").addClass("paused");
});

$('#bannerLink2').click(function () {
    stopped = true;
    stopRotateBanners();
    nextBanner = $('#banner2');
    nextBannerID = 1;
    rotateBanners();
    $("#playPauseBannerBtn").addClass("paused");
});

$('#bannerLink3').click(function () {
    stopped = true;
    stopRotateBanners();
    nextBanner = $('#banner3');
    nextBannerID = 2;
    rotateBanners();
    $("#playPauseBannerBtn").addClass("paused");
});

function rotateBanners() {

    currentBanner.hide();
    nextBanner.fadeIn('slow');
    currentBanner = banners[nextBannerID];
    bannerLinks[nextBannerID].fadeTo('fast', 1);

    if (bannerLinks[nextBannerID] != bannerLinks[currentBannerID]) {
        bannerLinks[currentBannerID].fadeTo('fast', 0.6); // fade previous banner button
    }

    $('#hereArrow').removeClass($('#hereArrow').attr("class"));
    $('#hereArrow').addClass("hereArrow" + nextBannerID); // move the hereArrow to new position

    currentBannerID = nextBannerID;
    nextBannerID++;

    if (nextBannerID == banners.length) {
        nextBannerID = 0;
    }

    nextBanner = banners[nextBannerID];
}