// My Menu JavaScript File - COPYRIGHT INFORMATION
// This entire file is copyright to Envision Information Technologies, Copyright 2007
// Any use of this code is forbidden without direct authorization from Envision Information Technologies
// Code may not be copied, modified, or used without direct authorization from Envision Information Technologies
// Envsiion Information Technologies, Madison, WI
// info@nvsn-it.com   http://www.nvsn-it.com   608-256-5680

// Things to do
// - As soon as you go over another menu, hide any visible menus
// - Ability to know which the current menu item is - if the URL matches, use a certain class
// - Ability to leave a certain menu open, *or* leave the menu of the active menu open (see http://www.deltanoid.com/board.html)
// - Have a menu expanded class - change the menu item class when it's menu is expanded
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].replace(/'/g,"'") + "';");
      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.placement = undefined;   // This is the placement element
  
  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 the placement element
  this.placement = document.getElementById(this.placementid);
  
/*        // set an event handler to move the menu with the placement container
  this.placement.onmove = function()
  {
    var place = event.srcElement;
    var container = place.menuContainer;
    
    container.style.top = getTop(container.placement) + "px";
    container.style.left = getLeft(container.placement) + "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.className = "menuContainer";
    place.menuContainer.id = "test123";
    place.menuContainer.style.position = "relative";
//          place.menuContainer.style.left = x + "px";
//          place.menuContainer.style.top = y + "px";
    
    // loop through all of the parent objects and set an onmove event
/*          var parentObj = this.placement;
    while (parentObj = parentObj.offsetParent)
    {
      parentObj.menuContainer = place.menuContainer;
      
      parentObj.onmove = function()
      {
        var place = event.srcElement;
        var container = place.menuContainer;
        
        container.style.top = getTop(container.placement) + "px";
        container.style.left = getLeft(container.placement) + "px";
      }
    }        
*/
    place.menuContainer.placement = this.placement;
    
    place.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.top = "0px";
//        this.subMenuContainer.style.left = getLeft(this.parent.menu) + "px";
        this.subMenuContainer.style.left = "0px";

        
        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

function getLeftAlert(object)
{
  var left = object.offsetLeft;
  var obj = object;
  
  alert("class: " + object.className + "   offsetLeft: " + object.offsetLeft + "   clientleft: " + object.clientLeft);
  while (obj = obj.offsetParent)
  {
    alert("id: " + obj.id + "   class: " + obj.className + "   offsetLeft: " + obj.offsetLeft + "    clientLeft: " + obj.clientLeft);
    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);
};