var imageLoader = new Class({
	fx: null,
	initialize: function() {
		me = this;
		var body = $(document.body);
		
		var darker = new Element("div", {
			id: 'dark_background',
			styles: {
				left: 0,
				top: 0,
				opacity: 0.7,
				visibility: 'hidden',
				position: 'absolute',
				'background-color': '#001540',
				'z-index': 98
			}
		}).injectInside(body);
		var area = new Element("div", {
			id: 'photo_area',
			cellpadding: 0,
			cellspacing: 0,
			styles: {
				visibility: 'hidden',
				padding: '5px',
				position: 'absolute',
				'background-color': '#ffffff',
				'border': '2px solid #000000',
				'z-index': 99
			}
		}).injectInside(body);

		area.innerHTML = '<table cellpadding="0" cellspacing="0" style="width:100%;height:100%">'
			+ '<tr><td style="text-align:right"><img id="closephoto" style="cursor: pointer" src="images/close.jpg" /></td></tr>'
			+ '<tr><td style="vertical-align:middle; text-align: center; height: 100%">'
			+ '<img id="photoImage" src="images/progress.gif" /></td></tr>'
			+ '</table>';
	
		$("closephoto").addEvent("click", function() {
			$('photo_area').setStyle('visibility', 'hidden');
			$('dark_background').setStyle('visibility', 'hidden');
		});
		this.fx = new Fx.Style(area, 'opacity', {duration: 400, wait: false});
	},
	open: function(url) {
		me = this;
		var winSize = window.getSize();
		var loc = $(document.body).getCoordinates();
		var _x = loc.width > winSize.size.x ? loc.width : winSize.size.x;
		var _y = loc.height > winSize.size.y ? loc.height : winSize.size.y;
		$('dark_background').setStyles({
			width: _x,
			height: _y,
			visibility: 'visible'
		});
		$('photo_area').setStyles({
			top: winSize.scroll.y + ((winSize.size.y - 200) / 2),
			left: winSize.scroll.x + ((winSize.size.x - 200) / 2),
			visibility: 'visible',
			width: 200,
			height: 200
		});
		$('photoImage').src = 'images/progress.gif';

		var img = new Asset.image(url, {
			onload: function() {
				var oImg = $('photoImage');
				me.fx.set(0);
				oImg.src = this.src;
				me.showPhoto.delay(50, me);
				this.removeEvent("load");
			}
		});
	},
	showPhoto: function() {
		var coor = $('photo_area').getFirst().getCoordinates();
		var winSize = window.getSize();
		$('photo_area').setStyles({
			top: winSize.scroll.y + ((winSize.size.y - coor.height) / 2),
			left: winSize.scroll.x + ((winSize.size.x - coor.width) / 2),
			width: coor.width,
			height: coor.height
		});
		this.fx.start(1);
	}
});