$(document).ready(function () {

    var length = 701;
    var interval = 7000;
    var mousein = false;

    var timer, tmp, $this, $active;
    var $show = $('div.banners div.show');
    var $panel = $('div.panel div');

    // setup container length
    $show.css('width', $show.find('img').length * length);
    $active = $panel.find('span:first').addClass('active');

    $('div.banners, div.panel').mouseenter(function () { mousein = true; }).mouseleave(function () { mousein = false; });

    var rotate = function () {
        if (!mousein) {
            tmp = $active.next();
            tmp = tmp.length ? tmp : $active.siblings().first();
            tmp.click();
        }
    }

    $panel.find('span').click(function () {
        $this = $(this);
        if ($this != $active) {
            $active.removeClass('active');
            $this.addClass('active');
            $active = $this;
            $show.animate({marginLeft: -($this.index() * length)}, 450);
        }
    });

    timer = setInterval(rotate, interval);

});