window.addEvent("domready", function() {
	$$(".enlargeimage").each(function(e, i){
		e.onclick = function() { new EnlargeImage(e, {duration:300, position: "this"}); }
		e.style.cursor = "pointer";
	});
});
var EnlargeImage = new Class({
	/* 	This Mootools class is made by the fifth generation Lutz, wizzard in the Algo solarsystem.
		Use this with caution for it is entangled with magic from the old times.
		
		Licence:
		You may not distribute this class too Dark Force (The black energy wave) or any of his 
		followers (Absolutely not Zio. For he lives!). You may not use the code in any dark
		or semidark ritual involving the dark side. Please respect my wishes in these matters
		and you may use it in any other way. thanks. 
		
		v. 1.1
	*/
	initialize: function(element,options) {
		this.element = element;
		this.options = options;
		this.enlarge();
	},
	enlarge: function() {
		// There must only be one.
		if($("EnlargedImage")) $("EnlargedImage").remove();
	
		// Collect position and size information from the element thou clicked upon.
		var coordinates = $(this.element).getCoordinates();
		var coordinatesTop = coordinates.top;
		var coordinatesLeft = coordinates.left;
		var coordinatesWidth = coordinates.width;
		var coordinatesHeight = coordinates.height;
		
		// Create an element which will shine upon thee and be embraced by the browser as a larger image.
		var image = new Element('img', {
			'styles': {
				'position': 'absolute',
				'top': '0px',
				'z-index': '-99',
				'cursor': 'pointer'
			},
			'src': this.element.src,
			'id': 'EnlargedImage'
		})
		// Let the image turn alive and appear into your browser.
		document.body.appendChild(image);

		// The size of the image is needed for the grand plan and will be saved here.
		imageWidth = image.width;
		imageHeight = image.height;
		
		// As will the width of the browser.
		var browserWidth = window.getWidth();
		
		// Let new styles shine down and entagle the image.
		image.setStyles({
			'top': coordinatesTop+"px",
			'left': coordinatesLeft+"px",
			'width': coordinatesWidth+"px",
			'height': coordinatesHeight+"px",
			'z-index': '+99'
		})
		// Calculates the image position if though choose too.
		var position;
		if(this.options.position == "this") position = (coordinatesTop-(imageHeight/2)+(coordinatesHeight/2));
		else position = this.options.position+"px";
		
		// Make it grow,
		// make it rise,
		// it must flow,
		// really nice.
		var animationDuration = this.options.duration;
		var enlargeImage = new Fx.Styles(image,{duration: animationDuration,onComplete: function() {
			
			image.addEvent('click', function() { 
				var contractImage = new Fx.Styles(image,{duration: animationDuration,onComplete: function() {
					image.remove();
				}});
				contractImage.start({
					'top': [position,coordinatesTop],
					'left': [((browserWidth/2)-(imageWidth/2)),coordinatesLeft],
					'width': [imageWidth,coordinatesWidth],
					'height': [imageHeight,coordinatesHeight]
				});
			});
		}});
		enlargeImage.start({
			'top': [coordinatesTop,position],
			'left': [coordinatesLeft,((browserWidth/2)-(imageWidth/2))],
			'width': [coordinatesWidth,imageWidth],
			'height': [coordinatesHeight,imageHeight]
		});
	}
});