var Dialog = {};
Dialog.Box = Class.create();
Object.extend(Dialog.Box.prototype, {
	dialog_box: null,
	overlay: null,
	popupdiv: null,
	content: null,
	popupdiv_title: null,
	parent_element: null,
	title: null,
	iframe: true,
	handle: {show:null, hide:null, afx:null, bfx:null},
	interval: null,

	initialize: function() {
		this.handle.show	= this.show.bind(this);
		this.handle.hide	= this.hide.bind(this);
		this.handle.afx		= this.updatePopupdiv.bind(this);
		this.handle.bfx		= this.updatePopupPosition.bind(this);
		//
		this.createOverlay();
		this.createPopupDiv();
		this.parent_element = this.popupdiv.parentNode;
		//
		this.popupdiv.style.zIndex = this.overlay.style.zIndex + 1;
	},
	
	createOverlay: function() {
		if($('dialog_overlay')) {
			this.overlay = $('dialog_overlay');
		} else {
			this.overlay = new Element('div', {'id': 'dialog_overlay'});
			Object.extend(this.overlay.style, {
				'position': 'absolute',
				'top': '0',
				'left': '0',
				'zIndex': '500',
				'width': '100%',
				'backgroundColor': '#000',
				'display': 'none'
				});
			Element.insert(document.body.childNodes[0], {before:this.overlay});
		}
	},
	createPopupDiv: function() {
		if($('popupdiv_container')) {
			this.popupdiv = $('popupdiv_container');
		} else {
			this.popupdiv = new Element('div', {'id': 'popupdiv_container'});
			if(this.iframe){
				this.content = new Element('iframe', { 	'class': 'popupdiv_middle',
										   				'height': '19px',
														'width': '220px',
														'background': '#000 url(/afbeeldingen/loader.gif) no-repeat center center',
														'id': 'popupdiv_content',
														'frameborder': '0',
														'border': '0',
														'scrolling': 'no',
														'marginheight': '0',
														'marginwidth': '0'});
			}else{
				this.content = new Element('div', { 	'class': 'popupdiv_middle',
										   				'height': '19px',
														'width': '220px',
														'background': '#000 url(/afbeeldingen/loader.gif) no-repeat center center',
														'id': 'popupdiv_content'});
			}
			Object.extend(this.popupdiv.style, {
				position: 'fixed',
				top: 40,
				left: 40,
				zIndex: 500,
				display: 'none'
				});
			var a = new Element('div', { 'class': 'popupdiv_top'});
			var b = new Element('div', { 'class': 'buttons'});
			this.popupdiv_title = new Element('div', { 'class': 'popupdiv_title', 'id': 'popupdiv_title'});
			var btn = new Element('img', { 'src': 'afbeeldingen/popupdiv/popupdiv_btnclose.gif', 'alt': 'Close'});
			var c = new Element('div', { 'class': 'popupdiv_left'});
			var d = new Element('div', { 'class': 'popupdiv_right'});
			var e = new Element('div', { 'class': 'popupdiv_bottom'});
			var f = new Element('div', { 'class': 'popupdiv_topleft'});
			var g = new Element('div', { 'class': 'popupdiv_topright'});
			var h = new Element('div', { 'class': 'popupdiv_bottomleft'});
			var i = new Element('div', { 'class': 'popupdiv_bottomright'});
			Element.insert(this.popupdiv, a);
			Element.update(a, this.popupdiv_title);
			Element.insert(a, b);
			Element.update(b, btn);
			Event.observe(btn, 'click', this.handle.hide);
			Element.insert(this.popupdiv, this.content);
			Element.insert(this.popupdiv, c);
			Element.insert(this.popupdiv, d);
			Element.insert(this.popupdiv, e);
			Element.insert(this.popupdiv, f);
			Element.insert(this.popupdiv, g);
			Element.insert(this.popupdiv, h);
			Element.insert(this.popupdiv, i);
			Element.insert(document.body.childNodes[0], {before:this.popupdiv});
		}
	},

	show: function(url, title) {
		if(this.content==null)			this.content = $('popupdiv_content');
		if(this.popupdiv_title==null)	this.popupdiv_title = $('popupdiv_title');
		//
		if(title==undefined){
			this.title = 'Popup';
		}else{
			this.title = title;
		}
		//
		this.overlay.style.height = this.winHeight()+'px';
		this.selectBoxes('hide');
		this.handle.bfx;
		new Effect.Appear(this.overlay, {duration:0.1, from:0.0, to:0.75});
		new Effect.Appear(this.popupdiv, {duration:0.9, from:0.0, to:1.00});
		if(this.iframe){
			Event.observe(this.content, 'load', this.handle.afx);
			this.content.src = url;
		}else{
			new Ajax.Updater(this.content, url, {method:'get', evalScripts:false, onComplete:this.handle.afx});
		}
		//
		Event.observe(window, 'resize', this.handle.bfx);
		this.interval = setInterval(this.handle.bfx, 1200);
	},
	
	hide: function() {
		Event.stopObserving(window, 'resize', this.handle.bfx);
		if(this.iframe){
			Event.stopObserving(this.content, 'load', this.handle.afx);
			this.content.contentWindow.document.close();
		}else{
			Element.update(this.content, '');
		}
		this.selectBoxes('show');
		clearInterval(this.interval);
		new Effect.Fade(this.overlay, {duration: 0.2});
		new Effect.Fade(this.popupdiv, {duration: 0.1});
	},
	
	updatePopupPosition: function() {
		Element.setStyle(this.content, {width: 'auto', height: 'auto'});
		Element.setStyle(this.popupdiv, {width: 'auto', height: 'auto'});
		if(this.iframe){
			var iscroll	= 'no';
			var iwidth	= this.content.contentWindow.document.documentElement.scrollWidth;
			var iheight	= this.content.contentWindow.document.documentElement.scrollHeight;
			if(iwidth > this.viewWidth()-20)	{	iwidth = this.viewWidth();	iscroll = 'auto';}
			if(iheight > this.viewHeight()-40)	{	iheight = this.viewHeight();	iscroll = 'auto';}
			Element.setStyle(this.content, {
						   'width': iwidth+'px',
						   'height': iheight+'px'
							  });
			Element.writeAttribute(this.content, {scrolling: iscroll});
		}
		var dim		= Element.getDimensions(this.popupdiv);
		var xleft	= ((this.viewWidth() / 2)-(dim.width / 2));
		var xheight	= ((this.viewHeight() / 2)-(dim.height / 2));
		Element.setStyle(this.popupdiv, 
						    {	left: xleft + 'px',
								top: xheight+ 'px',
								width: dim.width + 'px',
								height: dim.height + 'px'
							}
						 );
	},
	
	checkImagesLoaded: function(){
		var c = 0;
		var arr = $A(Element.select(this.content, 'img'));
		for (var i=0; i<arr.length; ++i) { 
			if(arr[i].complete) {++c;}
		}
		window.status = 'Images Loaded: ' + c + ' of ' + arr.length;
		if(c < arr.length) {
			setTimeout(this.checkImagesLoaded.bind(this), 700);
		}
		return true;
	},
	
	checkIframesLoaded: function(){
		var c = 0;
		var arr = $A(Element.select(this.content, 'iframe'));
		for (var i=0; i<arr.length; ++i) {
			if(arr[i].readyState) {
				arr[i].style.height = arr[i].contentWindow.document.body.offsetHeight+'px';
				++c;
			}
		}
		window.status = 'Frames Loaded: ' + c + ' of ' + arr.length;
		if(c < arr.length) {
			setTimeout(this.checkIframesLoaded.bind(this), 700);
		}
		return true;
	},
	
	updatePopupdiv: function() {
		Site.updateBack();
		var imagesLoaded = this.checkImagesLoaded();
		var iframesLoaded = this.checkIframesLoaded();
		//
		if(imagesLoaded && iframesLoaded) {
			window.status = '';
			Element.update(this.popupdiv_title, this.title);
			Element.show(this.popupdiv);
			this.handle.bfx;
		}
	},
	
	selectBoxes: function(what) {
		$A(document.getElementsByTagName('select')).each(function(select) {	Element[what](select);});
		if(what == 'hide')
			$A(this.content.getElementsByTagName('select')).each(function(select){Element.show(select)})
	},
	
	winWidth: function(){
		return document.documentElement.scrollWidth || document.body.offsetWidth || window.innerWidth || document.documentElement.clientWidth || 0;
	},
	viewWidth: function(){
		return document.viewport.getWidth() || 0;
	},
	
	winHeight: function(){
		return document.documentElement.scrollHeight || document.body.offsetHeight || window.innerHeight || document.documentElement.clientHeight || 0;
	},
	viewHeight: function(){
		return document.viewport.getHeight() || 0;
	},
	scrollTop: function(){
		return document.viewport.getScrollOffsets().top || 0;		
	},
	scrollLeft: function(){
		return document.viewport.getScrollOffsets().left || 0;		
	}

});

function popup(url, title){
 	var Popuper = new Dialog.Box();
	Popuper.show(url, title);
	return false;
}