var Modal = {
	overlayIsShown: false,
	modalIsLoaded: false,
	modalHeight: 500,
	modalWidth: 500,
	reload: function() {
		//window.location.reload();
		window.location.assign(window.location);
	},
	resize: function() {
		var content = this.modal.contentWindow.document.getElementById('tab_content_outer');
		var max_width = 0, max_height = 0;
		$(content).select('div.tab_content').each(function(e) {
				if (e.offsetHeight > max_height) max_height = e.offsetHeight;
				if (e.offsetWidth > max_width) max_width = e.offsetWidth;
			});
		var tabitems = this.modal.contentWindow.document.getElementById('tab_items');
		if (tabitems.offsetWidth > max_width) max_width = tabitems.offsetWidth;		
		var width = this.modalWidth - content.offsetWidth + max_width + 2;
		var height = this.modalHeight - content.offsetHeight + max_height + 2;
		//alert(this.modalWidth + " " + content.offsetWidth + " " + max_width);
		//alert(this.modalHeight + " " + content.offsetHeight + " " + max_height);
		width += parseInt(content.getStyle('paddingLeft')) + parseInt(content.getStyle('paddingRight'));
		height += parseInt(content.getStyle('paddingTop')) + parseInt(content.getStyle('paddingBottom'));
		var viewdim = document.viewport.getDimensions();
		this.modal.setStyle({
				left : parseInt((viewdim.width - width)/2) + 'px',
				top: parseInt((viewdim.height - height)/2) + 'px',
				width : width + 'px',
				height : height + 'px'
			});
		this.modalWidth = width;
		this.modalHeight = height;
		this.modalIsLoaded = true;
		this.show();
		Event.observe(this.modal.contentWindow, 'unload', function() { Modal.unload()});
	},
	simpleResize: function() {
		var window = this.modal.contentWindow.document.getElementById('modal_window');
		var content = this.modal.contentWindow.document.getElementById('modal_content');
		var width = this.modalWidth - (window.offsetWidth - content.offsetWidth) + 2;
		var height = this.modalHeight - (window.offsetHeight - content.offsetHeight) + 2;
		//alert(this.modalWidth + " " + window.offsetWidth + " " + content.offsetWidth + " " + width);
		//alert(this.modalHeight + " " + window.offsetHeight + " " + content.offsetHeight + " " + height);
		var viewdim = document.viewport.getDimensions();
		this.modal.setStyle({
				left : parseInt((viewdim.width - width)/2) + 'px',
				top: parseInt((viewdim.height - height)/2) + 'px',
				width : width + 'px',
				height : height + 'px'
			});
		//$('c_welkom_tekst').innerHTML += this.modalWidth + " " + window.offsetWidth + " " + content.offsetWidth + " " + width + "<br/>";
		this.modalWidth = width;
		this.modalHeight = height;
		this.modalIsLoaded = true;
		this.show();
		Event.observe(this.modal.contentWindow, 'unload', function() { Modal.unload()});
	},
	show: function() {
		if (this.overlayIsShown && this.modalIsLoaded) {
			if (Prototype.Browser.IE) {
				this.modal.setStyle({opacity: 1});
			} else {
				Effect.Appear(this.modal,{
						from: 0,
						to: 1,
						duration: this.options.fadeDuration
					});
			}
		}
	},
	open: function(src, options) {
		//$('c_welkom_tekst').innerHTML = '';
		var viewdim = document.viewport.getDimensions();
		this.options = Object.extend({
				overlayOpacity: 0.4,
				fadeDuration: 0.5,
				width: this.modalWidth,
				height: this.modalHeight,
				closeOnClick: false
			}, options || {});
		this.overlay = new Element('div', {
				id: 'modal_overlay'
			});
		this.overlay.setStyle({
				display: 'none'
			});
		this.modal = new Element('iframe', {
				id: 'modal_iframe',
				src: src,
				frameborder:0,
				allowTransparency: 'true',
				scrolling: 'no'
			});
		this.modal.setStyle({
				top: parseInt((viewdim.height - this.options.height)/2) + 'px',
				left: parseInt((viewdim.width - this.options.width)/2) + 'px',
				width: this.options.width + 'px',
				height: this.options.height + 'px',
				opacity: 0
			});
		
		$(document.body).insert(this.overlay);
		$(document.body).insert(this.modal);
		Effect.Appear(this.overlay,{
				from: 0,
				to: this.options.overlayOpacity,
				duration: this.options.fadeDuration,
				afterFinish: function() {
					this.overlayIsShown = true;
					this.show();
					if (this.options.closeOnClick) {
						$(document.body).observe('click', this.close.bind(this));
					}
				}.bind(this)
			});
	},
	unload: function() {
		if (Modal.modal) Modal.modal.setStyle({opacity: 0});
	},
	close: function() {
		$(document.body).stopObserving('click');
 		Element.remove('modal_iframe');	
		Modal.modal = null; /* later than remove cause of fire(unload) */
		Effect.Appear(this.overlay,{
				from: this.options.overlayOpacity,
				to: 0,
				duration: this.options.fadeDuration,
				afterFinish: function() {
					Element.remove('modal_overlay');
					window.focus();
				}
			});
		this.overlayIsShown = false;
		this.modalIsLoaded = false;
	}
}