﻿if (window.attachEvent) {
    window.attachEvent("onload", initMenuBar);
}
else if (window.addEventListener) {
    window.addEventListener("load", initMenuBar, false);
}

var Page = 
{
    BasePath : "/",
    MenuMouseOutTimeoutId : null,
    MainMenuSeparator : "::",
    MainMenu : {
                  "Home"              : "index.php",
                  "Ram Kapoor"        : "",
                  "Forum"          : "",
                  "Ram Tweets"      		: "ramtweets.php",    
                  "Free For All"      : "",
                  "Development Team"  : ""
               },
    SubMenu2 : {
                  "Biography"       : "ramkapoorbio.htm",
                  "Interview:"       : "",
                  "&raquo;&nbsp;Ram Kapoor"      : "raminterview.htm",
				  "&raquo;&nbsp;Ram Kapoor Sep 08"      : "raminterview11.htm",
                  "&raquo;&nbsp;Rita Kapoor"     : "ritainterview.htm",
                  "Professional"    : "ramtv.htm",
                  "Words By..."     : "ramquotations.htm",
                  "What Fans Say"       : "ramfanssay.htm"
               },
    SubMenu3 : {
                  "Discussion Board"           : "/forum",
                  "Picture Gallery" : "/gallery",
                  "Articles"        : "/forum/index.php?board=14.0",
                  "Video Mixes"     : "/forum/index.php?board=13.0",
                  "Puzzles"         : "/forum/index.php?topic=2.0"
               },
    
      SubMenu5 : {
                  "Ram's Blog"   : "/blog-r",
                  "Media Gallery"         : "/podcast",
                  "Guest Book"            : "/GuestBook",
                  "Newsletter"            : "NL_Jul-Sept_11.htm",
		  "Archives"              : "/archive"
               },
    SubMenu6 : {
                  "Help"            : "/forum/index.php?action=help",
                  "Code of Conduct" : "/forum/index.php?topic=5.0",
                  "Privacy"         : "privacy.htm",
                  "Forum Rules"     : "/forum/index.php?topic=4.0",
				  "Contact Us"      : "contactus.htm"
              }
};

function initMenuBar()
{
    if (typeof(Page.MainMenu)=="undefined") {
        alert("The required variable \"Page.MainMenu\" is not defined.");
        return;
    }
    if (typeof(Page.MainMenuSeparator)=="undefined") {
        alert("The required variable \"Page.MainMenuSeparator\" is not defined.");
        return;
    }
    if (typeof(Page.MenuMouseOutTimeoutId)=="undefined") {
        alert("The required variable \"Page.MenuMouseOutTimeoutId\" is not defined.");
        return;
    }
    
    var parentBar = $("MenuBar");
    
    if (parentBar) {
        var mainMenu = document.createElement("UL");
        mainMenu.id = "Menu";
        
        var firstMenu = true;
        
        // Create main menu
        var menuCount = 1;
        for (var label in Page.MainMenu) {
            var url = Page.MainMenu[label];
            if (url.indexOf("/") != 0)
                url = Page.BasePath + url;
 
            var menu = createMenuItem("Menu" + menuCount.toString(), "Text");
            var text = createMenuLink(label, url);
            var separator = createMainMenuSeparator();
            
            firstMenu ? (firstMenu = false) : (mainMenu.appendChild(separator));
            
            menu.appendChild(text);
            mainMenu.appendChild(menu);
            
            menuCount += 1;
        }
        
        parentBar.appendChild(mainMenu);
        
        
        // Create submenu, if any
        for (var property in Page) {
            if (property.indexOf("SubMenu") == 0) {
                var index = property.replace("SubMenu", "");
                var parentMenu = $("Menu" + index);
                var parentMenu_offsetTop = getOffsetY(parentMenu);
                var parentMenu_offsetLeft = getOffsetX(parentMenu);

                var submenu = document.createElement("UL");
                submenu.id = "Submenu" + index;
                submenu.className = "Submenu";
                submenu.style.display = "none";
                submenu.style.position = "absolute";
                submenu.style.zIndex = 99999;
                submenu.style.top = (parentMenu_offsetTop + parentMenu.offsetHeight) + "px";
				//alert([parentMenu_offsetTop, parentMenu.offsetHeight])
                submenu.style.left = parentMenu_offsetLeft + "px";
                
                // Attach "onmouseover" and "onmouseout" events to submenu and its parent
                if (parentMenu) {
                    if (parentMenu.attachEvent) {
                        parentMenu.attachEvent("onmouseover", menu_OnMouseOverOut);
                        parentMenu.attachEvent("onmouseout", menu_OnMouseOverOut);
                        submenu.attachEvent("onmouseover", menu_OnMouseOverOut);
                        submenu.attachEvent("onmouseout", menu_OnMouseOverOut);
                    }
                    else if (parentMenu.addEventListener) {
                        parentMenu.addEventListener("mouseover", menu_OnMouseOverOut, false);
                        parentMenu.addEventListener("mouseout", menu_OnMouseOverOut, false);
                        submenu.addEventListener("mouseover", menu_OnMouseOverOut, false);
                        submenu.addEventListener("mouseout", menu_OnMouseOverOut, false);
                    }
                }
                
                // Create submenu items
                for (var label in Page[property]) {
                    var url = Page[property][label];
                    if (url.indexOf("/") != 0)
                        url = Page.BasePath + url;
                        
                    var menu = createSubmenuItem(null, "", label, url);
                    submenu.appendChild(menu);
                }
                parentBar.appendChild(submenu);                
            }
        }
    }
}

function createSubmenuItem(id, className, label, url)
{
    var submenu = createMenuItem(id, className);
    submenu.innerHTML = label;
    
    if (url.replace(Page.BasePath,"").length == 0) {
        if (submenu.attachEvent) {
            submenu.attachEvent("onmouseover", function() { submenu.style.cursor="default"; submenu.style.textDecoration="none"; });
        }
        else if (submenu.addEventListener) {
            submenu.addEventListener("mouseover", function() { submenu.style.cursor="default"; submenu.style.textDecoration="none"; }, false);
        }
    }
    else {
        if (label.indexOf("&raquo;") == 0) {
            submenu.style.paddingLeft = "15px";
            submenu.style.marginTop = "-3px";
        }
    
        if (submenu.attachEvent) {
            submenu.attachEvent("onclick", function() {location.href=url; });
            submenu.attachEvent("onmouseover", function() { submenu.style.cursor="pointer"; submenu.style.textDecoration="underline"; });
            submenu.attachEvent("onmouseout", function() { submenu.style.cursor="default"; submenu.style.textDecoration="none"; });
        }
        else if (submenu.addEventListener) {
            submenu.addEventListener("click", function() {location.href=url;}, false);
            submenu.addEventListener("mouseover", function() { submenu.style.cursor="pointer"; submenu.style.textDecoration="underline"; }, false);
            submenu.addEventListener("mouseout", function() { submenu.style.cursor="default"; submenu.style.textDecoration="none"; }, false);
        }
    }
    return submenu;
}
function createMenuItem(id, className)
{
    var menu = document.createElement("LI");
    menu.id = id || "";
    menu.className = className || "";
    return menu;   
}

function menu_OnMouseOverOut(event)
{
    if (!event) return;
    var menu = event.srcElement;    
    if (!menu)  menu = event.target;

    if (menu) {
        // Get the correct menu object
        while (menu && menu.id.toLowerCase().indexOf("menu") < 0) {
            menu = menu.parentNode;
        }
        if (!menu) {
            alert("Could not find the correct parent menu item.");
            return;
        }
        
        var isMouseout = (event.type.indexOf("mouseout") >=0 );
        var isMouseover = (event.type.indexOf("mouseover") >=0 );    
                
        var subMenu;
        
        if (menu.id.indexOf("Submenu") == 0) {
            subMenu = menu;            
        }
        // Source element is a main menu item, try to get its submenu
        else if (menu.id.indexOf("Menu") == 0) {
            var mainMenuId = menu.id;
            var subMenuId = "Submenu" + mainMenuId.replace("Menu", "");
            subMenu = $(subMenuId);

            if (isMouseover) {
                // Hide all possibly shown submenus
                var menuContainer = menu.parentNode.parentNode;
                var menus = menuContainer.getElementsByTagName("UL");
                for (var i=0, count=menus.length; i<count; i++) {
                    if (menus[i].id.indexOf("Submenu") == 0)
                        menus[i].style.display = "none";
                }
            }
        }       
        
        if (isMouseover) {
            clearTimeout(Page.MenuMouseOutTimeoutId);
            subMenu.style.display = "block";
        }
        else if (isMouseout) {
            Page.MenuMouseOutTimeoutId = setTimeout(function() {
                                                    subMenu.style.display = "none";
                                                }, 200);
        }
    }
}

function createMenuLink(label, url)
{
    var link;
    if (url.length == 0 || url == Page.BasePath) {
        link = document.createElement("SPAN");
     }
     else {
        link = document.createElement("A");
        link.target = "_self";
        if (url.length > 0 )
            link.href = url;
    }

    link.innerHTML = label;
    return link;
}

function createMainMenuSeparator()
{
    var separator = document.createElement("LI");
    separator.className = "Separator";
    separator.innerHTML = Page.MainMenuSeparator;
    return separator;
}

function $(obj)
{
    if (typeof(obj) == "string") {
        obj = document.getElementById(obj);
    }
    return obj;
}

function getOffsetY(obj)
{
    var offsetY = 0;
    var currObj = $(obj);    
    while (currObj) {
        if (!isNaN(currObj.offsetTop))
            offsetY += currObj.offsetTop;
        currObj = currObj.offsetParent;
    }
    return offsetY;
}

function getOffsetX(obj)
{
    var offsetX = 0;
    var currObj = $(obj);
    while (currObj) {
        if (!isNaN(currObj.offsetLeft))
            offsetX += currObj.offsetLeft;
        currObj = currObj.offsetParent;
    }
    return offsetX;
}



