//Global vars
var timeOn=null;
var selectedMenu=null;
var activeMenu=null;
var activeMenuNo=null;
var activeSubMenu=null;
var activeItem=null;
var mItemHeight=30;
var subMenuOffset_y = 30;

function getElementTop(elem)
{
    var _top=0;
    while (elem != null) 
    {
        _top+=elem.offsetTop;
        elem=elem.offsetParent;
    }
    return _top;
}

function getElementLeft(elem)
{
    var _left=0;
    while (elem != null) 
    {
        _left+=elem.offsetLeft;
        elem=elem.offsetParent;
    }
    return _left;
}

function getElementPos(elem)
{   
    return {x:getElementLeft(elem),y:getElementTop(elem)};
}

function showMenu(menuID,menuNo,subMenuID,itemID)
{
    //Hide current active menu
    if (activeMenu)
        hideMenu(activeMenu,activeMenuNo,activeSubMenu);

    var obj = document.getElementById(menuID);
    var subObj = document.getElementById(subMenuID);
    var itemObj = document.getElementById(itemID);
    if (obj)
    {
        activeMenu = obj;
        activeMenuNo = menuNo;
        
        //view menu in over mode
        var selMnId = null;
        if (selectedMenu != null) selMnId = selectedMenu.id;
        if (obj.id != selMnId)
        {
            //obj.className = 'mn_item_hover';            
            //obj.src = mnImgHover[menuNo];
        }        
        
        // change the sub-menu Item to hover state
        if (itemObj) {
            itemObj.className = 'subMenuItem_hover';
            activeItem = itemObj;
        }
    
        //view sub menu
        //get menu position
        var obj_pos = getElementPos(obj);
        //alert(obj_pos.x + " " +obj_pos.y);
        //set the sub menu position
        if (subObj)
        {
        	
            subObj.style.display = 'block';
            subObj.style.visibility = 'visible';
            subObj.style.top = obj_pos.y + subMenuOffset_y + 'px';
            subObj.style.left = obj_pos.x + 'px';
            
            
            //set new current active menu            
            activeSubMenu = subObj;
        }
        else
            activeSubMenu = null;
    }
}

function hideMenu(mnObj,mnNo,subMnObj)
{
    // change the menu to normal mode
    var selMnId = null;
    if (selectedMenu != null) selMnId = selectedMenu.id;
    if (mnObj && (mnObj.id != selMnId))
    {
        //mnObj.className = 'mn_item';
        //mnObj.src = mnImg[mnNo];
    }
    
    // change menuItem to normal state
    if (activeItem)
        activeItem.className='subMenuItem';
    
    // hide the sub menu
    if (subMnObj)
        subMnObj.style.visibility = 'hidden';
        
    
}

function menuOver() {    
  clearTimeout(timeOn);
}

function menuOut() {
    if (activeSubMenu)
        timeOn = setTimeout("hideMenu(activeMenu,activeMenuNo,activeSubMenu)", 500);
    else
        hideMenu(activeMenu,activeMenuNo,activeSubMenu);
}

function menuBarChangeState(menuNo,stateId)
{
    // Change to normal state
}

//
// Functions to create sub-menus on the fly
//

var menus = new Array();

function subMenu(num)
{
	
    this.num = num;
    this.itemCount = 0;
    this.itemText = new Array();   
    
    this.addItem = function(label,url,target) {
        this.itemCount += 1;
    
        var str = '';
        str = '<tr><td id="item' + num + '_' + this.itemCount + '" onmouseout="menuOut();" onmouseover="menuOver(); ' + 
            'showMenu(\'mn' + this.num + '\',' + this.num + ',\'subMenu' + this.num + 
            '\',\'item' + num + '_' + this.itemCount + '\');" class="subMenuItem" onclick="window.location=\'' + url + '\'">';
        str += '<a href="' + url + '" target="_' + target + '">' + label + '</a>';
        str += '</td></tr>';
        
        this.itemText[this.itemCount] = new String(str);
    }
    
    this.writeMenu = function() {
        var str = '';
        str = '<div id="subMenu' + num + '" style="display:none;position:absolute;background-color:Transparent;z-index:10">';
        str += '<table cellpadding="0" cellspacing="0" class="subMenu">';
        
        if (this.itemCount > 0) {
            for (var i=1;i<=this.itemCount;i++) {
                str += this.itemText[i];
            }
        }
        else {
            str += '<tr><td style="height:0px"></td></tr>';
        }
        
        str += '</table></div>';
        document.write(str);
        //alert(str);
    }
}

function createMenus()
{
    // menu Products
    menus[2] = new subMenu(2);    
    menus[2].addItem('',rootFolder + 'products-thumbnails.aspx?ProductType=1&Group=all','self');
    menus[2].addItem('',rootFolder + 'products-thumbnails.aspx?ProductType=2&Group=all','self');
    menus[2].addItem('',rootFolder + 'products-thumbnails.aspx?ProductType=3&Group=all','self');
    menus[2].addItem('',rootFolder + 'products-thumbnails.aspx?ProductType=4&Group=all','self');
    
    menus[2].writeMenu();
    
    // menu Support
    menus[3] = new subMenu(3);
    menus[3].addItem('',rootFolder + 'support/faqs.aspx','self');
    menus[3].addItem('',rootFolder + 'support','self');
    menus[3].addItem('',rootFolder + 'support','self');
    menus[3].addItem('',rootFolder + 'support','self');
    
    menus[3].writeMenu();
    
    //menu distribution
    menus[4] = new subMenu(4);
    menus[4].addItem('',rootFolder + 'distribution','self');
    menus[4].addItem('',rootFolder + 'distribution','self');
    
    menus[4].writeMenu();
    
    //menu News
    menus[5] = new subMenu(5);
    menus[5].addItem('',rootFolder + 'news/default.aspx?NCID=2','self');
    menus[5].addItem('',rootFolder + 'news/default.aspx?NCID=3','self');
    menus[5].addItem('',rootFolder + 'news/default.aspx?NCID=1','self');
    menus[5].addItem('',rootFolder + 'news/default.aspx?NCID=4','self');
    
    menus[5].writeMenu();
    
    //menu Introduction
    menus[6] = new subMenu(6);
    menus[6].addItem('',rootFolder + 'introduction','self');
    menus[6].addItem('',rootFolder + 'introduction','self');
    menus[6].addItem('',rootFolder + 'introduction','self');
    menus[6].addItem('',rootFolder + 'introduction','self');
    
    menus[6].writeMenu();
    
}