/*****************************************************************************
 *   N a n y a n g      T e c h n o l o g i c a l      U n i v e r s i t y   *
 *                                                                           *
 *                         T a n    N g i a p    E e                         *
 *                                                                           *
 *   S c h o o l      o f      C o m p u t e r      E n g i n e e r i n g    *
 *****************************************************************************/
    
    var previousMenu = 0   //indicate the index of the previous menu that is opened
    var isVisible = false   //indicate whether any of the menus is opened
    
    var menuID = "menu_"    //naming convention
	var menuImageID = "menuImage_"   //naming convention
    var menuJarID = "menuJar_"   //naming convention
    var menuItemID = "menuItem_"   //naming convention
    var menuFilterID = "menuFilter_"   //naming convention
    var menuHiddenID = "menuHidden_"   //naming convention
    
    Menu.prototype.getName = getName
    Menu.prototype.getAction = getAction
    Menu.prototype.getXPos = getXPos
    Menu.prototype.getYPos = getYPos
    Menu.prototype.getWidth = getWidth
    Menu.prototype.getHiddenWidth = getHiddenWidth
    Menu.prototype.getStyles = getStyles
    Menu.prototype.getHiddenStyles = getHiddenStyles
    Menu.prototype.getEffects = getEffects
    Menu.prototype.getMouseoverBackgroundColor = getMouseoverBackgroundColor
    Menu.prototype.getMouseoutBackgroundColor = getMouseoutBackgroundColor
    Menu.prototype.getMouseoverFontColor = getMouseoverFontColor
    Menu.prototype.getMouseoutFontColor = getMouseoutFontColor
    Menu.prototype.getMenuItems = getMenuItems
    Menu.prototype.addMenuItem = addMenuItem
    Menu.prototype.addSeparator = addSeparator
    
    //name defines the name of the menu
    //action defines the action to take when the menu is clicked (input a url etc)
    //xPos defines the x-position of the menu
    //yPos defines the y-position of the menu
    //width defines the width of the menu
    //hiddenWidth defines the width of the hidden menu when the mouse moves over
    //styles defines the stylesheet of the menu
    //hiddenStyles defines the stylesheet of the hidden menu when the mouse moves over
    //effects defines the special effects of the menu when displayed
    //mouseoverBackgroundColor defines the background color displayed when the mouse moves over the menu
    //mouseoutBackgroundColor defines the background color displayed when the mouse moves out the menu
    //mouseoverFontColor defines the font color displayed when the mouse moves over the menu
    //mouseoutFontColor defines the font color displayed when the mouse moves out the menu
    
    function Menu(name, action, xPos, yPos, width, hiddenWidth, styles, hiddenStyles, effects, mouseoverBackgroundColor, mouseoutBackgroundColor, mouseoverFontColor, mouseoutFontColor)
   {
       this.name = name
       this.action = action
       this.xPos = xPos
       this.yPos = yPos
       this.width = width
       this.hiddenWidth = hiddenWidth
       this.styles = styles
       this.hiddenStyles = hiddenStyles
       this.effects = effects
       this.mouseoverBackgroundColor = mouseoverBackgroundColor
       this.mouseoutBackgroundColor = mouseoutBackgroundColor
       this.mouseoverFontColor = mouseoverFontColor
       this.mouseoutFontColor = mouseoutFontColor
       
       this.menuItems = new Array()
   }
    
    function getName()
   {
       return this.name
   }
    
    function getAction()
   {
       return this.action
   }
    
    function getXPos()
   {
       return this.xPos
   }
    
    function getYPos()
   {
       return this.yPos
   }
    
    function getWidth()
   {
       return this.width
   }
    
    function getHiddenWidth()
   {
       return this.hiddenWidth
   }
    
    function getStyles()
   {
       return this.styles
   }
    
    function getHiddenStyles()
   {
       return this.hiddenStyles
   }
    
    function getEffects()
   {
       return this.effects
   }
    
    function getMouseoverBackgroundColor()
   {
       return this.mouseoverBackgroundColor
   }
    
    function getMouseoutBackgroundColor()
   {
       return this.mouseoutBackgroundColor
   }
    
    function getMouseoverFontColor()
   {
       return this.mouseoverFontColor
   }
    
    function getMouseoutFontColor()
   {
       return this.mouseoutFontColor
   }
    
    function getMenuItems()
   {
       return this.menuItems
   }
    
    function addMenuItem(menuItem)
   {
       this.menuItems.push(menuItem)
   }
    
    function addSeparator(separator)
   {
       this.menuItems.push(separator)
   }
    
    function reposition(menus)
   {
       var leftOffset = 0
       var topOffset = 80
       
       for(var i = 0; i < menus.length; i++)
      {
          if(menus[i].constructor == Menu)
         {
             var offsetHeight = parseInt(document.getElementById(menuID+(i+1)).offsetHeight)
             var offsetWidth = parseInt(document.getElementById(menuID+(i+1)).offsetWidth)
             
             if(i == 0)
            {
                leftOffset = 20
            }
             document.getElementById(menuID+(i+1)).style.left = leftOffset + "px"
             document.getElementById(menuID+(i+1)).style.top = topOffset + "px"
             
             leftOffset += menus[i].getWidth()
             
             var left = document.getElementById(menuID+(i+1)).style.left
             var top = parseInt(document.getElementById(menuID+(i+1)).style.top)
             
             document.getElementById(menuFilterID+(i+1)).style.left = left
             document.getElementById(menuFilterID+(i+1)).style.top = (top + offsetHeight) + "px"
             
             var hidden_left = document.getElementById(menuFilterID+(i+1)).style.left
             var hidden_top = document.getElementById(menuFilterID+(i+1)).style.top
             var hidden_height = document.getElementById(menuJarID+(i+1)).offsetHeight
             var hidden_width = document.getElementById(menuJarID+(i+1)).offsetWidth
             
             document.getElementById(menuHiddenID+(i+1)).style.left = hidden_left
             document.getElementById(menuHiddenID+(i+1)).style.top = hidden_top
             document.getElementById(menuHiddenID+(i+1)).style.height = hidden_height
             document.getElementById(menuHiddenID+(i+1)).style.width = hidden_width
         }
      }
   }
    
    function construct(menus)
   {
       var innerHTML = ""
       
       for(var i = 0; i < menus.length; i++)
      {
          innerHTML += "<div id='" +menuHiddenID+(i+1)+ "' style='background-color:#ffffff;position:absolute;left:0px;top:0px;height:0px;width:0px;visibility:hidden;filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);'></div>"
          
          if(menus[i].constructor == Menu)
         {
			 if(menus[i].getAction() == "none")
			 {
				 innerHTML += "<div id='" +menuID+(i+1)+ "' onmouseout=\"this.style.backgroundColor='" +menus[i].getMouseoutBackgroundColor()+ "';this.style.color='" +menus[i].getMouseoutFontColor()+ "'\" onmouseover=\"this.style.backgroundColor='" +menus[i].getMouseoverBackgroundColor()+ "';this.style.color='" +menus[i].getMouseoverFontColor()+ "'\" style='position:absolute;left:" +menus[i].getXPos()+ "px;top:" +menus[i].getYPos()+ "px;width:" +menus[i].getWidth()+ "px;" +menus[i].getStyles()+ "'>" +menus[i].getName()+ "</div>"
			 }
			 else
			 {
				 innerHTML += "<div id='" +menuID+(i+1)+ "' onclick=\"window.location.replace('" +menus[i].getAction()+ "')\" onmouseout=\"this.style.backgroundColor='" +menus[i].getMouseoutBackgroundColor()+ "';this.style.color='" +menus[i].getMouseoutFontColor()+ "'\" onmouseover=\"this.style.backgroundColor='" +menus[i].getMouseoverBackgroundColor()+ "';this.style.color='" +menus[i].getMouseoverFontColor()+ "'\" style='position:absolute;left:" +menus[i].getXPos()+ "px;top:" +menus[i].getYPos()+ "px;width:" +menus[i].getWidth()+ "px;" +menus[i].getStyles()+ "'>" +menus[i].getName()+ "</div>"
			 }
             innerHTML += "<div id='" +menuFilterID+(i+1)+ "' style=\"position:absolute;left:0px;top:0px;width:" +menus[i].getHiddenWidth()+ "px;" +(menus[i].getEffects() == "" ? "" : "filter:" +menus[i].getEffects()+ ";")+ "z-index:1;\">"
             innerHTML += "<div id='" +menuJarID+(i+1)+ "' style='visibility:hidden;" +menus[i].getHiddenStyles()+ "'>"
             
             for(var j = 0; j < menus[i].getMenuItems().length; j++)
            {
                var menuItem = menus[i].getMenuItems()[j]
                
                if(menuItem.constructor == MenuItem)
               {
                   if(j+1 == menus[i].getMenuItems().length)   //indicate is the last menu item
                  {
                      innerHTML += "<div id='" +menuItemID+(i+1)+ "' onclick=\"window.location.replace('" +menuItem.getAction()+ "')\" onmouseout=\"this.style.backgroundColor='" +menuItem.getMouseoutBackgroundColor()+ "';this.style.color='" +menuItem.getMouseoutFontColor()+ "'\" onmouseover=\"this.style.backgroundColor='" +menuItem.getMouseoverBackgroundColor()+ "';this.style.color='" +menuItem.getMouseoverFontColor()+ "'\" style='text-align:left;border-bottom:" +menuItem.getBorder()+ ";border-left:" +menuItem.getBorder()+ ";border-right:" +menuItem.getBorder()+ ";border-top:" +menuItem.getBorder()+ ";padding-bottom:" +menuItem.getPaddingBottom()+ "px;padding-left:" +menuItem.getPaddingLeft()+ "px;padding-right:" +menuItem.getPaddingRight()+ "px;padding-top:" +menuItem.getPaddingTop()+ "px;width:" +menus[i].getHiddenWidth()+ "px;'>" +menuItem.getName()+ "</div>"
                  }
                   else
                  {
                      innerHTML += "<div id='" +menuItemID+(i+1)+ "' onclick=\"window.location.replace('" +menuItem.getAction()+ "')\" onmouseout=\"this.style.backgroundColor='" +menuItem.getMouseoutBackgroundColor()+ "';this.style.color='" +menuItem.getMouseoutFontColor()+ "'\" onmouseover=\"this.style.backgroundColor='" +menuItem.getMouseoverBackgroundColor()+ "';this.style.color='" +menuItem.getMouseoverFontColor()+ "'\" style='text-align:left;border-bottom:0px;border-left:" +menuItem.getBorder()+ ";border-right:" +menuItem.getBorder()+ ";border-top:" +menuItem.getBorder()+ ";padding-bottom:" +menuItem.getPaddingBottom()+ "px;padding-left:" +menuItem.getPaddingLeft()+ "px;padding-right:" +menuItem.getPaddingRight()+ "px;padding-top:" +menuItem.getPaddingTop()+ "px;width:" +menus[i].getHiddenWidth()+ "px;'>" +menuItem.getName()+ "</div>"
                  }
               }
            }
             innerHTML += "</div>"
             innerHTML += "</div>"
         }
          /*if(this.elements[i].constructor == Separator)
         {
             innerHTML += '<div class="separatorTop"></div>'
             innerHTML += '<div class="separatorBottom"></div>'
         }*/
      }//alert(innerHTML)
       return innerHTML
   }
    
    function activate(menus)
   {
       var focusedElementID = event.srcElement.id
       var initials = focusedElementID.substring(0, focusedElementID.indexOf("_")+1)   //use to verify if the mouse cursor is within the menu hierarchy
       
       if(initials == menuID || initials == menuImageID || initials == menuJarID || initials == menuItemID || initials == menuFilterID)   //indicate the mouse cursor is within the menu hierarchy
      {
          var menuIndex = focusedElementID.substring(focusedElementID.indexOf("_")+1, focusedElementID.length)
          
          if(menuIndex != previousMenu)   //indicate the user selects a new menu (not the previous menu), therefore close all opened menus before opening the new menu
         {
             isVisible = false
             previousMenu = menuIndex
             
             for(var i = 0; i < menus.length; i++)
            {
                var menuJar = document.getElementById(menuJarID + (i+1))
                menuJar.style.visibility = "hidden"
                
                var menuHidden = document.getElementById(menuHiddenID + (i+1))
                menuHidden.style.visibility = "hidden"
            }
         }
          if(!isVisible && initials == menuID)
         {
             isVisible = true
             
             var menuFilter = document.getElementById(menuFilterID + menuIndex)
             menuFilter.filters.item(0).Apply()
             
             var menuJar = document.getElementById(menuJarID + menuIndex)
             menuJar.style.visibility = "visible"
             
             var menuHidden = document.getElementById(menuHiddenID + menuIndex)
             menuHidden.style.visibility = "visible"
             
             menuFilter.filters.item(0).Play()
         }
      }
       else   //indicate the mouse cursor is out of the menu hierarchy, therefore close all opened menus
      {
          isVisible = false
          
          for(var i = 0; i < menus.length; i++)
         {
             var menuJar = document.getElementById(menuJarID + (i+1))
             menuJar.style.visibility = "hidden"
             
             var menuHidden = document.getElementById(menuHiddenID + (i+1))
             menuHidden.style.visibility = "hidden"
         }
      }
   }