var PhotoBox = new Class({
	backgroundOpacity : 0.8,
	
	initialize: function(options){
		this.options = options;		
		this.show();
	},
		
	show: function() {
		var self = this;
		
		var _d 				= $(document.body);
		var _coords 		= _d.getCoordinates();
		var _dimensions 	= _d.getScrollSize();
		
		var _back = new Element('div', {
			styles : {
				'position' : 'absolute',
				'top' : _coords.top,
				'left' : _coords.left,
				'width'  : _dimensions.x,
				'height' : _dimensions.y,
				'background' : '#000',
				'opacity' : this.backgroundOpacity
			}
		});
		
		var loadingDiv = new Element('div', {
			html : '<img src="/imgs/loading.gif" />',
			styles : {
				'opacity' : 1,
				'position' : 'absolute',
				'z-index' : 9999,
				'background' : '#fff',
				'width' : 32,
				'height' : 32,
				'padding' : '15px',
				'top' : _d.getPosition().y + ((_coords.height - 32) / 2),
				'left' : _d.getPosition().x + ((_coords.width - 32) / 2)
			}
		});
	
		_d.adopt(loadingDiv);
		_d.adopt(_back);	
				
		new Asset.image(this.options.picture, {
			onload : function(picture) {
				loadingDiv.destroy();
				
				var _left = _d.getPosition().x + ((_coords.width - picture.get('width').toInt()) / 2);
				var _top  = 0;
				
				if(picture.get('height').toInt() > _coords.height) {
					_top = _d.getPosition().y - 50;
				} else {
					_top = _d.getPosition().y + ((_coords.height - picture.get('height').toInt()) / 2);
				}
				
				var _w = new Element('div', {
					styles : {
						'position' : 'absolute',
						'padding' : '5px',
						'top' : _top,
						'left' : _left,
						'width'  : picture.get('width').toInt(),
						//'height' : picture.get('height').toInt(),
						'background' : '#fff',
						'opacity' : 0
					}
				});
		
				_w.adopt(picture);
				_w.adopt(new Element('div', {
					id : 'footer',
					styles : {
						padding : '5px',
						background : '#fff',
						textAlign : 'right'
					}
				}).adopt(new Element('a', {
					text : 'Close',
					styles : {
						cursor : 'pointer'
					},
					events : {
						click : function() {
							_w.fireEvent('clickout');
						}
					}
				})));
								
				var elements = [_back, _w];
				
				_w.addEvent('clickout', function() {
					self.hide.delay(self.options.duration * 0, self, [elements])
				});
				
				_d.adopt(_w);
				_back.setStyle('height', _d.getScrollSize().y);
				_w.fade('in');
			}
		});
	},
	
	hide : function(elements) {
		var effects = new Fx.Elements(elements, {
			duration : 400, 
			onComplete : function() {
				elements.each(function(el) {
					el.dispose();
				});
			}
		}).start({
			'0': { 'opacity': [this.backgroundOpacity, 0] }, 
			'1': { 'opacity': [this.backgroundOpacity, 0] } 
		});
	}
});