window.addEvent('domready', function() {
	var imgs = $$('a.pdisp');
	
	$(document.body).grab(new Element('div', {'id': 'overlay', 'style': 'visibility: hidden;'}));
	$(document.body).grab(new Element('div', {'id': 'pdisplay', 'html': '<div class="frame" style="opacity: 0; visibility: hidden;"><div class="image"></div><div class="text">text</div><a class="close">Loka</a></div>'}));
	
	imgs.each(function(img) {
		img.addEvent('click', function(evt) {
			evt.stop();
			var myImage = Asset.image(img.get('href'), {
				id: 'dpisp',
				onLoad: function() {
					$$('#pdisplay .frame .image').set('html', '<img src="'+img.get('href')+'"/>');
					var frameSize = $$('#pdisplay .frame')[0].getSize();
					var imgSize = $$('#pdisplay .frame .image')[0].getSize();
					$$('#pdisplay .frame').setStyle('margin-left', (-(frameSize.x/2))+'px');
					$$('#pdisplay .frame .text').set('text', img.get('title'));
					$$('#pdisplay .frame .text').setStyle('width', (imgSize.x-20)+'px');

					frameSize = $$('#pdisplay .frame')[0].getSize();

					var frameScroll = $(document.body).getScroll();
					
					$$('#pdisplay .frame').setStyle('top', frameScroll.y);
					$$('#pdisplay .frame').fade('in');
				}
			});
			
			$$('#pdisplay .frame a.close').addEvent('click', function() {
				$$('#pdisplay .frame').fade('out');
			});
		});
	});
});