Quarantine plugin refactoring. It is now working like the webmail plugin, ie with an anchor based ajax navigation. What is broken for the moment:

* search functionality,
 * headers do not appear while displaying a mail.

New message system. (see infobox.js)

static/js/common.js

@@ -3,6 +3,12 @@ window.addEvent('domready', function(){
     SqueezeBox.assign($$('a.boxed'), {
         parse: 'rel',        
     });
+
+    
+    infobox = new InfoBox({
+        parent : $("menubar"),
+        message : "Loading"
+    });
 });
 
 callbacks = {};
@@ -18,18 +24,23 @@ get_callback = function(name) {
 current_anchor = null;
 
 check_anchor = function() {
-    if (current_anchor.serialized == location.hash) {
+    if (current_anchor.serialized == location.hash 
+        && !$defined(current_anchor.force)) {
         return;
     }
+    delete(current_anchor.force);
     current_anchor.from_string(location.hash);
     if (!current_anchor.serialized) {
         query = current_anchor.deflocation;
     } else {
         query = current_anchor.serialized.substring(1);
     }
+    infobox.show("Loading...", "gray");
     new Request.JSON({url: query, onSuccess: function(resp) {
         callback = ($defined(resp.callback)) ? resp.callback : "default";
         callbacks[callback](resp);
+        infobox.notice("Done");
+        infobox.hide(1);
     }}).get();
 }
 
@@ -96,8 +107,26 @@ function HashWrapper(deflocation) {
         return res;
     };
 
-    this.update = function() {
+    this.update = function(force) {
         location.hash = this.serialize();
+        if ($defined(force)) {
+            this.force = force;
+        }
+    };
+
+    this.updateparams = function(str) {
+        if (str.charAt(0) == '?') {
+            str = str.substring(1);
+        }
+        var elems = str.split('&');
+        for (var i = 0; i < elems.length; i++) {
+            this.setparamfromstring(elems[i]);
+        }
+    };
+
+    this.setparamfromstring = function(str) {
+        var def = str.split('=');
+        this.params.set(def[0], def[1]);
     };
 
     this.setparam = function(name, value) {
@@ -158,6 +187,9 @@ parse_menubar = function(id) {
 		}
 	    });
 	});
+        SqueezeBox.assign($$('a.boxed'), {
+            parse: 'rel',        
+        });
     }
 }
 

static/js/infobox.js

@@ -0,0 +1,105 @@
+var InfoBox = new Class({
+    Implements: [Options, Events],
+    options: {
+        parent : null,
+        message : "This is my info box!",
+        width : 200,
+    },
+
+    profiles: {
+        gray : {"background" : "#EEEEEE", "border" : "#CCCCCC"},
+        green : {"background" : "#DAF8DA", "border" : "#166D14"},
+        red : {"background" : "#F9D2D2", "border" : "#FF2A00"},
+        yellow : {"background" : "#FDE6B5", "border" : "#FF7F00"}
+    },
+
+    initialize: function(options) {
+        this.setOptions(options);
+
+        var boxleft = document.body.getSize().x / 2 - this.options.width / 2;
+        this.box = new Element("div", {"id" : "infobox"});
+        this.box.setStyles({
+            "font-size" : "normal",
+            "font-weight" : "bold",
+            "text-align" : "left",
+            "width" : this.options. width + "px",
+            "padding" : "10px",
+            "position" : "absolute",
+            "top" : "0px",
+            "left" : boxleft + "px",
+            "display" : "none"
+        });
+        this.setProfile("gray");
+        this.spinner = new Element("img", {
+            "src" : "/static/stylesheets/spinner.gif"
+        });
+        this.spinner.setStyle("float", "left");
+        this.spinner.inject(this.box);
+
+        this.label = new Element("label").set("html", this.options.message);
+        this.label.setStyles({
+            "margin-left" : "10px"
+        });
+        this.label.inject(this.box);
+        this.box.inject(document.body);
+    },
+
+    setMessage: function(text) {
+        this.label.set("html", text);
+    },
+
+    setProfile: function(color) {
+        this.box.setStyles({
+            "background" : this.profiles[color].background,
+            "border" : "2px solid " + this.profiles[color].border
+        });
+    },
+
+    notice: function(message) {
+        this.setProfile("green");
+        this.setMessage(message);
+    },
+
+    error: function(message) {
+        this.setProfile("red");
+        this.setMessage(message);
+    },
+
+    warning: function(message) {
+        this.setProfile("yellow");
+        this.setMessage(message);
+    },
+
+    show: function(message, prof, delay) {
+        if ($defined(this.start)) {
+            if ($time() - this.start > this.delay) {
+                $clear(this.showtimer);
+                delete(this.start);
+                delete(this.delay);
+            } else {
+                this.showtimer = this.show.delay(100, this, [message, prof]);
+                return;
+            }
+        }
+        if ($defined(message)) {
+            this.setMessage(message);
+        }
+        if ($defined(prof)) {
+            this.setProfile(prof);
+        }
+        if ($defined(delay)) {
+            this.start = $time();
+            this.delay = delay * 1000;
+        }
+        this.box.setStyle("display", "block");
+    },
+    
+    hide: function(timer) {
+        if ($defined(timer)) {
+            this.timer = this.hide.periodical(timer * 1000, this);
+            return;
+        }
+        $clear(this.timer);
+        this.box.setStyle("display", "none");
+    },
+});

static/stylesheets/default.css

@@ -177,11 +177,11 @@ div#footer {
     border-left: 5px solid #ccc;
 }
 
-.left {
+div.left {
     float: left;
 }
 
-.right {
+div.right {
     float: right;
 }