$(function () {
    var panel = $(".animate_container");
    var width = panel.width();
    var items = $(".animate_item");
    var count = items.length;
    var current = 0;
    items.not(":first").hide();
    var buttons = [];
    function play(index) {
        if (arguments.length == 0) {
            index = current + 1;
            if (index >= count) {
                index = 0;
            }
        }
        if (index == current) {
            return;
        }
        $(items[current]).fadeOut(350);
        $(items[index]).fadeIn(350);
        $(buttons[current]).removeClass("animate_active");
        $(buttons[index]).addClass("animate_active");
        current = index;
    }
    if (count > 0) {
        for (var x = 0; x < count; x++) {
            var btn = $("<div />").addClass("animate_button").text(x + 1).appendTo(panel).css("left", (width - 12 - (count - x) * 28) + "px").css("zIndex",99999).click((function (i) {
                return function () {
                    clearInterval(_play);
                    play(i);
                };
            })(x));
            buttons.push(btn);
        }
        $(buttons[0]).addClass("animate_active");
    }
    var _play = setInterval(play, 4500);
    panel.mouseover(function () {
        clearInterval(_play);
    }).mouseout(function () {
        _play = setInterval(play, 4500);
    });
});