$j(document).ready(function() {

    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-images').cycle({
        fx: 'fade',
        timeout: 3000,
        pause: 1,
        before: onBefore
    });


    $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;
	});

});