diff --git a/js/ui/main.js b/js/ui/main.js
index 150e1a9c0..56da058f2 100644
--- a/js/ui/main.js
+++ b/js/ui/main.js
@@ -4,11 +4,13 @@ const Shell = imports.gi.Shell;
 const Clutter = imports.gi.Clutter;
 
 const Panel = imports.ui.panel;
+const Overlay = imports.ui.overlay;
 
 const DEFAULT_BACKGROUND_COLOR = new Clutter.Color();
 DEFAULT_BACKGROUND_COLOR.from_pixel(0x2266bbff);
 
 let panel = null;
+let overlay = null;
 
 function start() {
     let global = Shell.global_get();
@@ -20,9 +22,25 @@ function start() {
 
     // Mutter currently hardcodes putting "Yessir. The compositor is running""
     // in the overlay. Clear that out.
-    children = global.overlay_group.get_children();
+    let children = global.overlay_group.get_children();
     for (let i = 0; i < children.length; i++)
 	children[i].destroy();
 
     panel = new Panel.Panel();
+    overlay = new Overlay.Overlay();
+    global.set_stage_input_area(0, 0, global.screen_width, Panel.PANEL_HEIGHT);
+}
+
+function show_overlay() {
+    let global = Shell.global_get();
+
+    overlay.show();
+    global.set_stage_input_area(0, 0, global.screen_width, global.screen_height);
+}
+
+function hide_overlay() {
+    let global = Shell.global_get();
+
+    overlay.hide();
+    global.set_stage_input_area(0, 0, global.screen_width, Panel.PANEL_HEIGHT);
 }
diff --git a/js/ui/overlay.js b/js/ui/overlay.js
new file mode 100644
index 000000000..5504182ad
--- /dev/null
+++ b/js/ui/overlay.js
@@ -0,0 +1,47 @@
+/* -*- mode: js2; js2-basic-offset: 4; -*- */
+
+const Shell = imports.gi.Shell;
+const Clutter = imports.gi.Clutter;
+
+const Panel = imports.ui.panel;
+
+const OVERLAY_BACKGROUND_COLOR = new Clutter.Color();
+OVERLAY_BACKGROUND_COLOR.from_pixel(0x000000ff);
+
+function Overlay() {
+    this._init();
+}
+
+Overlay.prototype = {
+    _init : function() {
+	let global = Shell.global_get();
+
+	this._group = new Clutter.Group();
+	this.visible = false;
+
+	let background = new Clutter.Rectangle({ color: OVERLAY_BACKGROUND_COLOR,
+						 reactive: true,
+						 x: 0,
+						 y: Panel.PANEL_HEIGHT,
+					         width: global.screen_width,
+					         height: global.screen_width - Panel.PANEL_HEIGHT });
+	this._group.add_actor(background);
+
+	this._group.hide();
+	global.overlay_group.add_actor(this._group);
+    },
+
+    show : function() {
+	if (!this.visible) {
+	    this.visible = true;
+	    this._group.show();
+	}
+    },
+
+    hide : function() {
+	if (this.visible) {
+	    this.visible = false;
+	    this._group.hide();
+	}
+    }
+};
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 85fe95e1c..22fcafa3b 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -5,6 +5,11 @@ const Mainloop = imports.mainloop;
 const Shell = imports.gi.Shell;
 const Clutter = imports.gi.Clutter;
 
+// The mutual import here causes things to break in weird ways,
+//  (http://bugzilla.gnome.org/show_bug.cgi?id=558741)
+// So we do a local import below
+// const Main = imports.ui.main;
+
 const PANEL_HEIGHT = 32;
 const PANEL_BACKGROUND_COLOR = new Clutter.Color();
 PANEL_BACKGROUND_COLOR.from_pixel(0xeeddccff);
@@ -17,8 +22,6 @@ Panel.prototype = {
     _init : function() {
 	let global = Shell.global_get();
 
-	global.set_stage_input_area(0, 0, global.screen_width, PANEL_HEIGHT);
-
 	this._group = new Clutter.Group();
 
 	let background = new Clutter.Rectangle({ color: PANEL_BACKGROUND_COLOR,
@@ -41,7 +44,14 @@ Panel.prototype = {
 
 	message.connect('button-press-event',
 	    function(o, event) {
-		log('Clicked!');
+		// See comment above
+	        let Main = imports.ui.main;
+
+		if (Main.overlay.visible)
+		    Main.hide_overlay();
+		else
+		    Main.show_overlay();
+
 		return true;
             });