$(function() {
    $('.cycle > div').before('<div class="tabs">').cycle({ 
        fx:     'fade', 
        speed:  5000,
        timeout: 4000,
        pause: 1,
        pauseOnPagerHover: 1,
        pager:  '.tabs',
        pagerEvent: 'mouseover',
        pagerAnchorBuilder: function(idx, slide) {
            var slidenum = null;
            var className = null;
            return '<div class="tab"><span>'+slide.title+'</span></div>';
        },
        before: onBefore
    });
    function onBefore() {
        var className  = $(this).attr('class');
        className = className.replace("banner ","");
        $('.sub').hide();
        $('.sub.'+className).show();
    }
    $(".sub").hover(
      function () { $('.cycle > div').cycle("pause"); },
      function () { $('.cycle > div').cycle("resume"); }
    );
});