$(function() {
    showing = jQuery('#rotating_items div.RotatorContent:first'); // Initiate the 'showing' variable as the first rotating_item
    showing.show();
    UpdateCircles();
    timeout = setTimeout("show_next_rotating_item()", 5000); // Set the rotate
});

function show_next_rotating_item() {
    var next_rotating_item = showing.next(".RotatorContent");
    if (!next_rotating_item.attr("class")) {
        next_rotating_item = $("#rotating_items .RotatorContent:first");
    }

    show_rotating_item(next_rotating_item);
}

// The below function repeatedly gets called, to do the rotating
function show_rotating_item(next_rotating_item) {
    clearTimeout(timeout);

    jQuery(showing).fadeOut('slow');

    next_rotating_item.fadeIn('slow');

    showing = next_rotating_item;
    UpdateCircles();

    timeout = setTimeout("show_next_rotating_item()", 5000);
}


function UpdateCircles() {
    $(".Circles img").each(function() {
        var circleId = this.id.replace("Cirle-", "");

        if (showing.attr("id") == circleId) {
            this.src = this.src.replace(".gif", "_Over.gif");
            this.onclick = new Function("");
            this.className = "";
        }
        else {
            this.src = this.src.replace("_Over", "");
            this.onclick = new Function("show_rotating_item($('#" + circleId + "'))");
            this.className = "Rollover";
        }
    });
}