var Lightbox = new Class({
	Implements: [Options],
	id: 'lightbox_' + new Date().getTime(),

	wrapper: null,
	overlay: null,
	lightbox: null,
	iframe: null,
	
	initialize: function(options) {
		this.setOptions(options);
		return this;
	},
	
	options: {
		url: null,
		basePath: null
	},
	
	
	build: function() {
		var viewport = document.getCoordinates();
		var width = viewport.width > 502 ? 502 : viewport.width;
		var height = viewport.height > 584 ? 584 : viewport.height;
		
		this.wrapper = new Element('div', {
			id: 'lightbox_wrapper',
			styles: {
				'display': 'none',
				'opacity': 1.0
			}
		});
		
		if(Browser.Engine.trident != undefined && Browser.Engine.trident == true && Browser.Engine.version == 4) {
			this.overlay = new Element('div', {
				id: 'lightbox_modal',
				html: ' ',
				
				styles: {
					'z-index': 4999,
					
					'position': 'absolute',
					'left': 0,
					'top': 0,
					'width': viewport.width,
					'height': viewport.height,
					'backgroundColor': '#000',
					'opacity': 0.6
				},
				'class': 'hasLayout'
			});
		} else {
			this.overlay = new Element('div', {
				id: 'lightbox_modal',
				html: ' ',
				
				styles: {
					'z-index': 4999,
					
					'position': 'fixed',
					'left': 0,
					'top': 0,
					'width': viewport.width,
					'height': viewport.height,
					'backgroundColor': '#000',
					'opacity': 0.6
				},
				'class': 'hasLayout'
			});
		}
		
		this.lightbox = new Element('div', {
			id: 'lightbox',
			styles: {
				'z-index': 5000,
				'width': width,
				'height': height,
				'position': 'absolute',
				'display': 'none',
				'left': (viewport.width/2) - (width/2),
				'top': (viewport.height/2) - (height/2)
			}
		});
		
		this.closeButton = new Element('img', {
			id: 'lightbox_close',
			src: this.options.basePath + 'templates/spd_static/images/lightbox_close.png',
			title: 'schließen',
			styles: {
				'position': 'absolute',
				'left': ((viewport.width/2) - (width/2) + width),
				'top': ((viewport.height/2) - (height/2) - 32),
				'z-index': 5004,
				'cursor': 'pointer'
			},
			events: {
				'click': function() {
					var wrapper = $('lightbox_wrapper');
					wrapper.destroy();
				}
			}
		});
		
		
		this.iframe = new Element('iframe', {
			frameborder: 0,
			id: 'lightbox_iframe',
			src: this.options.url,
			styles: {
				'width': width,
				'height': height
			}
		});
		
		
		
		this.iframe.inject(this.lightbox);
		this.lightbox.inject(this.wrapper);
		this.overlay.inject(this.wrapper);
		this.closeButton.inject(this.wrapper);
		this.wrapper.inject(document.body);
	},
	
	hide: function() {
		this.wrapper.destroy();
	}
});

var lb_window = {
	lb: new Lightbox(),
	lightbox: function(contentUrl, path) {
		this.lb = new Lightbox({url:contentUrl.href, basePath:path}).build();
	},
	hide: function() {
		var wrapper = $('lightbox_wrapper');
		wrapper.destroy();
	}
};