function CreateSubMenu(elem,children,displayedVertically)
    {
        if(children.length>0)
        {
        var name="holderSubMenu"+ children[0].PortletId;
        var holderSub = document.getElementById(name);
        holderSub.innerHTML = "";
        var parentName = "MenuHHD"+ children[0].PortletId;
        var parent = document.getElementById(parentName);
       
        var subMenu = document.createElement("table");
        holderSub.appendChild(subMenu);
        subMenu.setAttribute('class','HHDMenuBenTraiChild');
        subMenu.setAttribute('className','HHDMenuBenTraiChild');
        subMenu.setAttribute('border',0);
        var subMenuName = 'SubMenuHHD' + children[0].PortletId;
        subMenu.setAttribute('id',subMenuName);
        subMenu.style.cssText = "display:none";
       // subMenu.style.cssText="display: none";
        RegisterMouseoverEventForSubMenu(subMenu);
        subMenu.onmouseout = function(event){ RegisterMouseoutEventForSubMenu(children[0].PortletId);}
        var tbody = document.createElement("tbody");
        subMenu.appendChild(tbody);
        
        for(var i=0;i<children.length;i++)
        {
            var row = document.createElement("tr");
            var col = document.createElement("td");
            col.setAttribute('id',children[i].MenuId);/////////////
            col.setAttribute('class','HHDMenuBenTraiParent');
            col.setAttribute('className','HHDMenuBenTraiParent');        
           
            var img = document.createElement("img");
            img.setAttribute('src','Portlets/MenuHHD/HHD/iconbong-hong.gif');
            img.setAttribute('align','absMiddle');
            img.setAttribute('border',0);
            img.style.cssText = "padding-left: 0px";
            
            col.appendChild(img);
            
            var txt = document.createTextNode(" " + children[i].MenuName)////////////////
            col.appendChild(txt);
            RegisterClickEventForSubMenu(col,children[i].MenuLink.replace("~/",""));
            row.appendChild(col);
            tbody.appendChild(row);
        }
			// make the child menu visible and specify that its position is specified in absolute coordinates
			if(children.length>0)
			{
			    subMenu.style.display = 'block';
			    subMenu.style.position = 'absolute';	

			    if (displayedVertically) {
				    // Set the child menu's left and top attributes according to the menu's offsets
				    holderSub.style.cssText = "position: absolute; left:"+(getAscendingLefts(parent) + parent.offsetWidth + 1) +"px;top:"+ getAscendingTops(elem)+"px";
			    }
			    else
			    {
				    // Set the child menu's left and top attributes according to the menu's offsets
				    subMenu.style.left = getAscendingLefts(elem);
				    subMenu.style.top = getAscendingTops(parent) + parent.offsetHeight;
				    if (subMenu.offsetWidth < elem.offsetWidth)
					    subMenu.style.width = elem.offsetWidth;
			    }
			}
	    }
    }
    
    function RegisterClickEventForSubMenu(td,link)
    {
        td.onclick =  function(event){ if(link!="") window.location = link;}
    }
    
    function RegisterMouseoutEventForSubMenu(portletid)
    {
        closeSubMenus_MenuInstance(portletid);
    }
    
    function RegisterMouseoverEventForSubMenu(tb)
    {
        tb.onmouseover =  function(event){ DoNotHidde(); }
    }
    
    function DoNotHidde()
    {
        clearTimeout(hideticker);
    }
    
	function mousedOverMenu_MenuInstance(elem,children,MenuMasterId, displayedVertically)
	{
		//stopTick_MenuInstance();

	    CreateSubMenu(elem,children,displayedVertically);
   
        if(MenuMasterId == "1")
            elem.className = 'HHDMenuBenTraiParentChildHover';
        else
           elem.className =  'HHDMenuBenPhaiParentChildHover';
        if(children.length > 0)
            clearTimeout(hideticker);
	}

    function mousedOutMenu(bigTable,portletId)
    {
        bigTable.onmouseout = function(event){ mousedOutMenuHide(portletId)}  
    }
    
    function mousedOutMenuHide(portletId)
	{
	    closeSubMenus_MenuInstance(portletId);
	}
	
	function mousedOutMenu_MenuInstance(elem,MenuMasterId,portletId)
	{
		elem.style.cursor = 'default';
	//	doTick_MenuInstance(portletId);
		
        if(MenuMasterId =="1")
	        elem.className = 'HHDMenuBenTraiParent';
	    else
	        elem.className = 'HHDMenuBenPhaiParent';
	 
	   // closeSubMenus_MenuInstance(portletId)    
	}

    var hideticker;
	function closeSubMenus_MenuInstance(portletid)
	{
	    var name = "SubMenuHHD" + portletid; 
	    if(document.getElementById(name) != null)   
	    {
	       hideticker = setTimeout("HideSubMenu('"+ portletid +"');",500);
	      
	    }
	}
  
    function HideSubMenu(submenuId)
    {
         document.getElementById("SubMenuHHD"+submenuId).style.display = "none";  
    }
    
	function showSubMenus_MenuInstance()
	{
	    if(document.getElementById("SubMenuHHD") != null) 
	        document.getElementById("SubMenuHHD").style.display = "block";
	}
	
	function getAscendingLefts(elem)
	{
		if (elem == null)
			return 0;
		else
			return elem.offsetLeft + getAscendingLefts(elem.offsetParent);
	}

	function getAscendingTops(elem)
	{

		if (elem == null)
			return 0;
		else
			return elem.offsetTop + getAscendingTops(elem.offsetParent);
	}

	var clockValue = 0;
	var ticker;
	var DELAY_BOUND = 100;
	function doTick_MenuInstance(portletId)
	{
		if (clockValue > DELAY_BOUND)
		{
			stopTick_MenuInstance();
		    closeSubMenus_MenuInstance(portletId);
		}
		else
		{
			clockValue++;
			ticker = setTimeout("doTick_MenuInstance();",20);
		}
	}

	function stopTick_MenuInstance()
	{
		clockValue = 0;
		clearTimeout(ticker);
	}
	
	//var clientId ;	
	function LoadDataMenuRose(portletId,ClientId)
    {
       // clientId = ClientId;
        PSCPortal.CMSService.GetMenuHHDInfo(portletId+"|"+ClientId,OnLoadSucess, OnLoadFail);                       
    }
    
    function OnLoadSucess(result,context,methodName)
    {
       var menus = Sys.Serialization.JavaScriptSerializer.deserialize(result);

       CreateMenuTable(menus);
    }
    
    function OnLoadFail(result,context,methodName)
    {
      //  alert("Qúa trình tải dữ liệu bị lỗi");
    }        
    
    function RegisterEventForMenu(td,childrenOfMenu,MenuMasterId)
    {
        td.onmouseover =  function(event){
                        if(window.event)
                        {
                            var control = window.event.srcElement; 
                            while(control.nodeName.toLowerCase() != 'td')
                               control = control.parentNode;   
                            mousedOverMenu_MenuInstance(td,childrenOfMenu,MenuMasterId,true)
                        }
                        else if(event&&event.target)
                        {
                             var control = event.target;
                             while(control.nodeName.toLowerCase() != 'td')
                               control = control.parentNode;   
                            mousedOverMenu_MenuInstance(td,childrenOfMenu,MenuMasterId,true)
     
                        }
                    }
    }
    
    function RegisterClickEventForMenuParent(td,link)
    {
        td.onclick =  function(event){ if(link!="") window.location = link;}
    }
    
        
        function CreateMenuTable(menus)
        {
            var bigTable = document.createElement("table");
            bigTable.setAttribute('cellspacing',0);
            var id = 'MenuHHD'+menus[0].PortletId
            bigTable.setAttribute('id',id);
            bigTable.setAttribute('cellspadding',0);
            bigTable.setAttribute('border',0);
            /*
            if(menus[0].MenuMasterId == "1")
                bigTable.style.cssText ="border-collapse: collapse";
            else    
                bigTable.style.cssText= "border-collapse: collapse;text-align:left;background-image:url('PublicFolder/HoaHongDo/Images/backgroundmenufai1.jpg')";
               */
            bigTable.style.cssText ="border-collapse: collapse;text-align:left"; 
            var tbody = document.createElement("tbody");
            bigTable.appendChild(tbody);
            mousedOutMenu(bigTable, menus[0].PortletId);
            var portletId;
            var menuMasterId;
            for(var i=0;i<menus.length;i++)
            {
                var row = document.createElement("tr");
                tbody.appendChild(row);
                var col = document.createElement("td");
                col.setAttribute('id',menus[i].MenuId);/////////////
                 menuMasterId  = menus[i].MenuMasterId;
                if( menuMasterId== "1")
                {
                    col.setAttribute('class','HHDMenuBenTraiParent');
                    col.setAttribute('className','HHDMenuBenTraiParent');
                }
                else
                {
                    col.setAttribute('class','HHDMenuBenPhaiParent');
                    col.setAttribute('className','HHDMenuBenPhaiParent');
                }
                RegisterEventForMenu(col,menus[i].children,menus[i].MenuMasterId)
                RegisterClickEventForMenuParent(col,menus[i].MenuLink.replace("~/",""));
                col.onmouseout = function(event){
                    if(window.event)
                    {
                        var control = window.event.srcElement; 
                        while(control.nodeName.toLowerCase() != 'td')
                           control = control.parentNode;  
                      //  if(i<menus.length) 
                            mousedOutMenu_MenuInstance(control,menus[i-1].MenuMasterId,menus[i-1].PortletId);                   
                    }
                    else if(event&&event.target)
                    {
                         var control = event.target;
                         while(control.nodeName.toLowerCase() != 'td')
                           control = control.parentNode;   
                     //   if(i<menus.length)  
                        mousedOutMenu_MenuInstance(control,menus[i-1].MenuMasterId,menus[i-1].PortletId);
                    }
                }
                
                row.appendChild(col,menus[i].children);
               
                var img = document.createElement("img");
                img.setAttribute('src','Portlets/MenuHHD/HHD/iconbong-hong.gif');
                img.setAttribute('align','absMiddle');
                img.setAttribute('border',0);
                img.style.cssText = "padding-left: 0px";
                
                col.appendChild(img);
                
                var txt = document.createTextNode(" " + menus[i].MenuName)////////////////
                col.appendChild(txt);
                portletId =menus[i].PortletId;
            }
            var name = "holderMenuParentHHD"+ portletId;
            if(menuMasterId != "1")
                document.getElementById(name).style.cssText = "Height:125px;background-image:url('PublicFolder/HoaHongDo/Images/backgroundmenufai1.jpg')";
            document.getElementById(name).appendChild(bigTable);
        }
        
        
       /* 
function EC(TheTR,img)
{
	var DataTR = eval('document.all.' + TheTR);
	if (DataTR.style.display == "block" || DataTR.style.display == "" )
	{
		DataTR.style.display = "none";
		img.src = "Templates/DHCS/Images/Down.gif";
	}
	else
	{
		DataTR.style.display = "";
		img.src = "Templates/DHCS/Images/Up.gif";
	}
}
function doHideToolBox(obj)
{
	var objpanel = obj.parentNode.parentNode.parentNode.parentNode.parentNode;
	var objtoolbox = objpanel.parentNode.children[0];				
	objtoolbox.style.display = "block";
	objpanel.style.display = "none";
}
function doShowToolBox(obj)
{
	var objtoolbox = obj.parentNode;
	var objpanel = objtoolbox.parentNode.children[1];				
	objtoolbox.style.display = "none";
	objpanel.style.display = "block";
}
function showDivObject(divID)
{
	var divItem = document.getElementById(divID);
	var frameItem = document.getElementById('shimFrame');
	divItem.style.display="block";	
	var left, top = 113;
	if(document.body.clientWidth <= 800)
	{
		left = 0;
	}
	else
	{
		left = ((document.body.clientWidth - 800)/2) + 7;
	}
	divItem.style.top=top;
	divItem.style.left=left;
	frameItem.style.width=divItem.offsetWidth;
	frameItem.style.height=divItem.offsetHeight;
	frameItem.style.top=divItem.style.top;
	frameItem.style.left=divItem.style.left;
	frameItem.style.zIndex=divItem.style.zIndex-1;
	frameItem.style.display="block";
}
function hideDivObject(divID)
{
	var divItem = document.getElementById(divID);
	var frameItem = document.getElementById('shimFrame');
	frameItem.style.display="none";
	divItem.style.display="none";
}
function Browser() {
  var ua, s, i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}

var browser = new Browser();
var dragObj = new Object();
dragObj.zIndex = 0;

function dragStart(event, id) {

  var el;
  var x, y;

  // If an element id was given, find it. Otherwise use the element being
  // clicked on.

  if (id)
    dragObj.elNode = document.getElementById(id);
  else {
    if (browser.isIE)
      dragObj.elNode = window.event.srcElement;
    if (browser.isNS)
      dragObj.elNode = event.target;

    // If this is a text node, use its parent element.

    if (dragObj.elNode.nodeType == 3)
      dragObj.elNode = dragObj.elNode.parentNode;
  }

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Save starting positions of cursor and element.

  dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;
  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;

  // Update element's z-index.

  dragObj.elNode.style.zIndex = ++dragObj.zIndex;

  // Capture mousemove and mouseup events on the page.

  if (browser.isIE) {
    document.attachEvent("onmousemove", dragGo);
    document.attachEvent("onmouseup",   dragStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS) {
    document.addEventListener("mousemove", dragGo,   true);
    document.addEventListener("mouseup",   dragStop, true);
    event.preventDefault();
  }
}

function dragGo(event) {

  var x, y;

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Move drag element by the same amount the cursor has moved.

  dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";

  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS)
    event.preventDefault();
}

function dragStop(event) {

  // Stop capturing mousemove and mouseup events.

  if (browser.isIE) {
    document.detachEvent("onmousemove", dragGo);
    document.detachEvent("onmouseup",   dragStop);
  }
  if (browser.isNS) {
    document.removeEventListener("mousemove", dragGo,   true);
    document.removeEventListener("mouseup",   dragStop, true);
  }
}*/