Index: Dev/trunk/js/generalScripts.js
===================================================================
--- Dev/trunk/js/generalScripts.js	(revision 219)
+++ Dev/trunk/js/generalScripts.js	(revision 220)
@@ -156,34 +156,6 @@
 }
 
-function createMenuPanel (parentButton, cb1, cb2) {
-    var outerDiv = ce("div");
-    outerDiv.className = "ddMenu";
-    outerDiv.id = "ddAddObjectMenu";
-    outerDiv.style.position = "absolute";
-    
-    var button1 = ce("input");
-    button1.className = "ddMenuButton";
-    button1.type = "button";
-    button1.value = "Add new";
-    button1.addEventListener("click", cb1, false);
-    
-    var button2 = ce("input");
-    button2.className = "ddMenuButton";
-    button2.type = "button";
-    button2.value = "Add existing";
-    button2.addEventListener("click", cb2, false);
-    
-    outerDiv.appendChild(button1);
-    outerDiv.appendChild(button2);
-    
-    var parentPos = findPos(parentButton);
-    var parentWidth = parentButton.offsetWidth;
-    var menuPosX = parentPos.X + parentWidth;
-    var menuPosY = parentPos.Y;
-    outerDiv.style.left = menuPosX+"px";
-    outerDiv.style.top = menuPosY+"px";
-}
-
-function findPos(element) {
+// Function for getting the absolute position of the top left corner of an element, relative to the window
+function getPos(element) {
     var posX = posY = 0;
     if (element.offsetParent) {
@@ -200,2 +172,79 @@
     return result;
 }
+
+// Returns the computed width of an element
+function getWidth(element) {
+    var width = 0;
+    if (element.offsetWidth) {
+        width = element.offsetWidth;
+    }
+    
+    return width;
+}
+
+// Drop down menu implementation. Supports three levels: Base button, 1st level categories, and 2nd level links
+function DDMenu() {
+    // Initialize function, setting all needed variables.
+    var instance = this;
+    this.closeTimer = 0;
+    this.ddMenuItem = null;
+    this.timeout = 350;
+    this.visible = false;
+    this.menuElement = null;
+    this.parentButton = null
+    
+    this.Init = function(id1, id2) {    
+        instance.menuElement = ge(id1);
+        instance.parentButton = ge(id2);
+    }
+    
+    this.SetCloseTimer = function() {
+        instance.closeTimer = window.setTimeout(instance.Close, instance.timeout);
+    }
+    
+    this.Close = function() {
+        if (instance.ddMenuItem) {
+            instance.ddMenuItem.style.visibility = "hidden";
+        }
+        instance.Show();
+        
+    }
+    
+    this.CancelCloseTimer = function() {
+        if (instance.closeTimer) {
+            window.clearTimeout(instance.closeTimer);
+            instance.closeTimer = null;
+        }
+    }
+    
+    this.Open = function(id) {
+        instance.CancelCloseTimer();
+        if (instance.ddMenuItem) {
+            instance.ddMenuItem.style.visibility = "hidden";
+        }
+        
+        instance.ddMenuItem = ge(id);
+        instance.ddMenuItem.style.visibility = "visible";
+        var parentPos = getPos(instance.ddMenuItem.parentNode);
+        var parentWidth = getWidth(instance.ddMenuItem.parentNode);
+        instance.ddMenuItem.style.left = (parentPos.X + parentWidth)+"px";
+        instance.ddMenuItem.style.top = parentPos.Y+"px";
+        
+    }
+    
+    this.Show = function() {
+        debugger;
+        if (instance.visible) {
+            // Hide the menu
+            instance.menuElement.style.visibility = "hidden";
+            instance.parentButton.className = "";
+            instance.visible = false;
+        }
+        else{
+            //Show the menu
+            instance.menuElement.style.visibility = "visible";
+            instance.parentButton.className = "down";
+            instance.visible = true;
+        }
+    }
+}
Index: Dev/trunk/positiontest.html
===================================================================
--- Dev/trunk/positiontest.html	(revision 220)
+++ Dev/trunk/positiontest.html	(revision 220)
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title></title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <script type='text/javascript' src="js/generalScripts.js"></script>
+        <script type='text/javascript'>
+            debugger;
+            var ddMenu = new DDMenu();
+            var fn = function() {
+                ddMenu.Init("creationMenu", "btnAddMenu");
+            }
+            window.onload = fn;
+        </script>
+        <style type="text/css">
+            body {
+                margin: 0;
+                padding: 0;
+            }
+            
+            #btnAddMenu {
+                margin: 0;
+                padding: 5px;
+                background: #5970B2;
+                font: bold 16px arial;
+                color: #FFF;
+            }
+            
+            #btnAddMenu.down {
+                background: #334167;
+            }
+            
+            #creationMenu {
+                margin: 0;
+                padding: 0;
+                z-index: 30;
+                visibility: hidden;
+            }
+            
+            #creationMenu li {
+                margin: 0;
+                padding: 0;
+                list-style: none;
+                float: left;
+                clear: left;
+                font: bold 11px arial;
+            }
+            
+            #creationMenu li a {
+                display: block;
+                margin: 0 1px 0 0;
+                padding: 4px 10px;
+                width: 100px;
+                background: #5970B2;
+                color: #FFF;
+                text-align: center;
+                text-decoration: none;
+            }
+            
+            #creationMenu li a:hover {
+                background: #49A3FF;
+            }
+            
+            #creationMenu div {
+                position: absolute;
+                visibility: hidden;
+                margin: 0;
+                padding: 0;
+                background: #eaebd8;
+                border: 1px solid #5970B2;
+            }
+            
+            #creationMenu div a{
+                position: relative;
+                float: left;
+                display: block;
+                clear: left;
+                margin: 0;
+                padding: 5px 10px 5px 10px;
+                width: 75px;
+                white-space: nowrap;
+                text-align: left;
+                text-decoration: none;
+                background: #eaebd8;
+                color: #2875DE;
+                font: 11px arial;
+            }
+            
+            #creationMenu div a:hover {
+                background: #49a3ff;
+                color: #fff;
+            }
+        </style>
+    </head>
+    <body id="BODY">
+
+        <input type="button" value="Add" id="btnAddMenu" onclick="ddMenu.Show()" />
+        <ul id="creationMenu">
+            <li>
+                <a href="#" onmouseover="ddMenu.Open('creationMenu_m1')" onmouseout="ddMenu.SetCloseTimer()">Survey</a>
+                <div id="creationMenu_m1" onmouseover="ddMenu.CancelCloseTimer()" onmouseout="ddMenu.SetCloseTimer()">
+                    <a href="#">+ Add new</a>
+                    <a href="#">> Add existing</a>
+                </div>
+            </li>
+            <li>
+                <a href="#" onmouseover="ddMenu.Open('creationMenu_m2')" onmouseout="ddMenu.SetCloseTimer()">Application</a>
+                <div id="creationMenu_m2" onmouseover="ddMenu.CancelCloseTimer()" onmouseout="ddMenu.SetCloseTimer()">
+                    <a href="#">+ Add new</a>
+                    <a href="#">> Add existing</a>
+                </div>
+            </li>
+            <li>
+                <a href="#" onmouseover="ddMenu.Open('creationMenu_m3')" onmouseout="ddMenu.SetCloseTimer()">Dashboard</a>
+                <div id="creationMenu_m3" onmouseover="ddMenu.CancelCloseTimer()" onmouseout="ddMenu.SetCloseTimer()">
+                    <a href="#">+ Add new</a>
+                    <a href="#">> Add existing</a>
+                </div>
+            </li>
+        </ul>
+    </body>
+</html>
