$(function(){ 	// el $ y la llamada find y otros elementos depende de jquery.
	 
		// bucle para buscar los elementos li - objetos que vamos a animar.
		var li = $('.gallery').find('li'); // buscar dentro de la clase no se del id - definir la clase en el div.
		
		li.each(function(i){
		var t = $(this),
			img = t.find('img'),
			src = img.attr('src'),
			width = li.width(),
			height = li.height();
		
							// tomamos la ruta de la imagen del 
								//				var src = document.getElementById("photo").src;
								//				width = document.getElementById("photo").width;
								//				height = document.getElementById("photo").height;
								//				width=200;
								//				heigth=200;
								//				document.getElementById("holder").innerHTML = "";
							// creación del objeto canvas
							
							img.hide().after($('<div />').attr('id', 'holder'+i).addClass('holder'));
						
						// mostrar los border de los div.
						//document.getElementById("holder"+i).style.border="5px solid black"
						
							//var r = Raphael('holder'+i, width*2, height*2),
							var r = Raphael('holder'+i, 150, 150),
							//var r = Raphael("holder", 400, 200);
							
							//rimg = r.image(src, width/2, height/2, width, height);
							rimg = r.image(src, 50, 50, 60, 60);
							//var Rimg = r.image(src, 50, 50, width, height);

							//img.rotate(360);
							rimg.hover(function(event) {
							    this.animate({
									scale: 2,
									rotation : 360
								}, 1200, 'elastic');
							}, function (event) {
							    this.animate({
									scale: 1,
									rotation : 0
								}, 1200, 'elastic');
							});
							
		});	// Cierra la funcion que recorre los elementos li.  - objetos a animar.				
				
		li.hover(function(){
		li.css({ 'z-index': 1 });
		$(this).css({ 'z-index': 2 });
	});
		
	});