var effectTime   = 500;
var timeAutoNext = 7000;
var timerRoll;

$(document).ready(
    function() {

        $("div.roll ul li:first").fadeIn(effectTime);
        $("div.roll").data("curIndex", 0);
        timerRoll = setTimeout("gotoNextRoll()", timeAutoNext);

        $("a.roll-prev").click(
            function() {
                gotoPrevRoll();

                return false;
            }
        );

        $("a.roll-next").click(
            function() {
                gotoNextRoll();

                return false;
            }
        );

    }
);

function gotoPrevRoll() {
    var curIndex   = Number($("div.roll").data("curIndex"));
    var curSet     = $("div.roll ul li");
    var rollLength = curSet.length;

    curSet.eq(curIndex).fadeOut(effectTime,
        function() {
            curIndex--;
            if (curIndex == -1) {
                curIndex = rollLength - 1;
            }
            $("div.roll").data("curIndex", curIndex);
            curSet.eq(curIndex).fadeIn(effectTime);
            curSet.eq(curIndex).fadeIn(effectTime,
                function() {
                    clearTimeout(timerRoll);
                    timerRoll = setTimeout("gotoNextRoll()", timeAutoNext);
                }
            );
        }
    );
}

function gotoNextRoll() {
    var curIndex   = Number($("div.roll").data("curIndex"));
    var curSet     = $("div.roll ul li");
    var rollLength = curSet.length;

    curSet.eq(curIndex).fadeOut(effectTime,
        function() {
            curIndex++;
            if (curIndex == rollLength) {
                curIndex = 0;
            }
            $("div.roll").data("curIndex", curIndex);
            curSet.eq(curIndex).fadeIn(effectTime,
                function() {
                    clearTimeout(timerRoll);
                    timerRoll = setTimeout("gotoNextRoll()", timeAutoNext);
                }
            );
        }
    );
}