$(document).ready(function() {
      
               //################### STREET - CLASSIC ############################
	
            	//move the image in pixel
	var moveclassic = -5;
	
	//zoom percentage, 1.2 =120%
	var zoomclassic = 1.2;

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

		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});
	
      
      
               //################### COLORAMA ############################
	
	//move the image in pixel
	var movecolorama = -5;
	
	//zoom percentage, 1.2 =120%
	var zoomcolorama = 1.05;

	//On mouse over those thumbnail
	$('.colorama').hover(function() {
		
		//Set the width and height according to the zoomcolorama percentage
		width = $('.colorama').width() * zoomcolorama;
		height = $('.colorama').height() * zoomcolorama;
		
		//movecolorama and zoomcolorama the image
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':movecolorama, 'left':movecolorama}, {duration:200});
		
		//Display the caption
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		$(this).find('img').stop(false,true).animate({'width':$('.colorama').width(), 'height':$('.colorama').height(), 'top':'6', 'left':'6'}, {duration:100});	

		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});
	
	
	//################### LITTLE NUTTY ############################
	
            	//move the image in pixel
	var movelittlenutty = -10;
	
	//zoom percentage, 1.2 =120%
	var zoomlittlenutty = 1.1;

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

		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});
	
	//################### SUPERSOLIDS ############################
	
            	//move the image in pixel
	var movesupersolids = -10;
	
	//zoom percentage, 1.2 =120%
	var zoomsupersolids = 1.1;

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

		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});
	
	//################### WATER ############################
	
            	//move the image in pixel
	var movewater = -5;
	
	//zoom percentage, 1.2 =120%
	var zoomwater = 1.2;

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

		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});
	
	//################### SNOW ############################
	
            	//move the image in pixel
	var movesnow = -5;
	
	//zoom percentage, 1.2 =120%
	var zoomsnow = 1.2;

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

		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});
	
	//################### MOTO ############################
	
            	//move the image in pixel
	var movemoto = -5;
	
	//zoom percentage, 1.2 =120%
	var zoommoto = 1.1;

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

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

});