$(function(){
	
	var li = $('.gallery').find('li'); // find all 'li' elements
		
	li.each(function(i){
		var t = $(this),
			img = t.find('img'), // find image in 'li' element
			src = img.attr('src'), // get path to your image
			width = li.width(), // get 'li' width
			height = li.height(); // get 'li' height
			
		img.hide().after($('<div />').attr('id', 'holder'+i).addClass('holder')); // hide all images and create containers for Raphael objects
 
		var r = Raphael('holder'+i, width*2, height*2), // create Raphael objects
			rimg = r.image(src, width/2, height/2, width, height); // create new images using previous variables
		
		rimg.hover(function() {
		    this.animate({
				scale: 2, // enlarge your images to the normal size
				rotation : 360
			}, 1200, 'elastic');
		}, function() {
		    this.animate({
				scale: 1, // decrease size of images
				rotation : 0
			}, 1200, 'elastic');
		});
		
	});
	
	li.hover(function(){
		li.css({ 'z-index': 1 }); // set z-index to all 'li' elements
		$(this).css({ 'z-index': 2 }); // set z-index to the hovering element
	});
			
});