--- panel-old.js	2011-04-29 14:11:20.930511000 +0100
+++ panel.js	2011-04-29 14:11:31.180511001 +0100
@@ -22,9 +22,11 @@
 const Main = imports.ui.main;
 const Tweener = imports.ui.tweener;
 
 const PANEL_ICON_SIZE = 24;
+const PANEL_HEIGHT = 25;
 
 const STARTUP_ANIMATION_TIME = 0.2;
+const HIDE_ANIMATION_TIME = 0.2;
 
 const HOT_CORNER_ACTIVATION_TIMEOUT = 0.5;
 
@@ -260,14 +262,10 @@
         this._iconBox = new Shell.Slicer({ name: 'appMenuIcon' });
         this._iconBox.connect('style-changed',
                               Lang.bind(this, this._onIconBoxStyleChanged));
-        this._iconBox.connect('notify::allocation',
-                              Lang.bind(this, this._updateIconBoxClip));
         this._container.add_actor(this._iconBox);
         this._label = new TextShadower();
         this._container.add_actor(this._label.actor);
 
-        this._iconBottomClip = 0;
-
         this._quitMenu = new PopupMenu.PopupMenuItem('');
         this.menu.addMenuItem(this._quitMenu);
         this._quitMenu.connect('activate', Lang.bind(this, this._onQuit));
@@ -338,16 +336,11 @@
 
     _onIconBoxStyleChanged: function() {
         let node = this._iconBox.get_theme_node();
-        this._iconBottomClip = node.get_length('app-icon-bottom-clip');
-        this._updateIconBoxClip();
-    },
-
-    _updateIconBoxClip: function() {
-        let allocation = this._iconBox.allocation;
-        if (this._iconBottomClip > 0)
+        let bottomClip = node.get_length('app-icon-bottom-clip');
+        if (bottomClip > 0)
             this._iconBox.set_clip(0, 0,
-                                   allocation.x2 - allocation.x1,
-                                   allocation.y2 - allocation.y1 - this._iconBottomClip);
+                                   this._iconBox.width,
+                                   this._iconBox.height - bottomClip);
         else
             this._iconBox.remove_clip();
     },
@@ -996,9 +989,11 @@
         // and to be released when it is exited regardless of how it was triggered.
         Main.overview.connect('showing', Lang.bind(this, function() {
             this.button.checked = true;
+            this._showPanel();
         }));
-        Main.overview.connect('hiding', Lang.bind(this, function() {
+        Main.overview.connect('hidden', Lang.bind(this, function() {
             this.button.checked = false;
+            this._hidePanel();
         }));
 
         Main.chrome.addActor(this.actor, { visibleInOverview: true });
@@ -1011,6 +1006,11 @@
 
         Main.ctrlAltTabManager.addGroup(this.actor, _("Top Bar"), 'start-here',
                                         { sortGroup: CtrlAltTab.SortGroup.TOP });
+
+
+        this.actor.connect('leave-event', Lang.bind(this, this._hidePanel));
+        this.actor.connect('enter-event', Lang.bind(this, this._showPanel));
+        
     },
 
     _xdndShowOverview: function (actor) {
@@ -1142,4 +1142,36 @@
             this._trayBox.remove_actor(icon);
     },
 
+    _hidePanel: function() {
+        if(!Main.overview.visible)
+        {
+            Tweener.addTween(this.actor,
+                         { height: 1,
+                           time: HIDE_ANIMATION_TIME,
+                           transition: 'easeOutQuad'
+                         });
+
+            Tweener.addTween(this._boxContainer,
+                         { opacity: 0,
+                           time: HIDE_ANIMATION_TIME,
+                           transition: 'easeOutQuad'
+                         });
+        }
+
+    },
+
+    _showPanel: function() {
+            Tweener.addTween(this.actor,
+                         { height: PANEL_HEIGHT,
+                           time: HIDE_ANIMATION_TIME,
+                           transition: 'easeOutQuad'
+                         });
+
+            Tweener.addTween(this._boxContainer,
+                         { opacity: 255,
+                           time: HIDE_ANIMATION_TIME+0.2,
+                           transition: 'easeOutQuad'
+                         });
+    },
+
 };
