window.addEvent('domready',function() { 
									
	$$('.popUp').each(function(p) {
							   
		p.addEvent('click', function() {
									 
			var imgSrc = p.getElement('img').get('src');		 
			var image =  imgSrc.replace(/small/i,'large');
			
			var img = new Element("img", {'src' : image});
			
//			var img = new Asset.image(image, {title: 'myImage', onLoad: myFunction});
				 
			var galleryBox = new Element("div", {'class' : 'gallery_bg'}).injectInside($(document.body)); 
			var imgDisplay = new Element("div", {'class' : 'gallery_box'}).injectInside($(document.body), 'top'); 
			
			imgDisplay.setStyle('visibility', 'hidden');
			img.inject(imgDisplay, 'top');
						
			var fx = new Fx.Morph(galleryBox, {duration: 500, transition: Fx.Transitions.Sine.easeOut});
			var fx2 = new Fx.Morph(imgDisplay, {duration: 250, transition: Fx.Transitions.Sine.easeOut});
			
			
			
					
			fx.start({'opacity': .5}).chain(function() {
													 
				imgDisplay.setStyles({
					'margin-top': -((img.getDimensions().height / 2) - 10),
					'margin-left' : -((img.getDimensions().width / 2) - 10)
				});
				
				imgDisplay.setStyles({
					'visibility': 'visible',
					'opacity': 0
				});
				
				galleryBox.addEvent('click', function() {
					fx2.start({'opacity': 0}).chain(function() {	
						fx.start({ 'opacity' : 0 }).chaing(function() {
							imgDisplay.dispose();
							galleryBox.dispose();
						});
					});
				});
				
				imgDisplay.addEvent('click', function() {
					fx2.start({'opacity': 0}).chain(function() {	
						fx.start({ 'opacity' : 0 }).chaing(function() {
							imgDisplay.dispose();
							galleryBox.dispose();
						});
					});
				});
				
					
				fx2.start({ 'opacity' : 1 });
			});	
	
		});
	});
	
});