window.addEvent('load', function(){
	$$('a[rel^=gallery]').each(function(el){
		el.addEvent('click', function(ev) {
			if (ev) {
				ev.stop();	
			};
			
			var overlay = new Overlay();
			var loader = new Loader();
			
			if (!$('dpGallery')) {
				var container = new Element('div').set('id', 'dpGallery').hide().inject(document.body);
				var close = new Element('div').addClass('close').inject(container).addEvent('click', function(){
					if (el.get('type') == 'embed') {
						container.getElement('div.embedDiv').morph({
							width: el.getElement('img').getSize().x,
							height: el.getElement('img').getSize().y
						});
					} else {
						container.getElement('img').morph({
							width: el.getElement('img').getSize().x,
							height: el.getElement('img').getSize().y
						});
					}

					container.morph({
						top: el.getElement('img').getPosition().y,
						left: el.getElement('img').getPosition().x
					});

					(function(){container.dispose()}).delay(600);
					overlay.close();
					loader.close();
				});
			} else {
				var container = $('dpGallery');
			}
			
			var rel = el.get('rel');
			if (rel.contains('\[') && $$('a[rel='+rel+']')) {
				var collection = [];
				var actual = 0;
				$$('a[rel='+rel+']').each(function(cl, i){
					collection[i] = cl;
					if (actual == 0) {
						if (cl.get('href') == el.get('href'))
							actual = i;
					}
				});
				
				if (actual < collection.length - 1) {
					var next = new Element('div').addClass('next').inject(container).addEvent('click', function(){
						closetoopenlater();
						(function () {
							collection[actual+1].fireEvent('click')
						}).delay(600);
					})
				};
				
				if (actual > 0) {
					var prev = new Element('div').addClass('prev').inject(container).addEvent('click', function(){
						closetoopenlater();
						(function () {
							collection[actual-1].fireEvent('click')
						}).delay(600);
					})
				};
				
				function closetoopenlater () {
					if (el.get('type') == 'embed') {
						container.getElement('div.embedDiv').morph({
							width: el.getElement('img').getSize().x,
							height: el.getElement('img').getSize().y
						});
					} else {
						container.getElement('img').morph({
							width: el.getElement('img').getSize().x,
							height: el.getElement('img').getSize().y
						});
					}
					container.morph({
						top: el.getElement('img').getPosition().y,
						left: el.getElement('img').getPosition().x
					});
					(function(){container.dispose()}).delay(600);
				}
			};

			if (el.get('type') == 'embed') {
				var embed = eval(el.get('href'));
				loader.hide();
				overlay.onClick(function(){close.fireEvent('click')});
				var divWithEmbed = new Element('div').addClass('embedDiv').inject(container);
				divWithEmbed.set('html', embed.embed.replace(/\@\@(.*)\@\@/, ''));
				var iframe = divWithEmbed.getElement('iframe');

				var init = [el.getElement('img').getPosition().x, el.getElement('img').getPosition().y];
						container.setStyles({
							position: 'absolute',
							left: init[0],
							top: init[1],
							zIndex: 101
						});
						container.show();
						var imagesize = divWithEmbed.getDimensions();
						divWithEmbed.setStyles({
							width: el.getElement('img').getSize().x,
							height: el.getElement('img').getSize().y
						});
						var the_height = imagesize.y < (window.getSize().y - 60) ? imagesize.y : window.getSize().y - 60;
						var the_width = the_height == imagesize.y ? imagesize.x : imagesize.x / (imagesize.y / the_height);
						divWithEmbed.morph({
							width: the_width,
							height: the_height
						});
						container.morph({
							left: ((window.getSize().x - the_width) / 2),
							top: ((window.getSize().y - the_height) / 2) - 4 + window.getScroll().y
						});
						window.addEvent('resize', function(){
							container.position();
						})
			} else {
				Asset.image(el.get('href'), {
					onLoad: function(image) {
						loader.hide();
						overlay.onClick(function(){close.fireEvent('click')});
						image.inject(container);
						var init = [el.getElement('img').getPosition().x, el.getElement('img').getPosition().y];
						container.setStyles({
							position: 'absolute',
							left: init[0],
							top: init[1],
							zIndex: 101
						});
						container.show();
						var imagesize = image.getDimensions();
						image.setStyles({
							width: el.getElement('img').getSize().x,
							height: el.getElement('img').getSize().y
						})
						var the_height = imagesize.y < (window.getSize().y - 60) ? imagesize.y : window.getSize().y - 60;
						var the_width = the_height == imagesize.y ? imagesize.x : imagesize.x / (imagesize.y / the_height);
						image.morph({
							width: the_width,
							height: the_height
						})
						container.morph({
							left: ((window.getSize().x - the_width) / 2),
							top: ((window.getSize().y - the_height) / 2) - 4 + window.getScroll().y
						});
						window.addEvent('resize', function(){
							container.position();
						})
					}
				})
			}

		})
	});
})