Build a simple fancy menu : Menu « GUI Components « JavaScript DHTML






Build a simple fancy menu

//CopyRight 1998-2005 Scand LLC.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
  <title>Javascript Menu samples. dhtmlXMenu - Initializing menu object</title>
</head>
<style>
  body {font-size:12px}
  .{font-family:arial;font-size:12px}
  h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
  xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
</style>
<body>
  <h1>Initializing menu object</h1>
  <!-- dhtmlXMenu.css -->
  <style rel="STYLESHEET" type="text/css">
/*button text - all levels*/
.menuButtonSecond td, .menuButton td, .menuButtondown td, .menuButtonover td {
  cursor:default;
}
/*menu text - all levels*/
.defaultMenuText{
  font: 11px "Microsoft Sans Serif",Arial;
  padding-left:10px;
  padding-right:5px;
}
/*menu caption if any*/
.menuName{
  color : gray;
  letter-spacing : 7px;
  font : 11px Arial,sans-serif;
  padding-left : 10px;
  padding-right : 10px;
}
/*========= BUTTONS ======================*/

/*plain button state - top level*/
.menuButton {
  border : solid 1px ButtonFace;
}
/*down button state - top level*/
.menuButtondown {
  background-color : ButtonFace;/*#DBD8D1*/
  border-bottom : solid 1px #FFFFFF;
  border-left : solid 1px #808080;
  border-right : solid 1px #FFFFFF;
  border-top : solid 1px #808080;
  cursor : default;
}
/*mouse over button state - top level*/
.menuButtonover {
  background-color : ButtonFace;
  border-bottom : solid 1px #808080;
  border-left : solid 1px #FFFFFF;
  border-right : solid 1px #808080;
  border-top : solid 1px #FFFFFF;
  cursor : default;
}
/*plain button state - other levels*/
.menuButtonSecond {
  background-color:ButtonFace;/*#xD4D0C8*/
  border:1px solid ButtonFace;
  font:12px Arial,sans-serif;
}
/*mouse over button and down button states - other levels*/
.menuButtonSecondover, .menuButtonSeconddown {
  background-color : navy;
  color:white;
  cursor : default;
  border:1px solid navy;
  font:12px Arial,sans-serif;
}
/*icon place style on button over/down - other levels
.menuButtonSeconddownimg {
  background-color : #C9D9F5;
}*/

/*text of mouse over button - other levels*/
.menuButtonSeconddown td {
   color:white;
   cursor:default;
   border:0px solid;
}


/*============ PANELS and DEVIDERS ===========================================*/

/*manu panel - top level*/
.menuTable{
  background-color : ButtonFace;
  border-bottom : solid #808080 1px;
  border-left : solid #FFFFFF 1px;
  border-right : solid #808080 1px;
  border-top : solid #FFFFFF 1px;
  margin : 0px;
  -moz-user-select : none;
  padding : 0px;
  
}
/*menu panel - other levels*/
.secondMenuTable{
  background-color : ButtonFace;
  border: 2px outset #ffffff; 
  margin : 0px;
  -moz-user-select : none;
  padding : 0 1 0 2;
}

/*devider - horizontal*/
.menudivider {
  background-color : ButtonFace;
  border-left : solid #808080 1px;
  border-right : solid #FFFFFF 1px;
  height : 100%;
  margin-bottom : 2px;
  margin-top : 1px;
  overflow : hidden;
  vertical-align : middle;
  width : 2px;
}
/*devider - vertical*/
.menudividery {
  background-color : ButtonFace;
  border-bottom : solid #FFFFFF 1px;
  border-top : solid #808080 1px;
  height : 2px;
  overflow : hidden;
  width : 100%;
}

/*================== DRAG HANDLERS ==================*/

/*drag handler for menu - horizontal*/
.menuhandle {
  background-color : ButtonFace;
  border-bottom : solid #808080 1px;
  border-left : solid #FFFFFF 1px;
  border-right : solid #808080 1px;
  border-top : solid #FFFFFF 1px;
  cursor : move;
  height : 100%;
  overflow : hidden;
  width : 3px;
}
/*drag handler for menu - vertical*/
.vmenuhandle {
  background-color : ButtonFace;
  border-bottom : solid #808080 1px;
  border-left : solid #FFFFFF 1px;
  border-right : solid #808080 1px;
  border-top : solid #FFFFFF 1px;
  cursor : move;
  height : 3px;
}


/*============ ICONS and SCROLLERS ====================*/

/*disabled icon - all levels*/
.iconGray {
  filter : BlendTrans(Percent=50) gray(); 
  cursor: default; 
  border:solid 1px ButtonFace;
}

/*enabled scroller*/
.menuscrollerenabled{
  background-color:#CAC8D4;
   cursor: pointer;  
   text-align:center;
}
/*disabled scroller*/
.menuscrollerdisabled{
  background-color: #CAC8D4;
  cursor: default;
  visibility:hidden;
  text-align:center;
}  
  </style>
  <!-- dhtmlXProtobar.js -->
  <script language="JavaScript">
    /**  
          *     @desc: protobar object
          *     @param: func - user defined function
          *     @type: private  
          *     @topic: 0  
          */
    function dhtmlXProtobarObject(){
      return this;
    }
    
    /**  
          *     @desc: set action hadler on menu showing
          *     @param: func - user defined function
          *     @type: public
          *     @topic: 2  
          */     
    dhtmlXProtobarObject.prototype.setOnShowHandler=function(func){
          if (typeof(func)=="function") this.onShow=func; else this.onShow=eval(func); 
    };
            
    /**  
          *     @desc: return item index in collection by id
          *     @type: private
      *     @param: id - item id
      *     @topic: 3
          */    
    dhtmlXProtobarObject.prototype._getItemIndex=function(id){
      for (var i=0; i<this.itemsCount; i++)
      {
        if (this.items[i].id==id) return i;
      };    
      return -1;
    };
    /**  
          *     @desc: set path to system images
          *     @param: path - relative path to images
          *     @type: public
          *     @topic: 2 
          */     
    dhtmlXProtobarObject.prototype.setGfxPath=function(path){
        this.sysGfxPath=path;
    };
        
    /**  
          *     @desc: set action hadler on menu hiding
          *     @param: func - user defined function
          *     @type: public
          *     @topic: 2 
          */     
    dhtmlXProtobarObject.prototype.setOnHideHandler=function(func){
        if (typeof(func)=="function") this.onHide=func; else this.onHide=eval(func);     
    };
    /**  
          *     @desc: set item individual action
          *     @param: id - item identificator
          *     @param: action  - js function called on item selection
          *     @type: public
          *     @topic: 2  
          */       
    dhtmlXProtobarObject.prototype.setItemAction=function(id,action){
      var z=this._getItemIndex(id);
      if (z>=0){
        this.items[z].setSecondAction(action);
      };
    };
        /**  
          *     @desc: return item object by id
          *     @type: public
      *     @param: itemId - item id
        *     @topic: 4
          */    
    dhtmlXProtobarObject.prototype.getItem=function(itemId){
      var z=this._getItemIndex(itemId);
      if (z>=0)   return this.items[z];
    };
    /**  
          *     @desc: hide menu buttons
          *     @type: public
      *     @param: idList - list of items's ids, separated by comma
        *     @topic: 4
          */      
    dhtmlXProtobarObject.prototype.hideButtons=function(idList){
      if (!idList){
      for (var i=0; i<this.itemsCount; i++){
        this.items[i].getTopNode().style.display="none";
        this.items[i].hide=1;
        }
      return 0;
      }
      
      var temp=idList.split(",");
      for (var i=0; i<temp.length;  i++)
      {
      this.hideItem(temp[i]);
      };
    };
    /**  
          *     @desc: show menu buttons
          *     @type: public
      *     @param: idList - list of items's ids, separated by comma
        *     @topic: 4
          */      
    dhtmlXProtobarObject.prototype.showButtons=function(idList){
      if (!idList){
      for (var i=0; i<this.itemsCount; i++){
        this.items[i].getTopNode().style.display="";
        this.items[i].hide=0;
        }
      return 0;
      }
      
      var temp=idList.split(",");
      for (var i=0; i<temp.length;  i++)
      {
      this.showItem(temp[i]);
      };
    };    
        /**  
          *     @desc: disable menu button
          *     @type: public
      *     @param: itemId - item id
        *     @topic: 4
          */      
    dhtmlXProtobarObject.prototype.disableItem=function(itemId){
    var z=this.getItem(itemId);
      if (z) { if (z.disable) z.disable();  }
    };
    /**  
          *     @desc: enable menu button
          *     @type: public
      *     @param: itemId - item id
        *     @topic: 4
          */      
    dhtmlXProtobarObject.prototype.enableItem=function(itemId){
    var z=this.getItem(itemId);
      if (z) { if (z.enable) z.enable();  }
    };    
    
    /**  
          *     @desc: hide menu button
          *     @type: public
      *     @param: itemId - item id
        *     @topic: 4
          */      
    dhtmlXProtobarObject.prototype.hideItem=function(itemId){
      var z=this.getItem(itemId);
      if (z) { z.getTopNode().style.display="none";  z.hide=1; }
    }
/**  
          *     @desc: show menu button
          *     @type: public
      *     @param: id - item id
        *     @topic: 4
          */        
    dhtmlXProtobarObject.prototype.showItem=function(id){
      var z=this.getItem(id);
      if (z) {  z.getTopNode().style.display=""; z.hide=0; }
    }
    /**  
          *     @desc: set default action
          *     @type: public
      *     @param: action - set default action
        *     @topic: 2
          */        
    dhtmlXProtobarObject.prototype.setOnClickHandler=function(func){
      if (typeof(func)=="function") this.defaultAction=func; else this.defaultAction=eval(func); 
    };
    /**  
          *     @desc: set menu tittle
          *     @type: public
      *     @param: name - new tittle, shown on menu
        *     @topic: 0
          */    
    dhtmlXProtobarObject.prototype.setTitleText=function(newText){
      this.tname=newText;
      this.nameCell.innerHTML=newText;
      this.preNameCell.innerHTML=newText;
    };
        /**  
          *     @desc: set menu size
          *     @type: public
      *     @param: width - menu width
      *     @param: height - menu height
        *     @topic: 0
          */
      
    dhtmlXProtobarObject.prototype.setBarSize=function(width,height){
      if(width) this.topNod.width=width;
      if(height) this.topNod.height=height;    
    };
        /**  
          *     @desc: hide all items, show only items which ids in list
          *     @type: public
      *     @param: idList - list of id's, separated by comma
        *     @topic: 4
          */
  dhtmlXProtobarObject.prototype.resetBar=function(idList){
    for (var i=0; i<this.itemsCount;  i++)
    {
      this.hideItem(this.items[i].id);
      this.items[i].persAction=0;
    };
    var temp=idList.split(",");
    for (var i=0; i<temp.length;  i++)
    {
      this.showItem(temp[i]);
    };
  };

    /**  
          *     @desc: load XML from file
          *     @type: public
      *     @param: file - file name
        *     @topic: 0
          */
    dhtmlXProtobarObject.prototype.loadXML=function(file){ this.xmlUnit.loadXML(file); };

    /**  
          *     @desc: load XML from string
          *     @type: public
      *     @param: xmlString - string contining XML
        *     @topic: 0
          */
    dhtmlXProtobarObject.prototype.loadXMLString=function(xmlString){ this.xmlUnit.loadXMLString(xmlString); };      

    /**  
          *     @desc: show menu
          *     @type: public
        *     @topic: 0 
          */
    dhtmlXProtobarObject.prototype.showBar=function(){ this.topNod.style.display=""; if (this.onShow) this.onShow(); };
    /**  
          *     @desc: hide menu
          *     @type: public
        *     @topic: 0
          */
    dhtmlXProtobarObject.prototype.hideBar=function(){ this.topNod.style.display="none"; if (this.onHide) this.onHide(); };
        /**  
          *     @desc: set menu buttons alignment (allowed - 'left','center','right','top','middle','bottom')
      *    @param: align - buttons alignment
          *     @type: public
        *     @topic: 0
          */
    dhtmlXProtobarObject.prototype.setBarAlign=function(align){
      if ((align=="left")||(align=="top")) {   this.preNameCell.innerHTML="";
                          this.preNameCell.style.display="none";
                          this.nameCell.style.display="";  
                          this.nameCell.width="100%";    
                          this.nameCell.innerHTML=this.tname;
                                                  
                        };
      if ((align=="center")||(align=="middle")){ 
                          this.preNameCell.style.display="";  
                          this.preNameCell.width="50%";                            
                          this.nameCell.style.display="";  
                          this.nameCell.width="50%";      
                          this.nameCell.innerHTML=this.tname;  
                          this.preNameCell.innerHTML=this.tname;                        
                        };
      if ((align=="right")||(align=="bottom"))  { 
                          this.nameCell.innerHTML="";
                          this.nameCell.style.display="none";
                          this.preNameCell.style.display="";  
                          this.preNameCell.width="100%";  
                          this.preNameCell.innerHTML=this.tname;                          
                        };
    };
  
    dhtmlXProtobarObject.prototype.dummyFunc=function(){ return true; };
    dhtmlXProtobarObject.prototype.badDummy=function(){return false; };            
    
    

    /**  
          *     @desc: image button prototype 
          *     @type: private
          *     @topic: 0  
          */   
function dhtmlXButtonPrototypeObject(){ 
  return this;
};
    /**  
          *     @desc: set default action, action function take one parametr - item id
          *     @type: public
      *     @param: func - js function
      *     @topic: 2
          */  
  dhtmlXButtonPrototypeObject.prototype.setAction=function(func){
     if (typeof(func)=="function") this.action=func; else this.action=eval(func);     
    }
    /**  
          *     @desc: set personal onClick action (action must return false for preventing calling default action after personal), action function take one parametr - item id
      *    @param: func - js function
          *     @type: public
          *     @topic: 2  
          */
  dhtmlXButtonPrototypeObject.prototype.setSecondAction=function(func){
     if (typeof(func)=="function") this.persAction=func; else this.persAction=eval(func);     
    };    
    /**  
          *     @desc: enable object
          *     @type: public
          *     @topic: 4  
          */    
    dhtmlXButtonPrototypeObject.prototype.enable=function(){
      if (this.disableImage) this.imageTag.src=this.src;
      else    
        if (!this.className)
          this.topNod.className=this.objectNode.className;  
        else 
          this.topNod.className=this.className;  

        if (this.textTag)          
          this.textTag.className=this.textClassName;
  
    this.topNod.onclick=this._onclickX;
    this.topNod.onmouseover=this._onmouseoverX;
    this.topNod.onmouseout=this._onmouseoutX;
    this.topNod.onmousedown=this._onmousedownX;      
    this.topNod.onmouseup=this._onmouseupX;    
    };      
    /**  
          *     @desc: disable object
          *     @type: public
          *     @topic: 4  
          */
    dhtmlXButtonPrototypeObject.prototype.disable=function(){
      if (this.disableImage) 
        {
        this.imageTag.src=this.disableImage;
        }
      else this.topNod.className="iconGray";
      
      if (this.textTag)          
          this.textTag.className="buttonTextDisabled";
          
          
    this.topNod.onclick=this.dummy;
    this.topNod.onmouseover=this.dummy;
    this.topNod.onmouseout=this.dummy;
    this.topNod.onmousedown=this.dummy;      
    this.topNod.onmouseup=this.dummy;    
    };

    /**  
          *     @desc: inner onclick handler
          *     @type: private
          *     @topic: 2 
          */      
    dhtmlXButtonPrototypeObject.prototype._onclickX=function(e,that){
      if (!that) that=this.objectNode;
      if (that.topNod.dstatus) return;
      if ((!that.persAction)||(that.persAction()))
        if (that.action) { that.action(that.id); }
    };
    /**  
          *     @desc: set innerHTML of button
      *    @param: htmlText - new text
          *     @type: public
          *     @topic: 4  
          */      
    dhtmlXButtonPrototypeObject.prototype.setHTML=function(htmlText){
      this.topNod.innerHTML=htmlText;
    };
    /**  
          *     @desc: set alt text of button image
          *     @type: public
      *     @param: imageText - new alt image text
      *     @topic: 4
          */          
    dhtmlXButtonPrototypeObject.prototype.setAltText=function(imageText){
      this.imageTag.alt=imageText;    
    };    
    /**  
          *     @desc: set image href
          *     @type: public
      *     @param: imageSrc - new image href      
      *     @param: disabledImageSrc - new image href            
      *     @topic: 4
          */
    dhtmlXButtonPrototypeObject.prototype.setImage=function(imageSrc,disabledImageSrc){
      this.src=imageSrc;    
      if (disabledImageSrc) this.disableImage=disabledImageSrc;
      
      if (this.topNod.onclick==this.dummy)
        { if (disabledImageSrc) this.imageTag.src=disabledImageSrc;   }
      else
        this.imageTag.src=imageSrc;    
    };
    
    dhtmlXButtonPrototypeObject.prototype.dummy=function(){};  
    /**  
          *     @desc: return HTML top node
          *     @type: private
      *     @topic: 4
          */      
    dhtmlXButtonPrototypeObject.prototype.getTopNode=function(){ return this.topNod;  }    
    /**  
          *     @desc: onmouseover handler
          *     @type: private
      *     @topic: 2
          */        
    dhtmlXButtonPrototypeObject.prototype._onmouseoverY=function() { if (this.topNod.className!=this.className+'Over')  this.topNod.className=this.className+'Over'; return true; };
    /**  
          *     @desc: onmouseout handler
          *     @type: private
      *     @topic: 2
          */        
    dhtmlXButtonPrototypeObject.prototype._onmouseoutY=function()   {  this.topNod.className=this.className; return true; };
    /**  
          *     @desc: onmousedown handler
          *     @type: private
      *     @topic: 2
          */        
    dhtmlXButtonPrototypeObject.prototype._onmousedownX=function() { this.className=this.objectNode.className+'Down'; return true; };
    /**  
          *     @desc: onmouseup handler
          *     @type: private
      *     @topic: 2
          */        
    dhtmlXButtonPrototypeObject.prototype._onmouseupX=function() { this.className=this.objectNode.className; return true; };    


    
    dhtmlXButtonPrototypeObject.prototype._onmouseoutX=function(e){
      if (!e) e=event; 
      //e.cancelBubble=true;
      if (this.timeoutop) clearTimeout(this.timeoutop);
      this.timeoutop=setTimeout( this.objectNode._delayedTimerCall(this.objectNode,"_onmouseoutY"),100);
    };
    
    dhtmlXButtonPrototypeObject.prototype._onmouseoverX=function(e){
      if (!e) e=event; 
      //e.cancelBubble=true;    
      if (this.timeoutop) clearTimeout(this.timeoutop);
      this.timeoutop=setTimeout( this.objectNode._delayedTimerCall(this.objectNode,"_onmouseoverY"),50);
    };
      
    dhtmlXButtonPrototypeObject.prototype._delayedTimerCall=function(object,functionName,time){
      this.callFunc=function(){
        eval("object."+functionName+"();");
      }
      return this.callFunc;
    }
  
  </script>
  <!-- dhtmlXMenuBar.js -->
  <script language="JavaScript">
/*_TOPICS_
@0:Initialization
@1:Add/delete
@2:Action handling
@3:Private
@4:Item control
@5:Private
*/

    /**  
          *     @desc: menu object
          *     @param: width - object width
          *     @param: height - object height
          *     @param: name - menu display name
          *     @param: vMode - if eq 1 => vertical menu bar
          *     @type: public
          *     @topic: 0  
          */     
          

  function dhtmlXMenuBarObject(htmlObject,width,height,name,vMode){
      if (typeof(htmlObject)!="object") 
      this.parentObject=document.getElementById(htmlObject);
    else
      this.parentObject=htmlObject;
      
    if (!this.parentObject) this.parentObject=document.body;
    
    if (!vMode) this.flsmd=true;
    this.tname=name;
    this.topMenu=this;
    this.width=width;
    this.height=height;
    this.topNod=0;
    this.ieFix=true;
    this.ieWinMode=true;
    this.ieWinModeState=0;
    this.zIndex=3;
    this.maxItems=99;
    
    this.dividerCell=0;
    this.firstCell=0;
    this.nameCell=0;
    this.crossCell=0;

    
    this.tableCSS="menuTable";
    this.titleCSS="menuName";    
    this.secTableCSS="secondMenuTable";
    
    this.extraMode=convertStringToBoolean(vMode);
    
    this.defaultAction=0;
    this.onShow=0;
    this.onHide=0;    
    
    var lastOpenedPanel=0;    
    var lastSelectedItem=0;  
    
    this.items=new Array();
    this.itemsCount=0;
    this.gitems=new Array();
    this.gitemsCount=0;
    
    this.subMenus=new Array();
    this.subMenusCount=0;
    
    
    if (!this.extraMode)
      this._createPanel();
    else
      this._createVPanel();
      
  
    this.hiddenForm=document.createElement("FORM");
    this.parentObject.appendChild(this.hiddenForm);
    this.hiddenForm.style.display="none";

    
    if (this._extendedInit) this._extendedInit();
    this.xmlUnit=new dtmlXMLLoaderObject(this._parseXMLTree,this);        
    this.setMenuMode("classic");      
      
    this.showBar();
    return this;
    }
    
    dhtmlXMenuBarObject.prototype = new dhtmlXProtobarObject;

    

    /**  
          *     @desc: menu panel
          *     @param: parentPanel - parent panel object
          *     @param: parentItem - parent menu item
          *     @param: mode - if eq 1 => horisontal menu bar
          *     @param: minWidth - minimal panel width  
      *     @param: withoutImages - enable/disable images in menu items       
          *     @type: private
          *     @topic: 0  
          */   
  function dhtmlXMenuBarPanelObject(parentPanel,parentItem,mode,minWidth,withoutImages){
    this.extraMode=!convertStringToBoolean(mode);
    this.parentPanel=parentPanel;
    this.parentItem=parentItem;    
    this.parentObject=parentPanel.parentObject;
    this.topMenu=parentPanel.topMenu;
    this.topNod=0;
    this.dividerCell=0;
    this.firstCell=0;
    this.nameCell=0;
    this.crossCell=0;
    this.maxItems=99;
    this.items=new Array();
    this.itemsCount=0;
    this.withoutImages=(withoutImages==1);
    this.mixedImages=(withoutImages==2);    
    if (minWidth) this.width=minWidth;

    if ((!this.topMenu.flsmd)||(this.topMenu!=this.parentPanel))
    this.parentItem.setHasChild(true);
    
    if (mode)
      this._createVPanel=this.topMenu._createPanel;    
    else
      this._createVPanel=this.topMenu._createVPanel;

    

    this._createVPanel();
    
    this.topNod.panel=this;
    this.topNod.onmouseover=this.topMenu._onmouseoverZ;
    this.topNod.onmouseout=this.topMenu._onmouseoutZ;    
    
    return this;
    }
    
    
    /**    
          *     @desc:  fix z-index problem with select boxes in IE, enabled by default
          *     @param: mode - enable/disable
          *     @type: public
          *     @topic: 0  
          */ 
      dhtmlXMenuBarObject.prototype.enableIESelectBoxFix=function(mode){
      this.ieFix=convertStringToBoolean(mode);
    };
    /**    
          *     @desc:  fix z-index problem with select boxes in IE, enabled by default
          *     @param: mode - enable/disable
          *     @type: public
          *     @topic: 0  
          */ 
      dhtmlXMenuBarObject.prototype.enableMenuHandle=function(mode){
        if(convertStringToBoolean(mode)) this.dividerCell.style.display="";
        else this.dividerCell.style.display="none";
    };    
    /**    
          *     @desc:  closed menu behaviour
          *     @param: mode - enable/disable
          *     @type: public
          *     @topic: 0  
          */ 
      dhtmlXMenuBarObject.prototype.enableWindowOpenMode=function(mode){
      this.ieWinMode=convertStringToBoolean(mode);
    };
    
      /**  
          *     @desc: return item index in collection by id
          *     @type: private
      *     @param: id - item id
      *     @topic: 3
          */    
    dhtmlXProtobarObject.prototype._getItemIndex=function(id){
      for (var i=0; i<this.gitemsCount; i++)
      {
        if (this.gitems[i].id==id) return i;
      };    
      return -1;
    };
    /**  
          *     @desc: return item object by id
          *     @type: public
      *     @param: itemId - item id
        *     @topic: 4
          */    
    dhtmlXProtobarObject.prototype.getItem=function(itemId){
      var z=this._getItemIndex(itemId);
      if (z>=0)   return this.gitems[z];
    };
    

    
    /**    
          *     @desc:  show node in scrolling process
          *     @param: node - html button node
          *     @param: rest - scrolling direction      
          *     @type: private
          *     @topic: 0  
          */     
    dhtmlXMenuBarObject.prototype._showScroll=function(node,order,rest,mode){ 
//      alert(order+"="+mode+"="+node.items[order].text+"||"+node.cAr[0]+"x"+node.cAr[2]+"||"+node.scrollState+"x"+node.maxItems+"x"+node.realItemsCount);
      if (!node.items[order]) return;
      
          if (mode=="")
            if (rest==1) node.cAr[2]++;
            else node.cAr[0]--;
          else 
            if (rest==1) node.cAr[0]++;
            else node.cAr[2]--;
                  
      if (!node.items[order].CSSTag)
          {
          node.items[order].topNod.parentNode.style.display=mode;
          this._showScroll(node,order*1+rest*1,rest,mode);
          }
      else
        {
        //alert(mode);
        node.items[order].topNod.parentNode.style.display=mode;
        }

      }
    
    /**    
          *     @desc:  set state of  scroll buttons
          *     @param: node - html button node
          *     @param: rest - scrolling direction      
          *     @type: private
          *     @topic: 0  
          */     
    dhtmlXMenuBarObject.prototype._fixScrollState=function(node,rest){ 
      
      if (parseInt(node.topNod.offsetWidth)>parseInt(node.topNod.width))
        node.topNod.width=node.topNod.offsetWidth;
        
      var flag=0;

        if (rest>0){
          this._showScroll(node,node.cAr[0],1,"none");          
          this._showScroll(node,node.cAr[2],1,"");
        }
        else{
          this._showScroll(node,node.cAr[0]-1,-1,"");
          this._showScroll(node,node.cAr[2]-1,-1,"none");
        }
        z.scrollState+=rest*1;
        
        
      if ((node.scrollState*1+node.maxItems*1)==(node.realItemsCount))
        node.scrollDown.className="menuscrollerdisabled";
      else
        {
        node.scrollDown.className="menuscrollerenabled";
        flag++;        
        }        
        
      if (node.scrollState==0)
        node.scrollUp.className="menuscrollerdisabled";
      else
        {
        node.scrollUp.className="menuscrollerenabled";
        flag++;
        }
        
        
        return flag;
    }



    /**    
          *     @desc:  start scrolling
          *     @type: private
          *     @topic: 0  
          */ 
    dhtmlXMenuBarObject.prototype._scrollstart=function(){ 
      if (this.timeoutops) clearTimeout(this.timeoutops);
      z=this.parentNode.parentNode.parentNode.menu;
      if (z.scrollDown==this)
        var rest=1;
      else
        var rest=-1;
        
      if (z.topMenu._fixScrollState(z,rest)==2) 
        this.timeoutops=setTimeout(new z.topMenu._delayedTimerCall(this,"onmouseover",0,0),333);
    }
    /**    
          *     @desc:  stop scrolling
          *     @type: private
          *     @topic: 0  
          */           
    dhtmlXMenuBarObject.prototype._scrollend=function(node){     
      if (this.timeoutops) window.clearTimeout(this.timeoutops);
    }
    /**    
          *     @desc:  enable/disable scrolling
          *     @param: node - dhtml button node
          *     @type: private
          *     @topic: 0  
          */       
    dhtmlXMenuBarObject.prototype._scrollCheck=function(node){ 
      var z_count=0;
      for (var i=0; i<node.itemsCount; i++)
        if (node.items[i].CSSTag) z_count++;
      node.realItemsCount=z_count;
      node.cAr=new Array(0,0,0);
      if ((node.realItemsCount>node.maxItems)&&(node.scrollDown)){
        node.scrollDown.style.display="";
        node.scrollUp.style.display="";        
        node.scrollDown.className='menuscrollerenabled';
        node.scrollState=0;
        node.scrollUp.onmouseover=this._scrollstart;
        node.scrollUp.onmouseout=this._scrollend;
        node.scrollDown.onmouseover=this._scrollstart;    
        node.scrollDown.onmouseout=this._scrollend;  
          
        var z_count=0;
        for (var i=0; i<node.itemsCount; i++)
          {
          if (node.items[i].CSSTag) z_count++;
          if (z_count>this.maxItems) {
            node.items[i].topNod.parentNode.style.display="none";
            if (node.cAr[2]==0) node.cAr[2]=i;  }
            
          }        
        //node.cAr[2]=node.realItemsCount-1;
      }
    }

    /**  
          *     @desc: return menu panel object
          *     @param: panelId - id of panel related menu item
          *     @type: public
          *     @topic: 4  
          */   
      dhtmlXMenuBarObject.prototype.getPanel=function(panelId){
      var z=this._getGItemIndex(panelId);
      if (z<0) return this;
      else return this.gitems[z].subMenu;
    }    
    
    /**  
          *     @desc: add item to menu
          *     @param: item - item object
          *     @param: panel - menu panel  object      
          *     @type: public
          *     @topic: 1  
          */   
      dhtmlXMenuBarObject.prototype.addItem=function(panel,item){
//      alert(item.text);
      if (this==panel) this.addFirstLevel(panel,item);
      else this.addSecondLevel(panel,item);
    }
    
    /**  
          *     @desc: add item to horisontal oriented menu
          *     @param: item - item object
          *     @param: panel - menu panel  object      
          *     @type: private
          *     @topic: 0  
          */           
    dhtmlXMenuBarObject.prototype._addItem=function(panel,item){
      panel.items[panel.itemsCount]=item;
      panel.firstCell.parentNode.insertBefore(item.getTopNode(),panel.firstCell);
//      alert(item.getTopNode().tagName);
      item.getTopNode().style.marginBottom="20px";
      item.parentNod=this;
      item.parentPanel=panel;
      if (this.defaultAction) item.setAction(this.defaultAction);
      panel.itemsCount++;

      this.gitems[this.gitemsCount]=item;
      this.gitemsCount++;
    }
  
    /**  
          *     @desc: add item to vertical oriented menu
          *     @param: item - item object
          *     @param: panel - menu panel  object      
          *     @type: private
          *     @topic: 0  
          */             
    dhtmlXMenuBarObject.prototype.addItem_vertical=function(panel,item){
      panel.items[panel.itemsCount]=item;
      var tr=document.createElement("tr");
      tr.style.verticalAlign="top";
      tr.appendChild(item.getTopNode());
      panel.firstCell.parentNode.insertBefore(tr,panel.firstCell);
      item.parentNod=this;
      item.parentPanel=panel;
      if (this.defaultAction) item.setAction(this.defaultAction);
      panel.itemsCount++;

      this.gitems[this.gitemsCount]=item;
      this.gitemsCount++;
    }

    /**  
          *     @desc: return item index from global collection by id
          *     @type: private
      *     @param: id - item id
      *     @topic: 3
          */    
    dhtmlXProtobarObject.prototype._getGItemIndex=function(id){
      for (var i=0; i<this.gitemsCount; i++)
      {
        if (this.gitems[i].id==id) return i;
      };    
      return -1;
    };
    
    /**  
          *     @desc: remove item
          *     @type: public
      *     @param: id - item id
        *     @topic: 1
          */      
    dhtmlXMenuBarObject.prototype.removeItem=function(id){
      var z=this._getGItemIndex(id);
      if (z>=0) {
      var panel=this.gitems[z].parentPanel;
      if (this.gitems[z].removeItem) this.gitems[z].removeItem();
      
      if (panel.firstCell.tagName=="TR")
        panel.firstCell.parentNode.removeChild(this.gitems[z].getTopNode().parentNode);  
      else
        panel.firstCell.parentNode.removeChild(this.gitems[z].getTopNode());  
      
            
      
      
      panel.itemsCount--;      var j=0;
      for (var i=0; i<panel.itemsCount; i++)
        if (panel.items[i]==this.gitems[z]) 
        this.gitems[i]=this.gitems[i+1];
      
      this.gitems[z]=0;
      this.gitemsCount--;
      for (var i=z; i<this.gitemsCount; i++)
        this.gitems[i]=this.gitems[i+1];
        
      }
    }
      
    /**  
          *     @desc: parse xml
          *     @type: private
      *     @param: that - menu object
      *     @param: node - current xml node
      *     @param: level - menu level
      *     @param: parentNode - parent panel
      *     @param: aTempNode - parent item
      *     @param: mode - menu design mode
        *     @topic: 2  
          */  
  dhtmlXMenuBarObject.prototype._parseXMLTree=function(that,node,level,parentNode,aTempNode,mode){
    if (!node) {
      node=that.xmlUnit.getXMLTopNode("menu");
       level=0; 
      parentNode=that;
      
     mode=node.getAttribute("mode");     
     if (mode)   that.setMenuMode(mode);
     
     var menuAlign=node.getAttribute("menuAlign");     
     if (menuAlign) that.setBarAlign(menuAlign);
     
     that.maxItems=node.getAttribute("maxItems")||99;
     var absolutePosition=node.getAttribute("absolutePosition");          
     var aleft=node.getAttribute("left");     
      var atop=node.getAttribute("top");
       if (absolutePosition) that.topNod.style.top=atop || 0;
       if (absolutePosition) that.topNod.style.left=aleft || 0;
     if (absolutePosition=="yes") that.topNod.style.position="absolute";
     
     var name=node.getAttribute("name");
     if(name) that.setTitleText(name);

     var width=node.getAttribute("width");
     var height=node.getAttribute("height");
     that.setBarSize(width,height);

     var imageTextButtonCssClass=node.getAttribute("imageTextButtonCssClass");       
     var globalTextCss=node.getAttribute("globalTextCss");  
    
    that.globalSecondCss=node.getAttribute("globalSecondCss");
    that.globalCss=node.getAttribute("globalCss");     
    that.globalTextCss=node.getAttribute("globalTextCss");    
    if (node.getAttribute("withoutImages")) that.withoutImages=true;
    if (node.getAttribute("mixedImages")) that.mixedImages=true;  
    that.type=node.getAttribute("type")||"a1";
    
       }
  

    
    
    if (level) {
//      create new bar
      var parentNode=new dhtmlXMenuBarPanelObject(parentNode,aTempNode,((mode!="classic")&&(mode!="popup")),node.getAttribute("panelWidth"),(node.getAttribute("withoutImages")?1:(node.getAttribute("mixedImages")?2:0)));
        aTempNode.subMenu=parentNode;
        parentNode.topNod.style.position="absolute";
        that.subMenus[that.subMenusCount]=parentNode;
        that.subMenusCount++;
        parentNode.maxItems=node.getAttribute("maxItems")||that.maxItems;
    }
    
    for(var i=0; i<node.childNodes.length; i++)
    {
        if (node.childNodes[i].nodeType==1) 
      {
        var localItem=node.childNodes[i]
        
          if (!level)
          {  
            if ((!localItem.getAttribute("className"))&&(that.globalCss))
              localItem.setAttribute("className",that.globalCss);
          }
          else
            if (!localItem.getAttribute("className"))
              {
              if (that.globalSecondCss)
                localItem.setAttribute("className",that.globalSecondCss);
              else       
                localItem.setAttribute("className","menuButtonSecond");
              }  
          
          
            
          if ((!localItem.getAttribute("textClassName"))&&(that.globalTextCss))
            localItem.setAttribute("textClassName",that.globalTextCss);      

          
        var tempsrc=localItem.getAttribute("src");
        if (parentNode.withoutImages)
          localItem.setAttribute("src","");
        else 
          {
          if ((parentNode.mixedImages)&&(tempsrc==null))
            tempsrc="";          
          else 
            tempsrc=that.sysGfxPath+(tempsrc||"blank.gif");
            
          localItem.setAttribute("src",tempsrc);
          }
        
        tempsrc=localItem.getAttribute("wide");
        if (tempsrc==null){
          localItem.setAttribute("width","100%");
        }
        
    
        var z=eval("window.dhtmlX"+localItem.tagName+"Object"); 
        if (z)
          var TempNode= new z(localItem,node.getAttribute("type")||that.type);
        else  
          var TempNode=null;
        if (localItem.tagName=="divider")
          if (level) 
            that.addItem(parentNode,new dhtmlXMenuDividerYObject(localItem.getAttribute("id")));
          else
            that.addItem(parentNode,new dhtmlXMenuDividerXObject(localItem.getAttribute("id")));
        else
          if (TempNode)   
            if (level) 
              that.addItem(parentNode,TempNode);
            else
              that.addItem(parentNode,TempNode);
        

        if (localItem.childNodes.length) that._parseXMLTree(that,localItem,level+1,parentNode,TempNode,mode);
      }
    }    
    
    that._scrollCheck(parentNode);
  }


  
    /**    
          *     @desc: horisontal menu panel
        *     @type: private
          *     @topic: 0  
          */ 
  dhtmlXMenuBarObject.prototype._createPanel=function()
    {
      if(!this.width) this.width=1;     
      if(!this.height) this.height=1;
      
    var div=document.createElement("div");
      div.innerHTML='<table cellpadding="0" cellspacing="0" class="'+this.topMenu.tableCSS+'" style="display:none" width="'+this.width+'" height="'+this.height+'"><tbody>' +
              '<tr>'+
              '<td width="3px" style="display:none"><div class="menuHandle">&nbsp;</div></td>'+
              '<td class="'+this.topMenu.titleCSS+'" style="display:none">'+this.topMenu.tname+'</td>'+
              '<td></td>'+
              '<td align="right" width="100%" class="'+this.topMenu.titleCSS+'">&nbsp;'+this.topMenu.tname+'</td>'+              
              '<td >&nbsp;</td>'+
              '</tr></tbody></table>';
      var table=div.childNodes[0];
      table.setAttribute("UNSELECTABLE","on");
      table.onselectstart=this.topMenu.badDummy;      
    this.topNod=table; 
    this.dividerCell=table.childNodes[0].childNodes[0].childNodes[0];
    this.dividerCell.menu=this;
    this.preNameCell=this.dividerCell.nextSibling;
    this.firstCell=this.preNameCell.nextSibling;
    this.nameCell=this.firstCell.nextSibling;              
    this.crossCell=this.nameCell.nextSibling;              
    if (this.topMenu!=this){
      this.dividerCell.style.display="none";
      this.preNameCell.style.display="none";
      this.nameCell.style.display="none";
      this.crossCell.style.display="none";  
      table.className=this.topMenu.secTableCSS;
      }    
    this.topNod.style.zIndex=this.topMenu.zIndex;
    if (this.topMenu.ieFix)
      {
      var iframe=document.createElement("IFRAME"); 
      iframe.style.zIndex=this.topMenu.zIndex-1;  iframe.style.position="absolute";  
      iframe.style.display="none"; iframe.scrolling="no";    iframe.frameBorder=0;
      this.parentObject.appendChild(iframe);
      this.topNod.ieFix=iframe;
      }
    
    this.parentObject.appendChild(table);
    };
    
    
    /**  
          *     @desc: set menu css classes
          *     @type: public
      *     @param: table - css class for menu container
      *     @param: secTable - css class for child menu containers      
        *     @param: title - css class for toolbar title      
        *     @topic: 4
          */
    dhtmlXMenuBarObject.prototype.setMenuCSS=function(table,title,secTable){
      this.tableCSS=table;
      this.titleCSS=title;
      this.secTableCSS=secTable;
      this.topNod.className=this.tableCSS;
      this.preNameCell.className=this.titleCSS;
      this.nameCell.className=this.titleCSS;
      
    }
        
    /**    
          *     @desc: vertical menu panel
        *     @type: private
          *     @topic: 0  
          */ 
  dhtmlXMenuBarObject.prototype._createVPanel=function()
    {  
      if(!this.width) this.width=120;     
      if(!this.height) this.height=20;

    var div=document.createElement("div");
      div.innerHTML='<table cellpadding="0" cellspacing="0" class="'+this.topMenu.tableCSS+'" style="display:none" width="'+this.width+'" ><tbody>' +
              '<tr ><td class="menuscrollerdisabled" style="display:none"><img src="'+this.topMenu.sysGfxPath+'btn_up1.gif"></td></tr>'+
              '<tr><td class="'+this.topMenu.titleCSS+'" style="display:none">'+this.tname+'</td></tr>'+
              '<tr><td></td></tr>'+
              '<tr><td class="menuscrollerdisabled" style="display:none"><img src="'+this.topMenu.sysGfxPath+'btn_up2.gif"></td></tr>'+                            
              '<tr><td align="right"  class="'+this.topMenu.titleCSS+'" style="display:none">'+this.tname+'</td></tr>'+              
              '<tr><td></td></tr>'+
              '</tbody></table>';

    var table=div.childNodes[0];          
    this.topNod=table;
    table.onselectstart=this.topMenu.badDummy;    
    table.setAttribute("UNSELECTABLE","on");

    this.dividerCell=table.childNodes[0].childNodes[0].childNodes[0];
//    this.dividerCell.menu=this;
    table.menu=this;
    this.scrollUp=this.dividerCell;
    this.scrollonmouseover="";
    this.preNameCell=table.childNodes[0].childNodes[1].childNodes[0];
    this.firstCell=table.childNodes[0].childNodes[2];
    this.scrollDown=table.childNodes[0].childNodes[3].childNodes[0];
    this.nameCell=table.childNodes[0].childNodes[4].childNodes[0];
    this.crossCell=table.childNodes[0].childNodes[5].childNodes[0];

    if (this.topMenu!=this) {
    //this.dividerCell.parentNode.style.display="none";
    this.preNameCell.parentNode.style.display="none";
    this.nameCell.parentNode.style.display="none";
    this.crossCell.parentNode.style.display="none";            
    table.className=this.topMenu.secTableCSS;
    }
    
    this.topNod.style.zIndex=this.topMenu.zIndex;

    if (this.topMenu.ieFix)
      {
      var iframe=document.createElement("IFRAME"); 
      iframe.style.zIndex=this.topMenu.zIndex-1;  iframe.style.position="absolute";  
      iframe.style.display="none"; iframe.scrolling="no";    iframe.frameBorder=0;
      this.parentObject.appendChild(iframe);
      this.topNod.ieFix=iframe;
      }
    this.parentObject.appendChild(table);
      };
    
    
    
    

    
    
/*------------------------------------------------------------------------------
            Menu item object
--------------------------------------------------------------------------------*/  
    /**  
          *     @desc: image button with text object
          *     @param: id - identificator       
          *     @param: text - button text         
          *     @param: width - object width
          *     @param: src - image href         
          *     @param: className - css class for button (button use 3 css classes - [className],[className]Over,[className]Down)
          *     @param: disableImage - alter image for disable mode [optional]                
          *     @param: href - hyperlink [optional]
          *     @param: target - hyperlink target [optional]      
          *     @type: public
          *     @topic: 0  
          */     
  function dhtmlXMenuItemObject(id,text,width,src,className,disableImage,href,target){
      var type="a2";
      if (id.tagName=="MenuItem") 
      {
        type=text||"a2";
          src=id.getAttribute("src");
          text=id.getAttribute("name");
        className=id.getAttribute("className");
        disableImage=id.getAttribute("disableImage");    
        width=id.getAttribute("width");
        href=id.getAttribute("href");    
        target=id.getAttribute("target");        
        id=id.getAttribute("id");        
      }
      if (id) this.id=id;
      else this.id=(new Date()).valueOf();      
      //width=width||120;


    
    this.topNod=0;
    this.action=0;    
    this.persAction=0;    
    this.src=src;
    this.text=text;
    this.href=href;
    this.target=target;        

    this.className=className||"menuButton";
    this.textclassName="defaultMenuText";    
    
    this.disableImage=disableImage;
    
    td=document.createElement("td");  
    this.topNod=td; td.align="center";
    td.noWrap=true;
    
//        td.innerHTML="<table align='left' cellpadding='0' cellspacing='0' border='0' "+(width?("width='"+width+"'"):"")+" height='100%'><tr><td width='20px' style=' "+(src?"":"display:none; ")+"'><img src='"+src+"' border='0' width='18px' height='18px'></td><td width='100%' align='left' class='"+this.textclassName+"' nowrap style=' "+(src?" padding-left:2px;":"")+" overflow:hidden;' ><div width='12px' style='float: right;' style='display:none'><img src='' style='display:none'></div>"+this.text+"</td></tr></table>";      
        td.innerHTML="<table align='left' cellpadding='0' cellspacing='0' border='0' "+(width?("width='"+width+"'"):"")+" height='100%'><tr><td width='20px' style=' "+(src?"":"display:none; ")+"'><img src='"+src+"' border='0' width='18px' height='18px'></td><td width='100%' align='left' style=' "+(src?" padding-left:2px;":"")+" overflow:hidden;' ><table width='100%' height='100%' cellpadding='0' cellspacing='0'><tr><td class='"+this.textclassName+"' nowrap >"+this.text+"</td><td width='12px'><img src='' style='display:none'></td></tr></table></td></tr></table>";      
        this.imageTag=td.childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0];
        this.childMenuTag=td.childNodes[0].childNodes[0].childNodes[0].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[1].childNodes[0];
//        alert(this.childMenuTag.tagName);
//        adsadas.asdasd();
//        alert(this.childMenuTag);
            
    switch(type){
      case "a1":
        this.CSSTag=td;
        this.CSSImageTag=null;
        break;
      case "a2":
        this.CSSTag=td.childNodes[0];
        this.CSSImageTag=null;
        break;
      case "a3":
        this.CSSTag=td.childNodes[0].childNodes[0].childNodes[0].childNodes[1];
        this.CSSImageTag=null;
        break;              
      case "b1":
        this.CSSTag=td;
        this.CSSImageTag=this.imageTag.parentNode;
        break;
      case "b2":
        this.CSSTag=td.childNodes[0];
        this.CSSImageTag=this.imageTag.parentNode;
        break;
      case "b3":
        this.CSSTag=td.childNodes[0].childNodes[0].childNodes[0].childNodes[1];
        this.CSSImageTag=this.imageTag.parentNode;
        break;                        
      }
    td.id="menuItem_"+this.id;
    this.CSSTag.className=this.className;
    td.objectNode=this;
    this.enable();
    return this;
    };
    
    
    
    dhtmlXMenuItemObject.prototype=new dhtmlXButtonPrototypeObject;
    
    /**  
          *     @desc: enable object
          *     @type: public
          *     @topic: 4  
          */    
    dhtmlXMenuItemObject.prototype.enable=function(){
      if (this.disableImage) this.imageTag.src=this.src;
      else    
        if (!this.className)
          this.topNod.className=this.objectNode.className;  
        else 
          this.topNod.className=this.className;  

        if (this.textTag)          
          this.textTag.className=this.textClassName;
  
  //  this.topNod.onclick=this._onclickX;
    this.topNod.onmouseover=this._onmouseoverX;
    this.topNod.onmouseout=this._onmouseoutX;
    this.topNod.onmousedown=this._onmousedownX;      
    this.topNod.onmouseup=this._onclickX;    
    };  
    
    /**  
          *     @desc: onmousedown handler
          *     @type: private
      *     @topic: 2
          */        
    dhtmlXMenuItemObject.prototype._onmousedownX=function(e) { if (!this.objectNode.parentPanel.parentPanel) this.objectNode._onclickX(e,this.objectNode); };
     
    /**  
          *     @desc: set childs sign
      *    @param: newText - new text [ HTML allowed ]
          *     @type: private
          *     @topic: 4  
          */         
    dhtmlXMenuItemObject.prototype.setHasChild = function(mode){ 
      if (convertStringToBoolean(mode)) {
        this.childMenuTag.src=this.parentPanel.topMenu.sysGfxPath+'btn_rt1.gif';
        this.childMenuTag.style.display='';      
      }
      else   this.childMenuTag.style.display='none';  
    };  
    
    /**  
          *     @desc: set button text
      *    @param: newText - new text [ HTML allowed ]
          *     @type: public
          *     @topic: 4  
          */        
    dhtmlXMenuItemObject.prototype.setText = function(newText){
      this.topNod.childNodes[0].childNodes[0].childNodes[0].childNodes[1].innerHTML=newText;    
    };      
    /**  
          *     @desc: inner onclick handler
          *     @type: private
          *     @topic: 2 
          */    

    dhtmlXMenuItemObject.prototype._onclickX=function(e,that){
      if (!e) e=event;
      e.cancelBubble=true;

      if (!that)  that=this.objectNode;  
      var thatM=that.parentPanel.topMenu;
      if (that.topNod.dstatus) return;
      if ((thatM.ieWinMode)&&(!thatM.ieWinModeState)&&(that.subMenu))
      {
        that.parentPanel.topMenu._onItemOver(that,that.subMenu);
        if (document.body.currentActiveMenu!=thatM)  
          if (document.body.onmouseup) {  document.body.onmouseup(); }
        
        if (thatM.realWinModeStart)
        {

        that.parentPanel.topMenu.ieWinModeState=1;        
        

        if (document.body.onmouseup!=thatM._onclickclose)        
          {
          thatM.olddoc=document.body.onmouseup;
          document.body.onmouseup=thatM._onclickclose;
          }

        document.body.currentActiveMenu=that.parentPanel.topMenu;
        
        thatM.realWinModeStart=0;        
        }
        else thatM.realWinModeStart=1;
        return;
      }
      
      if ((thatM.ieWinMode)&&(thatM.ieWinModeState)&&(that.subMenu)) {
        if (!thatM.realWinModeStart)
        {
        thatM.realWinModeStart=1;
        return;
        }
        else
          thatM.realWinModeStart=0;
      }
      
      thatM.realWinModeStart=0;
      thatM.ieWinModeState=0;

      thatM.dropTimers(that.parentPanel);
      thatM._closePanel(that.parentPanel);
      thatM.lastSelectedItem=0;      
      thatM.probablyCloseMe=0;
      thatM.lastOpenedPanel="";
      
      if (that.parentPanel.topMenu.ieWinMode){
      if (that.parentPanel.topMenu.olddoc) 
        document.body.onclick=that.parentPanel.topMenu.olddoc;
      else
        document.body.onclick=null;
      }

      if ((that.parentPanel.topMenu.ieWinMode)&&(!that.parentPanel.parentPanel))
      {
        return;
      }
      
      that.parentPanel.topMenu._unMarkItem(that,"down"); 
      
      setTimeout( new that.parentPanel.topMenu._delayedTimerCall(that,"_onclickY",0,0),100);    
      return;      
      
    };  
  
    dhtmlXMenuBarObject.prototype._onclickclose=function(e){
      var that=this.currentActiveMenu;
      if (that.olddoc) 
        document.body.onmouseup=that.olddoc;
      else
        document.body.onmouseup=null;
      that.realWinModeStart=0;
      that.lastOpenedPanel="";
      that.ieWinModeState=0;
      that.dropTimers(that);
      that._closePanel(that);
      that.lastSelectedItem=0;      
    }  
    /**  
          *     @desc: inner onclick handler
          *     @type: private
          *     @topic: 2 
          */        
    dhtmlXMenuItemObject.prototype._onclickY=function(){
      if (this.href){
        if (this.target){
        var form=this.parentPanel.topMenu.hiddenForm;
          form.action=this.href;
          form.target=this.target;
          form.method="GET";
          form.submit();
          }
        else document.location.href=this.href;
        return false;
      }
      if ((!this.persAction)||(this.persAction()))
        if (this.action) { this.action(this.id); }
      return false;  
    };
    
    /**  
          *     @desc: item mouse over handler
          *     @param: e - event       
          *     @type: private
          *     @topic: 0  
          */     
    dhtmlXMenuItemObject.prototype._onmouseoverY=function(e){
    var that=this.parentPanel.topMenu;
    if ((!that.ieWinMode)||(that.ieWinModeState))
      this.parentPanel.topMenu._onItemOver(this,this.subMenu);  
    else
      {
      if ((that.lastSelectedItem)&&(that.lastSelectedItem!=item))
        this.parentPanel.topMenu._unMarkItem(that.lastSelectedItem);
        
      this.parentPanel.topMenu._markItem(this);
            
      }
    };
    
    /**  
          *     @desc: item mouse out handler
          *     @param: e - event       
          *     @type: private
          *     @topic: 0  
          */   
    dhtmlXMenuItemObject.prototype._onmouseoutY=function(e){
      this.parentPanel.topMenu._onItemOut(this,this.subMenu);
    };

    /**  
          *     @desc: drop event timers
          *     @param: panel - panel object       
          *     @type: private
          *     @topic: 0  
          */ 
    dhtmlXMenuBarObject.prototype.dropTimers=function(panel){
      if (!panel) return;
      z=panel.topNod.timeoutop;          
      if (z)  clearTimeout(z); 
      
      if (!panel.parentPanel) return;
      var z=panel.parentPanel.topNod.timeoutop;
      if (z)  clearTimeout(z); 
      
      var z=panel.parentItem.topNod.timeoutop;
      if (z)  clearTimeout(z); 
      
      
    };

    /**  
          *     @desc: panel mouse over handler
          *     @param: e - event       
          *     @type: private
          *     @topic: 0  
          */   
    dhtmlXMenuBarObject.prototype._onmouseoverZ=function(e){
    if (!e) e=event; e.cancelBubble=true;    
      that=this.panel.topMenu;
      if (this.timeoutop) clearTimeout(this.timeoutop);
      that.dropTimers(this.panel);    
      that._onItemOver(0,this.panel);    
  //      this.timeoutop=setTimeout( new that._delayedTimerCall(this.panel.topMenu,"_onItemOver",0,this.panel),50);    

    };

    /**  
          *     @desc: panel mouse out handler
          *     @param: e - event       
          *     @type: private
          *     @topic: 0  
          */ 
    dhtmlXMenuBarObject.prototype._onmouseoutZ=function(e){
    if (!e) e=event; e.cancelBubble=true;    
      that=this.panel.topMenu;
      if (this.timeoutop) clearTimeout(this.timeoutop);
      
      if ((!that.ieWinMode))
        {
        this.timeoutop=setTimeout( new that._delayedTimerCall(this.panel.topMenu,"_onItemOut",0,this.panel),200);              
        }
//      else      that.dropTimers(this.panel);
    };
    
    /**  
          *     @desc: timer routine
          *     @param: object - called object
          *     @param: functionName - called function name
          *     @param: a - function parametr A 
          *     @param: b - function parametr B                   
          *     @type: private
          *     @topic: 0  
          */ 
    dhtmlXMenuBarObject.prototype._delayedTimerCall=function(object,functionName,a,b,time){
      this.callFunc=function(){
        var ax=a;
        var bx=b;
        object[functionName](ax,bx);
      }
      return this.callFunc;
    }
      
      
    /**  
          *     @desc: confirmed mouse out
          *     @param: item - related menu item
          *     @param: panel - related menu panel
          *     @type: private
          *     @topic: 0  
          */
    dhtmlXMenuBarObject.prototype._onItemOut=function(item,panel){

      if (!panel) return;
      if (this.ieWinMode)
        if ((panel.topMenu==panel)||((item)&&(this.ieWinModeState==1)))  return; 
      
      if (item) this._unMarkItem(item);
       this._closePanel();
    }
    
    /**  
          *     @desc: confirmed mouse over
          *     @param: item - related menu item
          *     @param: panel - related menu panel
          *     @type: private
          *     @topic: 0  
          */
    dhtmlXMenuBarObject.prototype._onItemOver=function(item,panel){
      if (item){
      if ((this.lastSelectedItem)&&(this.lastSelectedItem!=item))
        {
        if ((!this.lastSelectedItem.subMenu)||(this.lastSelectedItem.subMenu!=item.parentPanel))
          this._unMarkItem(this.lastSelectedItem);
          
        
        }
      
      this.lastSelectedItem=item;
        
    if (this.ieWinMode)
      {
//      if (item.topNod.className!=item.className+"down") item.topNod.className=item.className+"down";
      this._markItem(item,"down");
      }
    else 
      {
      //if (item.topNod.className!=item.className+"over") item.topNod.className=item.className+"over";
        this._markItem(item);
      }
      var zp=item.parentPanel;
      if ((zp._lastSelectedItem)&&(zp._lastSelectedItem!=item))
         if (zp._lastSelectedItem.subMenu) 
           this._closePanel(zp._lastSelectedItem.subMenu);    

      
      item.parentPanel._lastSelectedItem=item;
          }
      if (panel) this._openPanel(panel);          
    }

    /**  
          *     @desc: open menu panel
          *     @param: panel - related menu panel
          *     @type: private
          *     @topic: 0  
          */
    dhtmlXMenuBarObject.prototype._openPanel=function(panel){
      
      if ((this.lastOpenedPanel)&&(this.lastOpenedPanel!=panel)&&(this.lastOpenedPanel.parentPanel!=panel)&&(this.lastOpenedPanel!=panel.parentPanel))
        {
        this._closePanel(this.lastOpenedPanel);
        }
      
      var z=panel.topNod.timeoutop;
      if (z)  clearTimeout(z); 
      if (panel.topNod.style.display=="") return; 
      if (this.lastOpenedPanel!=panel)
      {
      this.lastOpenedPanel=panel;
      switch(this.modeValue){
        case "classic":
      if (panel.topMenu!=panel.parentPanel)  {
        panel.topNod.style.left=getAbsoluteLeft(panel.parentItem.topNod)*1+panel.parentItem.topNod.offsetWidth*1;
        panel.topNod.style.top=getAbsoluteTop(panel.parentItem.topNod);        }
      else  {
        panel.topNod.style.left=getAbsoluteLeft(panel.parentItem.topNod);
        panel.topNod.style.top=getAbsoluteTop(panel.parentItem.topNod)*1+panel.parentItem.topNod.offsetHeight*1-1;        }
          break;
        case "popup":
        panel.topNod.style.left=getAbsoluteLeft(panel.parentItem.topNod)*1+panel.parentItem.topNod.offsetWidth*1;
        panel.topNod.style.top=getAbsoluteTop(panel.parentItem.topNod);        
          break;
        case "betta":
      if (panel.topMenu!=panel.parentPanel)  {
        panel.topNod.style.left=getAbsoluteLeft(panel.parentItem.topNod)*1;
        panel.topNod.style.top=getAbsoluteTop(panel.parentItem.topNod)+panel.parentItem.topNod.offsetHeight*1-1;        }
      else  {
        panel.topNod.style.left=getAbsoluteLeft(panel.parentItem.topNod)*1+panel.parentItem.topNod.offsetWidth*1;
        panel.topNod.style.top=getAbsoluteTop(panel.parentItem.topNod);      }  
          break;                    
        case "alfa":
      panel.topNod.style.top=getAbsoluteTop(panel.parentItem.topNod)*1+panel.parentItem.topNod.offsetHeight*1-1;
      panel.topNod.style.left=getAbsoluteLeft(panel.parentItem.topNod);              
          break;
        }
      panel.topNod.style.display="";
      if (panel.topNod.ieFix)
        {
      panel.topNod.ieFix.style.top=panel.topNod.style.top;
      panel.topNod.ieFix.style.left=panel.topNod.style.left;            
      panel.topNod.ieFix.style.width=panel.topNod.offsetWidth;
      panel.topNod.ieFix.style.height=panel.topNod.offsetHeight;
      panel.topNod.ieFix.style.display="";            
        }
      }
      this._fixPanelPosition(panel);
    }
    
    dhtmlXMenuBarObject.prototype._fixPanelPosition=function(panel,mode){
      var uf=0;
      if (panel.parentPanel){
      var xs=document.body.offsetWidth-15;
      var ys=document.body.offsetHeight-15;    
      //now check is panel real visible
      if ((panel.topNod.offsetWidth+parseInt(panel.topNod.style.left))>xs)
      {
        //x-axis overflow
        if (!panel.parentPanel.extraMode){
          //v layouts
          var z=xs-panel.topNod.offsetWidth;
          if (z<0) z=0;
          panel.topNod.style.left=z;
          if (panel.topNod.ieFix) panel.topNod.ieFix.style.left=z;
        }
        else {
          // h-layout
          var z=parseInt(panel.topNod.style.left)-panel.topNod.offsetWidth-panel.parentItem.topNod.offsetWidth;
          if (z<0) { 
            var z2=parseInt(panel.topNod.style.top)+panel.parentItem.topNod.offsetHeight;
              panel.topNod.style.top=z2;
            if (panel.topNod.ieFix) panel.topNod.ieFix.style.top=z2;

            z=xs-panel.topNod.offsetWidth; if (z<0) z=0; }
          panel.topNod.style.left=z;
          if (panel.topNod.ieFix) panel.topNod.ieFix.style.left=z;
        }

      }
      if ((panel.topNod.offsetHeight+parseInt(panel.topNod.style.top))>ys)
      {
        //y-overflow overflow

        //x-axis overflow
        if (panel.parentPanel.extraMode){
          //v layouts
          var z=ys-panel.topNod.offsetHeight;
          if (z<0) z=0;
          panel.topNod.style.top=z;
          if (panel.topNod.ieFix) panel.topNod.ieFix.style.top=z;
        }
        else {
          // h-layout
          var z=parseInt(panel.topNod.style.top)-panel.topNod.offsetHeight-panel.parentItem.topNod.offsetHeight;
          if (z<0) { 
            var z2=parseInt(panel.topNod.style.left)+panel.parentItem.topNod.offsetWidth;
              panel.topNod.style.left=z2;
            if (panel.topNod.ieFix) panel.topNod.ieFix.style.left=z2;
            uf=1;
            z=ys-panel.topNod.offsetHeight; if (z<0) z=0; }
          panel.topNod.style.top=z;
          if (panel.topNod.ieFix) panel.topNod.ieFix.style.top=z;
        }
        
      }
      
      }
      
      if ((uf)&&(!mode)) this._fixPanelPosition(panel,1);
    }
    /**  
          *     @desc: close menu panel
          *     @param: panel - related menu panel
          *     @type: private
          *     @topic: 0  
          */    
    dhtmlXMenuBarObject.prototype._closePanel=function(panel){
      if (!panel) return;
//      if ((this.lastOpenedPanel)&&(!this.lastOpenedPanel.parentPanel.parentPanel)&&(this.lastOpenedPanel!=panel))
  //      this._closeBottomPanels(panel,1);      
    //  else 
        if ((this.lastSelectedItem)&&(this.lastSelectedItem.parentPanel==panel)) this._unMarkItem(this.lastSelectedItem);
        this._closeBottomPanels(panel);
        this._closeTopPanels(panel);
        
      this.lastOpenedPanel="";
    }

    dhtmlXMenuBarObject.prototype._closeTopPanels=function(panel){
      if ((this.lastSelectedItem)&&(this.lastSelectedItem.parentPanel==panel)) this._unMarkItem(this.lastSelectedItem);
      for (var i=0; i<panel.itemsCount; i++)
      {
        var zi=panel.items[i];
        if ((zi.subMenu)&&(zi.subMenu.topNod.style.display!="none"))
        {
          zi.subMenu.topNod.style.display="none";
          this._unMarkItem(zi.subMenu.parentItem);
          if (zi.subMenu.topNod.ieFix) zi.subMenu.topNod.ieFix.style.display="none"
          this._closeTopPanels(zi.subMenu);
          return;
        }
      }
      
    }
    /**  
          *     @desc: close parent panels
          *     @param: panel - related menu panel
          *     @type: private
          *     @topic: 0  
          */    
    dhtmlXMenuBarObject.prototype._closeBottomPanels=function(panel,ieWinMode){
      if (panel.parentPanel) 
        {
      
        
        if ((!this.lastSelectedItem)||(this.lastSelectedItem.parentPanel!=panel.parentPanel))
          {
          this._closeBottomPanels(panel.parentPanel);
          }
        else this.lastOpenedPanel=panel;
        panel.topNod.style.display="none";
        this._unMarkItem(panel.parentItem);
        if (panel.topNod.ieFix) panel.topNod.ieFix.style.display="none"
        }
    }
  
    /**  
          *     @desc: mark node as unselected
          *     @param: item - menu item object
          *     @type: private
          *     @topic: 0  
          */  
    dhtmlXMenuBarObject.prototype._unMarkItem=function(item){
      item.CSSTag.className=item.className;  
      if (item.CSSImageTag) item.CSSImageTag.className="";
      if (item.childMenuTag.src!="") 
        item.childMenuTag.src=this.sysGfxPath+"btn_rt1.gif";  
      
    }
    /**  
          *     @desc: mark node as selected
          *     @param: item - menu item object
          *     @param: over - css class sufix
          *     @type: private
          *     @topic: 0  
          */  
    dhtmlXMenuBarObject.prototype._markItem=function(item,over){
        over=over||"over";
        item.CSSTag.className=item.className+over;
        if (item.CSSImageTag) item.CSSImageTag.className=item.className+over+"img";
        
        if (item.childMenuTag.src!="") 
          item.childMenuTag.src=this.sysGfxPath+"btn_rt2.gif";  
        
    }
        
    /**  
          *     @desc: set menu design
          *     @param: modeValue - name of design
          *     @type: public
          *     @topic: 0  
          */  
    dhtmlXMenuBarObject.prototype.setMenuMode=function(modeValue){
      this.modeValue=modeValue;
      switch(modeValue){
        case "classic":
          this.addFirstLevel=this._addItem;
          this.addSecondLevel=this.addItem_vertical;
          break;
        case "alfa":
          this.addFirstLevel=this._addItem;
          this.addSecondLevel=this._addItem;
          break;
        case "popup":
          this.addFirstLevel=this.addItem_vertical;
          this.addSecondLevel=this.addItem_vertical;
          break;
        case "betta":
          this.addFirstLevel=this.addItem_vertical;
          this.addSecondLevel=this._addItem;
          break;
        };
    }
    
    

      
/*------------------------------------------------------------------------------
                VDivider object
--------------------------------------------------------------------------------*/
    /**  
          *     @desc: vertical divider object
          *     @param: id - identificator
          *     @type: public
          *     @topic: 0  
          */
  function dhtmlXMenuDividerYObject(id){
    this.topNod=0;
    if (id) this.id=id;  else this.id=0;
    td=document.createElement("td");    
    this.topNod=td; td.align="center"; td.style.padding="2 2 1 2";
    td.innerHTML="<div class='menuDividerY'>&nbsp;</div>";
        if (!document.all) td.childNodes[0].style.height="0px";
    return this;
  };
  dhtmlXMenuDividerYObject.prototype = new dhtmlXButtonPrototypeObject;
  
/*------------------------------------------------------------------------------
                End of vDivider object
--------------------------------------------------------------------------------*/  

/*------------------------------------------------------------------------------
                HDivider object
--------------------------------------------------------------------------------*/
    /**  
          *     @desc: horisontal divider object
          *     @param: id - identificator
          *     @type: public
          *     @topic: 0  
          */     
  function dhtmlXMenuDividerXObject(id){
    this.topNod=0;
    if (id) this.id=id;  else this.id=0;
    td=document.createElement("td");    
    this.topNod=td; td.align="center"; td.style.paddingRight="2"; td.style.paddingLeft="2"; td.width="4px";
    td.innerHTML="<div class='menuDivider'></div  >";
    if (!document.all) {  td.childNodes[0].style.width="0px";  td.style.padding="0 0 0 0"; td.style.margin="0 0 0 0";  } 
    return this;
  };
  dhtmlXMenuDividerXObject.prototype = new dhtmlXButtonPrototypeObject;
/*------------------------------------------------------------------------------
                End of hDivider object
--------------------------------------------------------------------------------*/    
  
  </script>
  <!-- dhtmlXCommon.js -->
  <script language="JavaScript">
    /**  
          *     @desc: xmlLoader object
          *     @type: private
          *     @param: funcObject - xml parser function
          *     @param: object - jsControl object
      *     @topic: 0  
          */  
function dtmlXMLLoaderObject(funcObject, dhtmlObject){
  this.xmlDoc="";
  this.onloadAction=funcObject||null;
  this.mainObject=dhtmlObject||null;
  return this;  
};
    /**  
          *     @desc: xml loading handler
          *     @type: private
          *     @param: dtmlObject - xmlLoader object
      *     @topic: 0  
          */
  dtmlXMLLoaderObject.prototype.waitLoadFunction=function(dhtmlObject){
    this.check=function (){    
      if (!dhtmlObject.xmlDoc.readyState) dhtmlObject.onloadAction(dhtmlObject.mainObject);
      else  { 
      if (dhtmlObject.xmlDoc.readyState != 4) return false;
        else dhtmlObject.onloadAction(dhtmlObject.mainObject);  }
    };
    return this.check;
  };
  
    /**  
          *     @desc: return XML top node
      *     @param: tagName - top XML node tag name (not used in IE, required for Safari and Mozilla)
          *     @type: private
      *     @returns: top XML node
      *     @topic: 0  
          */
  dtmlXMLLoaderObject.prototype.getXMLTopNode=function(tagName){
      if (this.xmlDoc.responseXML)  { var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName); var z=temp[0];  }   
      else var z=this.xmlDoc.documentElement;  
      if (z) return z;
      alert("Incorrect XML");
      return document.createElement("DIV");
  };
  
    /**  
          *     @desc: load XML
          *     @type: private
          *     @param: filePath - xml file path
      *     @topic: 0  
          */  
  dtmlXMLLoaderObject.prototype.loadXMLString=function(xmlString){
    try 
   {
     var parser = new DOMParser();
     this.xmlDoc = parser.parseFromString(xmlString,"text/xml");
   }
   catch(e){
    this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    this.xmlDoc.loadXML(xmlString);
   }
    this.onloadAction(this.mainObject);
  }
  dtmlXMLLoaderObject.prototype.loadXML=function(filePath){
   try 
   {
     this.xmlDoc = new XMLHttpRequest();
    this.xmlDoc.open("GET",filePath,true);
    this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
    this.xmlDoc.send(null);  
   }
   catch(e){

        if (document.implementation && document.implementation.createDocument)
        {
          this.xmlDoc = document.implementation.createDocument("", "", null);
          this.xmlDoc.onload = new this.waitLoadFunction(this);
        }
        else
        {
          this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
          this.xmlDoc.async="true";
          this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
        }
        this.xmlDoc.load(filePath);        
      }
  };
  
    /**  
          *     @desc: Call wrapper
          *     @type: private
          *     @param: funcObject - action handler
          *     @param: dhtmlObject - user data
      *     @returns: function handler
      *     @topic: 0  
          */
function callerFunction(funcObject,dhtmlObject){
  this.handler=function(e){
    if (!e) e=event;
    funcObject(e,dhtmlObject);
    return true;
  };
  return this.handler;
};

    /**  
          *     @desc: Calculate absolute position of html object
          *     @type: private
          *     @param: htmlObject - html object
      *     @topic: 0  
          */
function getAbsoluteLeft(htmlObject){
        var xPos = htmlObject.offsetLeft;
        var temp = htmlObject.offsetParent;
        while (temp != null) {
            xPos += temp.offsetLeft;
            temp = temp.offsetParent;
        }
        return xPos;
    }
    /**  
          *     @desc: Calculate absolute position of html object
          *     @type: private
          *     @param: htmlObject - html object
      *     @topic: 0  
          */  
function getAbsoluteTop(htmlObject) {
        var yPos = htmlObject.offsetTop;
        var temp = htmlObject.offsetParent;
        while (temp != null) {
            yPos += temp.offsetTop;
            temp = temp.offsetParent;
        }
        return yPos;
   }
   
   
/**  
*     @desc: Convert string to it boolean representation
*     @type: private
*     @param: inputString - string for covertion
*     @topic: 0  
*/    
function convertStringToBoolean(inputString){ if (typeof(inputString)=="string") inputString=inputString.toLowerCase();
  switch(inputString){
    case "1":
    case "true":
    case "yes":
    case "y":
    case 1:    
    case true:    
          return true; 
          break;
    default:   return false;
  }
}

/**  
*     @desc: find out what symbol to use as url param delimiters in further params
*     @type: private
*     @param: str - current url string
*     @topic: 0  
*/  
function getUrlSymbol(str){
    if(str.indexOf("?")!=-1)
      return "&"
    else
      return "?"
  }
  
  
function dhtmlDragAndDropObject(){
    this.lastLanding=0;
    this.dragNode=0;
    this.dragStartNode=0;
    this.dragStartObject=0;
    this.tempDOMU=null;
    this.tempDOMM=null;
    this.waitDrag=0;
    if (window.dhtmlDragAndDrop) return window.dhtmlDragAndDrop;
    window.dhtmlDragAndDrop=this;
    return this;
  };
  
  dhtmlDragAndDropObject.prototype.removeDraggableItem=function(htmlNode){
    htmlNode.onmousedown=null;
    htmlNode.dragStarter=null;
    htmlNode.dragLanding=null;
  }
  dhtmlDragAndDropObject.prototype.addDraggableItem=function(htmlNode,dhtmlObject){
    htmlNode.onmousedown=this.preCreateDragCopy;
    htmlNode.dragStarter=dhtmlObject;
    this.addDragLanding(htmlNode,dhtmlObject);
  }
  dhtmlDragAndDropObject.prototype.addDragLanding=function(htmlNode,dhtmlObject){
    htmlNode.dragLanding=dhtmlObject;
  }
  dhtmlDragAndDropObject.prototype.preCreateDragCopy=function(e)
  {
    if (window.dhtmlDragAndDrop.waitDrag) {
       window.dhtmlDragAndDrop.waitDrag=0;     
       document.body.onmouseup=window.dhtmlDragAndDrop.tempDOMU;
       document.body.onmousemove=window.dhtmlDragAndDrop.tempDOMM;
       return;
    }
    
    window.dhtmlDragAndDrop.waitDrag=1;
    window.dhtmlDragAndDrop.tempDOMU=document.body.onmouseup;
    window.dhtmlDragAndDrop.tempDOMM=document.body.onmousemove;    
    window.dhtmlDragAndDrop.dragStartNode=this;
    window.dhtmlDragAndDrop.dragStartObject=this.dragStarter;
    document.body.onmouseup=window.dhtmlDragAndDrop.preCreateDragCopy;
    document.body.onmousemove=window.dhtmlDragAndDrop.callDrag;
  };
  dhtmlDragAndDropObject.prototype.callDrag=function(e){
    if (!e) e=window.event;
    dragger=window.dhtmlDragAndDrop;
    if (!dragger.dragNode) {
      dragger.dragNode=dragger.dragStartObject._createDragNode(dragger.dragStartNode);
      document.body.appendChild(dragger.dragNode);
      document.body.onmouseup=dragger.stopDrag;
      dragger.waitDrag=0;
      }

      dragger.dragNode.style.left=e.clientX+15+document.body.scrollLeft;  dragger.dragNode.style.top=e.clientY+3+document.body.scrollTop; 

    if (!e.srcElement)   var z=e.target;   else   z=e.srcElement;
    dragger.checkLanding(z);
  }
  dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject){ 
    if (htmlObject.dragLanding) { if (this.lastLanding) this.lastLanding.dragLanding._dragOut(this.lastLanding);
                     this.lastLanding=htmlObject; this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode); }
    else {
       if (htmlObject.tagName!="BODY") this.checkLanding(htmlObject.parentNode);
       else  { if (this.lastLanding) this.lastLanding.dragLanding._dragOut(this.lastLanding); this.lastLanding=0; }
       }
  }
  dhtmlDragAndDropObject.prototype.stopDrag=function(e){
    dragger=window.dhtmlDragAndDrop;
    if (dragger.lastLanding) dragger.lastLanding.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,dragger.lastLanding);
    dragger.lastLanding=0;
    dragger.dragNode.parentNode.removeChild(dragger.dragNode);
    dragger.dragNode=0;
    dragger.dragStartNode=0;
    dragger.dragStartObject=0;
    document.body.onmouseup=dragger.tempDOMU;
    document.body.onmousemove=dragger.tempDOMM;
    dragger.tempDOMU=null;
    dragger.tempDOMM=null;
    dragger.waitDrag=0;
  }    
  </script>  
  <table>
    <tr>
      <td>
        <div id="menu_zone" style="width:600;background-color:#f5f5f5;border :1px solid Silver;"/>
      </td>
    </tr>
    <tr>
    <td>
      
    </td>
    </tr>
  </table>
<hr>
<XMP>
<div id="menu_zone" style="width:600; height:50;"/>
<script>
    //init menu
    aMenuBar=new dhtmlXMenuBarObject('menu_zone','100%',30,"Demo menu");
    // set processing function
    aMenuBar.setOnClickHandler(onButtonClick);
    //set path to images folder
    aMenuBar.setGfxPath("fancyMenuBarImg/");
    //load menu from xml
    aMenuBar.loadXML("fancyMenuBarImg/_menu.xml")
    //show menu
    aMenuBar.showBar();
    
    function onButtonClick(itemId,itemValue)
    {
      alert("Button "+itemId+" was pressed"+(itemValue?("\n select value : "+itemValue):""));
    };
    
</script>
</XMP>
    Parameters passed to the constructor are:
      <li>object to attach menu to (should be loaded before calling constructor)</li>
      <li>width of the menu</li>
      <li>height of the menu</li>
      <li>title of menu</li><br>

  <script>
  
    function onButtonClick(itemId,itemValue)
    {
      alert("Button "+itemId+" was pressed"+(itemValue?("\n select value : "+itemValue):""));
    };
    
    
    aMenuBar=new dhtmlXMenuBarObject(document.getElementById('menu_zone'),'100%',22,"Demo menu");
    aMenuBar.setOnClickHandler(onButtonClick);
    aMenuBar.setGfxPath("fancyMenuBarImg/");
    aMenuBar.loadXML("fancyMenuBarImg/_menu.xml");
    aMenuBar.showBar();
  </script>
<br><br>

</body>
</html>



           
       








-dhtmlxMenu.zip( 107 k)

Related examples in the same category

1.Application Menubar Example
2.[DOM Menu] :: Example 1 :: Horizontal Menu
3.[DOM Menu] :: Example 2 :: KDE Keramik Style Menu
4.[DOM Menu] :: Example 3: Brainjar.com 'Revenge of the Menubar' Style Menu
5.[DOM Menu] Example 4: Vertical Menu
6.[DOM Menu] :: Example 5 :: Two Menus
7.[DOM Menu] :: Example 6 :: Flash Hiding
8.Menu bar for an inner fake window
9.Fly in Menu item
10.Not too fancy menu with toolbar
11.Custom Contextual Menu(content sensitive)
12.Drop-Down Menus
13.Menu with sound
14.Menu based on Javascript
15.popup menu (content sensitive menu)
16.Complete Source Code for the Menu
17.Slide out menu
18.Dynamic menu: fly in
19.Menu and submenu
20.Slide out menu with i18N
21.Menu: XP, win 98 style
22.Simple drop-down menu example with layer
23.Add/delete menu items
24.Customizable layout: customize menu layout
25.Vertical layout menu
26.Easy skinable menu with CSS
27.Menu Item properties
28.Direct link menu
29.Context menu: popup menu
30.Black Menu
31.Dropdown menu