// Things to do
      // - Add a "seperator" of some sort
      // - Add an option to indicate that there is a submenu on the item - arrow, tick, something
      // - As soon as you go over another menu, hide any visible menus
      // - Add ability to show an image with the menu item
      var agt=navigator.userAgent.toLowerCase();
      var is_ie     = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));

      var allMenus = new Array();       // this is an array which contains all of the MyMenu classes
      var hideMenuTimeout = 400;        // the timeout, in ms, to wait before hiding the menu on onmouseout
      var fadeInterval = 50;            // the timeout, in ms, to wait between each fade increment
      var fadeDelta = 20;               // percentage of alpha value to change each step
      
      // MyObject is the parent object that all objects will inherit from
      // Provides the "parseProperties" method which parses the properties passed to the constructor of the object
      function MyObject()
      {
        this.parseProperties = function()
        {
          for (var property in this.properties)
          {
            if (typeof(this.properties[property]) == "string")
              eval ("this." + property + " = '" + this.properties[property] + "';");
            else
              eval ("this." + property + " = " + this.properties[property] + ";");
          }
        }
      };
      
      // Supported properties to pass to this constructor:
      // - 'orient': "horizontal" or "vertical", the orientation to display the menu items
      // - 'placementid': The ID of an object where the menus will be placed
      function MenuContainer(vars)
      {
        this.menus = new Array();     // this is an array which contains all of the menu items
        this.properties = vars;       // this contains all of the properties passed in the constructor - these are all assigned to this class by myObject
        
        this.parseProperties();

        // can not execute if no placementid
        if (this.placementid == undefined || document.getElementById(this.placementid) == undefined)
        {
          alert("Either no placement or an invalid placement was defined");
          return;
        }
        
        // make sure a valid value is set for orient
        if (this.orient == undefined)
        {
          this.orient = "horizontal";
        }
        
        this.orient = this.orient.toLowerCase();
        
        if (this.orient != "vertical" && this.orient != "horizontal")
        {
          this.orient = "horizontal";
        }
        
        // set an event handler to move the menu with the placement container
        document.getElementById(this.placementid).onmove = function()
        {
          var place = event.srcElement;
          var container = place.menuContainer;
          
          container.style.top = getTop(place) + "px";
          container.style.left = getLeft(place) + "px";
        }
        
        this.addMenu = function(myMenu)
        {
          this.menus.push(myMenu);
        };
        
        this.draw = function()
        {
          var place = document.getElementById(this.placementid);
            
          var x = getLeft(place);
          var y = getTop(place);
          
          var height = 0;
          var width = 0;

          place.menuContainer = document.createElement("div");
          place.menuContainer.style.position = "absolute";
          place.menuContainer.style.left = x + "px";
          place.menuContainer.style.top = y + "px";
          
          document.body.appendChild(place.menuContainer);
          
          for (var cIndex=0;cIndex<this.menus.length;cIndex++)
          {
            this.menus[cIndex].draw((this.orient == "horizontal"), place.menuContainer);
            
            if (this.orient == "horizontal")
            {
              width += this.menus[cIndex].menu.offsetWidth;
              height = this.menus[cIndex].menu.offsetHeight;
            }
            else
            {
              height += this.menus[cIndex].menu.offsetHeight;
              width = this.menus[cIndex].menu.offsetWidth;
            }
          }
          
          place.menuContainer.style.width = width + "px";
          place.menuContainer.style.height = height + "px";
          
        }
      };
      
      // Set MenuContainer to inherit from MyObject
      MenuContainer.prototype = new MyObject();
      
      // MySubMenu - A container object to hold all of the submenu's for a parent menu object
      //
      // 'shadow': true for a shadow on the container, false for no shadow
      // 'width': the width of the submenu
      // 'alpha': the alpha level for the submenu container.  0 to 100, 0 = transparent and 100 = opaque (default)
      function MySubMenu(vars,parent)
      {
        this.parent = parent;               // This is the MyMenu object which is the parent for this submenu container
        this.properties = vars;             // this contains all of the properties passed in the constructor - these are all assigned to this class by myObject
        this.shadowContainer = undefined;   // this is the actual DIV which contains the shadows
        this.subMenuContainer = undefined;  // this is the actual DIV that contains all of the submenu objects
        this.subMenus = new Array();        // this contains an array of all the sub-menus for this object
        
        this.parseProperties();
        
        this.addMenu = function(subMenu)
        {
          subMenu.subMenuIndex = this.subMenus.length;
          this.subMenus.push(subMenu);
          this.parent.subMenus.push(subMenu);
          subMenu.parent = this.parent;
        };
        
        this.draw = function()
        {
          // Do not run if there are no subMenus in the menu
          if (this.subMenus.length == 0)
            return;
            
          if (this.subMenuContainer != undefined)
            return;
        
          this.subMenuContainer = document.createElement("div");

          this.subMenuContainer.className = "subMenuContainer";
          this.subMenuContainer.style.zIndex = 1;
          
          this.subMenuContainer.subMenuObject = this;        // This sets a property called subMenuObject on the div which points to this submenu class
          
          // fist, go through user-defined properties
          if (this.width != undefined)
          {
            this.subMenuContainer.style.width = this.width;
          }
          
          this.subMenuContainer.style.visibility = "hidden";
          this.subMenuContainer.style.position = "absolute";

          switch (this.parent.submenudisplay)     // determine the position of the submenu container
          {
            case "top":
              this.subMenuContainer.style.top = getTop(this.parent.menu) + "px";
              this.subMenuContainer.style.left = getLeft(this.parent.menu) + "px";

              break;
            case "left":
              this.subMenuContainer.style.top = getTop(this.parent.menu) + "px";
              this.subMenuContainer.style.left = getLeft(this.parent.menu) + "px";

              break;
            case "right":
              var left = getLeft(this.parent.menu) + this.parent.menu.offsetWidth;
              
              if (this.parent.parent != undefined)
                left += 2;
                
              this.subMenuContainer.style.top = getTop(this.parent.menu) + "px";
              this.subMenuContainer.style.left = left + "px";
              
              break;
            default: // bottom
              var top = (getTop(this.parent.menu) + this.parent.menu.offsetHeight);
              
              if (this.parent.parent != undefined)
                top += 2;
                
              this.subMenuContainer.style.top = top + "px";
              this.subMenuContainer.style.left = getLeft(this.parent.menu) + "px";
              
              break;
          } // end setting submenu container position
          
          if (is_ie)
          {
            this.subMenuContainer.style.filter = 'alpha(opacity=0)';
          }
          else // for mozilla
          {
            this.subMenuContainer.style.opacity = 0;
          }
          
          this.subMenuContainer.onmouseout = function()
          {
            // hide the menu if needed
            var parent = this.subMenuObject.parent;
            while (parent != undefined)
            {
              if (parent.isSubMenuVisible == true && parent.timerSubMenuID == undefined)
              {
                parent.timerSubMenuID = setTimeout('hideSubMenu(' + parent.allMenusIndex + ')', hideMenuTimeout);
              }
              
              parent = parent.parent;
            }
            
          } // end on mouse out
          
          this.subMenuContainer.onmouseover = function()
          {
            var parent = this.subMenuObject.parent;
            while (parent != undefined)
            {
              if (parent.timerSubMenuID != undefined)
              {
                window.clearTimeout(parent.timerSubMenuID);
                parent.timerSubMenuID = undefined;
              }
              
              parent = parent.parent;
            }
            
          } // end on mouse over
          
          document.body.appendChild(this.subMenuContainer);
          
          
          // next, go through all of the children and draw them
          for (var a=0; a<this.subMenus.length; a++)
          {
            this.subMenus[a].draw();
          }
          
          // next, now that we have a set width and height for this item, adjust the position if display to the left or to the top
          // first, left
          if (this.parent.submenudisplay == "left")
          {
            this.subMenuContainer.style.left = getLeft(this.parent.menu) - this.subMenuContainer.offsetWidth + "px";
          }
          // last, top
          if (this.parent.submenudisplay == "top")
          {
            this.subMenuContainer.style.top = getTop(this.parent.menu) - this.subMenuContainer.offsetHeight + "px";
          }
          
          // draw the shadow
          if (this.shadow == true)
          {
            this.shadowContainer = createShadow(this.subMenuContainer);
          }

        }; // end draw method
      };
      
      MySubMenu.prototype = new MyObject();
      
      // Supported Properties to pass to the constructor:
      // - 'alpha': The alpha level of the menu object, 0 to 100, 0 = transparent and 100 = opaque, 100 is default
      // - 'width': The width of the menu - this propogates to the submenu if 'submenuwidth' is not defined
      // - 'text': The text of the menu item
      // - 'id': The id assigned to the item for future reference - if not defined, item will not have an ID assigned
      // - 'classnormal': The class assigned to the item - the item will not get menu or subMenu class if this is defined
      // - 'classover': The class assigned to the item when the mouse is over the item
      // - 'submenuwidth': The width to assign to the submenu items for the item
      // - 'link': The link that the menu option redirects to the page.  Prefix with "javascript:" to run code
      // - 'submenualpha': The alpha value (0-100, 0=transparent) of the submenu - 100 is default
      // - 'submenudisplay': Can be top, bottom, left, right.  Defaults to bottom.  This is the direction to show the submenu for this object, if it has a submenu
      // - 'submenushadow': true for a shadow on it's submenu, false or blank for no shadow
      function MyMenu(vars)
      {
        this.allMenusIndex = allMenus.length; // this is the index of this menu in the global allMenus variable, for reference globally
        allMenus.push(this);                  // add this menu to the allMenus array
        
        this.isSubMenuVisible = false;  // this is for parents only, whether the submenus are visible
        this.menu = undefined;          // this is the actual menu div - only assigned after it has been drawn
        this.parent = undefined;        // this is the parent menu object of this menu - if this is the root, it remains undefined
        this.properties = vars;         // this contains all of the properties passed in the constructor - these are all assigned to this class by myObject
        this.subMenu = undefined;       // this will be the mySubMenu class if the item has subitems
        this.subMenus = new Array();    // this will be an array of the submenus this item has
        this.subMenuIndex = -1;         // if the item is a subitem to a parent, this is it's index in the submenu array - if not a subitem, it will be -1
        this.timerFadeID = undefined;   // The timer (interval) id for fading in and out
        this.timerSubMenuID = undefined;// The timer id for hiding the menu

        this.parseProperties(); 

        // make sure there is a valid submenudisplay value        
        if (this.submenudisplay == undefined)
        {
          this.submenudisplay = "bottom";
        }
        else
        {
          this.submenudisplay = this.submenudisplay.toLowerCase();
        }
        
        if (this.submenudisplay != "top" && this.submenudisplay != "bottom" && this.submenudisplay != "left" && this.submenudisplay != "right")
        {
          this.submenudisplay = "bottom";
        }
        
        // make sure there is a valid submenushadow value
        if (this.submenushadow == undefined || this.submenushadow != true)
        {
          this.submenushadow = false;
        }
        
        // make sure the values for submenualpha are valid
        if (this.submenualpha == undefined || this.submenualpha != undefined && (typeof(this.submenualpha) != "number" || this.submenualpha < 0 || this.submenualpha > 100))
        {
          this.submenualpha = 100;
        }
        
        // make sure the values for alpha are valid
        if (this.alpha == undefined || this.alpha != undefined && (typeof(this.alpha) != "number" || this.alpha < 0 || this.alpha > 100))
        {
          this.alpha = 100;
        }
        
        this.addMenu = function(subMenu)
        {
          if (this.subMenu == undefined)
          {
            // set the width - set to submenuwidth property if defined, else width of the parent
            var sWidth = this.width;
            
            if (this.submenuwidth != undefined)
              sWidth = this.submenuwidth;
            
            this.subMenu = new MySubMenu({width:sWidth,shadow:this.submenushadow,alpha:this.submenualpha},this);
          }
          
          this.subMenu.addMenu(subMenu);
        };
        
        // isFloat is whether to apply float:left to the item (if the container is horizontal)
        // menuContainer is the menuContainer to add the menu to
        this.draw = function(isFloat, menuContainer)
        {
          if (this.menu != undefined)
            return;

          if (isFloat == undefined || isFloat != true)
            isFloat = false;

          this.menu = document.createElement("div");

          // set the class to the peroperty classnormal if set for this object, otherwise use default class names
          if (this.classnormal == undefined)
          {          
            if (this.parent == undefined)
              this.menu.className = "menu";
            else
              this.menu.className = "subMenu";
          }
          else
          {
            this.menu.className = this.classnormal;
          }
            
          this.menu.menuObject = this;        // This sets a property called menuObject on the div which points to this menu class - so the div can reflect on values in the parent div
          
          // fist, go through user-defined properties          
          if (this.width != undefined)
          {
            this.menu.style.width = this.width;
          }
          
          if (this.text != undefined)
          {
            this.menu.innerHTML = this.text;
          }
          
          if (this.id != undefined)
          {
            this.menu.id = this.id;
          }
          
          if (this.link != undefined)
          {
            this.menu.style.cursor = "pointer";
          }
          else
          {
            this.menu.style.cursor = "default";
          }
          
          // set the transparency
          if (this.alpha != undefined)
          {
            if (is_ie)
            {
              this.menu.style.filter = 'alpha(opacity=' + this.alpha + ')';
            }
            else // for mozilla
            {
              this.menu.style.opacity = this.alpha/100;
            }
          }
          
          // set events for the item         
          this.menu.onclick = function()
          {
            if (this.menuObject.link != undefined)
            {
              if (this.menuObject.link.substr(0,11) == "javascript:")
                eval(this.menuObject.link.substr(11));
              else
                location.href = this.menuObject.link;
            }
          }; // end onclick
          
          this.menu.onmouseout = function()
          {
            // first, change the class as needed
            if (this.menuObject.classnormal == undefined)
            {
              if (this.menuObject.parent == undefined)
                this.className = "menu";
              else
                this.className = "subMenu";
            }
            else
            {
              this.className = this.menuObject.classnormal;
            }
            
            // next, hide the menu if needed
            if (this.menuObject.subMenu != undefined && this.menuObject.isSubMenuVisible == true && this.menuObject.timerSubMenuID == undefined)
            {
              this.menuObject.timerSubMenuID = setTimeout('hideSubMenu(' + this.menuObject.allMenusIndex + ')', hideMenuTimeout);
            }
            
          }; // end on mouse out
          
          this.menu.onmouseover = function()
          {
            // first, change the class as needed for the menu item
            if (this.menuObject.classnormal == undefined)
            {
              if (this.menuObject.classover == undefined)
              {
                if (this.menuObject.parent == undefined)
                  this.className = "menu menuOver";
                else
                  this.className = "subMenu subMenuOver";
              }
              else
              {
                if (this.menuObject.parent == undefined)
                  this.className = "menu " + this.menuObject.classover;
                else
                  this.className = "subMenu " + this.menuObject.classover;
              }
            }
            else
            {
              if (this.menuObject.classover == undefined)
              {
                if (this.menuObject.parent == undefined)
                  this.className = this.menuObject.classnormal + " menuOver";
                else
                  this.className = this.menuObject.classnormal + " subMenuOver";
              }
              else
              {
                this.className = this.menuObject.classnormal + " " + this.menuObject.classover;
              }
            }
            
            // next, show the menu if needed
            if (this.menuObject.subMenu != undefined && this.menuObject.isSubMenuVisible == false)
            {
              this.menuObject.subMenu.subMenuContainer.style.visibility = "visible";

              // Change the position of the item, if needed
              switch (this.menuObject.submenudisplay)     // determine the position of the submenu container
              {
                case "top":
                  this.menuObject.subMenu.subMenuContainer.style.left = getLeft(this) + "px";
                  this.menuObject.subMenu.subMenuContainer.style.top = getTop(this) - this.menuObject.subMenu.subMenuContainer.offsetHeight + "px";
    
                  break;
                case "left":
                  this.menuObject.subMenu.subMenuContainer.style.top = getTop(this) + "px";
                  this.menuObject.subMenu.subMenuContainer.style.left = getLeft(this) - this.menuObject.subMenu.subMenuContainer.offsetWidth + "px";
    
                  break;
                case "right":
                  var left = getLeft(this) + this.offsetWidth;
                  
                  if (this.menuObject.parent != undefined)
                    left += 2;
                    
                  this.menuObject.subMenu.subMenuContainer.style.top = getTop(this) + "px";
                  this.menuObject.subMenu.subMenuContainer.style.left = left + "px";
                  
                  break;
                default: // bottom
                  var top = (getTop(this) + this.offsetHeight);
                  
                  if (this.menuObject.parent != undefined)
                    top += 2;
                    
                  this.menuObject.subMenu.subMenuContainer.style.top = top + "px";
                  this.menuObject.subMenu.subMenuContainer.style.left = getLeft(this) + "px";
                  
                  break;
              } // end setting submenu container position
              
              // show the shadow
              if (this.menuObject.subMenu.shadowContainer != undefined)
              {
                this.menuObject.subMenu.shadowContainer.style.visibility = "visible";

                this.menuObject.subMenu.shadowContainer.style.top = getTop(this.menuObject.subMenu.subMenuContainer) + 6 + "px";
                this.menuObject.subMenu.shadowContainer.style.left = getLeft(this.menuObject.subMenu.subMenuContainer) + 6 + "px";
              }
                
              this.menuObject.isSubMenuVisible = true;
              
              if (this.menuObject.timerFadeID != undefined)
              {
                window.clearInterval(this.menuObject.timerFadeID);
              }
    
              this.menuObject.timerFadeID = setInterval('fadeSubMenuIn(' + this.menuObject.allMenusIndex + ')',fadeInterval);
            }
            
            // cancel the hide menu timer if set
            if (this.menuObject.timerSubMenuID != undefined)
            {
              window.clearTimeout(this.menuObject.timerSubMenuID);
              this.menuObject.timerSubMenuID = undefined;
            }
          }; // end on mouse over
          
          if (this.parent == undefined)
          {
            if (isFloat == true)
            {
              if (is_ie)
              {
                this.menu.style.styleFloat = "left";
              }
              else
              {
                this.menu.style.cssFloat = "left";
              }
            }
            
            menuContainer.appendChild(this.menu);
          }
          else
          {
            this.parent.subMenu.subMenuContainer.appendChild(this.menu);
          }
          
          if (this.subMenu != undefined)
          {
            this.subMenu.draw();
          }
        }; // end draw method
      }; // end MyMenu class
      
      // Set MyMenu to inherit from MyObject
      MyMenu.prototype = new MyObject();

      // This function is called to hide a subMenu container
      function hideSubMenu(menuIndex)
      {
        var myMenu = allMenus[menuIndex];
        
        myMenu.timerSubMenuID = undefined;
        myMenu.isSubMenuVisible = false;
        
        if (myMenu.timerFadeID != undefined)
        {
          window.clearInterval(myMenu.timerFadeID);
        }
    
        myMenu.timerFadeID = setInterval('fadeSubMenuOut(' + menuIndex + ')',fadeInterval);
      }; // end hideSubMenu
      
      function fadeSubMenuIn(menuIndex)
      {
        var myMenu = allMenus[menuIndex];
        
        if (is_ie)
        {
          if (myMenu.subMenu.subMenuContainer.filters["alpha"] == undefined || myMenu.subMenu.subMenuContainer.filters["alpha"].opacity >= myMenu.subMenu.alpha)
          {
            clearInterval(myMenu.timerFadeID);
            return;
          }
          
          // The adjusted amount to actually fade each step
          var fadeAmount = fadeDelta * (myMenu.subMenu.alpha / 100);
          
          var alpha = ((myMenu.subMenu.subMenuContainer.filters["alpha"].opacity + fadeAmount) > myMenu.subMenu.alpha)?(myMenu.subMenu.alpha):(myMenu.subMenu.subMenuContainer.filters["alpha"].opacity + fadeAmount);
          
          myMenu.subMenu.subMenuContainer.style.filter = 'alpha(opacity=' + alpha + ')';
          
          // show the shadow
          if (myMenu.subMenu.shadowContainer != undefined)
            myMenu.subMenu.shadowContainer.style.filter = 'alpha(opacity=' + alpha + ')';
        }
        else // for mozilla
        {
          if (myMenu.subMenu.subMenuContainer.style.opacity == "" || parseFloat(myMenu.subMenu.subMenuContainer.style.opacity) >= 1)
          {
            clearInterval(myMenu.timerFadeID);
            return;
          }
          
          // The adjusted amount to fade each step
          var fadeAmount = (fadeDelta/100) * (myMenu.subMenu.alpha / 100);
          
          var alpha = ((parseFloat(myMenu.subMenu.subMenuContainer.style.opacity) + fadeAmount) > (myMenu.subMenu.alpha/100))?((myMenu.subMenu.alpha/100)):(parseFloat(myMenu.subMenu.subMenuContainer.style.opacity) + fadeAmount);
    
          myMenu.subMenu.subMenuContainer.style.opacity = alpha;
          
          // show the shadow
          if (myMenu.subMenu.shadowContainer != undefined)
            myMenu.subMenu.shadowContainer.style.opacity = alpha;
        }
      }; // end fadeSubMenuIn
      
      function fadeSubMenuOut(menuIndex)
      {
        var myMenu = allMenus[menuIndex];
        
        if (is_ie)
        {
          if (myMenu.subMenu.subMenuContainer.filters["alpha"] != undefined && myMenu.subMenu.subMenuContainer.filters["alpha"].opacity <= 0)
          {
            clearInterval(myMenu.timerFadeID);
            //myMenu.subMenu.subMenuContainer.style.display = "none";
            myMenu.subMenu.subMenuContainer.style.visibility = "hidden";
            
            // hide the shadow
            if (myMenu.subMenu.shadowContainer != undefined)
              myMenu.subMenu.shadowContainer.style.visibility = "hidden";
              
            return;
          }
          
          var alpha = ((myMenu.subMenu.subMenuContainer.filters["alpha"] != undefined)?(myMenu.subMenu.subMenuContainer.filters["alpha"].opacity):(100)) - fadeDelta;
    
          if (alpha < 0)
            alpha = 0;
            
          myMenu.subMenu.subMenuContainer.style.filter = 'alpha(opacity=' + alpha + ')';
          
          // hide the shadow
          if (myMenu.subMenu.shadowContainer != undefined)
            myMenu.subMenu.shadowContainer.style.filter = 'alpha(opacity=' + alpha + ')';
        }
        else // for mozilla
        {
          if (myMenu.subMenu.subMenuContainer.style.opacity != "" && parseFloat(myMenu.subMenu.subMenuContainer.style.opacity) <= 0)
          {
            clearInterval(myMenu.timerFadeID);
            //myMenu.subMenu.subMenuContainer.style.display = "none";
            myMenu.subMenu.subMenuContainer.style.visibility = "hidden";

            // hide the shadow
            if (myMenu.subMenu.shadowContainer != undefined)
              myMenu.subMenu.shadowContainer.style.visibility = "hidden";
            
            return;
          }
          
          var alpha = ((myMenu.subMenu.subMenuContainer.style.opacity != "")?(parseFloat(myMenu.subMenu.subMenuContainer.style.opacity)):(1)) - (fadeDelta / 100);
          
          if (alpha < 0)
            alpha = 0;
            
          myMenu.subMenu.subMenuContainer.style.opacity = alpha;
          
          // hide the shadow
          if (myMenu.subMenu.shadowContainer != undefined)
            myMenu.subMenu.shadowContainer.style.opacity = alpha;
        }
      }; // end fadeSubMenuOut
      
      function getTop(object)
      {
        var top = object.offsetTop;
        var obj = object;
        
        while (obj = obj.offsetParent)
        {
          top += obj.offsetTop;
        }
        
        return top;
      }; // end getTop
      
      function getLeft(object)
      {
        var left = object.offsetLeft;
        var obj = object;
        
        while (obj = obj.offsetParent)
        {
          left += obj.offsetLeft;
        }
        
        return left;
      }; // end getLeft
      
      // 'obj': The object to create a shadow on
      function createShadow(obj)
      {
        var container = document.createElement("div");
        container.style.position = "absolute";
        container.style.width = obj.offsetWidth + "px";
        container.style.height = obj.offsetHeight + "px";
        container.style.left = getLeft(obj) + 6 + "px";
        container.style.top = getTop(obj) + 6 + "px";
        container.style.zIndex = 0;
        document.body.appendChild(container);
        
        createShadowLayer(container, 0, 10);
        createShadowLayer(container, 1, 20);
        createShadowLayer(container, 2, 30);
        createShadowLayer(container, 3, 40);
        createShadowLayer(container, 4, 50);
        createShadowLayer(container, 5, 60);
        
        container.style.visibility = "hidden";
        if (is_ie)
        {
          container.style.filter = 'alpha(opacity=0)';
        }
        else // for mozilla
        {
          container.style.opacity = 0;
        }
        
        return container;
      };
      
      // This is only used by createShadow
      function createShadowLayer(obj,offset,alpha)
      {
        var shadowLayer = document.createElement("div");
        shadowLayer.style.position = "absolute";
        shadowLayer.style.top = (offset - 2) + "px";
        shadowLayer.style.left = (offset - 2) + "px";
        shadowLayer.style.width = obj.offsetWidth - (offset*2) + "px";
        shadowLayer.style.height = obj.offsetHeight - (offset*2) + "px";
        //shadowLayer.style.backgroundColor = "gray";
        shadowLayer.style.borderRight = "1px solid gray";
        shadowLayer.style.borderBottom = "1px solid gray";
        // do not have a left and top borders - important because if an item is partially transparent and has a shadow
        //   we do not want to see the border of the shadow (creates a line)
        shadowLayer.style.borderTop = "0px solid gray";
        shadowLayer.style.borderLeft = "0px solid gray";
        
        if (is_ie)
        {
          shadowLayer.style.filter = 'alpha(opacity=' + alpha + ')';
        }
        else // for mozilla
        {
          shadowLayer.style.opacity = alpha/100;
        }
        obj.appendChild(shadowLayer);
      };