$j(document).ready(function() {
    
    $j('#carousel-images').cycle({ 
        fx:     'fade', 
        timeout: 3000,
        pause:   1,
        before:  onBefore
    });
    
    function onBefore() { 
        nextActiveImage = $j(this).attr('class');
        nextActiveTab = nextActiveImage.replace('img-', 'tab-');
        nextActiveTabNo = nextActiveTab.replace('tab-', '');
        
        if ('1' == nextActiveTabNo){
            $j('#carousel-tab-2').removeClass('active-tab');
            $j('#carousel-tab-3').removeClass('active-tab');
        }else if('2' == nextActiveTabNo){
            $j('#carousel-tab-1').removeClass('active-tab');
            $j('#carousel-tab-3').removeClass('active-tab');
        }else if('3' == nextActiveTabNo){
            $j('#carousel-tab-1').removeClass('active-tab');
            $j('#carousel-tab-2').removeClass('active-tab');
        }
        
        $j('#carousel-' + nextActiveTab).addClass('active-tab');
    }
    
    $j('#carousel-tab-1').hover(function() { 
        $j('#carousel-images').cycle(0);
        $j('#carousel-images').cycle('pause');
        return false; 
    },
    function(){
        $j('#carousel-images').cycle('resume');
        return false; 
    });
    
    $j('#carousel-tab-2').hover(function() { 
        $j('#carousel-images').cycle(1);
        $j('#carousel-images').cycle('pause');
        return false; 
    },
    function(){
        $j('#carousel-images').cycle('resume');
        return false; 
    });
    
    $j('#carousel-tab-3').hover(function() { 
        $j('#carousel-images').cycle(2);
        $j('#carousel-images').cycle('pause');
        return false; 
    },
    function(){
        $j('#carousel-images').cycle('resume');
        return false; 
    });

});