var _currentID = null;
var _currentBtn = null;

var itemArray = ["rotator1", "rotator2", "rotator3", "rotator4", "rotator5", "rotator6", "rotator7", "rotator8"];
var btnArray = ["rotator1btn", "rotator2btn", "rotator3btn", "rotator4btn", "rotator5btn", "rotator6btn", "rotator7btn", "rotator8btn"];

var i; // index of item
var r = null; // rotator interval

$(function () {
    _currentID = itemArray[0];
    _currentBtn = btnArray[0];

    $("#" + _currentID).fadeIn("slow", function () { r = setInterval('rotate()', 5500) });

    i = 0; // set default

    $(".rotator_button").click(function (e) {
        var prevItem = $("#" + _currentID);
        var str = this.id.toString().replace("btn", "");
        var currItem = $("#" + str);

        // buttons
        $("#" + _currentBtn).removeClass("sel");
        $(this).addClass("sel");

        // hide prev
        prevItem.css("display", "none");

        // fade in
        currItem.fadeIn("slow");

        _currentID = currItem.attr("id");
        _currentBtn = this.id;
        clearInterval(r);
        r = setInterval('rotate()', 5500);
    });
});

function rotate() {
    i = _currentID.substring(_currentID.length - 1);
    if (i == itemArray.length)
        i = 0;

    var newItem = itemArray[i];
    var newBtn = btnArray[i];

    $("#" + _currentID).fadeOut("fast", function () { $("#" + newItem).fadeIn("slow"); });
    $("#" + _currentBtn).removeClass("sel");
    $("#" + newBtn).addClass("sel");

    i += 1;

    _currentID = newItem;
    _currentBtn = newBtn;
}