From: Manolo Carrasco <manolo@apache.org>
Date: Sat, 17 Mar 2012 20:39:27 +0000 (+0000)
Subject: move the example plugin to the plugins namespace
X-Git-Tag: release-1.3.2~99
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=c8468e91ffa2c0ef2734b9c01f660c92b6370266;p=gwtquery.git

move the example plugin to the plugins namespace
---

diff --git a/jsquery/src/main/java/gwtquery/jsquery/client/JsMenu.java b/jsquery/src/main/java/gwtquery/jsquery/client/JsMenu.java
deleted file mode 100644
index 3c73eef9..00000000
--- a/jsquery/src/main/java/gwtquery/jsquery/client/JsMenu.java
+++ /dev/null
@@ -1,946 +0,0 @@
-package gwtquery.jsquery.client;
-
-/**
- * 
- * This class wraps the jquery menu plugin from:
- * 
- * http://p.sohei.org/jquery-plugins/menu/
- *
- */
-public abstract class JsMenu {
-  
-  public static native void loadPlugin() /*-{
-  var l = @gwtquery.jsquery.client.utils.JsQueryUtils::log(Ljava/lang/Object;);
-  var window = $wnd;
-  var document = $doc;
-  var jQuery = $wnd.$;
-  
-(function($)
-{
-  var menus = [], //list of all menus
-    visibleMenus = [], //list of all visible menus
-    activeMenu = activeItem = null,
-    menuDIVElement = $('<div class="menu-div outerbox" style="position:absolute;top:0;left:0;display:none;"><div class="shadowbox1"></div><div class="shadowbox2"></div><div class="shadowbox3"></div></div>')[0],
-    menuULElement = $('<ul class="menu-ul innerbox"></ul>')[0],
-    menuItemElement = $('<li style="position:relative;"><div class="menu-item"></div></li>')[0],
-    arrowElement = $('<img class="menu-item-arrow" />')[0],
-    $rootDiv = $('<div id="root-menu-div" style="position:absolute;top:0;left:0;"></div>'), //create main menu div
-    defaults = {
-      // $.Menu options
-      showDelay : 200,
-      hideDelay : 200,
-      hoverOpenDelay: 0,
-      offsetTop : 0,
-      offsetLeft : 0,
-      minWidth: 0,
-      onOpen: null,
-      onClose: null,
-
-      // $.MenuItem options
-      onClick: null,
-      arrowSrc: null,
-      addExpando: false,
-      
-      // $.fn.menuFromElement options
-      copyClassAttr: false
-    };
-    
-  $(function(){
-    $rootDiv.appendTo('body');
-  });
-
-  $.extend({
-    MenuCollection : function(items) {
-    
-      this.menus = [];
-    
-      this.init(items);
-    }
-  });
-  $.extend($.MenuCollection, {
-    prototype : {
-      init : function(items)
-      {
-        if ( items && items.length )
-        {
-          for ( var i = 0; i < items.length; i++ )
-          {
-            this.addMenu(items[i]);
-            items[i].menuCollection = this;
-          }
-        }
-      },
-      addMenu : function(menu)
-      {
-        if ( menu instanceof $.Menu )
-          this.menus.push(menu);
-        
-        menu.menuCollection = this;
-      
-        var self = this;
-        $(menu.target).hover(function(){
-          if ( menu.visible )
-            return;
-
-          //when there is an open menu in this collection, hide it and show the new one
-          for ( var i = 0; i < self.menus.length; i++ )
-          {
-            if ( self.menus[i].visible )
-            {
-              self.menus[i].hide();
-              menu.show();
-              return;
-            }
-          }
-        }, function(){});
-      }
-    }
-  });
-
-  $.extend({
-    Menu : function(target, items, options) {
-      this.menuItems = []; //all direct child $.MenuItem objects
-      this.subMenus = []; //all subMenus from this.menuItems
-      this.visible = false;
-      this.active = false; //this menu has hover or one of its submenus is open
-      this.parentMenuItem = null;
-      this.settings = $.extend({}, defaults, options);
-      this.target = target;
-      this.$eDIV = null;
-      this.$eUL = null;
-      this.timer = null;
-      this.menuCollection = null;
-      this.openTimer = null;
-
-      this.init();
-      if ( items && $.isArray(items) )
-        this.addItems(items);
-    }
-  });
-  $.extend($.Menu, {
-    checkMouse : function(e)
-    {
-      var t = e.target;
-      //the user clicked on the target of the currenty open menu
-      if ( visibleMenus.length && t == visibleMenus[0].target )
-        return;
-      
-      //get the last node before the #root-menu-div
-      while ( t.parentNode && t.parentNode != $rootDiv[0] )
-        t = t.parentNode;
-
-      // FIXME: why do we need a timeout
-      setTimeout($.Menu.closeAll, 100);
-
-      // FIXME: JsQuery each doesn't work with arrays
-      // if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
-      // {
-      //  $.Menu.closeAll();
-      // }
-      return true;
-    },
-    checkKey : function(e)
-    {
-      switch ( e.keyCode )
-      {
-        case 13: //return
-          if ( activeItem )
-            activeItem.click(e, activeItem.$eLI[0]);
-          break;
-        case 27: //ESC
-          $.Menu.closeAll();
-          break;
-        case 37: //left
-          if ( !activeMenu )
-            activeMenu = visibleMenus[0];
-          var a = activeMenu;
-          if ( a && a.parentMenuItem ) //select the parent menu and close the submenu
-          {
-            //unbind the events temporary, as we dont want the hoverout event to fire
-            var pmi = a.parentMenuItem;
-            pmi.$eLI.unbind('mouseout').unbind('mouseover');
-            a.hide();
-            pmi.hoverIn(true);
-            setTimeout(function(){ //bind again..but delay it
-              pmi.bindHover();
-            });
-          }
-          else if ( a && a.menuCollection ) //select the previous menu in the collection
-          {
-            var pos,
-              mcm = a.menuCollection.menus;
-            if ( (pos = $.inArray(a, mcm)) > -1 )
-            {
-              if ( --pos < 0 )
-                pos = mcm.length - 1;
-              $.Menu.closeAll();
-              mcm[pos].show();
-              mcm[pos].setActive();
-              if ( mcm[pos].menuItems.length ) //select the first item
-                mcm[pos].menuItems[0].hoverIn(true);
-            }
-          }
-          break;
-        case 38: //up
-          if ( activeMenu )
-            activeMenu.selectNextItem(-1);
-          break;
-        case 39: //right
-          if ( !activeMenu )
-            activeMenu = visibleMenus[0];
-          var m,
-            a = activeMenu,
-            asm = activeItem ? activeItem.subMenu : null;
-          if ( a )
-          {
-            if ( asm && asm.menuItems.length ) //select the submenu
-            {
-              asm.show();
-              asm.menuItems[0].hoverIn();
-            }
-            else if ( (a = a.inMenuCollection()) ) //select the next menu in the collection
-            {
-              var pos,
-                mcm = a.menuCollection.menus;
-              if ( (pos = $.inArray(a, mcm)) > -1 )
-              {
-                if ( ++pos >= mcm.length )
-                  pos = 0;
-                $.Menu.closeAll();
-                mcm[pos].show();
-                mcm[pos].setActive();
-                if ( mcm[pos].menuItems.length ) //select the first item
-                  mcm[pos].menuItems[0].hoverIn(true);
-              }
-            }
-          }
-          break;
-        case 40: //down
-          if ( !activeMenu )
-          {
-            if ( visibleMenus.length && visibleMenus[0].menuItems.length )
-              visibleMenus[0].menuItems[0].hoverIn();
-          }
-          else
-            activeMenu.selectNextItem();
-          break;
-      }
-      if ( e.keyCode > 36 && e.keyCode < 41 )
-        return false; //this will prevent scrolling
-    },
-    closeAll : function()
-    {
-      while ( visibleMenus.length )
-        visibleMenus[0].hide();
-    },
-    setDefaults : function(d)
-    {
-      $.extend(defaults, d);
-    },
-    prototype : {
-
-      init : function()
-      {
-        var self = this;
-        if ( !this.target )
-          return;
-        else if ( this.target instanceof $.MenuItem )
-        {
-          this.parentMenuItem = this.target;
-          this.target.addSubMenu(this);
-          this.target = this.target.$eLI;
-        }
-
-        menus.push(this);
-
-        //use the dom methods instead the ones from jquery (faster)
-        this.$eDIV = $(menuDIVElement.cloneNode(1));
-        this.$eUL = $(menuULElement.cloneNode(1));
-        this.$eDIV[0].appendChild(this.$eUL[0]);
-        $rootDiv[0].appendChild(this.$eDIV[0]);
-
-        //bind events
-        if ( !this.parentMenuItem )
-        {
-          $(this.target).click(function(e){
-            self.onClick(e);
-          }).hover(function(e){
-            self.setActive();
-
-            if ( self.settings.hoverOpenDelay )
-            {
-              self.openTimer = setTimeout(function(){
-                if ( !self.visible )
-                  self.onClick(e);
-              }, self.settings.hoverOpenDelay);
-            }
-          }, function(){
-            if ( !self.visible )
-              $(this).removeClass('activetarget');
-
-            if ( self.openTimer )
-              clearTimeout(self.openTimer);
-          });
-        }
-        else
-        {
-          this.$eDIV.hover(function(){
-            self.setActive();
-          }, function(){});
-        }
-      },
-      setActive : function()
-      {
-        if ( !this.parentMenuItem )
-          $(this.target).addClass('activetarget');
-        else
-          this.active = true;
-      },
-      addItem : function(item)
-      {
-        if ( item instanceof $.MenuItem )
-        {
-          if ( $.inArray(item, this.menuItems) == -1 )
-          {
-            this.$eUL.append(item.$eLI);
-            this.menuItems.push(item);
-            item.parentMenu = this;
-            if ( item.subMenu )
-              this.subMenus.push(item.subMenu);
-          }
-        }
-        else
-        {
-          this.addItem(new $.MenuItem(item, this.settings));
-        }
-      },
-      addItems : function(items)
-      {
-        for ( var i = 0; i < items.length; i++ )
-        {
-          this.addItem(items[i]);
-        }
-      },
-      removeItem : function(item)
-      {
-        var pos = $.inArray(item, this.menuItems);
-        if ( pos > -1 )
-          this.menuItems.splice(pos, 1);
-        item.parentMenu = null;
-      },
-      hide : function()
-      {
-        if ( !this.visible )
-          return;
-        
-        var i, 
-          pos = $.inArray(this, visibleMenus);
-
-        this.$eDIV.hide();
-
-        if ( pos >= 0 )
-          visibleMenus.splice(pos, 1);
-        this.visible = this.active = false;
-
-        $(this.target).removeClass('activetarget');
-
-        //hide all submenus
-        for ( i = 0; i < this.subMenus.length; i++ )
-        {
-          this.subMenus[i].hide();
-        }
-
-        //set all items inactive (e.g. remove hover class..)
-        for ( i = 0; i < this.menuItems.length; i++ )
-        {
-          if ( this.menuItems[i].active )
-            this.menuItems[i].setInactive();
-        }
-
-        if ( !visibleMenus.length ) //unbind events when the last menu was closed
-          $(document).unbind('mousedown', $.Menu.checkMouse).unbind('keydown', $.Menu.checkKey);
-
-        if ( activeMenu == this )
-          activeMenu = null;
-          
-        if ( this.settings.onClose )
-          this.settings.onClose.call(this);
-      },
-      show : function(e)
-      {
-        if ( this.visible )
-          return;
-
-        var zi, 
-          pmi = this.parentMenuItem;
-
-        if ( this.menuItems.length ) //show only when it has items
-        {
-          if ( pmi ) //set z-index
-          {
-            zi = parseInt(pmi.parentMenu.$eDIV.css('z-index'));
-            this.$eDIV.css('z-index', (isNaN(zi) ? 1 : zi + 1));
-          }
-          this.$eDIV.css({visibility: 'hidden', display:'block'});
-
-          //set min-width
-          if ( this.settings.minWidth )
-          {
-            if ( this.$eDIV.width() < this.settings.minWidth )
-              this.$eDIV.css('width', this.settings.minWidth);
-          }
-          
-          this.setPosition();
-          this.$eDIV.css({display:'none', visibility: ''}).show();
-
-          //IEs default width: auto is bad! ie6 and ie7 have are producing different errors.. (7 = 5px shadowbox + 2px border)
-          if ( 0) //$.browser.msie )
-            this.$eUL.css('width', parseInt($.browser.version) == 6 ? this.$eDIV.width() - 7 : this.$eUL.width());
-
-          if ( this.settings.onOpen )
-            this.settings.onOpen.call(this);
-        }
-        
-        if ( visibleMenus.length == 0 )
-          $(document).bind('mousedown', $.Menu.checkMouse).bind('keydown', $.Menu.checkKey);
-
-        this.visible = true;
-        visibleMenus.push(this);
-      },
-      setPosition : function()
-      {
-        var $t, o, posX, posY, 
-          pmo, //parent menu offset
-          wst, //window scroll top
-          wsl, //window scroll left
-          ww = $(window).width(), 
-          wh = $(window).height(),
-          pmi = this.parentMenuItem,
-          height = this.$eDIV[0].clientHeight,
-          width = this.$eDIV[0].clientWidth,
-          pheight; //parent height
-
-        if ( pmi )
-        {
-          //position on the right side of the parent menu item
-          o = pmi.$eLI.offset();
-          posX = o.left + pmi.$eLI.width();
-          posY = o.top;
-        }
-        else
-        {
-          //position right below the target
-          $t = $(this.target);
-          o = $t.offset();
-          
-          posX = o.left + this.settings.offsetLeft;
-          posY = o.top + $t.height() + this.settings.offsetTop;
-        }
-
-        //y-pos
-        if ($().scrollTop )
-        {
-          wst = $(window).scrollTop();
-          if ( wh < height ) //menu is bigger than the window
-          {
-            //position the menu at the top of the visible area
-            posY = wst;
-          }
-          else if ( wh + wst < posY + height ) //outside on the bottom?
-          {
-            if ( pmi )
-            {
-              pmo = pmi.parentMenu.$eDIV.offset();
-              pheight = pmi.parentMenu.$eDIV[0].clientHeight;
-              if ( height <= pheight )
-              {
-                //bottom position = parentmenu-bottom position
-                posY = pmo.top + pheight - height;
-              }
-              else
-              {
-                //top position = parentmenu-top position
-                posY = pmo.top;
-              }
-              //still outside on the bottom?
-              if ( wh + wst < posY + height )
-              {
-                //shift the menu upwards till the bottom is visible
-                posY -= posY + height - (wh + wst);
-              }
-            }
-            else
-            {
-              //shift the menu upwards till the bottom is visible
-              posY -= posY + height - (wh + wst);
-            }
-          }
-        }
-        //x-pos
-        if ($().scrollLeft )
-        {
-          wsl = $(window).scrollLeft();
-          if ( ww + wsl < posX + width )
-          {
-            if ( pmi )
-            {
-              //display the menu not on the right side but on the left side
-              posX -= pmi.$eLI.width() + width;
-              //outside on the left now?
-              if ( posX < wsl )
-                posX = wsl;
-            }
-            else
-            {
-              //shift the menu to the left until it fits
-              posX -= posX + width - (ww + wsl);
-            }
-          }
-        }
-
-        //set position
-        this.$eDIV.css({left: posX, top: posY});
-      },
-      onClick : function(e)
-      {
-        if ( this.visible )
-        {
-          this.hide();
-          this.setActive(); //the class is removed in the hide() method..add it again
-        }
-        else
-        {
-          //close all open menus
-          $.Menu.closeAll();
-          this.show(e);
-        }
-      },
-      addTimer : function(callback, delay)
-      {
-        var self = this;
-        this.timer = setTimeout(function(){
-          callback.call(self);
-          self.timer = null;
-        }, delay);
-      },
-      removeTimer : function()
-      {
-        if ( this.timer )
-        {
-          clearTimeout(this.timer);
-          this.timer = null;
-        }
-      },
-      selectNextItem : function(offset)
-      {
-        var i, pos = 0,
-          mil = this.menuItems.length,
-          o = offset || 1;
-        
-        //get current pos
-        for ( i = 0; i < mil; i++ )
-        {
-          if ( this.menuItems[i].active )
-          {
-            pos = i;
-            break;
-          }
-        }
-        this.menuItems[pos].hoverOut();
-
-        do //jump over the separators
-        {
-          pos += o;
-          if ( pos >= mil )
-            pos = 0;
-          else if ( pos < 0 )
-            pos = mil - 1;
-        } while ( this.menuItems[pos].separator );
-        this.menuItems[pos].hoverIn(true);
-      },
-      inMenuCollection : function()
-      {
-        var m = this;
-        while ( m.parentMenuItem )
-          m = m.parentMenuItem.parentMenu;
-        return m.menuCollection ? m : null;
-      },
-      destroy : function() //delete menu
-      {
-        var pos, item;
-
-        this.hide();
-
-        //unbind events
-        if ( !this.parentMenuItem )
-          $(this.target).unbind('click').unbind('mouseover').unbind('mouseout');
-        else
-          this.$eDIV.unbind('mouseover').unbind('mouseout');
-
-        //destroy all items
-        while ( this.menuItems.length )
-        {
-          item = this.menuItems[0];
-          item.destroy();
-          delete item;
-        }
-
-        if ( (pos = $.inArray(this, menus)) > -1 )
-          menus.splice(pos, 1);
-
-        if ( this.menuCollection )
-        {
-          if ( (pos = $.inArray(this, this.menuCollection.menus)) > -1 )
-            this.menuCollection.menus.splice(pos, 1);
-        }
-          
-        this.$eDIV.remove();
-      }
-    }
-  });
-
-  $.extend({
-    MenuItem : function(obj, options)
-    {
-      if ( typeof obj == 'string' )
-        obj = {src: obj};
-
-      this.src = obj.src || '';
-      this.url = obj.url || null;
-      this.urlTarget = obj.target || null;
-      this.addClass = obj.addClass || null;
-      this.data = obj.data || null;
-
-      this.$eLI = null;
-      this.parentMenu = null;
-      this.subMenu = null;
-      this.settings = $.extend({}, defaults, options);
-      this.active = false;
-      this.enabled = true;
-      this.separator = false;
-
-      this.init();
-      
-      if ( obj.subMenu )
-        new $.Menu(this, obj.subMenu, options);
-    }
-  });
-
-  $.extend($.MenuItem, {
-    prototype : {
-      init : function()
-      {
-        var i, isStr,
-          src = this.src,
-          self = this;
-          
-        this.$eLI = $(menuItemElement.cloneNode(1));
-        if ( this.addClass )
-          this.$eLI[0].setAttribute('class', this.addClass);
-
-        if ( this.settings.addExpando && this.data )
-          this.$eLI[0].menuData = this.data;
-          
-        if ( src == '' )
-        {
-          this.$eLI.addClass('menu-separator');
-          this.separator = true;
-        }
-        else
-        {
-          isStr = typeof src == 'string';
-          if ( isStr && this.url ) //create a link node, when we have an url
-            src = $('<a href="' + this.url + '"' + (this.urlTarget ? 'target="' + this.urlTarget + '"' : '') + '>' + src + '</a>');
-          else if ( isStr || !src.length )
-            src = [src];
-          //go through the passed DOM-Elements (or jquery objects or text nodes.) and append them to the menus list item
-          //this.$eLI.append(this.src) is really slow when having a lot(!!!) of items
-          for ( i = 0; i < src.length; i++ )
-          {
-            if ( typeof src[i] == 'string' )
-            {
-              //we cant use createTextNode, as html entities won't be displayed correctly (eg. &copy;)
-              elem = document.createElement('span');
-              elem.innerHTML = src[i];
-              this.$eLI[0].firstChild.appendChild(elem);
-            }
-            else
-              this.$eLI[0].firstChild.appendChild(src[i].cloneNode(1));
-          }
-        }
-
-        this.$eLI.click(function(e){
-          self.click(e, this);
-        });
-        this.bindHover();
-      },
-      click : function(e, scope)
-      {
-        if ( this.enabled && this.settings.onClick )
-          this.settings.onClick.call(scope, e, this);
-      },
-      bindHover : function()
-      {
-        var self = this;
-        this.$eLI.hover(function(){
-            self.hoverIn();
-          }, function(){
-            self.hoverOut();
-        });
-      },
-      hoverIn : function(noSubMenu)
-      {
-        this.removeTimer();
-
-        var i, 
-          pms = this.parentMenu.subMenus,
-          pmi = this.parentMenu.menuItems,
-          self = this;
-
-        //remove the timer from the parent item, when there is one (e.g. to close the menu)
-        if ( this.parentMenu.timer )
-          this.parentMenu.removeTimer();
-
-        if ( !this.enabled )
-          return;
-          
-        //deactivate all menuItems on the same level
-        for ( i = 0; i < pmi.length; i++ )
-        {
-          if ( pmi[i].active )
-            pmi[i].setInactive();
-        }
-
-        this.setActive();
-        activeMenu = this.parentMenu;
-
-        //are there open submenus on the same level? close them!
-        for ( i = 0; i < pms.length; i++ )
-        {
-          if ( pms[i].visible && pms[i] != this.subMenu && !pms[i].timer ) //close if there is no closetimer running already
-            pms[i].addTimer(function(){
-              this.hide();
-            }, pms[i].settings.hideDelay);
-        }
-
-        if ( this.subMenu && !noSubMenu )
-        {
-          //set timeout to show menu
-          this.subMenu.addTimer(function(){
-            this.show();
-          }, this.subMenu.settings.showDelay);
-        }
-      },
-      hoverOut : function()
-      {
-        this.removeTimer();
-
-        if ( !this.enabled )
-          return;
-        
-        if ( !this.subMenu || !this.subMenu.visible )
-          this.setInactive();
-      },
-      removeTimer : function()
-      {
-        if ( this.subMenu )
-        {
-          this.subMenu.removeTimer();
-        }
-      },
-      setActive : function()
-      {
-        this.active = true;
-        this.$eLI.addClass('active');
-
-        //set the parent menu item active too if necessary
-        var pmi = this.parentMenu.parentMenuItem;
-        if ( pmi && !pmi.active )
-          pmi.setActive();
-
-        activeItem = this;
-      },
-      setInactive : function()
-      {
-        this.active = false;
-        this.$eLI.removeClass('active');
-        if ( this == activeItem )
-          activeItem = null;
-      },
-      enable : function()
-      {
-        this.$eLI.removeClass('disabled');
-        this.enabled = true;
-      },
-      disable : function()
-      {
-        this.$eLI.addClass('disabled');
-        this.enabled = false;
-      },
-      destroy : function()
-      {
-        this.removeTimer();
-
-        this.$eLI.remove();
-
-        //unbind events
-        this.$eLI.unbind('mouseover').unbind('mouseout').unbind('click');
-        //delete submenu
-        if ( this.subMenu )
-        {
-          this.subMenu.destroy();
-          delete this.subMenu;
-        }
-        this.parentMenu.removeItem(this);
-      },
-      addSubMenu : function(menu)
-      {
-        if ( this.subMenu )
-          return;
-        this.subMenu = menu;
-        if ( this.parentMenu && $.inArray(menu, this.parentMenu.subMenus) == -1 )
-          this.parentMenu.subMenus.push(menu);
-        if ( this.settings.arrowSrc )
-        {
-          var a = arrowElement.cloneNode(0);
-          a.setAttribute('src', this.settings.arrowSrc);
-          this.$eLI[0].firstChild.appendChild(a);
-        }
-      }
-    }
-  });
-  
-  
-  $.extend($.fn, {
-    menuFromElement : function(options, list, bar)
-    {
-      var createItems = function(ul)
-      {
-        var menuItems = [], 
-          subItems,
-          menuItem,
-          lis, $li, i, subUL, submenu, target, 
-          classNames = null;
-
-        lis = getAllChilds(ul, 'LI');
-        for ( i = 0; i < lis.length; i++ )
-        {
-          subItems = [];
-
-          if ( !lis[i].childNodes.length ) //empty item? add separator
-          {
-            menuItems.push(new $.MenuItem('', options));
-            continue;
-          }
-
-          if ( (subUL = getOneChild(lis[i], 'UL')) )
-          {
-            subItems = createItems(subUL);
-            //remove subUL from DOM
-            $(subUL).remove();
-          }
-
-          //select the target...get the elements inside the li
-          $li = $(lis[i]);
-          if ( $li[0].childNodes.length == 1 && $li[0].childNodes[0].nodeType == 3 )
-            target = $li[0].childNodes[0].nodeValue;
-          else
-            target = $li[0].childNodes;
-            
-          if ( options && options.copyClassAttr )
-            classNames = $li.attr('class');
-            
-          //create item
-          menuItem = new $.MenuItem({src: target, addClass: classNames}, options);
-          menuItems.push(menuItem);
-          //add submenu
-          if ( subItems.length )
-            new $.Menu(menuItem, subItems, options);
-          
-        }
-        return menuItems;
-      };
-      return this.each(function()
-      {
-        var ul, m;
-        //get the list element
-        if ( list || (ul = getOneChild(this, 'UL')) )
-        {
-          //if a specific list element is used, clone it, as we probably need it more than once
-          ul = list ? $(list).clone(true)[0] : ul;
-          menuItems = createItems(ul);
-          if ( menuItems.length )
-          {
-            m = new $.Menu(this, menuItems, options);
-            if ( bar )
-              bar.addMenu(m);
-          }
-          $(ul).hide();
-        }
-      });
-    },
-    menuBarFromUL : function(options)
-    {
-      return this.each(function()
-      {
-        var i,
-          lis = getAllChilds(this, 'LI');
-        if ( lis.length )
-        {
-          bar = new $.MenuCollection();
-          for ( i = 0; i < lis.length; i++ )
-            $(lis[i]).menuFromElement(options, null, bar);
-        }
-      });
-    },
-    menu : function(options, items)
-    {
-      return this.each(function()
-      {
-        if ( items && $.isArray(items) )
-          new $.Menu(this, items, options);
-        else
-        {
-          if ( this.nodeName.toUpperCase() == 'UL' )
-            $(this).menuBarFromUL(options);
-          else
-            $(this).menuFromElement(options, items);
-        }
-      });
-    }
-  });
-
-  //faster than using jquery
-  var getOneChild = function(elem, name)
-  {
-    if ( !elem )
-      return null;
-
-    var n = elem.firstChild;
-    for ( ; n; n = n.nextSibling ) 
-    {
-      if ( n.nodeType == 1 && n.nodeName.toUpperCase() == name )
-        return n;
-    }
-    return null;
-  };
-  //faster than using jquery
-  var getAllChilds = function(elem, name)
-  {
-    if ( !elem )
-      return [];
-
-    var r = [],
-      n = elem.firstChild;
-    for ( ; n; n = n.nextSibling ) 
-    {
-      if ( n.nodeType == 1 && n.nodeName.toUpperCase() == name )
-        r[r.length] = n;
-    }
-    return r;
-  };
-
-})(jQuery);
-    
-  }-*/;
-}
diff --git a/jsquery/src/main/java/gwtquery/jsquery/client/JsQuery.java b/jsquery/src/main/java/gwtquery/jsquery/client/JsQuery.java
index d18a5d8c..f5f2b386 100644
--- a/jsquery/src/main/java/gwtquery/jsquery/client/JsQuery.java
+++ b/jsquery/src/main/java/gwtquery/jsquery/client/JsQuery.java
@@ -1,5 +1,7 @@
 package gwtquery.jsquery.client;
 
+import gwtquery.jsquery.client.plugins.menu.JsMenu;
+
 import java.util.logging.Logger;
 
 import com.google.gwt.core.client.EntryPoint;
@@ -26,22 +28,14 @@ public class JsQuery implements EntryPoint {
 //    testJs();
   }
   
+  /**
+   * Useful to paste js code here and test in dev mode
+   */
   private native static void testJs() /*-{
     var l = @gwtquery.jsquery.client.utils.JsQueryUtils::log(Ljava/lang/Object;);
+    window = $wnd;
+    document = $doc;
+    $ = $wnd.$;
     
-  var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', copyClassAttr: true, onClick: function(e, menuItem){
-    alert('you clicked item "' + $(this).text() + '"');
-  }};
-  $('#menuone').menu(options);
-  
-    var items = [ {src: 'test', url:'http://www.jquery.com'},
-          {src: ''}, // separator
-          {src: 'test2', subMenu: [ {src: 'sub 1'},
-                        {src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'},
-                        {src: 'sub 3'}]}];
-    $('#menutwo').menu(options, items);
-  
-  
   }-*/;
-  
 }
diff --git a/jsquery/src/main/java/gwtquery/jsquery/client/jsmenu.diff b/jsquery/src/main/java/gwtquery/jsquery/client/jsmenu.diff
deleted file mode 100644
index a9ac0d20..00000000
--- a/jsquery/src/main/java/gwtquery/jsquery/client/jsmenu.diff
+++ /dev/null
@@ -1,69 +0,0 @@
---- query.menu.js	2012-03-17 21:13:29.000000000 +0100
-+++ JsMenu.java	2012-03-17 21:04:09.000000000 +0100
-@@ -114,7 +113,7 @@
- 			this.openTimer = null;
- 
- 			this.init();
--			if ( items && items.constructor == Array )
-+      if ( items && $.isArray(items) )
- 				this.addItems(items);
- 		}
- 	});
-@@ -132,11 +129,15 @@
- 			while ( t.parentNode && t.parentNode != $rootDiv[0] )
- 				t = t.parentNode;
- 
--			//is the found node one of the visible menu elements?
--			if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
--			{
--				$.Menu.closeAll();
--			}
-+      // FIXME: why do we need a timeout
-+      setTimeout($.Menu.closeAll, 100);
-+
-+      // FIXME: JsQuery each doesn't work with arrays
-+      // if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
-+      // {
-+      //  $.Menu.closeAll();
-+      // }
-+      return true;
- 		},
- 		checkKey : function(e)
- 		{
-@@ -395,7 +394,7 @@
- 					this.$eDIV.css({display:'none', visibility: ''}).show();
- 
- 					//IEs default width: auto is bad! ie6 and ie7 have are producing different errors.. (7 = 5px shadowbox + 2px border)
--					if ( $.browser.msie )
-+          if ( 0) //$.browser.msie )
- 						this.$eUL.css('width', parseInt($.browser.version) == 6 ? this.$eDIV.width() - 7 : this.$eUL.width());
- 
- 					if ( this.settings.onOpen )
-@@ -437,7 +438,7 @@
- 				}
- 
- 				//y-pos
--				if ( $.fn.scrollTop )
-+        if ($().scrollTop )
- 				{
- 					wst = $(window).scrollTop();
- 					if ( wh < height ) //menu is bigger than the window
-@@ -476,7 +477,7 @@
- 					}
- 				}
- 				//x-pos
--				if ( $.fn.scrollLeft )
-+        if ($().scrollLeft )
- 				{
- 					wsl = $(window).scrollLeft();
- 					if ( ww + wsl < posX + width )
-@@ -898,7 +897,7 @@
- 		{
- 			return this.each(function()
- 			{
--				if ( items && items.constructor == Array )
-+        if ( items && $.isArray(items) )
- 					new $.Menu(this, items, options);
- 				else
- 				{
-
diff --git a/jsquery/src/main/java/gwtquery/jsquery/client/plugins/menu/JsMenu.java b/jsquery/src/main/java/gwtquery/jsquery/client/plugins/menu/JsMenu.java
new file mode 100644
index 00000000..28ce5699
--- /dev/null
+++ b/jsquery/src/main/java/gwtquery/jsquery/client/plugins/menu/JsMenu.java
@@ -0,0 +1,946 @@
+package gwtquery.jsquery.client.plugins.menu;
+
+/**
+ * 
+ * This class wraps the jquery menu plugin from:
+ * 
+ * http://p.sohei.org/jquery-plugins/menu/
+ *
+ */
+public abstract class JsMenu {
+  
+  public static native void loadPlugin() /*-{
+  var l = @gwtquery.jsquery.client.utils.JsQueryUtils::log(Ljava/lang/Object;);
+  var window = $wnd;
+  var document = $doc;
+  var jQuery = $wnd.$;
+  
+(function($)
+{
+  var menus = [], //list of all menus
+    visibleMenus = [], //list of all visible menus
+    activeMenu = activeItem = null,
+    menuDIVElement = $('<div class="menu-div outerbox" style="position:absolute;top:0;left:0;display:none;"><div class="shadowbox1"></div><div class="shadowbox2"></div><div class="shadowbox3"></div></div>')[0],
+    menuULElement = $('<ul class="menu-ul innerbox"></ul>')[0],
+    menuItemElement = $('<li style="position:relative;"><div class="menu-item"></div></li>')[0],
+    arrowElement = $('<img class="menu-item-arrow" />')[0],
+    $rootDiv = $('<div id="root-menu-div" style="position:absolute;top:0;left:0;"></div>'), //create main menu div
+    defaults = {
+      // $.Menu options
+      showDelay : 200,
+      hideDelay : 200,
+      hoverOpenDelay: 0,
+      offsetTop : 0,
+      offsetLeft : 0,
+      minWidth: 0,
+      onOpen: null,
+      onClose: null,
+
+      // $.MenuItem options
+      onClick: null,
+      arrowSrc: null,
+      addExpando: false,
+      
+      // $.fn.menuFromElement options
+      copyClassAttr: false
+    };
+    
+  $(function(){
+    $rootDiv.appendTo('body');
+  });
+
+  $.extend({
+    MenuCollection : function(items) {
+    
+      this.menus = [];
+    
+      this.init(items);
+    }
+  });
+  $.extend($.MenuCollection, {
+    prototype : {
+      init : function(items)
+      {
+        if ( items && items.length )
+        {
+          for ( var i = 0; i < items.length; i++ )
+          {
+            this.addMenu(items[i]);
+            items[i].menuCollection = this;
+          }
+        }
+      },
+      addMenu : function(menu)
+      {
+        if ( menu instanceof $.Menu )
+          this.menus.push(menu);
+        
+        menu.menuCollection = this;
+      
+        var self = this;
+        $(menu.target).hover(function(){
+          if ( menu.visible )
+            return;
+
+          //when there is an open menu in this collection, hide it and show the new one
+          for ( var i = 0; i < self.menus.length; i++ )
+          {
+            if ( self.menus[i].visible )
+            {
+              self.menus[i].hide();
+              menu.show();
+              return;
+            }
+          }
+        }, function(){});
+      }
+    }
+  });
+
+  $.extend({
+    Menu : function(target, items, options) {
+      this.menuItems = []; //all direct child $.MenuItem objects
+      this.subMenus = []; //all subMenus from this.menuItems
+      this.visible = false;
+      this.active = false; //this menu has hover or one of its submenus is open
+      this.parentMenuItem = null;
+      this.settings = $.extend({}, defaults, options);
+      this.target = target;
+      this.$eDIV = null;
+      this.$eUL = null;
+      this.timer = null;
+      this.menuCollection = null;
+      this.openTimer = null;
+
+      this.init();
+      if ( items && $.isArray(items) )
+        this.addItems(items);
+    }
+  });
+  $.extend($.Menu, {
+    checkMouse : function(e)
+    {
+      var t = e.target;
+      //the user clicked on the target of the currenty open menu
+      if ( visibleMenus.length && t == visibleMenus[0].target )
+        return;
+      
+      //get the last node before the #root-menu-div
+      while ( t.parentNode && t.parentNode != $rootDiv[0] )
+        t = t.parentNode;
+
+      // FIXME: why do we need a timeout
+      setTimeout($.Menu.closeAll, 100);
+
+      // FIXME: JsQuery each doesn't work with arrays
+      // if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
+      // {
+      //  $.Menu.closeAll();
+      // }
+      return true;
+    },
+    checkKey : function(e)
+    {
+      switch ( e.keyCode )
+      {
+        case 13: //return
+          if ( activeItem )
+            activeItem.click(e, activeItem.$eLI[0]);
+          break;
+        case 27: //ESC
+          $.Menu.closeAll();
+          break;
+        case 37: //left
+          if ( !activeMenu )
+            activeMenu = visibleMenus[0];
+          var a = activeMenu;
+          if ( a && a.parentMenuItem ) //select the parent menu and close the submenu
+          {
+            //unbind the events temporary, as we dont want the hoverout event to fire
+            var pmi = a.parentMenuItem;
+            pmi.$eLI.unbind('mouseout').unbind('mouseover');
+            a.hide();
+            pmi.hoverIn(true);
+            setTimeout(function(){ //bind again..but delay it
+              pmi.bindHover();
+            });
+          }
+          else if ( a && a.menuCollection ) //select the previous menu in the collection
+          {
+            var pos,
+              mcm = a.menuCollection.menus;
+            if ( (pos = $.inArray(a, mcm)) > -1 )
+            {
+              if ( --pos < 0 )
+                pos = mcm.length - 1;
+              $.Menu.closeAll();
+              mcm[pos].show();
+              mcm[pos].setActive();
+              if ( mcm[pos].menuItems.length ) //select the first item
+                mcm[pos].menuItems[0].hoverIn(true);
+            }
+          }
+          break;
+        case 38: //up
+          if ( activeMenu )
+            activeMenu.selectNextItem(-1);
+          break;
+        case 39: //right
+          if ( !activeMenu )
+            activeMenu = visibleMenus[0];
+          var m,
+            a = activeMenu,
+            asm = activeItem ? activeItem.subMenu : null;
+          if ( a )
+          {
+            if ( asm && asm.menuItems.length ) //select the submenu
+            {
+              asm.show();
+              asm.menuItems[0].hoverIn();
+            }
+            else if ( (a = a.inMenuCollection()) ) //select the next menu in the collection
+            {
+              var pos,
+                mcm = a.menuCollection.menus;
+              if ( (pos = $.inArray(a, mcm)) > -1 )
+              {
+                if ( ++pos >= mcm.length )
+                  pos = 0;
+                $.Menu.closeAll();
+                mcm[pos].show();
+                mcm[pos].setActive();
+                if ( mcm[pos].menuItems.length ) //select the first item
+                  mcm[pos].menuItems[0].hoverIn(true);
+              }
+            }
+          }
+          break;
+        case 40: //down
+          if ( !activeMenu )
+          {
+            if ( visibleMenus.length && visibleMenus[0].menuItems.length )
+              visibleMenus[0].menuItems[0].hoverIn();
+          }
+          else
+            activeMenu.selectNextItem();
+          break;
+      }
+      if ( e.keyCode > 36 && e.keyCode < 41 )
+        return false; //this will prevent scrolling
+    },
+    closeAll : function()
+    {
+      while ( visibleMenus.length )
+        visibleMenus[0].hide();
+    },
+    setDefaults : function(d)
+    {
+      $.extend(defaults, d);
+    },
+    prototype : {
+
+      init : function()
+      {
+        var self = this;
+        if ( !this.target )
+          return;
+        else if ( this.target instanceof $.MenuItem )
+        {
+          this.parentMenuItem = this.target;
+          this.target.addSubMenu(this);
+          this.target = this.target.$eLI;
+        }
+
+        menus.push(this);
+
+        //use the dom methods instead the ones from jquery (faster)
+        this.$eDIV = $(menuDIVElement.cloneNode(1));
+        this.$eUL = $(menuULElement.cloneNode(1));
+        this.$eDIV[0].appendChild(this.$eUL[0]);
+        $rootDiv[0].appendChild(this.$eDIV[0]);
+
+        //bind events
+        if ( !this.parentMenuItem )
+        {
+          $(this.target).click(function(e){
+            self.onClick(e);
+          }).hover(function(e){
+            self.setActive();
+
+            if ( self.settings.hoverOpenDelay )
+            {
+              self.openTimer = setTimeout(function(){
+                if ( !self.visible )
+                  self.onClick(e);
+              }, self.settings.hoverOpenDelay);
+            }
+          }, function(){
+            if ( !self.visible )
+              $(this).removeClass('activetarget');
+
+            if ( self.openTimer )
+              clearTimeout(self.openTimer);
+          });
+        }
+        else
+        {
+          this.$eDIV.hover(function(){
+            self.setActive();
+          }, function(){});
+        }
+      },
+      setActive : function()
+      {
+        if ( !this.parentMenuItem )
+          $(this.target).addClass('activetarget');
+        else
+          this.active = true;
+      },
+      addItem : function(item)
+      {
+        if ( item instanceof $.MenuItem )
+        {
+          if ( $.inArray(item, this.menuItems) == -1 )
+          {
+            this.$eUL.append(item.$eLI);
+            this.menuItems.push(item);
+            item.parentMenu = this;
+            if ( item.subMenu )
+              this.subMenus.push(item.subMenu);
+          }
+        }
+        else
+        {
+          this.addItem(new $.MenuItem(item, this.settings));
+        }
+      },
+      addItems : function(items)
+      {
+        for ( var i = 0; i < items.length; i++ )
+        {
+          this.addItem(items[i]);
+        }
+      },
+      removeItem : function(item)
+      {
+        var pos = $.inArray(item, this.menuItems);
+        if ( pos > -1 )
+          this.menuItems.splice(pos, 1);
+        item.parentMenu = null;
+      },
+      hide : function()
+      {
+        if ( !this.visible )
+          return;
+        
+        var i, 
+          pos = $.inArray(this, visibleMenus);
+
+        this.$eDIV.hide();
+
+        if ( pos >= 0 )
+          visibleMenus.splice(pos, 1);
+        this.visible = this.active = false;
+
+        $(this.target).removeClass('activetarget');
+
+        //hide all submenus
+        for ( i = 0; i < this.subMenus.length; i++ )
+        {
+          this.subMenus[i].hide();
+        }
+
+        //set all items inactive (e.g. remove hover class..)
+        for ( i = 0; i < this.menuItems.length; i++ )
+        {
+          if ( this.menuItems[i].active )
+            this.menuItems[i].setInactive();
+        }
+
+        if ( !visibleMenus.length ) //unbind events when the last menu was closed
+          $(document).unbind('mousedown', $.Menu.checkMouse).unbind('keydown', $.Menu.checkKey);
+
+        if ( activeMenu == this )
+          activeMenu = null;
+          
+        if ( this.settings.onClose )
+          this.settings.onClose.call(this);
+      },
+      show : function(e)
+      {
+        if ( this.visible )
+          return;
+
+        var zi, 
+          pmi = this.parentMenuItem;
+
+        if ( this.menuItems.length ) //show only when it has items
+        {
+          if ( pmi ) //set z-index
+          {
+            zi = parseInt(pmi.parentMenu.$eDIV.css('z-index'));
+            this.$eDIV.css('z-index', (isNaN(zi) ? 1 : zi + 1));
+          }
+          this.$eDIV.css({visibility: 'hidden', display:'block'});
+
+          //set min-width
+          if ( this.settings.minWidth )
+          {
+            if ( this.$eDIV.width() < this.settings.minWidth )
+              this.$eDIV.css('width', this.settings.minWidth);
+          }
+          
+          this.setPosition();
+          this.$eDIV.css({display:'none', visibility: ''}).show();
+
+          //IEs default width: auto is bad! ie6 and ie7 have are producing different errors.. (7 = 5px shadowbox + 2px border)
+          if ( 0) //$.browser.msie )
+            this.$eUL.css('width', parseInt($.browser.version) == 6 ? this.$eDIV.width() - 7 : this.$eUL.width());
+
+          if ( this.settings.onOpen )
+            this.settings.onOpen.call(this);
+        }
+        
+        if ( visibleMenus.length == 0 )
+          $(document).bind('mousedown', $.Menu.checkMouse).bind('keydown', $.Menu.checkKey);
+
+        this.visible = true;
+        visibleMenus.push(this);
+      },
+      setPosition : function()
+      {
+        var $t, o, posX, posY, 
+          pmo, //parent menu offset
+          wst, //window scroll top
+          wsl, //window scroll left
+          ww = $(window).width(), 
+          wh = $(window).height(),
+          pmi = this.parentMenuItem,
+          height = this.$eDIV[0].clientHeight,
+          width = this.$eDIV[0].clientWidth,
+          pheight; //parent height
+
+        if ( pmi )
+        {
+          //position on the right side of the parent menu item
+          o = pmi.$eLI.offset();
+          posX = o.left + pmi.$eLI.width();
+          posY = o.top;
+        }
+        else
+        {
+          //position right below the target
+          $t = $(this.target);
+          o = $t.offset();
+          
+          posX = o.left + this.settings.offsetLeft;
+          posY = o.top + $t.height() + this.settings.offsetTop;
+        }
+
+        //y-pos
+        if ($().scrollTop )
+        {
+          wst = $(window).scrollTop();
+          if ( wh < height ) //menu is bigger than the window
+          {
+            //position the menu at the top of the visible area
+            posY = wst;
+          }
+          else if ( wh + wst < posY + height ) //outside on the bottom?
+          {
+            if ( pmi )
+            {
+              pmo = pmi.parentMenu.$eDIV.offset();
+              pheight = pmi.parentMenu.$eDIV[0].clientHeight;
+              if ( height <= pheight )
+              {
+                //bottom position = parentmenu-bottom position
+                posY = pmo.top + pheight - height;
+              }
+              else
+              {
+                //top position = parentmenu-top position
+                posY = pmo.top;
+              }
+              //still outside on the bottom?
+              if ( wh + wst < posY + height )
+              {
+                //shift the menu upwards till the bottom is visible
+                posY -= posY + height - (wh + wst);
+              }
+            }
+            else
+            {
+              //shift the menu upwards till the bottom is visible
+              posY -= posY + height - (wh + wst);
+            }
+          }
+        }
+        //x-pos
+        if ($().scrollLeft )
+        {
+          wsl = $(window).scrollLeft();
+          if ( ww + wsl < posX + width )
+          {
+            if ( pmi )
+            {
+              //display the menu not on the right side but on the left side
+              posX -= pmi.$eLI.width() + width;
+              //outside on the left now?
+              if ( posX < wsl )
+                posX = wsl;
+            }
+            else
+            {
+              //shift the menu to the left until it fits
+              posX -= posX + width - (ww + wsl);
+            }
+          }
+        }
+
+        //set position
+        this.$eDIV.css({left: posX, top: posY});
+      },
+      onClick : function(e)
+      {
+        if ( this.visible )
+        {
+          this.hide();
+          this.setActive(); //the class is removed in the hide() method..add it again
+        }
+        else
+        {
+          //close all open menus
+          $.Menu.closeAll();
+          this.show(e);
+        }
+      },
+      addTimer : function(callback, delay)
+      {
+        var self = this;
+        this.timer = setTimeout(function(){
+          callback.call(self);
+          self.timer = null;
+        }, delay);
+      },
+      removeTimer : function()
+      {
+        if ( this.timer )
+        {
+          clearTimeout(this.timer);
+          this.timer = null;
+        }
+      },
+      selectNextItem : function(offset)
+      {
+        var i, pos = 0,
+          mil = this.menuItems.length,
+          o = offset || 1;
+        
+        //get current pos
+        for ( i = 0; i < mil; i++ )
+        {
+          if ( this.menuItems[i].active )
+          {
+            pos = i;
+            break;
+          }
+        }
+        this.menuItems[pos].hoverOut();
+
+        do //jump over the separators
+        {
+          pos += o;
+          if ( pos >= mil )
+            pos = 0;
+          else if ( pos < 0 )
+            pos = mil - 1;
+        } while ( this.menuItems[pos].separator );
+        this.menuItems[pos].hoverIn(true);
+      },
+      inMenuCollection : function()
+      {
+        var m = this;
+        while ( m.parentMenuItem )
+          m = m.parentMenuItem.parentMenu;
+        return m.menuCollection ? m : null;
+      },
+      destroy : function() //delete menu
+      {
+        var pos, item;
+
+        this.hide();
+
+        //unbind events
+        if ( !this.parentMenuItem )
+          $(this.target).unbind('click').unbind('mouseover').unbind('mouseout');
+        else
+          this.$eDIV.unbind('mouseover').unbind('mouseout');
+
+        //destroy all items
+        while ( this.menuItems.length )
+        {
+          item = this.menuItems[0];
+          item.destroy();
+          delete item;
+        }
+
+        if ( (pos = $.inArray(this, menus)) > -1 )
+          menus.splice(pos, 1);
+
+        if ( this.menuCollection )
+        {
+          if ( (pos = $.inArray(this, this.menuCollection.menus)) > -1 )
+            this.menuCollection.menus.splice(pos, 1);
+        }
+          
+        this.$eDIV.remove();
+      }
+    }
+  });
+
+  $.extend({
+    MenuItem : function(obj, options)
+    {
+      if ( typeof obj == 'string' )
+        obj = {src: obj};
+
+      this.src = obj.src || '';
+      this.url = obj.url || null;
+      this.urlTarget = obj.target || null;
+      this.addClass = obj.addClass || null;
+      this.data = obj.data || null;
+
+      this.$eLI = null;
+      this.parentMenu = null;
+      this.subMenu = null;
+      this.settings = $.extend({}, defaults, options);
+      this.active = false;
+      this.enabled = true;
+      this.separator = false;
+
+      this.init();
+      
+      if ( obj.subMenu )
+        new $.Menu(this, obj.subMenu, options);
+    }
+  });
+
+  $.extend($.MenuItem, {
+    prototype : {
+      init : function()
+      {
+        var i, isStr,
+          src = this.src,
+          self = this;
+          
+        this.$eLI = $(menuItemElement.cloneNode(1));
+        if ( this.addClass )
+          this.$eLI[0].setAttribute('class', this.addClass);
+
+        if ( this.settings.addExpando && this.data )
+          this.$eLI[0].menuData = this.data;
+          
+        if ( src == '' )
+        {
+          this.$eLI.addClass('menu-separator');
+          this.separator = true;
+        }
+        else
+        {
+          isStr = typeof src == 'string';
+          if ( isStr && this.url ) //create a link node, when we have an url
+            src = $('<a href="' + this.url + '"' + (this.urlTarget ? 'target="' + this.urlTarget + '"' : '') + '>' + src + '</a>');
+          else if ( isStr || !src.length )
+            src = [src];
+          //go through the passed DOM-Elements (or jquery objects or text nodes.) and append them to the menus list item
+          //this.$eLI.append(this.src) is really slow when having a lot(!!!) of items
+          for ( i = 0; i < src.length; i++ )
+          {
+            if ( typeof src[i] == 'string' )
+            {
+              //we cant use createTextNode, as html entities won't be displayed correctly (eg. &copy;)
+              elem = document.createElement('span');
+              elem.innerHTML = src[i];
+              this.$eLI[0].firstChild.appendChild(elem);
+            }
+            else
+              this.$eLI[0].firstChild.appendChild(src[i].cloneNode(1));
+          }
+        }
+
+        this.$eLI.click(function(e){
+          self.click(e, this);
+        });
+        this.bindHover();
+      },
+      click : function(e, scope)
+      {
+        if ( this.enabled && this.settings.onClick )
+          this.settings.onClick.call(scope, e, this);
+      },
+      bindHover : function()
+      {
+        var self = this;
+        this.$eLI.hover(function(){
+            self.hoverIn();
+          }, function(){
+            self.hoverOut();
+        });
+      },
+      hoverIn : function(noSubMenu)
+      {
+        this.removeTimer();
+
+        var i, 
+          pms = this.parentMenu.subMenus,
+          pmi = this.parentMenu.menuItems,
+          self = this;
+
+        //remove the timer from the parent item, when there is one (e.g. to close the menu)
+        if ( this.parentMenu.timer )
+          this.parentMenu.removeTimer();
+
+        if ( !this.enabled )
+          return;
+          
+        //deactivate all menuItems on the same level
+        for ( i = 0; i < pmi.length; i++ )
+        {
+          if ( pmi[i].active )
+            pmi[i].setInactive();
+        }
+
+        this.setActive();
+        activeMenu = this.parentMenu;
+
+        //are there open submenus on the same level? close them!
+        for ( i = 0; i < pms.length; i++ )
+        {
+          if ( pms[i].visible && pms[i] != this.subMenu && !pms[i].timer ) //close if there is no closetimer running already
+            pms[i].addTimer(function(){
+              this.hide();
+            }, pms[i].settings.hideDelay);
+        }
+
+        if ( this.subMenu && !noSubMenu )
+        {
+          //set timeout to show menu
+          this.subMenu.addTimer(function(){
+            this.show();
+          }, this.subMenu.settings.showDelay);
+        }
+      },
+      hoverOut : function()
+      {
+        this.removeTimer();
+
+        if ( !this.enabled )
+          return;
+        
+        if ( !this.subMenu || !this.subMenu.visible )
+          this.setInactive();
+      },
+      removeTimer : function()
+      {
+        if ( this.subMenu )
+        {
+          this.subMenu.removeTimer();
+        }
+      },
+      setActive : function()
+      {
+        this.active = true;
+        this.$eLI.addClass('active');
+
+        //set the parent menu item active too if necessary
+        var pmi = this.parentMenu.parentMenuItem;
+        if ( pmi && !pmi.active )
+          pmi.setActive();
+
+        activeItem = this;
+      },
+      setInactive : function()
+      {
+        this.active = false;
+        this.$eLI.removeClass('active');
+        if ( this == activeItem )
+          activeItem = null;
+      },
+      enable : function()
+      {
+        this.$eLI.removeClass('disabled');
+        this.enabled = true;
+      },
+      disable : function()
+      {
+        this.$eLI.addClass('disabled');
+        this.enabled = false;
+      },
+      destroy : function()
+      {
+        this.removeTimer();
+
+        this.$eLI.remove();
+
+        //unbind events
+        this.$eLI.unbind('mouseover').unbind('mouseout').unbind('click');
+        //delete submenu
+        if ( this.subMenu )
+        {
+          this.subMenu.destroy();
+          delete this.subMenu;
+        }
+        this.parentMenu.removeItem(this);
+      },
+      addSubMenu : function(menu)
+      {
+        if ( this.subMenu )
+          return;
+        this.subMenu = menu;
+        if ( this.parentMenu && $.inArray(menu, this.parentMenu.subMenus) == -1 )
+          this.parentMenu.subMenus.push(menu);
+        if ( this.settings.arrowSrc )
+        {
+          var a = arrowElement.cloneNode(0);
+          a.setAttribute('src', this.settings.arrowSrc);
+          this.$eLI[0].firstChild.appendChild(a);
+        }
+      }
+    }
+  });
+  
+  
+  $.extend($.fn, {
+    menuFromElement : function(options, list, bar)
+    {
+      var createItems = function(ul)
+      {
+        var menuItems = [], 
+          subItems,
+          menuItem,
+          lis, $li, i, subUL, submenu, target, 
+          classNames = null;
+
+        lis = getAllChilds(ul, 'LI');
+        for ( i = 0; i < lis.length; i++ )
+        {
+          subItems = [];
+
+          if ( !lis[i].childNodes.length ) //empty item? add separator
+          {
+            menuItems.push(new $.MenuItem('', options));
+            continue;
+          }
+
+          if ( (subUL = getOneChild(lis[i], 'UL')) )
+          {
+            subItems = createItems(subUL);
+            //remove subUL from DOM
+            $(subUL).remove();
+          }
+
+          //select the target...get the elements inside the li
+          $li = $(lis[i]);
+          if ( $li[0].childNodes.length == 1 && $li[0].childNodes[0].nodeType == 3 )
+            target = $li[0].childNodes[0].nodeValue;
+          else
+            target = $li[0].childNodes;
+            
+          if ( options && options.copyClassAttr )
+            classNames = $li.attr('class');
+            
+          //create item
+          menuItem = new $.MenuItem({src: target, addClass: classNames}, options);
+          menuItems.push(menuItem);
+          //add submenu
+          if ( subItems.length )
+            new $.Menu(menuItem, subItems, options);
+          
+        }
+        return menuItems;
+      };
+      return this.each(function()
+      {
+        var ul, m;
+        //get the list element
+        if ( list || (ul = getOneChild(this, 'UL')) )
+        {
+          //if a specific list element is used, clone it, as we probably need it more than once
+          ul = list ? $(list).clone(true)[0] : ul;
+          menuItems = createItems(ul);
+          if ( menuItems.length )
+          {
+            m = new $.Menu(this, menuItems, options);
+            if ( bar )
+              bar.addMenu(m);
+          }
+          $(ul).hide();
+        }
+      });
+    },
+    menuBarFromUL : function(options)
+    {
+      return this.each(function()
+      {
+        var i,
+          lis = getAllChilds(this, 'LI');
+        if ( lis.length )
+        {
+          bar = new $.MenuCollection();
+          for ( i = 0; i < lis.length; i++ )
+            $(lis[i]).menuFromElement(options, null, bar);
+        }
+      });
+    },
+    menu : function(options, items)
+    {
+      return this.each(function()
+      {
+        if ( items && $.isArray(items) )
+          new $.Menu(this, items, options);
+        else
+        {
+          if ( this.nodeName.toUpperCase() == 'UL' )
+            $(this).menuBarFromUL(options);
+          else
+            $(this).menuFromElement(options, items);
+        }
+      });
+    }
+  });
+
+  //faster than using jquery
+  var getOneChild = function(elem, name)
+  {
+    if ( !elem )
+      return null;
+
+    var n = elem.firstChild;
+    for ( ; n; n = n.nextSibling ) 
+    {
+      if ( n.nodeType == 1 && n.nodeName.toUpperCase() == name )
+        return n;
+    }
+    return null;
+  };
+  //faster than using jquery
+  var getAllChilds = function(elem, name)
+  {
+    if ( !elem )
+      return [];
+
+    var r = [],
+      n = elem.firstChild;
+    for ( ; n; n = n.nextSibling ) 
+    {
+      if ( n.nodeType == 1 && n.nodeName.toUpperCase() == name )
+        r[r.length] = n;
+    }
+    return r;
+  };
+
+})(jQuery);
+    
+  }-*/;
+}
diff --git a/jsquery/src/main/java/gwtquery/jsquery/client/plugins/menu/jsmenu.diff b/jsquery/src/main/java/gwtquery/jsquery/client/plugins/menu/jsmenu.diff
new file mode 100644
index 00000000..a9ac0d20
--- /dev/null
+++ b/jsquery/src/main/java/gwtquery/jsquery/client/plugins/menu/jsmenu.diff
@@ -0,0 +1,69 @@
+--- query.menu.js	2012-03-17 21:13:29.000000000 +0100
++++ JsMenu.java	2012-03-17 21:04:09.000000000 +0100
+@@ -114,7 +113,7 @@
+ 			this.openTimer = null;
+ 
+ 			this.init();
+-			if ( items && items.constructor == Array )
++      if ( items && $.isArray(items) )
+ 				this.addItems(items);
+ 		}
+ 	});
+@@ -132,11 +129,15 @@
+ 			while ( t.parentNode && t.parentNode != $rootDiv[0] )
+ 				t = t.parentNode;
+ 
+-			//is the found node one of the visible menu elements?
+-			if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
+-			{
+-				$.Menu.closeAll();
+-			}
++      // FIXME: why do we need a timeout
++      setTimeout($.Menu.closeAll, 100);
++
++      // FIXME: JsQuery each doesn't work with arrays
++      // if ( !$(visibleMenus).filter(function(){ return this.$eDIV[0] == t }).length )
++      // {
++      //  $.Menu.closeAll();
++      // }
++      return true;
+ 		},
+ 		checkKey : function(e)
+ 		{
+@@ -395,7 +394,7 @@
+ 					this.$eDIV.css({display:'none', visibility: ''}).show();
+ 
+ 					//IEs default width: auto is bad! ie6 and ie7 have are producing different errors.. (7 = 5px shadowbox + 2px border)
+-					if ( $.browser.msie )
++          if ( 0) //$.browser.msie )
+ 						this.$eUL.css('width', parseInt($.browser.version) == 6 ? this.$eDIV.width() - 7 : this.$eUL.width());
+ 
+ 					if ( this.settings.onOpen )
+@@ -437,7 +438,7 @@
+ 				}
+ 
+ 				//y-pos
+-				if ( $.fn.scrollTop )
++        if ($().scrollTop )
+ 				{
+ 					wst = $(window).scrollTop();
+ 					if ( wh < height ) //menu is bigger than the window
+@@ -476,7 +477,7 @@
+ 					}
+ 				}
+ 				//x-pos
+-				if ( $.fn.scrollLeft )
++        if ($().scrollLeft )
+ 				{
+ 					wsl = $(window).scrollLeft();
+ 					if ( ww + wsl < posX + width )
+@@ -898,7 +897,7 @@
+ 		{
+ 			return this.each(function()
+ 			{
+-				if ( items && items.constructor == Array )
++        if ( items && $.isArray(items) )
+ 					new $.Menu(this, items, options);
+ 				else
+ 				{
+
diff --git a/jsquery/src/main/java/gwtquery/jsquery/public/JsQuery.html b/jsquery/src/main/java/gwtquery/jsquery/public/JsQuery.html
index 2006d2e7..de1c3800 100644
--- a/jsquery/src/main/java/gwtquery/jsquery/public/JsQuery.html
+++ b/jsquery/src/main/java/gwtquery/jsquery/public/JsQuery.html
@@ -9,7 +9,7 @@
   <script>
   onJsQueryLoad = function(){
     $('#hello').show().attr("width", true);
-    alert($('#hello').text());
+    $('#hello').fadeOut(1000).queue(2000).text("Hello word").fadeIn();
   }
   if (window.$) {
     $(document).ready(onJsQueryLoad);
diff --git a/jsquery/src/main/java/gwtquery/jsquery/public/arrow_right.gif b/jsquery/src/main/java/gwtquery/jsquery/public/arrow_right.gif
deleted file mode 100644
index 610344d7..00000000
Binary files a/jsquery/src/main/java/gwtquery/jsquery/public/arrow_right.gif and /dev/null differ
diff --git a/jsquery/src/main/java/gwtquery/jsquery/public/arrowdown.png b/jsquery/src/main/java/gwtquery/jsquery/public/arrowdown.png
deleted file mode 100644
index 637c8d94..00000000
Binary files a/jsquery/src/main/java/gwtquery/jsquery/public/arrowdown.png and /dev/null differ
diff --git a/jsquery/src/main/java/gwtquery/jsquery/public/demo.html b/jsquery/src/main/java/gwtquery/jsquery/public/demo.html
deleted file mode 100644
index 4168afe8..00000000
--- a/jsquery/src/main/java/gwtquery/jsquery/public/demo.html
+++ /dev/null
@@ -1,358 +0,0 @@
-<?xml version="1.0" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<title>jQuery menu plugin demo page</title>
-<link rel="stylesheet" type="text/css" href="style.css" />
-<script src="dev.nocache.js" ></script>
-<script type="text/javascript">
-
-// JsQuery will run this function after it is asynchronously loaded
-onJsQueryLoad = function(){
-	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', copyClassAttr: true, onClick: function(e, menuItem){
-		alert('you clicked item "' + $(this).text() + '"');
-	}};
-	$('#menuone').menu(options);
-
-	var items = [	{src: 'test', url:'http://www.jquery.com'},
-					{src: ''}, // separator
-					{src: 'test2', subMenu: [	{src: 'sub 1'},
-												{src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'},
-												{src: 'sub 3'}]}];
-	$('#menutwo').menu(options, items);
-	$('#menuthree').menu(options);
-	$('#menufive>img').menu(options, '#menufivelist');
-
-	//creating a menu without items
-	var menu = new $.Menu('#menufour', null, options);
-	//adding items to the menu
-	menu.addItems([
-		new $.MenuItem({src: 'test', url:'http://www.jquery.com'}, options),
-		new $.MenuItem({src: ''}) // separator
-	]);
-	var itemWithSubmenu = new $.MenuItem({src: 'test2'}, options);
-	//creating a menu with items (as child of itemWithSubmenu)
-	new $.Menu(itemWithSubmenu, [
-		new $.MenuItem({src: 'sub 1'}, options),
-		new $.MenuItem({src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'}, options),
-		new $.MenuItem({src: 'sub 3'}, options)
-	], options);
-	//adding the submenu to the main menu
-	menu.addItem(itemWithSubmenu);
-}
-
-// If jsQuery or jQuery was already loaded we use the normal way
-if (window.$) {
-  $(document).ready(onJsQueryLoad);
-  onJsQueryLoad = null;
-}
-
--->
-</script>
-</head>
-<body>
-<div id="header">
-<div class="title">jQuery Menu plugin demo</div>
-<div class="link"><a href="http://p.sohei.org/jquery-plugins/menu">plugin page</a></div>
-</div>
-
-<div class="exa">
-<h1>Available options:</h1>
-	options which affect the menu:
-	<ul>
-		<li><strong>showDelay</strong> - The number of milliseconds to wait before opening the menu after hovering over the target. Default value: 200</li>
-		<li><strong>hideDelay</strong> - The number of milliseconds to wait before closing the menu. Default value: 200</li>
-		<li><strong>hoverOpenDelay</strong> - The number of milliseconds to wait before opening the topmost-menu (root) (without clicking it!). Default value: 0 (disabled!)</li>
-		<li><strong>offsetTop</strong> - The number of pixels to offset the position of the topmost-menu (root) to the top. Default value: 0</li>
-		<li><strong>offsetLeft</strong> - The number of pixels to offset the position of the topmost-menu (root) to the left. Default value: 0</li>
-		<li><strong>minWidth</strong> - The minimal number of pixels of the menus width. Default value: 0</li></li>
-		<li><strong>onOpen</strong> - Callback function which is triggered when a menu is opened. Default value: null</li>
-		<li><strong>onClose</strong> - Callback function which is triggered when a menu is closed. Default value: null</li>
-	</ul>
-	options which affect the menuItems:
-	<ul>
-		<li><strong>onClick</strong> - Callback function which is triggered when a menuItem is clicked. The passed parameters are: the event object and the menuItem instance. Default value: null</li>
-		<li><strong>arrowSrc</strong> - URL of the image to be used as an arrow indicating a submenu. Default value: null (no arrow image!)</li>
-	</ul>
-	options which are only used, when building a menu from HTML markup:
-	<ul>
-		<li><strong>copyClassAttr</strong> - Copies the class attribute of the LI elements to the equivalent menuItems. Default value: false</li>
-	</ul>
-</div>
-
-<div class="exa">
-<h1>Example one:</h1>
-	<ul>
-		<li>create a menubar from an unordered list</li>
-		<li>used on an unordered list, the plugin takes its direct &lt;li&gt;-children, which will be the root items (File, Edit...), 
-		and searches each for an &lt;ul&gt;-child, which holds the menu-items (New window, Save, Print...).</li>
-		<li>empty &lt;li&gt;-elements are used as seperators</li>
-	</ul>
-	<div class="codeheader">JavaScript code:</div>
-	<pre name="code" class="JScript">
-	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', onClick: function(e, menuItem){
-		alert('you clicked item "' + $(this).text() + '"');
-	}};
-	$('#menuone').menu(options);
-	</pre>
-	<div class="codeheader">HTML markup:</div>
-	<pre name="code" class="html">
-	&lt;!-- note: the plugin doesn't need the classes, they're only used for styling! --&gt;
-	&lt;ul id="menuone" class="menu"&gt;
-		&lt;li class="menumain"&gt;File
-			&lt;ul&gt;&lt;li&gt;New&nbsp;window&lt;/li&gt;
-				&lt;li&gt;&lt;/li&gt; &lt;!-- separator --&gt;
-				&lt;li&gt;Save...&lt;/li&gt;
-				&lt;li&gt;Print...&lt;/li&gt;
-				&lt;li&gt;&lt;/li&gt; &lt;!-- separator --&gt;
-				&lt;li&gt;Exit&lt;/li&gt;
-			&lt;/ul&gt;
-		&lt;/li&gt;
-		&lt;li class="menumain"&gt;Edit
-			&lt;ul&gt;&lt;li&gt;Undo&lt;/li&gt;
-				&lt;li&gt;Redo&lt;/li&gt;
-				&lt;li&gt;&lt;/li&gt; &lt;!-- separator --&gt;
-				&lt;li&gt;Cut&lt;/li&gt;
-				&lt;li&gt;Copy&lt;/li&gt;
-				&lt;li&gt;Paste&lt;ul&gt;&lt;li&gt;All&lt;/li&gt;&lt;li&gt;Something&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
-				&lt;li&gt;Delete&lt;/li&gt;
-			&lt;/ul&gt;
-		&lt;/li&gt;
-		&lt;!-- ...and even more... --&gt;
-	&lt;/ul&gt;
-	</pre>
-	<div class="resultheader">Result:</div>
-	<div class="result" style="padding:0;">
-		<div style="border-bottom: 1px solid #000;background:#eee;">
-			<ul id="menuone" class="menu">
-				<li class="menumain">File
-					<ul><li>New&nbsp;window</li>
-						<li></li>
-						<li>Save...</li>
-						<li>Print...</li>
-						<li></li>
-						<li>Exit</li>
-					</ul>
-				</li>
-				<li class="menumain">Edit
-					<ul><li>Undo</li>
-						<li>Redo</li>
-						<li></li>
-						<li>Cut</li>
-						<li>Copy</li>
-						<li>Paste<ul><li>All</li><li>Something</li></ul></li>
-						<li>Delete</li>
-					</ul>
-				</li>
-				<li class="menumain">Bookmarks
-					<ul><li>Bookmark&nbsp;manager</li>
-						<li></li>
-						<li>some&nbsp;bookmark</li>
-						<li>another&nbsp;bookmark</li>
-						<li></li>
-						<li>Imported&nbsp;bookmarks
-							<ul><li>bookmark&nbsp;one</li>
-								<li>bookmark&nbsp;two</li>
-								<li>bookmark&nbsp;three</li>
-							</ul>
-						</li>
-					</ul>
-				</li>
-				<li class="menumain" style="float:right;">Help
-					<ul><li>Help&nbsp;index</li>
-						<li></li>
-						<li>About...
-							<ul>
-								<li>me</li>
-								<li>you</li>
-								<li>them</li>
-							</ul>
-						</li>
-					</ul>
-				</li>
-			</ul>
-			<div style="clear:both;"></div>
-		</div>
-		<p>..some content..</p>
-		<p>..some content..</p>
-		<p>..some content..</p>
-	</div>
-</div>
-
-<div class="exa">
-<h1>Example two:</h1>
-	<ul>
-		<li>create a menu from javascript and open it when clicking on the element with the id &quot;menutwo&quot;</li>
-		<li>when a second parameter ist passed (items), the plugin will use it as menu content</li>
-	</ul>
-	<div class="codeheader">JavaScript code:</div>
-	<pre name="code" class="JScript">
-	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
-	var items = [	{src: 'test', url:'http://www.jquery.com'}, 
-					{src: ''}, /* separator */
-					{src: 'test2', subMenu: [	{src: 'sub 1'},
-												{src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'},
-												{src: 'sub 3'}]}];
-	$('#menutwo').menu(options, items);
-	</pre>
-	<div class="codeheader">HTML markup:</div>
-	<pre name="code" class="html">
-	&lt;p&gt;&lt;span id="menutwo"&gt;Menu Button&lt;/span&gt;&lt;/p&gt;
-	</pre>
-	<div class="resultheader">Result:</div>
-	<div class="result">
-		<p>..some content..</p>
-		<p><span id="menutwo">Menu Button</span></p>
-		<p>..some content..</p>
-	</div>
-</div>
-
-<div class="exa">
-<h1>Example three:</h1>
-	<ul>
-		<li>same as example two, but without passing the items as parameter to the plugin</li>
-		<li>the plugin looks inside the elment for an unordered list, which holds the menu content</li>
-	</ul>
-	<div class="codeheader">JavaScript code:</div>
-	<pre name="code" class="JScript">
-	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
-	$('#menuthree').menu(options);
-	</pre>
-	<div class="codeheader">HTML markup:</div>
-	<pre name="code" class="html">
-	&lt;div id="menuthree"&gt;Menu Button
-		&lt;ul&gt;
-			&lt;li&gt;&lt;a href="http://www.jquery.com"&gt;test&lt;/a&gt;&lt;/li&gt;
-			&lt;li&gt;&lt;/li&gt; &lt;!-- separator --&gt;
-			&lt;li&gt;test2
-				&lt;ul&gt;
-					&lt;li&gt;sub 1&lt;/li&gt;
-					&lt;li&gt;&lt;a href="http://p.sohei.org" target="_blank"&gt;sub 2&lt;/a&gt;&lt;/li&gt;
-					&lt;li&gt;sub 3&lt;/li&gt;
-				&lt;/ul&gt;
-			&lt;/li&gt;
-		&lt;/ul&gt;
-	&lt;/div&gt;
-	</pre>
-	<div class="resultheader">Result:</div>
-	<div class="result">
-		<p>..some content..</p>
-		<div id="menuthree">Menu Button
-			<ul>
-				<li><a href="http://www.jquery.com">test</a></li>
-				<li></li>
-				<li>test2
-					<ul>
-						<li>sub 1</li>
-						<li><a href="http://p.sohei.org" target="_blank">sub 2</a></li>
-						<li>sub 3</li>
-					</ul>
-				</li>
-			</ul>
-		</div>
-		<p>..some content..</p>
-	</div>
-</div>
-
-<div class="exa">
-<h1>Example four:</h1>
-	<ul>
-		<li>same (result) as example two, but this time creating the menu by using the $.Menu and $.MenuItem classes and its methods</li>
-	</ul>
-	<div class="codeheader">JavaScript code:</div>
-	<pre name="code" class="JScript">
-	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
-
-	//creating a menu without items
-	var menu = new $.Menu('#menufour', null, options);
-
-	//adding items to the menu
-	menu.addItems([
-		new $.MenuItem({src: 'test', url:'http://www.jquery.com'}, options),
-		new $.MenuItem({src: ''}) /* separator */
-	]);
-	var itemWithSubmenu = new $.MenuItem({src: 'test2'}, options);
-
-	//creating a menu with items (as child of itemWithSubmenu)
-	new $.Menu(itemWithSubmenu, [
-		new $.MenuItem({src: 'sub 1'}, options),
-		new $.MenuItem({src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'}, options),
-		new $.MenuItem({src: 'sub 3'}, options)
-	], options);
-
-	//adding the submenu to the main menu
-	menu.addItem(itemWithSubmenu);
-	</pre>
-	<div class="codeheader">HTML markup:</div>
-	<pre name="code" class="html">
-	&lt;p&gt;&lt;span id="menufour"&gt;Menu Button&lt;/span&gt;&lt;/p&gt;
-	</pre>
-	<div class="resultheader">Result:</div>
-	<div class="result">
-		<p>..some content..</p>
-		<p><span id="menufour">Menu Button</span></p>
-		<p>..some content..</p>
-	</div>
-</div>
-
-<div class="exa">
-<h1>Example five:</h1>
-	<ul>
-		<li>related to example two, the menu items can also be passed as a jquery selector (selecting an &lt;ul&gt;-element!)</li>
-	</ul>
-	<div class="codeheader">JavaScript code:</div>
-	<pre name="code" class="JScript">
-	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', copyClassAttr: true};
-	$('#menufive>img').menu(options, '#menufivelist');
-	</pre>
-	<div class="codeheader">HTML markup:</div>
-	<pre name="code" class="html">
-	&lt;p id="menufive"&gt;Menu Button &lt;img src="arrowdown.png" /&gt; - Menu Button &lt;img src="arrowdown.png" /&gt; - Menu Button &lt;img src="arrowdown.png" /&gt;&lt;/p&gt;
-	
-	&lt;ul id="menufivelist" style="display:none;"&gt;
-		&lt;li&gt;one&lt;/li&gt;
-		&lt;li class="red"&gt;two&lt;/li&gt;
-		&lt;li class="blue"&gt;three&lt;/li&gt;
-		&lt;li&gt;four
-			&lt;ul&gt;
-				&lt;li&gt;four.1
-					&lt;ul&gt;
-						&lt;li&gt;four.1.1&lt;/li&gt;
-						&lt;li&gt;four.1.2&lt;/li&gt;
-						&lt;li&gt;four.1.3&lt;/li&gt;
-					&lt;/ul&gt;
-				&lt;/li&gt;
-				&lt;li&gt;four.2&lt;/li&gt;
-				&lt;li&gt;four.3&lt;/li&gt;
-			&lt;/ul&gt;
-		&lt;/li&gt;
-	&lt;/ul&gt;
-	</pre>
-	<div class="resultheader">Result:</div>
-	<div class="result">
-		<p>..some content..</p>
-		<p id="menufive">Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /></p>
-		<p>..some content..</p>
-	</div>
-	<ul id="menufivelist" style="display:none;">
-		<li>one</li>
-		<li class="red">two</li>
-		<li class="blue">three</li>
-		<li>four
-			<ul>
-				<li>four.1
-					<ul>
-						<li>four.1.1</li>
-						<li>four.1.2</li>
-						<li>four.1.3</li>
-					</ul>
-				</li>
-				<li>four.2</li>
-				<li>four.3</li>
-			</ul>
-		</li>
-	</ul>
-</div>
-
-</body>
-</html>
diff --git a/jsquery/src/main/java/gwtquery/jsquery/public/myshadow.png b/jsquery/src/main/java/gwtquery/jsquery/public/myshadow.png
deleted file mode 100644
index fb6c71b5..00000000
Binary files a/jsquery/src/main/java/gwtquery/jsquery/public/myshadow.png and /dev/null differ
diff --git a/jsquery/src/main/java/gwtquery/jsquery/public/plugins/menu/arrow_right.gif b/jsquery/src/main/java/gwtquery/jsquery/public/plugins/menu/arrow_right.gif
new file mode 100644
index 00000000..610344d7
Binary files /dev/null and b/jsquery/src/main/java/gwtquery/jsquery/public/plugins/menu/arrow_right.gif differ
diff --git a/jsquery/src/main/java/gwtquery/jsquery/public/plugins/menu/arrowdown.png b/jsquery/src/main/java/gwtquery/jsquery/public/plugins/menu/arrowdown.png
new file mode 100644
index 00000000..637c8d94
Binary files /dev/null and b/jsquery/src/main/java/gwtquery/jsquery/public/plugins/menu/arrowdown.png differ
diff --git a/jsquery/src/main/java/gwtquery/jsquery/public/plugins/menu/demo.html b/jsquery/src/main/java/gwtquery/jsquery/public/plugins/menu/demo.html
new file mode 100644
index 00000000..da242157
--- /dev/null
+++ b/jsquery/src/main/java/gwtquery/jsquery/public/plugins/menu/demo.html
@@ -0,0 +1,358 @@
+<?xml version="1.0" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>jQuery menu plugin demo page</title>
+<link rel="stylesheet" type="text/css" href="style.css" />
+<script src="../../dev.nocache.js" ></script>
+<script type="text/javascript">
+
+// JsQuery will run this function after it is asynchronously loaded
+onJsQueryLoad = function(){
+	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', copyClassAttr: true, onClick: function(e, menuItem){
+		alert('you clicked item "' + $(this).text() + '"');
+	}};
+	$('#menuone').menu(options);
+
+	var items = [	{src: 'test', url:'http://www.jquery.com'},
+					{src: ''}, // separator
+					{src: 'test2', subMenu: [	{src: 'sub 1'},
+												{src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'},
+												{src: 'sub 3'}]}];
+	$('#menutwo').menu(options, items);
+	$('#menuthree').menu(options);
+	$('#menufive>img').menu(options, '#menufivelist');
+
+	//creating a menu without items
+	var menu = new $.Menu('#menufour', null, options);
+	//adding items to the menu
+	menu.addItems([
+		new $.MenuItem({src: 'test', url:'http://www.jquery.com'}, options),
+		new $.MenuItem({src: ''}) // separator
+	]);
+	var itemWithSubmenu = new $.MenuItem({src: 'test2'}, options);
+	//creating a menu with items (as child of itemWithSubmenu)
+	new $.Menu(itemWithSubmenu, [
+		new $.MenuItem({src: 'sub 1'}, options),
+		new $.MenuItem({src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'}, options),
+		new $.MenuItem({src: 'sub 3'}, options)
+	], options);
+	//adding the submenu to the main menu
+	menu.addItem(itemWithSubmenu);
+}
+
+// If jsQuery or jQuery was already loaded we use the normal way
+if (window.$) {
+  $(document).ready(onJsQueryLoad);
+  onJsQueryLoad = null;
+}
+
+-->
+</script>
+</head>
+<body>
+<div id="header">
+<div class="title">jQuery Menu plugin demo</div>
+<div class="link"><a href="http://p.sohei.org/jquery-plugins/menu">plugin page</a></div>
+</div>
+
+<div class="exa">
+<h1>Available options:</h1>
+	options which affect the menu:
+	<ul>
+		<li><strong>showDelay</strong> - The number of milliseconds to wait before opening the menu after hovering over the target. Default value: 200</li>
+		<li><strong>hideDelay</strong> - The number of milliseconds to wait before closing the menu. Default value: 200</li>
+		<li><strong>hoverOpenDelay</strong> - The number of milliseconds to wait before opening the topmost-menu (root) (without clicking it!). Default value: 0 (disabled!)</li>
+		<li><strong>offsetTop</strong> - The number of pixels to offset the position of the topmost-menu (root) to the top. Default value: 0</li>
+		<li><strong>offsetLeft</strong> - The number of pixels to offset the position of the topmost-menu (root) to the left. Default value: 0</li>
+		<li><strong>minWidth</strong> - The minimal number of pixels of the menus width. Default value: 0</li></li>
+		<li><strong>onOpen</strong> - Callback function which is triggered when a menu is opened. Default value: null</li>
+		<li><strong>onClose</strong> - Callback function which is triggered when a menu is closed. Default value: null</li>
+	</ul>
+	options which affect the menuItems:
+	<ul>
+		<li><strong>onClick</strong> - Callback function which is triggered when a menuItem is clicked. The passed parameters are: the event object and the menuItem instance. Default value: null</li>
+		<li><strong>arrowSrc</strong> - URL of the image to be used as an arrow indicating a submenu. Default value: null (no arrow image!)</li>
+	</ul>
+	options which are only used, when building a menu from HTML markup:
+	<ul>
+		<li><strong>copyClassAttr</strong> - Copies the class attribute of the LI elements to the equivalent menuItems. Default value: false</li>
+	</ul>
+</div>
+
+<div class="exa">
+<h1>Example one:</h1>
+	<ul>
+		<li>create a menubar from an unordered list</li>
+		<li>used on an unordered list, the plugin takes its direct &lt;li&gt;-children, which will be the root items (File, Edit...), 
+		and searches each for an &lt;ul&gt;-child, which holds the menu-items (New window, Save, Print...).</li>
+		<li>empty &lt;li&gt;-elements are used as seperators</li>
+	</ul>
+	<div class="codeheader">JavaScript code:</div>
+	<pre name="code" class="JScript">
+	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', onClick: function(e, menuItem){
+		alert('you clicked item "' + $(this).text() + '"');
+	}};
+	$('#menuone').menu(options);
+	</pre>
+	<div class="codeheader">HTML markup:</div>
+	<pre name="code" class="html">
+	&lt;!-- note: the plugin doesn't need the classes, they're only used for styling! --&gt;
+	&lt;ul id="menuone" class="menu"&gt;
+		&lt;li class="menumain"&gt;File
+			&lt;ul&gt;&lt;li&gt;New&nbsp;window&lt;/li&gt;
+				&lt;li&gt;&lt;/li&gt; &lt;!-- separator --&gt;
+				&lt;li&gt;Save...&lt;/li&gt;
+				&lt;li&gt;Print...&lt;/li&gt;
+				&lt;li&gt;&lt;/li&gt; &lt;!-- separator --&gt;
+				&lt;li&gt;Exit&lt;/li&gt;
+			&lt;/ul&gt;
+		&lt;/li&gt;
+		&lt;li class="menumain"&gt;Edit
+			&lt;ul&gt;&lt;li&gt;Undo&lt;/li&gt;
+				&lt;li&gt;Redo&lt;/li&gt;
+				&lt;li&gt;&lt;/li&gt; &lt;!-- separator --&gt;
+				&lt;li&gt;Cut&lt;/li&gt;
+				&lt;li&gt;Copy&lt;/li&gt;
+				&lt;li&gt;Paste&lt;ul&gt;&lt;li&gt;All&lt;/li&gt;&lt;li&gt;Something&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
+				&lt;li&gt;Delete&lt;/li&gt;
+			&lt;/ul&gt;
+		&lt;/li&gt;
+		&lt;!-- ...and even more... --&gt;
+	&lt;/ul&gt;
+	</pre>
+	<div class="resultheader">Result:</div>
+	<div class="result" style="padding:0;">
+		<div style="border-bottom: 1px solid #000;background:#eee;">
+			<ul id="menuone" class="menu">
+				<li class="menumain">File
+					<ul><li>New&nbsp;window</li>
+						<li></li>
+						<li>Save...</li>
+						<li>Print...</li>
+						<li></li>
+						<li>Exit</li>
+					</ul>
+				</li>
+				<li class="menumain">Edit
+					<ul><li>Undo</li>
+						<li>Redo</li>
+						<li></li>
+						<li>Cut</li>
+						<li>Copy</li>
+						<li>Paste<ul><li>All</li><li>Something</li></ul></li>
+						<li>Delete</li>
+					</ul>
+				</li>
+				<li class="menumain">Bookmarks
+					<ul><li>Bookmark&nbsp;manager</li>
+						<li></li>
+						<li>some&nbsp;bookmark</li>
+						<li>another&nbsp;bookmark</li>
+						<li></li>
+						<li>Imported&nbsp;bookmarks
+							<ul><li>bookmark&nbsp;one</li>
+								<li>bookmark&nbsp;two</li>
+								<li>bookmark&nbsp;three</li>
+							</ul>
+						</li>
+					</ul>
+				</li>
+				<li class="menumain" style="float:right;">Help
+					<ul><li>Help&nbsp;index</li>
+						<li></li>
+						<li>About...
+							<ul>
+								<li>me</li>
+								<li>you</li>
+								<li>them</li>
+							</ul>
+						</li>
+					</ul>
+				</li>
+			</ul>
+			<div style="clear:both;"></div>
+		</div>
+		<p>..some content..</p>
+		<p>..some content..</p>
+		<p>..some content..</p>
+	</div>
+</div>
+
+<div class="exa">
+<h1>Example two:</h1>
+	<ul>
+		<li>create a menu from javascript and open it when clicking on the element with the id &quot;menutwo&quot;</li>
+		<li>when a second parameter ist passed (items), the plugin will use it as menu content</li>
+	</ul>
+	<div class="codeheader">JavaScript code:</div>
+	<pre name="code" class="JScript">
+	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
+	var items = [	{src: 'test', url:'http://www.jquery.com'}, 
+					{src: ''}, /* separator */
+					{src: 'test2', subMenu: [	{src: 'sub 1'},
+												{src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'},
+												{src: 'sub 3'}]}];
+	$('#menutwo').menu(options, items);
+	</pre>
+	<div class="codeheader">HTML markup:</div>
+	<pre name="code" class="html">
+	&lt;p&gt;&lt;span id="menutwo"&gt;Menu Button&lt;/span&gt;&lt;/p&gt;
+	</pre>
+	<div class="resultheader">Result:</div>
+	<div class="result">
+		<p>..some content..</p>
+		<p><span id="menutwo">Menu Button</span></p>
+		<p>..some content..</p>
+	</div>
+</div>
+
+<div class="exa">
+<h1>Example three:</h1>
+	<ul>
+		<li>same as example two, but without passing the items as parameter to the plugin</li>
+		<li>the plugin looks inside the elment for an unordered list, which holds the menu content</li>
+	</ul>
+	<div class="codeheader">JavaScript code:</div>
+	<pre name="code" class="JScript">
+	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
+	$('#menuthree').menu(options);
+	</pre>
+	<div class="codeheader">HTML markup:</div>
+	<pre name="code" class="html">
+	&lt;div id="menuthree"&gt;Menu Button
+		&lt;ul&gt;
+			&lt;li&gt;&lt;a href="http://www.jquery.com"&gt;test&lt;/a&gt;&lt;/li&gt;
+			&lt;li&gt;&lt;/li&gt; &lt;!-- separator --&gt;
+			&lt;li&gt;test2
+				&lt;ul&gt;
+					&lt;li&gt;sub 1&lt;/li&gt;
+					&lt;li&gt;&lt;a href="http://p.sohei.org" target="_blank"&gt;sub 2&lt;/a&gt;&lt;/li&gt;
+					&lt;li&gt;sub 3&lt;/li&gt;
+				&lt;/ul&gt;
+			&lt;/li&gt;
+		&lt;/ul&gt;
+	&lt;/div&gt;
+	</pre>
+	<div class="resultheader">Result:</div>
+	<div class="result">
+		<p>..some content..</p>
+		<div id="menuthree">Menu Button
+			<ul>
+				<li><a href="http://www.jquery.com">test</a></li>
+				<li></li>
+				<li>test2
+					<ul>
+						<li>sub 1</li>
+						<li><a href="http://p.sohei.org" target="_blank">sub 2</a></li>
+						<li>sub 3</li>
+					</ul>
+				</li>
+			</ul>
+		</div>
+		<p>..some content..</p>
+	</div>
+</div>
+
+<div class="exa">
+<h1>Example four:</h1>
+	<ul>
+		<li>same (result) as example two, but this time creating the menu by using the $.Menu and $.MenuItem classes and its methods</li>
+	</ul>
+	<div class="codeheader">JavaScript code:</div>
+	<pre name="code" class="JScript">
+	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif'};
+
+	//creating a menu without items
+	var menu = new $.Menu('#menufour', null, options);
+
+	//adding items to the menu
+	menu.addItems([
+		new $.MenuItem({src: 'test', url:'http://www.jquery.com'}, options),
+		new $.MenuItem({src: ''}) /* separator */
+	]);
+	var itemWithSubmenu = new $.MenuItem({src: 'test2'}, options);
+
+	//creating a menu with items (as child of itemWithSubmenu)
+	new $.Menu(itemWithSubmenu, [
+		new $.MenuItem({src: 'sub 1'}, options),
+		new $.MenuItem({src: 'sub 2', url: 'http://p.sohei.org', target: '_blank'}, options),
+		new $.MenuItem({src: 'sub 3'}, options)
+	], options);
+
+	//adding the submenu to the main menu
+	menu.addItem(itemWithSubmenu);
+	</pre>
+	<div class="codeheader">HTML markup:</div>
+	<pre name="code" class="html">
+	&lt;p&gt;&lt;span id="menufour"&gt;Menu Button&lt;/span&gt;&lt;/p&gt;
+	</pre>
+	<div class="resultheader">Result:</div>
+	<div class="result">
+		<p>..some content..</p>
+		<p><span id="menufour">Menu Button</span></p>
+		<p>..some content..</p>
+	</div>
+</div>
+
+<div class="exa">
+<h1>Example five:</h1>
+	<ul>
+		<li>related to example two, the menu items can also be passed as a jquery selector (selecting an &lt;ul&gt;-element!)</li>
+	</ul>
+	<div class="codeheader">JavaScript code:</div>
+	<pre name="code" class="JScript">
+	var options = {minWidth: 120, arrowSrc: 'arrow_right.gif', copyClassAttr: true};
+	$('#menufive>img').menu(options, '#menufivelist');
+	</pre>
+	<div class="codeheader">HTML markup:</div>
+	<pre name="code" class="html">
+	&lt;p id="menufive"&gt;Menu Button &lt;img src="arrowdown.png" /&gt; - Menu Button &lt;img src="arrowdown.png" /&gt; - Menu Button &lt;img src="arrowdown.png" /&gt;&lt;/p&gt;
+	
+	&lt;ul id="menufivelist" style="display:none;"&gt;
+		&lt;li&gt;one&lt;/li&gt;
+		&lt;li class="red"&gt;two&lt;/li&gt;
+		&lt;li class="blue"&gt;three&lt;/li&gt;
+		&lt;li&gt;four
+			&lt;ul&gt;
+				&lt;li&gt;four.1
+					&lt;ul&gt;
+						&lt;li&gt;four.1.1&lt;/li&gt;
+						&lt;li&gt;four.1.2&lt;/li&gt;
+						&lt;li&gt;four.1.3&lt;/li&gt;
+					&lt;/ul&gt;
+				&lt;/li&gt;
+				&lt;li&gt;four.2&lt;/li&gt;
+				&lt;li&gt;four.3&lt;/li&gt;
+			&lt;/ul&gt;
+		&lt;/li&gt;
+	&lt;/ul&gt;
+	</pre>
+	<div class="resultheader">Result:</div>
+	<div class="result">
+		<p>..some content..</p>
+		<p id="menufive">Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /> - Menu Button <img src="arrowdown.png" /></p>
+		<p>..some content..</p>
+	</div>
+	<ul id="menufivelist" style="display:none;">
+		<li>one</li>
+		<li class="red">two</li>
+		<li class="blue">three</li>
+		<li>four
+			<ul>
+				<li>four.1
+					<ul>
+						<li>four.1.1</li>
+						<li>four.1.2</li>
+						<li>four.1.3</li>
+					</ul>
+				</li>
+				<li>four.2</li>
+				<li>four.3</li>
+			</ul>
+		</li>
+	</ul>
+</div>
+
+</body>
+</html>
diff --git a/jsquery/src/main/java/gwtquery/jsquery/public/plugins/menu/myshadow.png b/jsquery/src/main/java/gwtquery/jsquery/public/plugins/menu/myshadow.png
new file mode 100644
index 00000000..fb6c71b5
Binary files /dev/null and b/jsquery/src/main/java/gwtquery/jsquery/public/plugins/menu/myshadow.png differ
diff --git a/jsquery/src/main/java/gwtquery/jsquery/public/plugins/menu/style.css b/jsquery/src/main/java/gwtquery/jsquery/public/plugins/menu/style.css
new file mode 100644
index 00000000..965233bc
--- /dev/null
+++ b/jsquery/src/main/java/gwtquery/jsquery/public/plugins/menu/style.css
@@ -0,0 +1,358 @@
+body
+{
+	background-color: #888;
+	font-family: verdana, arial;
+	margin: 10px;
+	font-size: 0.8em;
+}
+h1
+{
+	font-size: 1.3em;
+}
+table
+{
+	margin: 10px 50px;
+	width: 300px;
+	border: 1px solid gray;
+	border-collapse: collapse;
+	border-spacing: 0;
+	float: left;
+}
+thead
+{
+	background: bisque;
+}
+tfoot
+{
+	background: khaki;
+	text-align: center;
+}
+td, th
+{
+	border: 1px solid gray;
+}
+pre
+{
+	background-color: LemonChiffon;
+	border: 1px solid gray;
+}
+#header {
+	background-color: #fffff0;
+	border: 1px solid #000;
+	margin-bottom: 20px;
+	padding: 10px;
+}
+div.title
+{
+	text-align: center;
+	font-size: 1.5em;
+	font-weight: bold;
+}
+div.link
+{
+	text-align: center;
+}
+div.clear
+{
+	clear: both;
+}
+div.exa
+{
+	background-color: #fffff0;
+	border: 1px solid #000;
+	padding: 0 15px;
+	margin-bottom: 20px;
+}
+div.codeheader {
+	margin-bottom: -15px;
+}
+div.resultheader{
+	margin-bottom: 5px;
+}
+div.result{
+	background: #fff;
+	border: 1px solid #000;
+	margin-bottom: 10px;
+	padding: 0 10px;
+}
+html>body div.outerbox
+{
+	padding: 0 5px 5px 0;
+}
+html>body div.outerbox div.shadowbox1
+{
+	position: absolute;
+	right: 0;
+	bottom: 5px;
+	width: 5px;
+	height: 100%;
+	background: url(myshadow.png) no-repeat right top;
+}
+html>body div.outerbox div.shadowbox2
+{
+	position: absolute;
+	bottom: 0;
+	right: 5px;
+	height: 5px;
+	width: 100%;
+	background: url(myshadow.png) left bottom;
+}
+html>body div.outerbox div.shadowbox3
+{
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	height: 5px;
+	width: 5px;
+	background: url(myshadow.png) no-repeat right bottom;
+}
+html>body .innerbox
+{
+	margin: 0;
+	display: inherit;
+}
+
+#root-menu-div ul {
+	border: 1px solid #000;
+}
+#root-menu-div li{
+	white-space:nowrap;
+}
+* html #root-menu-div li{
+	height: 1.5em; /* fixing ie6 problem */
+}
+ul.menu,
+#root-menu-div ul {
+	background-color: #fff;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+li.menu-separator.active{
+	background-color: transparent;
+}
+li.active {
+	background-color: #888;
+}
+.activetarget{
+	background-color: white;
+}
+
+* html div.menu-item {
+	display: inline; /* fixes problem in ie6 */
+}
+
+li.menumain {
+	float: left;
+	padding: 0 10px;
+}
+div.menu-item {
+	padding: 1px 10px 1px 4px;
+}
+img.menu-item-arrow{
+	position: absolute;
+	right: 4px;
+	top: 8px;
+}
+li.menu-separator{
+	border-bottom: 1px solid #000;
+	font-size: 0; /* for ie */
+	height: 0;
+	line-height: 0; /* for ie */
+	margin: 2px 0;
+}
+li.red {
+	color: red;
+}
+li.blue {
+	color: blue;
+}
+
+
+
+/* syntaxhighlight stuff */
+.dp-highlighter
+{
+	font-family: "Consolas", "Courier New", Courier, mono, serif;
+	font-size: 12px;
+	background-color: #E7E5DC;
+	width: 99%;
+	overflow: auto;
+	margin: 18px 0 18px 0 !important;
+	padding-top: 1px; /* adds a little border on top when controls are hidden */
+}
+
+/* clear styles */
+.dp-highlighter ol,
+.dp-highlighter ol li,
+.dp-highlighter ol li span 
+{
+	margin: 0;
+	padding: 0;
+	border: none;
+}
+
+.dp-highlighter a,
+.dp-highlighter a:hover
+{
+	background: none;
+	border: none;
+	padding: 0;
+	margin: 0;
+}
+
+.dp-highlighter .bar
+{
+	padding-left: 45px;
+}
+
+.dp-highlighter.collapsed .bar,
+.dp-highlighter.nogutter .bar
+{
+	padding-left: 0px;
+}
+
+.dp-highlighter ol
+{
+	list-style: decimal; /* for ie */
+	background-color: #fff;
+	margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
+	padding: 0px;
+	color: #5C5C5C;
+}
+
+.dp-highlighter.nogutter ol,
+.dp-highlighter.nogutter ol li
+{
+	list-style: none !important;
+	margin-left: 0px !important;
+}
+
+.dp-highlighter ol li,
+.dp-highlighter .columns div
+{
+	list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
+	list-style-position: outside !important;
+	border-left: 3px solid #6CE26C;
+	background-color: #F8F8F8;
+	color: #5C5C5C;
+	padding: 0 3px 0 10px !important;
+	margin: 0 !important;
+	line-height: 14px;
+}
+
+.dp-highlighter.nogutter ol li,
+.dp-highlighter.nogutter .columns div
+{
+	border: 0;
+}
+
+.dp-highlighter .columns
+{
+	background-color: #F8F8F8;
+	color: gray;
+	overflow: hidden;
+	width: 100%;
+}
+
+.dp-highlighter .columns div
+{
+	padding-bottom: 5px;
+}
+
+.dp-highlighter ol li.alt
+{
+	background-color: #FFF;
+	color: inherit;
+}
+
+.dp-highlighter ol li span
+{
+	color: black;
+	background-color: inherit;
+}
+
+/* Adjust some properties when collapsed */
+
+.dp-highlighter.collapsed ol
+{
+	margin: 0px;
+}
+
+.dp-highlighter.collapsed ol li
+{
+	display: none;
+}
+
+/* Additional modifications when in print-view */
+
+.dp-highlighter.printing
+{
+	border: none;
+}
+
+.dp-highlighter.printing .tools
+{
+	display: none !important;
+}
+
+.dp-highlighter.printing li
+{
+	display: list-item !important;
+}
+
+/* Styles for the tools */
+
+.dp-highlighter .tools
+{
+	padding: 3px 8px 3px 10px;
+	font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
+	color: silver;
+	background-color: #f8f8f8;
+	padding-bottom: 10px;
+	border-left: 3px solid #6CE26C;
+}
+
+.dp-highlighter.nogutter .tools
+{
+	border-left: 0;
+}
+
+.dp-highlighter.collapsed .tools
+{
+	border-bottom: 0;
+}
+
+.dp-highlighter .tools a
+{
+	font-size: 9px;
+	color: #a0a0a0;
+	background-color: inherit;
+	text-decoration: none;
+	margin-right: 10px;
+}
+
+.dp-highlighter .tools a:hover
+{
+	color: red;
+	background-color: inherit;
+	text-decoration: underline;
+}
+
+/* About dialog styles */
+
+.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
+.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
+.dp-about td { padding: 10px; vertical-align: top; }
+.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
+.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
+.dp-about .para { margin: 0 0 4px 0; }
+.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
+.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
+
+/* Language specific styles */
+
+.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
+.dp-highlighter .string { color: blue; background-color: inherit; }
+.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
+.dp-highlighter .preprocessor { color: gray; background-color: inherit; }
diff --git a/jsquery/src/main/java/gwtquery/jsquery/public/style.css b/jsquery/src/main/java/gwtquery/jsquery/public/style.css
deleted file mode 100644
index 965233bc..00000000
--- a/jsquery/src/main/java/gwtquery/jsquery/public/style.css
+++ /dev/null
@@ -1,358 +0,0 @@
-body
-{
-	background-color: #888;
-	font-family: verdana, arial;
-	margin: 10px;
-	font-size: 0.8em;
-}
-h1
-{
-	font-size: 1.3em;
-}
-table
-{
-	margin: 10px 50px;
-	width: 300px;
-	border: 1px solid gray;
-	border-collapse: collapse;
-	border-spacing: 0;
-	float: left;
-}
-thead
-{
-	background: bisque;
-}
-tfoot
-{
-	background: khaki;
-	text-align: center;
-}
-td, th
-{
-	border: 1px solid gray;
-}
-pre
-{
-	background-color: LemonChiffon;
-	border: 1px solid gray;
-}
-#header {
-	background-color: #fffff0;
-	border: 1px solid #000;
-	margin-bottom: 20px;
-	padding: 10px;
-}
-div.title
-{
-	text-align: center;
-	font-size: 1.5em;
-	font-weight: bold;
-}
-div.link
-{
-	text-align: center;
-}
-div.clear
-{
-	clear: both;
-}
-div.exa
-{
-	background-color: #fffff0;
-	border: 1px solid #000;
-	padding: 0 15px;
-	margin-bottom: 20px;
-}
-div.codeheader {
-	margin-bottom: -15px;
-}
-div.resultheader{
-	margin-bottom: 5px;
-}
-div.result{
-	background: #fff;
-	border: 1px solid #000;
-	margin-bottom: 10px;
-	padding: 0 10px;
-}
-html>body div.outerbox
-{
-	padding: 0 5px 5px 0;
-}
-html>body div.outerbox div.shadowbox1
-{
-	position: absolute;
-	right: 0;
-	bottom: 5px;
-	width: 5px;
-	height: 100%;
-	background: url(myshadow.png) no-repeat right top;
-}
-html>body div.outerbox div.shadowbox2
-{
-	position: absolute;
-	bottom: 0;
-	right: 5px;
-	height: 5px;
-	width: 100%;
-	background: url(myshadow.png) left bottom;
-}
-html>body div.outerbox div.shadowbox3
-{
-	position: absolute;
-	bottom: 0;
-	right: 0;
-	height: 5px;
-	width: 5px;
-	background: url(myshadow.png) no-repeat right bottom;
-}
-html>body .innerbox
-{
-	margin: 0;
-	display: inherit;
-}
-
-#root-menu-div ul {
-	border: 1px solid #000;
-}
-#root-menu-div li{
-	white-space:nowrap;
-}
-* html #root-menu-div li{
-	height: 1.5em; /* fixing ie6 problem */
-}
-ul.menu,
-#root-menu-div ul {
-	background-color: #fff;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-li.menu-separator.active{
-	background-color: transparent;
-}
-li.active {
-	background-color: #888;
-}
-.activetarget{
-	background-color: white;
-}
-
-* html div.menu-item {
-	display: inline; /* fixes problem in ie6 */
-}
-
-li.menumain {
-	float: left;
-	padding: 0 10px;
-}
-div.menu-item {
-	padding: 1px 10px 1px 4px;
-}
-img.menu-item-arrow{
-	position: absolute;
-	right: 4px;
-	top: 8px;
-}
-li.menu-separator{
-	border-bottom: 1px solid #000;
-	font-size: 0; /* for ie */
-	height: 0;
-	line-height: 0; /* for ie */
-	margin: 2px 0;
-}
-li.red {
-	color: red;
-}
-li.blue {
-	color: blue;
-}
-
-
-
-/* syntaxhighlight stuff */
-.dp-highlighter
-{
-	font-family: "Consolas", "Courier New", Courier, mono, serif;
-	font-size: 12px;
-	background-color: #E7E5DC;
-	width: 99%;
-	overflow: auto;
-	margin: 18px 0 18px 0 !important;
-	padding-top: 1px; /* adds a little border on top when controls are hidden */
-}
-
-/* clear styles */
-.dp-highlighter ol,
-.dp-highlighter ol li,
-.dp-highlighter ol li span 
-{
-	margin: 0;
-	padding: 0;
-	border: none;
-}
-
-.dp-highlighter a,
-.dp-highlighter a:hover
-{
-	background: none;
-	border: none;
-	padding: 0;
-	margin: 0;
-}
-
-.dp-highlighter .bar
-{
-	padding-left: 45px;
-}
-
-.dp-highlighter.collapsed .bar,
-.dp-highlighter.nogutter .bar
-{
-	padding-left: 0px;
-}
-
-.dp-highlighter ol
-{
-	list-style: decimal; /* for ie */
-	background-color: #fff;
-	margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
-	padding: 0px;
-	color: #5C5C5C;
-}
-
-.dp-highlighter.nogutter ol,
-.dp-highlighter.nogutter ol li
-{
-	list-style: none !important;
-	margin-left: 0px !important;
-}
-
-.dp-highlighter ol li,
-.dp-highlighter .columns div
-{
-	list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
-	list-style-position: outside !important;
-	border-left: 3px solid #6CE26C;
-	background-color: #F8F8F8;
-	color: #5C5C5C;
-	padding: 0 3px 0 10px !important;
-	margin: 0 !important;
-	line-height: 14px;
-}
-
-.dp-highlighter.nogutter ol li,
-.dp-highlighter.nogutter .columns div
-{
-	border: 0;
-}
-
-.dp-highlighter .columns
-{
-	background-color: #F8F8F8;
-	color: gray;
-	overflow: hidden;
-	width: 100%;
-}
-
-.dp-highlighter .columns div
-{
-	padding-bottom: 5px;
-}
-
-.dp-highlighter ol li.alt
-{
-	background-color: #FFF;
-	color: inherit;
-}
-
-.dp-highlighter ol li span
-{
-	color: black;
-	background-color: inherit;
-}
-
-/* Adjust some properties when collapsed */
-
-.dp-highlighter.collapsed ol
-{
-	margin: 0px;
-}
-
-.dp-highlighter.collapsed ol li
-{
-	display: none;
-}
-
-/* Additional modifications when in print-view */
-
-.dp-highlighter.printing
-{
-	border: none;
-}
-
-.dp-highlighter.printing .tools
-{
-	display: none !important;
-}
-
-.dp-highlighter.printing li
-{
-	display: list-item !important;
-}
-
-/* Styles for the tools */
-
-.dp-highlighter .tools
-{
-	padding: 3px 8px 3px 10px;
-	font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
-	color: silver;
-	background-color: #f8f8f8;
-	padding-bottom: 10px;
-	border-left: 3px solid #6CE26C;
-}
-
-.dp-highlighter.nogutter .tools
-{
-	border-left: 0;
-}
-
-.dp-highlighter.collapsed .tools
-{
-	border-bottom: 0;
-}
-
-.dp-highlighter .tools a
-{
-	font-size: 9px;
-	color: #a0a0a0;
-	background-color: inherit;
-	text-decoration: none;
-	margin-right: 10px;
-}
-
-.dp-highlighter .tools a:hover
-{
-	color: red;
-	background-color: inherit;
-	text-decoration: underline;
-}
-
-/* About dialog styles */
-
-.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
-.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
-.dp-about td { padding: 10px; vertical-align: top; }
-.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
-.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
-.dp-about .para { margin: 0 0 4px 0; }
-.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
-.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
-
-/* Language specific styles */
-
-.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
-.dp-highlighter .string { color: blue; background-color: inherit; }
-.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
-.dp-highlighter .preprocessor { color: gray; background-color: inherit; }
diff --git a/jsquery/src/main/webapp/index.html b/jsquery/src/main/webapp/index.html
index 803d019b..613ed6d6 100644
--- a/jsquery/src/main/webapp/index.html
+++ b/jsquery/src/main/webapp/index.html
@@ -12,6 +12,7 @@
     </script>
     <ul>
 	<li><a href="javascript:goTo('dev/JsQuery.html')">JsQuery.html</a></li>
+	<li><a href="javascript:goTo('dev/plugins/menu/demo.html')">jquery.menu.html</a></li>
     </ul>
   </body>
 </html>