midoriPopup

midoriPopup can be used to show a pop-up below or above any element on a page depending on the space available around the element. There can be multiple pop-ups defined, but only one can be visible at a time. The active pop-up will disappear when the user clicks anywhere on the page.

show(vars)

Shows a pop-up.
Accepts the following parameters:
- obj is the DOM object the pop-up will be displayed below or above depending on the available space.
- popupId is the id of the element that contains the pop-up code.
- event is the event object that is used to cancel the default action (for example when a link is used to trigger the pop-up). It is also used to determine the mouse position (see below).
- showAtMousePos is optional. When set to true, the pop-up will be shown at mouse position.
- showCallback is the optional callback function that will be called after the pop-up is displayed.
- hideCallback is the optional callback function that will be called after the pop-up is hidden.
- x defaults to 5, and is used to adjust the horizontal position of the pop-up from the object's top-left corner.
- y defaults to -5, and is used to adjust the vertical position of the pop-up from the object's top-left corner.
- noAnim defaults to false, and when set to true, cancels the slide-down animation.
The class of element that contains the pop-up must have the position property set to 'absolute', and has a z-index that is sufficiently high so as to prevent the pop-up appearing under other elements on the page. You will also probably want to make it invisible by setting the display attribute to 'none'.

Example:
Apple Orange Banana
```
<style type="text/css">                                      [Show]
   .popup { position: absolute; z-index: 10000; display: none;
            background-color: #F0F0F0; padding: 8px;
            border: 1px solid #333; }
</style>

<div id="fruits" class="popup">
   <a href="#" class="menu">Apple</a>
   <a href="#" class="menu">Orange</a>
   <a href="#" class="menu">Banana</a>
</div>

<a href="#" onclick="midoriPopup.show( {
   popupId: 'fruits', obj: this, event: event } )">Show</a>
```
Note: The above example uses additional CSS rules for menu items [view].
```
a.menuitem
   {
      display:          block;
      padding:          3px;
   }

a.menuitem:hover
   {
      text-decoration:  none;
      background-color: #06A;
      color:            #FFF;
   }
```
hide()

Hides the active pop-up.
Example:
```
midoriPopup.hide();
```