var col = 200,
      sep = 40;
	
$(function(){
    var columnW = col;
    var primaryW = Math.floor( ($(window).width()-col-sep) / columnW ) * columnW;
    $('#grid_main').css({width: primaryW});

	$('#grid_main').masonry({
	  columnWidth: col, 
	  itemSelector: '.box' ,
	  animate: true,
	  animationOptions: {
		duration: 600,
		easing: 'swing',
		queue: false
	  }
	});

	$(window).resize(function(){
		var columnW = col;
		var primaryW = Math.floor( ($(window).width()-col-sep) / columnW ) * columnW;
		$('#grid_main').css({width: primaryW});
	});

	//move the image in pixel
	var move = 0;
	
	//zoom percentage, 1.2 =120%
	var zoom = 1.0;

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

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


});