function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

$(document).ready(function() {
	

	//move the image in pixel
	//var move = -15;
	
	//zoom percentage, 1.2 =120%
	//var zoom = 1.2;

	$('.zitem').find('p.caption').stop(false,true).fadeIn(200);
	
	//On mouse over those thumbnail
	$('.zitem').hover(function() {
		
		//Set the width and height according to the zoom percentage
		//width = $('.zitem').width() * zoom;
		//height = $('.zitem').height() * zoom;
		
		//Move and zoom the image
		//$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'opacity':0.5, 'top':move, 'left':move}, {duration:200});
		$(this).find('img').stop(false,true).animate({'opacity':0.5}, {duration:200});
		
		//Display the caption
		//$(this).find('p.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		//$(this).find('img').stop(false,true).animate({'width':$('.zitem').width(), 'height':$('.zitem').height(), 'opacity':1, 'top':'0', 'left':'0'}, {duration:100});	
		$(this).find('img').stop(false,true).animate({ 'opacity':1}, {duration:100});	

		//Hide the caption
		//$(this).find('p.caption').stop(false,true).fadeOut(200);
	});
});

jQuery(document).ready(function() {

	//############ mycarousel = WALL
	jQuery('#mycarousel').jcarousel({
    		scroll: 4
    	});
	//alert (scroll);

	
	//############ mycarousel1 = SLIDE
	jQuery('#mycarousel1').jcarousel({
        	auto: 7,
        	wrap: 'circular',
        	initCallback: mycarousel_initCallback
	});
});