var $n = jQuery.noConflict();
$n(document).ready(function() {

	//if mouse over and mouse out
	$n('.eff').hover(
	function () {

		value = $n(this).find('img').outerHeight() * -1;

		//for left/right if you have different width and height, 
		//commented out because we are using up/down in this example
		//value = $n(this).find('img').outerWidth() * -1); 
		
		//animate the image
		// you can change the sliding direction by changing bottom to left, right or top
		// if you changed this, you will have to change the position of the hover out as well
		$n(this).find('img').stop().animate({bottom: -40} ,{duration:400, easing: 'jswing'});	
		
	},
	function () {
		
		//reset the image
		// the position property (bottom), it must be same with the on in the mouseover
		$n(this).find('img').stop().animate({bottom:0} ,{duration:600, easing: 'jswing'});	
	
	});
	
	//if user clicked on the thumbnail
	$n('.eff').click(function () {	
		//grab and execute the first link in the thumbnail
		window.location = $n(this).find('a:first').attr('href');
	});
	
});