use Modalbox library for popup dialogs

2025-12-13 14:15:56 +00:00 · 2010-11-14 23:46:49 +03:00
parent 75c510323b
commit 951906dcec
16 changed files with 1006 additions and 395 deletions
--- a/backend.php
+++ b/backend.php
@@ -50,7 +50,7 @@

 	if ((!$op || $op == "rpc" || $op == "rss" || 
 			($op == "view" && $mode != "zoom") || 
-			$op == "digestSend" || $op == "viewfeed" || $op == "publish" ||
+			$op == "digestSend" || $op == "dlg" || $op == "viewfeed" || $op == "publish" ||
 			$op == "globalUpdateFeeds") && !$_REQUEST["noxml"]) {
 				header("Content-Type: application/xml; charset=utf-8");

--- a/functions.js
+++ b/functions.js
@@ -27,38 +27,34 @@ function exception_error(location, e, ext_info) {

 	try {

-		var ebc = $("xebContent");
-	
-		if (ebc) {
-	
-			Element.show("dialog_overlay");
-			Element.show("errorBoxShadow");
-	
-			if (ext_info) {
-				if (ext_info.responseText) {
-					ext_info = ext_info.responseText;
-				}
+		if (ext_info) {
+			if (ext_info.responseText) {
+				ext_info = ext_info.responseText;
 			}
-	
-			ebc.innerHTML = 
-				"<div><b>Error message:</b></div>" +
-				"<pre>" + msg + "</pre>";
-
-			if (ext_info) {
-				ebc.innerHTML += "<div><b>Additional information:</b></div>" +
-				"<textarea readonly=\"1\">" + ext_info + "</textarea>";
-			}
-
-			ebc.innerHTML += "<div><b>Stack trace:</b></div>" +
-				"<textarea readonly=\"1\">" + e.stack + "</textarea>";
-	
-		} else {
-			alert(msg);
 		}

+		var content = "<div class=\"fatalError\">" +
+			"<pre>" + msg + "</pre>";
+
+		if (ext_info) {
+			content += "<div><b>Additional information:</b></div>" +
+			"<textarea readonly=\"1\">" + ext_info + "</textarea>";
+		}
+
+		content += "<div><b>Stack trace:</b></div>" +
+			"<textarea readonly=\"1\">" + e.stack + "</textarea>";
+
+		content += "<div style='text-align : center'>" +
+			"<button onclick=\"closeInfoBox()\">" +
+			"Close this window" + "</button></div>";
+	
+		// TODO: add code to automatically report errors to tt-rss.org
+
+		Modalbox.show(content, {title: "Unhandled exception", width: 600, 
+			resizeDuration: 0, transitions: false});
+
 	} catch (e) {
 		alert(msg);
-
 	}

 }
@@ -322,7 +318,10 @@ function toggleSelectRow(sender, row) {

 function checkboxToggleElement(elem, id) {
 	if (elem.checked) {
-		Effect.Appear(id, {duration : 0.5});
+		Effect.Appear(id, {duration : 0.5, 
+			afterSetup: function() { 
+				Modalbox.resizeToContent();
+			}});
 	} else {
 		Effect.Fade(id, {duration : 0.5});
 	}
@@ -391,26 +390,19 @@ function closeInfoBox(cleanup) {

 	try {
 		enableHotkeys();
+		Modalbox.hide();

-		if (Element.visible("infoBoxShadow")) {
-			Element.hide("dialog_overlay");
-			Element.hide("infoBoxShadow");
-
-			if (cleanup) $("infoBox").innerHTML = "&nbsp;";
-		}
 	} catch (e) {
-		exception_error("closeInfoBox", e);
+		//exception_error("closeInfoBox", e);
 	}
-	
 	return false;
 }


 function displayDlg(id, param, callback) {

-	notify_progress("Loading, please wait...", true);
-
 	disableHotkeys();
+	notify_progress("Loading, please wait...", true);

 	var query = "?op=dlg&id=" +
 		param_escape(id) + "&param=" + param_escape(param);
@@ -443,23 +435,30 @@ function infobox_submit_callback2(transport) {
 function infobox_callback2(transport) {
 	try {

-		console.log("infobox_callback2");
+		//console.log("infobox_callback2");
+		notify('');

-		var box = $('infoBox');
+		var content;
+		var dtitle = "Dialog";

-		if (box) {			
+		if (transport.responseXML) {
+			var dlg = transport.responseXML.getElementsByTagName("dlg")[0];

-			if (!getInitParam("infobox_disable_overlay")) {
-				Element.show("dialog_overlay");
-			}
+			var title = transport.responseXML.getElementsByTagName("title")[0];
+			if (title)
+				dtitle = title.firstChild.nodeValue;

-			box.innerHTML=transport.responseText;			
-			Element.show("infoBoxShadow");
-			//Effect.SlideDown("infoBoxShadow", {duration : 1.0});
+			var content = transport.responseXML.getElementsByTagName("content")[0];
 			
+			content = content.firstChild.nodeValue;

+		} else {
+			content = transport.responseText;
 		}

+		Modalbox.show(content, {title: dtitle, width: 600, 
+			transitions: true, resizeDuration: 0 });
+
 		disableHotkeys();

 		notify("");
@@ -604,7 +603,10 @@ function subscribeToFeed() {
 							if (count > 5) count = 5;
 							select.size = count;
 	
-							Effect.Appear('fadd_feeds_container', {duration : 0.5});
+							Effect.Appear('fadd_feeds_container', {duration : 0.5, 
+								afterSetup: function() { 
+							  		Modalbox.resizeToContent()
+								}});
 						}
 					});
 					break;
--- a/infobox.css
+++ b/infobox.css
@@ -1,121 +0,0 @@
-#infoBoxTitle {
-	border-width : 0px 0px 1px 0px;
-	border-style : solid;
-	border-color : #659a4c;
-	background-color : #99d67a;
-	padding : 4px 2px 4px 10px;
-	color : white;
-	font-weight : bold;
-	font-size : 16px;
-	text-shadow : #659a4c 0px 1px 0px;
-}
-
-/* shadow stuff from http://www.sixapart.com/pronet/articles/ydsf_-_robust_c.html */
-
-#infoBox {	
-	border-width : 1px 1px 1px 1px;
-	border-style : solid;
-	border-color : #659a4c;
-	background-color : #f8fcf5;
-	position: relative;
-	overflow : hidden;
-	left : -4px;
-	top : -4px;
-}
-
-div#errorBox {
-	background-color : #ffcccc;
-	border : 1px solid #ff0000;
-	font-size : 12px;
-	position: relative;
-	overflow : hidden;
-	left : -4px;
-	top : -4px;
-}
-
-html>body #infoBox, html>body #errorBox {
-	left : -10px;
-	top : -10px;
-	margin : 0;
-}
-
-#infoBoxShadow:before, #infoBoxShadow:after, 
-#errorBoxShadow:before, #errorBoxShadow:after {
-	content : " ";
-	display : block;
-	background : inherit;
-	width : 10px;
-	height : 10px;
-}
-
-#infoBoxShadow:before, #errorBoxShadow:before {
-	position : absolute;
-	top : 0;
-	right : 0;
-	margin : -10px 0 0 auto;
-	background-position : right top;
-}
-
-#infoBoxShadow:after, #errorBoxShadow:after {
-	margin : -10px 0 0 -10px;
-	background-position : left bottom;
-}
-
-#infoBoxShadow, #errorBoxShadow {
-	background-image : url("images/shadow.png");
-	background-position : bottom right;
-	left : 25%;
-	top : 50px;
-	width : 50%;
-	position : absolute;
-	min-width : 600px;
-} 
-
-#infoBoxShadow {
-	z-index : 5;
-}
-
-#errorBoxShadow {
-	z-index : 400;
-}
-
-div.infoBoxContents {
-	padding : 10px;
-	margin-bottom : 5px;
-	font-size : 12px;
-}
-
-div.infoBoxContents td {
-	font-size : 12px;
-}
-
-div.infoBoxContents a {
-	color : #527040;
-}
-
-div.infoBoxContents a:hover {
-	color : black;
-}
-
-div#errorBox div#xebTitle {
-	background-color : #ff0000;
-	color : white;
-	padding : 4px 2px 4px 10px;
-	color : white;
-	font-weight : bold;
-	font-size : 12px;
-}
-
-div#errorBox div#xebContent {
-	font-size : 12px;
-	padding : 10px;
-}
-
-div#errorBox textarea {
-	width : 100%;
-	height : 100px;
-}
-
-div#errorBox button {
-	margin-bottom : 10px;
-}
--- a/lib/modalbox/license.txt
+++ b/lib/modalbox/license.txt
@@ -0,0 +1 @@
+Copyright (c) 2006-2007 Andrey Okonetchnikov
--- a/lib/modalbox/modalbox.css
+++ b/lib/modalbox/modalbox.css
@@ -0,0 +1,122 @@
+/*
+   modalbox.css
+   
+   Modalbox project
+   
+   Created by Andrew Okonetchnikov.
+   Copyright 2006-2010 okonet.ru. All rights reserved.
+   
+   Licensed under MIT license.
+*/
+
+#MB_overlay {
+	position: absolute;
+	margin: auto;
+	top: 0;	left: 0;
+	width: 100%; height: 100%;
+	z-index: 9999;
+	border: 0;
+	background-color: #000!important;
+}
+#MB_overlay[id] { position: fixed; }
+
+#MB_windowwrapper {
+	position:absolute;
+	top:0;
+	width:100%;
+}
+
+#MB_window {
+	position:relative;
+	margin-left:auto;
+	margin-right:auto;
+	top:0;
+	left:0;
+	border: 0 solid;
+	text-align: left;
+	z-index: 10000;
+}
+#MB_window[id] { position: relative; }
+
+#MB_frame {
+	position: relative;
+	background-color: #EFEFEF;
+	height: 100%;
+}
+
+#MB_header {
+	margin: 0;
+	padding: 0;
+}
+
+#MB_content {
+	position: relative;
+	padding: 6px .75em;
+	overflow: auto;
+}
+
+#MB_caption {
+	font: bold 100% "Lucida Grande", Arial, sans-serif;
+	text-shadow: #FFF 0 1px 0;
+	padding: .5em 2em .5em .75em;
+	margin: 0;
+	text-align: left;
+}
+
+#MB_close {
+	display: block;
+	position: absolute;
+	right: 5px; top: 4px;
+	padding: 2px 3px;
+	font-weight: bold;
+	text-decoration: none;
+	font-size: 13px;
+}
+#MB_close:hover {
+	background: transparent;
+}
+
+#MB_loading {
+	padding: 1.5em;
+	text-indent: -10000px;
+	background: transparent url(spinner.gif) 50% 0 no-repeat;
+}
+
+/* Color scheme */
+#MB_window {
+	background-color: #EFEFEF;
+	color: #000;
+	
+	-webkit-box-shadow: 0 0 64px #000; 
+	-moz-box-shadow: #000 0 0 64px; 
+	box-shadow: 0 0 64px #000;
+}
+	#MB_frame {
+		padding-bottom: 4px;
+		
+		-webkit-border-bottom-left-radius: 4px;
+		-webkit-border-bottom-right-radius: 4px;
+
+		-moz-border-radius-bottomleft: 4px;
+		-moz-border-radius-bottomright: 4px;
+
+		border-bottom-left-radius: 4px;
+		border-bottom-right-radius: 4px;
+	}
+	
+	#MB_content { border-top: 1px solid #F9F9F9; }
+
+	#MB_header {
+	  background-color: #DDD;
+	  border-bottom: 1px solid #CCC;
+	}
+		#MB_caption { color: #000 }
+		#MB_close { color: #777 }
+		#MB_close:hover { color: #000 }
+
+
+/* Alert message */
+.MB_alert {
+	margin: 10px 0;
+	text-align: center;
+}
--- a/lib/modalbox/modalbox.js
+++ b/lib/modalbox/modalbox.js
@@ -0,0 +1,577 @@
+//  
+//  ModalBox - The pop-up window thingie with AJAX, based on Prototype JS framework.
+//  
+//  Created by Andrew Okonetchnikov
+//  Copyright 2006-2010 okonet.ru. All rights reserved.
+//
+//  Licensed under MIT license.
+// 
+
+if (!window.Modalbox)
+	var Modalbox = new Object();
+
+Modalbox.Methods = {
+	overrideAlert: false, // Override standard browser alert message with ModalBox
+	focusableElements: new Array,
+	currFocused: 0,
+	initialized: false,
+	active: true,
+	options: {
+		title: "ModalBox Window", // Title of the ModalBox window
+		overlayClose: true, // Close modal box by clicking on overlay
+		width: 500, // Default width in px
+		height: 90, // Default height in px
+		overlayOpacity: .65, // Default overlay opacity
+		overlayDuration: .25, // Default overlay fade in/out duration in seconds
+		slideDownDuration: .5, // Default Modalbox appear slide down effect in seconds
+		slideUpDuration: .5, // Default Modalbox hiding slide up effect in seconds
+		resizeDuration: .25, // Default resize duration seconds
+		inactiveFade: true, // Fades MB window on inactive state
+		transitions: true, // Toggles transition effects. Transitions are enabled by default
+		loadingString: "Please wait. Loading...", // Default loading string message
+		closeString: "Close window", // Default title attribute for close window link
+		closeValue: "&times;", // Default string for close link in the header
+		params: {},
+		method: 'get', // Default Ajax request method
+		autoFocusing: true, // Toggles auto-focusing for form elements. Disable for long text pages.
+		aspnet: false, // Should be use then using with ASP.NET costrols. Then true Modalbox window will be injected into the first form element.
+		resizeCSSID: ''
+	},
+	_options: new Object,
+	
+	setOptions: function(options) {
+		Object.extend(this.options, options || {});
+	},
+	
+	_init: function(options) {
+		// Setting up original options with default options
+		Object.extend(this._options, this.options);
+		this.setOptions(options);
+		
+		//Creating the overlay
+		this.MBoverlay = new Element("div", { id: "MB_overlay", style: "opacity: 0" });
+		
+		//Creating the modal window
+		this.MBwindowwrapper = new Element("div", {id: "MB_windowwrapper"}).update(
+			this.MBwindow = new Element("div", {id: "MB_window", style: "display: none"}).update(
+				this.MBframe = new Element("div", {id: "MB_frame"}).update(
+					this.MBheader = new Element("div", {id: "MB_header"}).update(
+						this.MBcaption = new Element("div", {id: "MB_caption"})
+					)
+				)
+			)	
+		);	
+		
+		this.MBclose = new Element("a", {id: "MB_close", title: this.options.closeString, href: "#"}).update("<span>" + this.options.closeValue + "</span>");
+		this.MBheader.insert({'bottom':this.MBclose});
+		
+		this.MBcontent = new Element("div", {id: "MB_content"}).update(
+			this.MBloading = new Element("div", {id: "MB_loading"}).update(this.options.loadingString)
+		);
+		this.MBframe.insert({'bottom':this.MBcontent});
+		
+		// Inserting into DOM. If parameter set and form element have been found will inject into it. Otherwise will inject into body as topmost element.
+		// Be sure to set padding and marging to null via CSS for both body and (in case of asp.net) form elements. 
+		var injectToEl = this.options.aspnet ? $(document.body).down('form') : $(document.body);
+		injectToEl.insert({'top':this.MBwindowwrapper});
+		injectToEl.insert({'top':this.MBoverlay});
+		
+		var scrollOffsets = document.viewport.getScrollOffsets();
+		if (scrollOffsets[1] > 0) {
+			$('MB_window').setStyle({top:scrollOffsets[1] + 'px'});
+		}
+	
+		Event.observe(window, 'scroll', function() {
+			scrollOffsets = document.viewport.getScrollOffsets();				
+			$('MB_window').setStyle({top:scrollOffsets[1] + 'px'});
+		});
+			
+		// Initial scrolling position of the window. To be used for remove scrolling effect during ModalBox appearing
+		this.initScrollX = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
+		this.initScrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+		
+		//Adding event observers
+		this.hideObserver = this._hide.bindAsEventListener(this);
+		this.kbdObserver = this._kbdHandler.bindAsEventListener(this);
+		this._initObservers();
+
+		this.initialized = true; // Mark as initialized
+	},
+	
+	show: function(content, options) {
+		if(!this.initialized) this._init(options); // Check for is already initialized
+		
+		this.content = content;
+		this.setOptions(options);
+		
+		if(this.options.title) // Updating title of the MB
+			$(this.MBcaption).update(this.options.title);
+		else { // If title isn't given, the header will not displayed
+			$(this.MBheader).hide();
+			$(this.MBcaption).hide();
+		}
+		
+		if(this.MBwindow.style.display == "none") { // First modal box appearing
+			this._appear();
+			this.event("onShow"); // Passing onShow callback
+		}
+		else { // If MB already on the screen, update it
+			this._update();
+			this.event("onUpdate"); // Passing onUpdate callback
+		} 
+	},
+	
+	hide: function(options) { // External hide method to use from external HTML and JS
+		if(this.initialized) {
+			// Reading for options/callbacks except if event given as a pararmeter
+			if(options && typeof options.element != 'function') Object.extend(this.options, options); 
+			// Passing beforeHide callback
+			this.event("beforeHide");
+			if(this.options.transitions)
+				Effect.SlideUp(this.MBwindow, { duration: this.options.slideUpDuration, transition: Effect.Transitions.sinoidal, afterFinish: this._deinit.bind(this) } );
+			else {
+				$(this.MBwindow).hide();
+				this._deinit();
+			}
+			Event.stopObserving(window, 'scroll');
+		} else throw("Modalbox is not initialized.");
+	},
+	
+	_hide: function(event) { // Internal hide method to use with overlay and close link
+		event.stop(); // Stop event propaganation for link elements
+		/* Then clicked on overlay we'll check the option and in case of overlayClose == false we'll break hiding execution [Fix for #139] */
+		if(event.element().id == 'MB_overlay' && !this.options.overlayClose) return false;
+		this.hide();
+	},
+	
+	alert: function(message){
+		var html = '<div class="MB_alert"><p>' + message + '</p><input type="button" onclick="Modalbox.hide()" value="OK" /></div>';
+		Modalbox.show(html, {title: 'Alert: ' + document.title, width: 300});
+	},
+		
+	_appear: function() { // First appearing of MB
+		if(Prototype.Browser.IE && !navigator.appVersion.match(/\b7.0\b/)) { // Preparing IE 6 for showing modalbox
+			window.scrollTo(0,0);
+			this._prepareIE("100%", "hidden"); 
+		}
+		this._setWidth();
+		if(this.options.transitions) {
+			$(this.MBoverlay).setStyle({opacity: 0});
+			new Effect.Fade(this.MBoverlay, {
+					from: 0, 
+					to: this.options.overlayOpacity, 
+					duration: this.options.overlayDuration, 
+					afterFinish: function() {
+						new Effect.SlideDown(this.MBwindow, {
+							duration: this.options.slideDownDuration, 
+							transition: Effect.Transitions.sinoidal, 
+							afterFinish: function(){ 
+								this.loadContent();
+							}.bind(this)
+						});
+					}.bind(this)
+			});
+		} else {
+			$(this.MBoverlay).setStyle({opacity: this.options.overlayOpacity});
+			$(this.MBwindow).show();
+			this.loadContent();
+		}
+		this._setWidthAndPosition = this._setWidthAndPosition.bindAsEventListener(this);
+		Event.observe(window, "resize", this._setWidthAndPosition);
+	},
+	
+	resize: function(byWidth, byHeight, options) { // Change size of MB without loading content					
+		var oWidth = $(this.MBoverlay).getWidth();
+		var wHeight = $(this.MBwindow).getHeight();
+		var wWidth = $(this.MBwindow).getWidth();
+		var hHeight = $(this.MBheader).getHeight();
+		var cHeight = $(this.MBcontent).getHeight();
+		var newHeight = ((wHeight - hHeight + byHeight) < cHeight) ? (cHeight + hHeight) : (wHeight + byHeight);
+
+		var el = $(this.MBwindow);
+		var contentEl = $(this.MBcontent);
+		var windowBottomMargin = 10;		
+		var windowOffset = (parseInt(el.getStyle('margin-top'), 0) + parseInt(el.getStyle('margin-bottom'), 0) + parseInt(el.getStyle('border-top-width'), 0) + parseInt(el.getStyle('border-bottom-width'), 0)) + windowBottomMargin;
+		var contentPadding = (parseInt(contentEl.getStyle('padding-top')) + parseInt(contentEl.getStyle('padding-bottom')));
+		
+		if ((newHeight + windowOffset + contentPadding) > document.viewport.getHeight()) {
+			// adjust window height to account for margins and border widths
+			newHeight = document.viewport.getHeight() - windowOffset - windowBottomMargin;
+			// calculate content height including header height and padding values
+			newcHeight = newHeight - hHeight - parseInt($(this.MBframe).getStyle('padding-bottom'), 0) - parseInt($(this.MBcontent).getStyle('padding-bottom'), 0);
+			$(this.MBcontent).setStyle({height:newcHeight + 'px'});
+		}
+		else if ($(this.MBcontent).getStyle('height')) {
+			// release any MB_content height set prior to establish scrollbars in content area
+			$(this.MBcontent).setStyle({height:''});				
+		}
+
+		var newWidth = wWidth + byWidth;	
+        this.options.width = newWidth;
+		if(options) this.setOptions(options); // Passing callbacks
+		if(this.options.transitions && !Modalbox.animating) {
+			Modalbox.animating = true;
+			new Effect.Morph(this.MBwindow, {
+				style: "width:" + newWidth + "px; height:" + newHeight + "px;",
+				duration: this.options.resizeDuration, 
+				beforeStart: function(fx){
+					fx.element.setStyle({overflow:"hidden"}); // Fix for MSIE 6 to resize correctly
+				},
+				afterFinish: function(fx) {
+					fx.element.setStyle({overflow:"visible"});
+					this.event("_afterResize"); // Passing internal callback
+					this.event("afterResize"); // Passing callback	
+					Modalbox.animating = false;				
+				}.bind(this)
+			});
+		} else {
+			this.MBwindow.setStyle({width: newWidth + "px", height: newHeight + "px"});
+			setTimeout(function() {
+				this.event("_afterResize"); // Passing internal callback
+				this.event("afterResize"); // Passing callback			
+			}.bind(this), 1);
+		}
+		
+	},
+	
+	resizeToContent: function(options){
+		// Resizes the modalbox window to the actual content height.
+		// This might be useful to resize modalbox after some content modifications which were changed ccontent height.
+		
+		if (typeof options == "undefined") {
+			options = new Object();
+		}		
+		
+		// check to see if MB_content includes any images
+		var mbimages = $('MB_content').select('img');
+		var totalimages = mbimages.length;
+		if (mbimages[0]) {
+			if (typeof options.imagesloaded == "undefined") {
+
+				var loadedImages = $A();
+				var loadedImageTotal = 0;					
+				mbimages.each(function(o,idx) {
+					loadedImages[idx] = new Image();						
+					loadedImages[idx].src = o.src;												
+					loadedImages[idx].onload = function() {		
+						loadedImageTotal++;
+						if (loadedImageTotal == totalimages) {
+							// make sure all images have been rendered by checking their height
+							var imageincomplete = false;
+							mbimages.each(function(i) {
+								if (i.height == 0) {
+									imageincomplete = true;
+								}
+							});
+							if (imageincomplete || Modalbox.animating) {
+								// some image hasn't been rendered yet, trigger resize loop until it is
+								Modalbox.resizeToContent();								
+							}
+							else {
+								// trigger one final resize, but set imagesloaded option to skip inspection of images
+								options.imagesloaded = true;
+								Modalbox.resizeToContent(options);
+							}
+						}					
+					}
+				})	
+			}
+		}
+
+		var byHeight = this.options.height - $(this.MBwindow).getHeight();
+		if (options.resizeCSSID && $(options.resizeCSSID)) {
+			// byWidth is the amount of pixels needed to increase/decrease window to meet width of options.resizeCSSID
+			// plus a 10 pixel margin to accommodate scrollbars
+			var byWidth = $(options.resizeCSSID).getWidth() - $(this.MBwindow).getWidth() + (parseInt($(this.MBcontent).getStyle('padding-left'), 0) + parseInt($(this.MBcontent).getStyle('padding-right'), 0)) + 15;
+		}
+		else {
+			// don't change width
+			var byWidth = 0;
+		}
+		if(byHeight != 0) {
+			if(options) this.setOptions(options); // Passing callbacks			
+			Modalbox.resize(byWidth, byHeight);
+		}
+	},
+	
+	resizeToInclude: function(element, options){
+		
+		// Resizes the modalbox window to the camulative height of element. Calculations are using CSS properties for margins and border.
+		// This method might be useful to resize modalbox before including or updating content.
+		
+		var el = $(element);
+		var elHeight = el.getHeight() + parseInt(el.getStyle('margin-top'), 0) + parseInt(el.getStyle('margin-bottom'), 0) + parseInt(el.getStyle('border-top-width'), 0) + parseInt(el.getStyle('border-bottom-width'), 0);
+		if(elHeight > 0) {
+			if(options) this.setOptions(options); // Passing callbacks
+			Modalbox.resize(0, elHeight);
+		}
+	},
+	
+	_update: function() { // Updating MB in case of wizards
+		$(this.MBcontent).update($(this.MBloading).update(this.options.loadingString));
+		this.loadContent();
+	},
+	
+	loadContent: function () {
+		if(this.event("beforeLoad") != false) { // If callback passed false, skip loading of the content
+			if(typeof this.content == 'string') {
+				var htmlRegExp = new RegExp(/<\/?[^>]+>/gi);
+				if(htmlRegExp.test(this.content)) { // Plain HTML given as a parameter
+					this._insertContent(this.content.stripScripts(), function(){
+						this.content.extractScripts().map(function(script) { 
+							return eval(script.replace("<!--", "").replace("// -->", ""));
+						}.bind(window));
+					}.bind(this));
+				} else // URL given as a parameter. We'll request it via Ajax
+					new Ajax.Request( this.content, { method: this.options.method.toLowerCase(), parameters: this.options.params, 
+						onComplete: function(transport) {
+							var response = new String(transport.responseText);
+							this._insertContent(transport.responseText.stripScripts(), function(){
+								response.extractScripts().map(function(script) { 
+									return eval(script.replace("<!--", "").replace("// -->", ""));
+								}.bind(window));
+							});
+						}.bind(this),
+						onException: function(instance, exception){
+							Modalbox.hide();
+							throw('Modalbox Loading Error: ' + exception);
+						}
+					});
+					
+			} else if (typeof this.content == 'object') {// HTML Object is given
+				this._insertContent(this.content);
+			} else {
+				Modalbox.hide();
+				throw('Modalbox Parameters Error: Please specify correct URL or HTML element (plain HTML or object)');
+			}
+		}
+	},
+	
+	_insertContent: function(content, callback){
+		$(this.MBcontent).hide().update("");
+		if(typeof content == 'string') { // Plain HTML is given
+			this.MBcontent.update(new Element("div", { style: "display: none" }).update(content)).down().show();
+		} else if (typeof content == 'object') { // HTML Object is given
+			var _htmlObj = content.cloneNode(true); // If node already a part of DOM we'll clone it
+			// If clonable element has ID attribute defined, modifying it to prevent duplicates
+			if(content.id) content.id = "MB_" + content.id;
+			/* Add prefix for IDs on all elements inside the DOM node */
+			$(content).select('*[id]').each(function(el){ el.id = "MB_" + el.id; });
+			this.MBcontent.update(_htmlObj).down('div').show();
+			if(Prototype.Browser.IE) // Toggling back visibility for hidden selects in IE
+				$$("#MB_content select").invoke('setStyle', {'visibility': ''});
+		}
+		
+		// Prepare and resize modal box for content
+		if(this.options.height == this._options.height) {
+			Modalbox.resize((this.options.width - $(this.MBwindow).getWidth()), $(this.MBcontent).getHeight() - $(this.MBwindow).getHeight() + $(this.MBheader).getHeight(), {
+				afterResize: function(){
+					setTimeout(function(){ // MSIE fix
+						this._putContent(callback);
+					}.bind(this),1);
+				}.bind(this)
+			});
+		} else { // Height is defined. Creating a scrollable window
+			this._setWidth();
+			this.MBcontent.setStyle({overflow: 'auto', height: $(this.MBwindow).getHeight() - $(this.MBheader).getHeight() - 13 + 'px'});
+			setTimeout(function(){ // MSIE fix
+				this._putContent(callback);
+			}.bind(this),1);
+		}
+	},
+	
+	_putContent: function(callback){
+		this.MBcontent.show();
+		this.focusableElements = this._findFocusableElements();
+		this._setFocus(); // Setting focus on first 'focusable' element in content (input, select, textarea, link or button)
+		if(callback != undefined)
+			callback(); // Executing internal JS from loaded content
+		this.event("afterLoad"); // Passing callback
+	},
+	
+	activate: function(options){
+		this.setOptions(options);
+		this.active = true;
+		$(this.MBclose).observe("click", this.hideObserver);
+		if(this.options.overlayClose)
+			$(this.MBoverlay).observe("click", this.hideObserver);
+		$(this.MBclose).show();
+		if(this.options.transitions && this.options.inactiveFade)
+			new Effect.Appear(this.MBwindow, {duration: this.options.slideUpDuration});
+	},
+	
+	deactivate: function(options) {
+		this.setOptions(options);
+		this.active = false;
+		$(this.MBclose).stopObserving("click", this.hideObserver);
+		if(this.options.overlayClose)
+			$(this.MBoverlay).stopObserving("click", this.hideObserver);
+		$(this.MBclose).hide();
+		if(this.options.transitions && this.options.inactiveFade)
+			new Effect.Fade(this.MBwindow, {duration: this.options.slideUpDuration, to: .75});
+	},
+	
+	_initObservers: function(){
+		$(this.MBclose).observe("click", this.hideObserver);
+		if(this.options.overlayClose)
+			$(this.MBoverlay).observe("click", this.hideObserver);
+		if(Prototype.Browser.Gecko)
+			Event.observe(document, "keypress", this.kbdObserver); // Gecko is moving focus a way too fast
+		else
+			Event.observe(document, "keydown", this.kbdObserver); // All other browsers are okay with keydown
+	},
+	
+	_removeObservers: function(){
+		$(this.MBclose).stopObserving("click", this.hideObserver);
+		if(this.options.overlayClose)
+			$(this.MBoverlay).stopObserving("click", this.hideObserver);
+		if(Prototype.Browser.Gecko)
+			Event.stopObserving(document, "keypress", this.kbdObserver);
+		else
+			Event.stopObserving(document, "keydown", this.kbdObserver);
+	},
+	
+	_setFocus: function() { 
+		/* Setting focus to the first 'focusable' element which is one with tabindex = 1 or the first in the form loaded. */
+		if(this.focusableElements.length > 0 && this.options.autoFocusing == true) {
+			var firstEl = this.focusableElements.find(function (el){
+				return el.tabIndex == 1;
+			}) || this.focusableElements.first();
+			this.currFocused = this.focusableElements.toArray().indexOf(firstEl);
+			firstEl.focus(); // Focus on first focusable element except close button
+		} else if($(this.MBclose).visible())
+			$(this.MBclose).focus(); // If no focusable elements exist focus on close button
+	},
+	
+	_findFocusableElements: function(){ // Collect form elements or links from MB content
+		this.MBcontent.select('input:not([type~=hidden]), select, textarea, button, a[href]').invoke('addClassName', 'MB_focusable');
+		return this.MBcontent.select('.MB_focusable');
+	},
+	
+	_kbdHandler: function(event) {
+		var node = event.element();
+		switch(event.keyCode) {
+			case Event.KEY_TAB:
+				event.stop();
+				
+				/* Switching currFocused to the element which was focused by mouse instead of TAB-key. Fix for #134 */ 
+				if(node != this.focusableElements[this.currFocused])
+					this.currFocused = this.focusableElements.toArray().indexOf(node);
+				
+				if(!event.shiftKey) { //Focusing in direct order
+					if(this.currFocused == this.focusableElements.length - 1) {
+						this.focusableElements.first().focus();
+						this.currFocused = 0;
+					} else {
+						this.currFocused++;
+						this.focusableElements[this.currFocused].focus();
+					}
+				} else { // Shift key is pressed. Focusing in reverse order
+					if(this.currFocused == 0) {
+						this.focusableElements.last().focus();
+						this.currFocused = this.focusableElements.length - 1;
+					} else {
+						this.currFocused--;
+						this.focusableElements[this.currFocused].focus();
+					}
+				}
+				break;			
+			case Event.KEY_ESC:
+				if(this.active) this._hide(event);
+				break;
+			case 32:
+				this._preventScroll(event);
+				break;
+			case 0: // For Gecko browsers compatibility
+				if(event.which == 32) this._preventScroll(event);
+				break;
+			case Event.KEY_UP:
+			case Event.KEY_DOWN:
+			case Event.KEY_PAGEDOWN:
+			case Event.KEY_PAGEUP:
+			case Event.KEY_HOME:
+			case Event.KEY_END:
+				// Safari operates in slightly different way. This realization is still buggy in Safari.
+				if(Prototype.Browser.WebKit && !["textarea", "select"].include(node.tagName.toLowerCase()))
+					event.stop();
+				else if( (node.tagName.toLowerCase() == "input" && ["submit", "button"].include(node.type)) || (node.tagName.toLowerCase() == "a") )
+					event.stop();
+				break;
+		}
+	},
+	
+	_preventScroll: function(event) { // Disabling scrolling by "space" key
+		if(!["input", "textarea", "select", "button"].include(event.element().tagName.toLowerCase())) 
+			event.stop();
+	},
+	
+	_deinit: function()
+	{	
+		this._removeObservers();
+		Event.stopObserving(window, "resize", this._setWidthAndPosition );
+		if(this.options.transitions) {
+			Effect.toggle(this.MBoverlay, 'appear', {duration: this.options.overlayDuration, afterFinish: this._removeElements.bind(this) });
+		} else {
+			this.MBoverlay.hide();
+			this._removeElements();
+		}
+		$(this.MBcontent).setStyle({overflow: '', height: ''});
+	},
+	
+	_removeElements: function () {
+		$(this.MBoverlay).remove();
+		$(this.MBwindow).remove();
+		if(Prototype.Browser.IE && !navigator.appVersion.match(/\b7.0\b/)) {
+			this._prepareIE("", ""); // If set to auto MSIE will show horizontal scrolling
+			window.scrollTo(this.initScrollX, this.initScrollY);
+		}
+		
+		/* Replacing prefixes 'MB_' in IDs for the original content */
+		if(typeof this.content == 'object') {
+			if(this.content.id && this.content.id.match(/MB_/)) {
+				this.content.id = this.content.id.replace(/MB_/, "");
+			}
+			this.content.select('*[id]').each(function(el){ el.id = el.id.replace(/MB_/, ""); });
+		}
+		/* Initialized will be set to false */
+		this.initialized = false;
+		this.event("afterHide"); // Passing afterHide callback
+		this.setOptions(this._options); //Settings options object into intial state
+	},
+	
+	_setWidth: function () { //Set size
+		$(this.MBwindow).setStyle({width: this.options.width + "px", height: this.options.height + "px"});
+	},
+	
+	_setWidthAndPosition: function () {
+		$(this.MBwindow).setStyle({width: this.options.width + "px"});
+	},
+	
+	_getScrollTop: function () { //From: http://www.quirksmode.org/js/doctypes.html
+		var theTop;
+		if (document.documentElement && document.documentElement.scrollTop)
+			theTop = document.documentElement.scrollTop;
+		else if (document.body)
+			theTop = document.body.scrollTop;
+		return theTop;
+	},
+	_prepareIE: function(height, overflow){
+		$$('html, body').invoke('setStyle', {width: height, height: height, overflow: overflow}); // IE requires width and height set to 100% and overflow hidden
+		$$("select").invoke('setStyle', {'visibility': overflow}); // Toggle visibility for all selects in the common document
+	},
+	event: function(eventName) {
+		if(this.options[eventName]) {
+			var returnValue = this.options[eventName](); // Executing callback
+			this.options[eventName] = null; // Removing callback after execution
+			if(returnValue != undefined) 
+				return returnValue;
+			else 
+				return true;
+		}
+		return true;
+	}
+};
+
+Object.extend(Modalbox, Modalbox.Methods);
+
+if(Modalbox.overrideAlert) window.alert = Modalbox.alert;
--- a/lib/modalbox/spinner.gif
+++ b/lib/modalbox/spinner.gif
--- a/lib/scriptaculous/builder.js
+++ b/lib/scriptaculous/builder.js
@@ -0,0 +1,136 @@
+// script.aculo.us builder.js v1.8.3, Thu Oct 08 11:23:33 +0200 2009
+
+// Copyright (c) 2005-2009 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
+//
+// script.aculo.us is freely distributable under the terms of an MIT-style license.
+// For details, see the script.aculo.us web site: http://script.aculo.us/
+
+var Builder = {
+  NODEMAP: {
+    AREA: 'map',
+    CAPTION: 'table',
+    COL: 'table',
+    COLGROUP: 'table',
+    LEGEND: 'fieldset',
+    OPTGROUP: 'select',
+    OPTION: 'select',
+    PARAM: 'object',
+    TBODY: 'table',
+    TD: 'table',
+    TFOOT: 'table',
+    TH: 'table',
+    THEAD: 'table',
+    TR: 'table'
+  },
+  // note: For Firefox < 1.5, OPTION and OPTGROUP tags are currently broken,
+  //       due to a Firefox bug
+  node: function(elementName) {
+    elementName = elementName.toUpperCase();
+
+    // try innerHTML approach
+    var parentTag = this.NODEMAP[elementName] || 'div';
+    var parentElement = document.createElement(parentTag);
+    try { // prevent IE "feature": http://dev.rubyonrails.org/ticket/2707
+      parentElement.innerHTML = "<" + elementName + "></" + elementName + ">";
+    } catch(e) {}
+    var element = parentElement.firstChild || null;
+
+    // see if browser added wrapping tags
+    if(element && (element.tagName.toUpperCase() != elementName))
+      element = element.getElementsByTagName(elementName)[0];
+
+    // fallback to createElement approach
+    if(!element) element = document.createElement(elementName);
+
+    // abort if nothing could be created
+    if(!element) return;
+
+    // attributes (or text)
+    if(arguments[1])
+      if(this._isStringOrNumber(arguments[1]) ||
+        (arguments[1] instanceof Array) ||
+        arguments[1].tagName) {
+          this._children(element, arguments[1]);
+        } else {
+          var attrs = this._attributes(arguments[1]);
+          if(attrs.length) {
+            try { // prevent IE "feature": http://dev.rubyonrails.org/ticket/2707
+              parentElement.innerHTML = "<" +elementName + " " +
+                attrs + "></" + elementName + ">";
+            } catch(e) {}
+            element = parentElement.firstChild || null;
+            // workaround firefox 1.0.X bug
+            if(!element) {
+              element = document.createElement(elementName);
+              for(attr in arguments[1])
+                element[attr == 'class' ? 'className' : attr] = arguments[1][attr];
+            }
+            if(element.tagName.toUpperCase() != elementName)
+              element = parentElement.getElementsByTagName(elementName)[0];
+          }
+        }
+
+    // text, or array of children
+    if(arguments[2])
+      this._children(element, arguments[2]);
+
+     return $(element);
+  },
+  _text: function(text) {
+     return document.createTextNode(text);
+  },
+
+  ATTR_MAP: {
+    'className': 'class',
+    'htmlFor': 'for'
+  },
+
+  _attributes: function(attributes) {
+    var attrs = [];
+    for(attribute in attributes)
+      attrs.push((attribute in this.ATTR_MAP ? this.ATTR_MAP[attribute] : attribute) +
+          '="' + attributes[attribute].toString().escapeHTML().gsub(/"/,'&quot;') + '"');
+    return attrs.join(" ");
+  },
+  _children: function(element, children) {
+    if(children.tagName) {
+      element.appendChild(children);
+      return;
+    }
+    if(typeof children=='object') { // array can hold nodes and text
+      children.flatten().each( function(e) {
+        if(typeof e=='object')
+          element.appendChild(e);
+        else
+          if(Builder._isStringOrNumber(e))
+            element.appendChild(Builder._text(e));
+      });
+    } else
+      if(Builder._isStringOrNumber(children))
+        element.appendChild(Builder._text(children));
+  },
+  _isStringOrNumber: function(param) {
+    return(typeof param=='string' || typeof param=='number');
+  },
+  build: function(html) {
+    var element = this.node('div');
+    $(element).update(html.strip());
+    return element.down();
+  },
+  dump: function(scope) {
+    if(typeof scope != 'object' && typeof scope != 'function') scope = window; //global scope
+
+    var tags = ("A ABBR ACRONYM ADDRESS APPLET AREA B BASE BASEFONT BDO BIG BLOCKQUOTE BODY " +
+      "BR BUTTON CAPTION CENTER CITE CODE COL COLGROUP DD DEL DFN DIR DIV DL DT EM FIELDSET " +
+      "FONT FORM FRAME FRAMESET H1 H2 H3 H4 H5 H6 HEAD HR HTML I IFRAME IMG INPUT INS ISINDEX "+
+      "KBD LABEL LEGEND LI LINK MAP MENU META NOFRAMES NOSCRIPT OBJECT OL OPTGROUP OPTION P "+
+      "PARAM PRE Q S SAMP SCRIPT SELECT SMALL SPAN STRIKE STRONG STYLE SUB SUP TABLE TBODY TD "+
+      "TEXTAREA TFOOT TH THEAD TITLE TR TT U UL VAR").split(/\s+/);
+
+    tags.each( function(tag){
+      scope[tag] = function() {
+        return Builder.node.apply(Builder, [tag].concat($A(arguments)));
+      };
+    });
+  }
+};
--- a/modules/popup-dialog.php
+++ b/modules/popup-dialog.php
@@ -3,9 +3,11 @@
 		$id = $_REQUEST["id"];
 		$param = db_escape_string($_REQUEST["param"]);

+		print "<dlg id=\"$id\">";
+
 		if ($id == "importOpml") {
-			print "<div id=\"infoBoxTitle\">".__('OPML Import')."</div>";
-			print "<div class=\"infoBoxContents\">";
+			print "<title>".__('OPML Import')."</title>";
+			print "<content><![CDATA[";

 			print "<div class=\"prefFeedCatHolder\">";

@@ -58,15 +60,16 @@
 			print "parent.opmlImportHandler(this)";
 			print "</script>";

-			print "</div></div>";
+			print "</div>";
+			print "]]></content>";

-			return;
+			//return;
 		}

 		if ($id == "editPrefProfiles") {

-			print "<div id=\"infoBoxTitle\">".__('Settings Profiles')."</div>";
-			print "<div class=\"infoBoxContents\">";
+			print "<title>".__('Settings Profiles')."</title>";
+			print "<content><![CDATA[";

 			print "<div><input id=\"fadd_profile\" 
 					onkeypress=\"return filterCR(event, addPrefProfile)\"
@@ -153,15 +156,16 @@
 			print "<button onclick=\"return closeInfoBox()\">".
 				__('Close this window')."</button>";

-			print "</div></div>";
+			print "</div>";
+			print "]]></content>";

-			return;
+			//return;
 		}

 		if ($id == "pubOPMLUrl") {

-			print "<div id=\"infoBoxTitle\">".__('Public OPML URL')."</div>";
-			print "<div class=\"infoBoxContents\">";
+			print "<title>".__('Public OPML URL')."</title>";
+			print "<content><![CDATA[";

 			$url_path = opml_publish_url($link);

@@ -179,15 +183,16 @@
 			print "<button onclick=\"return closeInfoBox()\">".
 				__('Close this window')."</button>";

-			print "</div></div>";
+			print "</div>";
+			print "]]></content>";

-			return;
+			//return;
 		}

 		if ($id == "explainError") {

-			print "<div id=\"infoBoxTitle\">".__('Notice')."</div>";
-			print "<div class=\"infoBoxContents\">";
+			print "<title>".__('Notice')."</title>";
+			print "<content><![CDATA[";

 			print "<div class=\"errorExplained\">";

@@ -227,15 +232,16 @@
 			print "<button onclick=\"return closeInfoBox()\"".
 				__('Close this window')."</button>";

-			print "</div></div>";
+			print "</div>";
+			print "]]></content>";

-			return;
+			//return;
 		}

 		if ($id == "quickAddFeed") {

-			print "<div id=\"infoBoxTitle\">".__('Subscribe to Feed')."</div>";
-			print "<div class=\"infoBoxContents\">";
+			print "<title>".__('Subscribe to Feed')."</title>";
+			print "<content><![CDATA[";

 			print "<form id='feed_add_form' onsubmit='return false'>";

@@ -296,14 +302,16 @@
 				<button onclick=\"return displayDlg('feedBrowser')\">".__('More feeds')."</button>
 				<button onclick=\"return closeInfoBox()\">".__('Cancel')."</button></div>";

-			return;
+			print "]]></content>";
+
+			//return;
 		}

 		if ($id == "feedBrowser") {

-			print "<div id=\"infoBoxTitle\">".__('Feed Browser')."</div>";
+			print "<title>".__('Feed Browser')."</title>";
 			
-			print "<div class=\"infoBoxContents\">";
+			print "<content><![CDATA[";

 			$browser_search = db_escape_string($_REQUEST["search"]);
 			
@@ -352,14 +360,14 @@
 				<button style='display : none' id='feed_archive_remove' onclick=\"feedArchiveRemove()\">".__('Remove')."</button>
 				<button onclick=\"closeInfoBox()\" >".__('Cancel')."</button></div>";

-			print "</div>";
-			return;
+			print "]]></content>";
+			//return;
 		}

 		if ($id == "search") {

-			print "<div id=\"infoBoxTitle\">".__('Search')."</div>";
-			print "<div class=\"infoBoxContents\">";
+			print "<title>".__('Search')."</title>";
+			print "<content><![CDATA[";

 			print "<form id='search_form'  onsubmit='return false'>";

@@ -433,9 +441,9 @@
 			<button onclick=\"javascript:closeInfoBox(true)\">".__('Cancel')."</button>
 			</div>";

-			print "</div>";
+			print "]]></content>";

-			return;
+			//return;

 		}

@@ -443,8 +451,8 @@

 			$active_feed_id = db_escape_string($_REQUEST["param"]);

-			print "<div id=\"infoBoxTitle\">".__('Create Filter')."</div>";
-			print "<div class=\"infoBoxContents\">";
+			print "<title>".__('Create Filter')."</title>";
+			print "<content><![CDATA[";

 			print "<form id=\"filter_add_form\" onsubmit='return false'>";

@@ -550,17 +558,17 @@
 			print "<button onclick=\"return closeInfoBox()\">".__('Cancel').
 				"</button>";

-			print "</div>";
+			print "]]></content>";

 //			print "</td></tr></table>"; 

-			return;
+			//return;
 		}

 		if ($id == "feedUpdateErrors") {

-			print "<div id=\"infoBoxTitle\">".__('Update Errors')."</div>";
-			print "<div class=\"infoBoxContents\">";
+			print "<title>".__('Update Errors')."</title>";
+			print "<content><![CDATA[";

 			print __("These feeds have not been updated because of errors:");

@@ -581,15 +589,15 @@
 			print "<button onclick=\"return closeInfoBox()\">".
 				__('Close this window')."</button>";

-			print "</div>";
+			print "]]></content>";

-			return;
+			//return;
 		}

 		if ($id == "editArticleTags") {

-			print "<div id=\"infoBoxTitle\">".__('Edit Tags')."</div>";
-			print "<div class=\"infoBoxContents\">";
+			print "<title>".__('Edit Tags')."</title>";
+			print "<content><![CDATA[";

 			print "<form id=\"tag_edit_form\" onsubmit='return false'>";

@@ -618,14 +626,14 @@
 			print "<button onclick=\"return editTagsSave()\">".__('Save')."</button> ";
 			print "<button onclick=\"return closeInfoBox()\">".__('Cancel')."</button>";

-			print "</div>";
+			print "]]></content>";

-			return;
+			//return;
 		}

 		if ($id == "printTagCloud") {
-			print "<div id=\"infoBoxTitle\">".__('Tag Cloud')."</div>";
-			print "<div class=\"infoBoxContents\">";
+			print "<title>".__('Tag Cloud')."</title>";
+			print "<content><![CDATA[";

 			print __("Showing most popular tags ")." (<a 
 			href='javascript:toggleTags(true)'>".__('more tags')."</a>):<br/>"; 
@@ -641,15 +649,15 @@
 				__('Close this window')."</button>";
 			print "</div>";

-			print "</div>";
+			print "]]></content>";

-			return;
+			//return;
 		}

 		if ($id == "emailArticle") {

-			print "<div id=\"infoBoxTitle\">".__('Forward article by email')."</div>";
-			print "<div class=\"infoBoxContents\">";
+			print "<title>".__('Forward article by email')."</title>";
+			print "<content><![CDATA[";

 			print "<form id=\"article_email_form\" onsubmit='return false'>";

@@ -754,15 +762,15 @@
 			print "<button onclick=\"return emailArticleDo()\">".__('Send e-mail')."</button> ";
 			print "<button onclick=\"return closeInfoBox()\">".__('Cancel')."</button>";

-			print "</div>";
+			print "]]></content>";

-			return;
+			//return;
 		}

 		if ($id == "generatedFeed") {

-			print "<div id=\"infoBoxTitle\">".__('View as RSS')."</div>";
-			print "<div class=\"infoBoxContents\">";
+			print "<title>".__('View as RSS')."</title>";
+			print "<content><![CDATA[";
 	
 			$params = explode(":", $param, 3);
 			$feed_id = db_escape_string($params[0]);
@@ -786,15 +794,12 @@
 			print "<button onclick=\"return closeInfoBox()\">".
 				__('Close this window')."</button>";

-			print "</div></div>";
+			print "</div>";
+			print "]]></content>";

-			return;
+			//return;
 		}

-		print "<div id='infoBoxTitle'>Internal Error</div>
-			<div id='infoBoxContents'>
-			<p>Unknown dialog <b>$id</b></p>
-			</div></div>";
-	
+		print "</dlg>";	
 	}
 ?>
--- a/modules/pref-feeds.php
+++ b/modules/pref-feeds.php
@@ -58,114 +58,13 @@
 			return;
 		}

-/*		if ($subop == "massSubscribe") {
-			$ids = split(",", db_escape_string($_REQUEST["ids"]));
-
-			$subscribed = array();
-
-			foreach ($ids as $id) {
-
-				if ($mode == 1) {
-					$result = db_query($link, "SELECT feed_url,title FROM ttrss_feeds
-						WHERE id = '$id'");
-				} else if ($mode == 2) {
-					$result = db_query($link, "SELECT * FROM ttrss_archived_feeds
-						WHERE id = '$id' AND owner_uid = " . $_SESSION["uid"]);
-					$orig_id = db_escape_string(db_fetch_result($result, 0, "id"));
-					$site_url = db_escape_string(db_fetch_result($result, 0, "site_url"));
-				}
-	
-				$feed_url = db_escape_string(db_fetch_result($result, 0, "feed_url"));
-				$title = db_escape_string(db_fetch_result($result, 0, "title"));
-	
-				$title_orig = db_fetch_result($result, 0, "title");
-	
-				$result = db_query($link, "SELECT id FROM ttrss_feeds WHERE
-						feed_url = '$feed_url' AND owner_uid = " . $_SESSION["uid"]);
-	
-				if (db_num_rows($result) == 0) {			
-					if ($mode == 1) {
-						$result = db_query($link,
-							"INSERT INTO ttrss_feeds (owner_uid,feed_url,title,cat_id) 
-							VALUES ('".$_SESSION["uid"]."', '$feed_url', '$title', NULL)");
-					} else if ($mode == 2) {
-						$result = db_query($link,
-							"INSERT INTO ttrss_feeds (id,owner_uid,feed_url,title,cat_id,site_url) 
-							VALUES ('$orig_id','".$_SESSION["uid"]."', '$feed_url', '$title', NULL, '$site_url')");
-					}
-					array_push($subscribed, $title_orig);
-				}
-			}
-
-			if (count($subscribed) > 0) {
-				$msg = "<b>".__('Subscribed to feeds:')."</b>".
-					"<ul class=\"nomarks\">";
-
-				foreach ($subscribed as $title) {
-					$msg .= "<li>$title</li>";
-				}
-				$msg .= "</ul>";
-
-				print format_notice($msg);
-			}
-
-			return;
-		} */
-
-/*		if ($subop == "browse") {
-
-			print "<div id=\"infoBoxTitle\">".__('Feed Browser')."</div>";
-			
-			print "<div class=\"infoBoxContents\">";
-
-			$browser_search = db_escape_string($_REQUEST["search"]);
-
-			//print "<p>".__("Showing top 25 registered feeds, sorted by popularity:")."</p>";
-
-			print "<form onsubmit='return false;' display='inline' name='feed_browser' id='feed_browser'>";
-
-			print "
-				<div style='float : right'>
-				<img style='display : none' 
-					id='feed_browser_spinner' src='images/indicator_white.gif'>
-				<input name=\"search\" size=\"20\" type=\"search\"
-					onchange=\"javascript:updateFeedBrowser()\" value=\"$browser_search\">
-				<button onclick=\"javascript:updateFeedBrowser()\">".__('Search')."</button>
-			</div>";
-
-			print " <select name=\"mode\" onchange=\"updateFeedBrowser()\">
-				<option value='1'>" . __('Popular feeds') . "</option>
-				<option value='2'>" . __('Feed archive') . "</option>
-				</select> ";
-
-			print __("limit:");
-
-			print " <select name=\"limit\" onchange='updateFeedBrowser()'>";
-
-			foreach (array(25, 50, 100, 200) as $l) {
-				$issel = ($l == $limit) ? "selected" : "";
-				print "<option $issel>$l</option>";
-			}
-			
-			print "</select> ";
-
-			print "<p>";
-
-			$owner_uid = $_SESSION["uid"];
-
-			print "<ul class='browseFeedList' id='browseFeedList'>";
-			print_feed_browser($link, $search, 25);
-			print "</ul>";
-
-			print "<div align='center'>
-				<button onclick=\"feedBrowserSubscribe()\">".__('Subscribe')."</button>
-				<button onclick=\"closeInfoBox()\" >".__('Cancel')."</button></div>";
-
-			print "</div>";
-			return;
-		} */
-
 		if ($subop == "editfeed") {
+			header("Content-Type: text/xml");
+
+			print "<dlg id=\"$subop\">";
+			print "<title>".__('Feed Editor')."</title>";
+			print "<content><![CDATA[";
+
 			$feed_id = db_escape_string($_REQUEST["id"]);

 			$result = db_query($link, 
@@ -184,10 +83,6 @@
 				$feed_icon = "";
 			}

-			print "<div id=\"infoBoxTitle\">".__('Feed Editor')."</div>";
-
-			print "<div class=\"infoBoxContents\">";
-
 			print "<form id=\"edit_feed_form\" onsubmit=\"return false\">";	

 			print "<input type=\"hidden\" name=\"id\" value=\"$feed_id\">";
@@ -402,6 +297,8 @@
 				<button onclick=\"return feedEditCancel()\">".__('Cancel')."</button>
 				</div>";

+			print "]]></content></dlg>";
+
 			return;
 		}

@@ -409,9 +306,10 @@

 			$feed_ids = db_escape_string($_REQUEST["ids"]);
 			
-			print "<div id=\"infoBoxTitle\">".__('Multiple Feed Editor')."</div>";
-
-			print "<div class=\"infoBoxContents\">";
+			header("Content-Type: text/xml");
+			print "<dlg id=\"$subop\">";
+			print "<title>".__('Multiple Feed Editor')."</title>";
+			print "<content><![CDATA[";

 			print "<form id=\"batch_edit_feed_form\" onsubmit=\"return false\">";	

@@ -555,6 +453,8 @@
 				onclick=\"return feedEditCancel()\" value=\"".__('Cancel')."\">
 				</div>";

+			print "]]></content></dlg>";
+
 			return;
 		}

@@ -954,10 +854,10 @@

 			}

-			print "<div id=\"infoBoxTitle\">".__('Category editor')."</div>";
-			
-			print "<div class=\"infoBoxContents\">";
-
+			header("Content-Type: text/xml");
+			print "<dlg id=\"$subop\">";
+			print "<title>".__('Category editor')."</title>";
+			print "<content><![CDATA[";

 			if ($action == "add") {

@@ -1047,7 +947,7 @@
 			print "<button onclick=\"selectTab('feedConfig')\">".
 				__('Close this window')."</button></div>";

-			print "</div>";
+			print "]]></content></dlg>";

 			return;

@@ -1189,8 +1089,6 @@

 		if (db_num_rows($result) != 0) {

-//			print "<div id=\"infoBoxShadow\"><div id=\"infoBox\">PLACEHOLDER</div></div>";
-
 			print "<p><table width=\"100%\" cellspacing=\"0\" 
 				class=\"prefFeedList\" id=\"prefFeedList\">";
 			print "<tr><td class=\"selectPrompt\" colspan=\"8\">".
--- a/modules/pref-filters.php
+++ b/modules/pref-filters.php
@@ -7,6 +7,11 @@

 			$filter_id = db_escape_string($_REQUEST["id"]);

+			header("Content-Type: text/xml");
+			print "<dlg id=\"$subop\">";
+			print "<title>".__('Filter Editor')."</title>";
+			print "<content><![CDATA[";
+
 			$result = db_query($link, 
 				"SELECT * FROM ttrss_filters WHERE id = '$filter_id' AND owner_uid = " . $_SESSION["uid"]);

@@ -20,9 +25,6 @@
 			$enabled = sql_bool_to_bool(db_fetch_result($result, 0, "enabled"));
 			$inverse = sql_bool_to_bool(db_fetch_result($result, 0, "inverse"));

-			print "<div id=\"infoBoxTitle\">".__('Filter Editor')."</div>";
-			print "<div class=\"infoBoxContents\">";
-
 			print "<form id=\"filter_edit_form\" onsubmit='return false'>";

 			print "<input type=\"hidden\" name=\"op\" value=\"pref-filters\">";
@@ -158,7 +160,7 @@
 			print "<button onclick=\"return filterEditCancel()\">".
 				__('Cancel')."</button>";

-			print "</div>";
+			print "]]></content></dlg>";

 			return;
 		}
@@ -278,8 +280,6 @@
 			$sort = "reg_exp";
 		}

-//		print "<div id=\"infoBoxShadow\"><div id=\"infoBox\">PLACEHOLDER</div></div>";
-
 		$result = db_query($link, "SELECT id,description 
 			FROM ttrss_filter_types ORDER BY description");

--- a/modules/pref-users.php
+++ b/modules/pref-users.php
@@ -12,11 +12,14 @@

 		if ($subop == "user-details") {

+			header("Content-Type: text/xml");
+			print "<dlg id=\"$subop\">";
+
 			$uid = sprintf("%d", $_REQUEST["id"]);

-			print "<div id=\"infoBoxTitle\">".__('User details')."</div>";
+			print "<title>".__('User details')."</title>";

-			print "<div class='infoBoxContents'>";
+			print "<content><![CDATA[";

 			$result = db_query($link, "SELECT login,
 				".SUBSTRING_FOR_DATE."(last_login,1,16) AS last_login,
@@ -96,18 +99,20 @@
 				<button onclick=\"closeInfoBox()\">".__("Close this window").
 				"</button></div>";

-			print "</div>";
+			print "]]></content></dlg>";

 			return;
 		}

 		if ($subop == "edit") {

+			header("Content-Type: text/xml");
+
 			$id = db_escape_string($_REQUEST["id"]);

-			print "<div id=\"infoBoxTitle\">".__('User Editor')."</div>";
-			
-			print "<div class=\"infoBoxContents\">";
+			print "<dlg id=\"$subop\">";
+			print "<title>".__('User Editor')."</title>";
+			print "<content><![CDATA[";

 			print "<form id=\"user_edit_form\" onsubmit='return false'>";

@@ -180,7 +185,7 @@
 				<button onclick=\"return userEditCancel()\">".
 					__('Cancel')."</button></div>";

-			print "</div>";
+			print "]]></content></dlg>";

 			return;
 		}
@@ -410,8 +415,6 @@

 		if (db_num_rows($result) > 0) {

-//		print "<div id=\"infoBoxShadow\"><div id=\"infoBox\">PLACEHOLDER</div></div>";
-
 		print "<p><table width=\"100%\" cellspacing=\"0\" 
 			class=\"prefUserList\" id=\"prefUserList\">";

--- a/prefs.js
+++ b/prefs.js
@@ -157,7 +157,6 @@ function infobox_feed_cat_callback2(transport) {
 	try {
 		infobox_callback2(transport);
 		init_cat_inline_editor();
-		$('fadd_cat').focus();
 	} catch (e) {
 		exception_error("infobox_feed_cat_callback2", e);
 	}
@@ -327,7 +326,6 @@ function addUser() {
 function editUser(id, event) {

 	try {
-
 		if (!event || !event.ctrlKey) {

 		disableHotkeys();
@@ -946,7 +944,7 @@ function editSelectedFeed() {

 	notify("");

-	editFeed(rows[0]);
+	editFeed(rows[0], {});

 }

--- a/prefs.php
+++ b/prefs.php
@@ -25,7 +25,7 @@
 <head>
 	<title>Tiny Tiny RSS : Preferences</title>
 	<link rel="stylesheet" type="text/css" href="tt-rss.css?<?php echo $dt_add ?>"/>
-	<link rel="stylesheet" type="text/css" href="infobox.css?<?php echo $dt_add ?>"/>
+	<link rel="stylesheet" type="text/css" href="lib/modalbox/modalbox.css"/>

 	<?php	$user_theme = get_user_theme_path($link);
 		if ($user_theme) { ?>
@@ -42,6 +42,7 @@
 	<script type="text/javascript" src="lib/prototype.js"></script>
 	<script type="text/javascript" src="lib/position.js"></script>
 	<script type="text/javascript" src="lib/scriptaculous/scriptaculous.js?load=effects,dragdrop,controls"></script>
+	<script type="text/javascript" src="lib/modalbox/modalbox.js"></script>

 	<script type="text/javascript" charset="utf-8" src="localized_js.php?<?php echo $dt_add ?>"></script>

@@ -133,20 +134,8 @@
 </div>

 <div id="notify" class="notify"><span id="notify_body">&nbsp;</span></div>
-<div id="infoBoxShadow"><div id="infoBox">BAH</div></div>
 <div id="cmdline" style="display : none"></div>

-<div id="errorBoxShadow" style="display : none">
-	<div id="errorBox">
-	<div id="xebTitle"><?php echo __('Fatal Exception') ?></div><div id="xebContent">&nbsp;</div>
-		<div id="xebBtn" align='center'>
-			<button onclick="closeErrorBox()"><?php echo __('Close this window') ?></button>
-		</div>
-	</div>
-</div>
-
-<div id="dialog_overlay" style="display : none"> </div>
-
 <div id="prefFooter">
 	<a href="http://tt-rss.org/">Tiny Tiny RSS</a>
 	<?php if (!defined('HIDE_VERSION')) { ?>
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -799,7 +799,7 @@ span.groupPrompt {
 }

 div.tagCloudContainer {
-	border : 1px solid #99d67a;
+	border : 1px solid gray;
 	background-color : white;
 	margin : 5px 0px 5px 0px;
 	padding : 5px;
@@ -1749,3 +1749,13 @@ div.hlUpdPic {
 div.hlUpdPic img {
 	max-width : 16px;
 }
+
+
+div.fatalError button {
+	margin-top : 5px;
+}
+
+div.fatalError textarea {
+	width : 100%;
+	height : 100px;
+}
--- a/tt-rss.php
+++ b/tt-rss.php
@@ -26,9 +26,10 @@
 	<title>Tiny Tiny RSS</title>

 	<link rel="stylesheet" type="text/css" href="tt-rss.css?<?php echo $dt_add ?>"/>
-	<link rel="stylesheet" type="text/css" href="infobox.css?<?php echo $dt_add ?>"/>
 	<link rel="stylesheet" type="text/css" href="cdm.css?<?php echo $dt_add ?>"/>

+	<link rel="stylesheet" type="text/css" href="lib/modalbox/modalbox.css"/>
+
 	<?php	$user_theme = get_user_theme_path($link);
 		if ($user_theme) { ?>
 			<link rel="stylesheet" type="text/css" href="<?php echo $user_theme ?>/theme.css?<?php echo $dt_add ?>">
@@ -42,7 +43,8 @@
 	<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>

 	<script type="text/javascript" src="lib/prototype.js"></script>
-	<script type="text/javascript" src="lib/scriptaculous/scriptaculous.js?load=effects,dragdrop,controls"></script>
+	<script type="text/javascript" src="lib/scriptaculous/scriptaculous.js?load=effects,dragdrop,controls,builder"></script>
+	<script type="text/javascript" src="lib/modalbox/modalbox.js"></script>
 	<script type="text/javascript" charset="utf-8" src="localized_js.php?<?php echo $dt_add ?>"></script>
 	<script type="text/javascript" charset="utf-8" src="tt-rss.js?<?php echo $dt_add ?>"></script>
 	<script type="text/javascript" charset="utf-8" src="functions.js?<?php echo $dt_add ?>"></script>
@@ -84,20 +86,9 @@
 </div>

 <div id="notify" class="notify"><span id="notify_body">&nbsp;</span></div>
-<div id="dialog_overlay" style="display : none"> </div>
-<div id="infoBoxShadow" style="display : none"><div id="infoBox">&nbsp;</div></div>
 <div id="cmdline" style="display : none"></div>
 <div id="auxDlg" style="display : none"></div>

-<div id="errorBoxShadow" style="display : none">
-	<div id="errorBox">
-	<div id="xebTitle"><?php echo __('Fatal Exception') ?></div><div id="xebContent">&nbsp;</div>
-		<div id="xebBtn" align='center'>
-			<button onclick="closeErrorBox()"><?php echo __('Close this window') ?></button>
-		</div>
-	</div>
-</div>
-
 <div id="header">
 	<div class="topLinks" id="topLinks">
				`@@ -0,0 +1 @@`
				`Copyright (c) 2006-2007 Andrey Okonetchnikov`