$(function(){
	
	var li = $('.gallery').find('li');
		
	li.each(function(i){
		var t = $(this),
			img = t.find('img'),
			src = img.attr('src'),
			width = li.width(),
			height = li.height(),
			href = img.attr('rel');
			
		img.hide().after($('<div />').attr('id', 'holder'+i).addClass('holder'));

		var r = Raphael('holder'+i, width*2, height*2);			
    rimg = r.image(src, width/2, height/2, width, height);

    rimg.attr('href',href);
    
    var ico = r.image('http://www.ille-design.com/new/images/zoom.png', 240, 290, 80, 40);
    
    rimg.hover(function(event) {
		    this.animate({
				scale: 2,
				rotation : 360
			}, 1200, 'elastic');
			ico.hide();
		}, function (event) {
		    this.animate({
				scale: 1,
				rotation : 0
			}, 1200, 'elastic');
      ico.show();
		});
		  
    	
		
	});
	
	li.hover(function(){
		li.css({ 'z-index': 1 });
		$(this).css({ 'z-index': 2 });
	});
			
});