Context menu: popup menu : Menu « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » GUI Components » Menu 
Context menu: popup menu

//CopyRight 1998-2005 Scand LLC.

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

<html>
<head>
  <title>Javascript Menu samples. dhtmlXMenu - Context menu</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>Context menu</h1>
    <script language="JavaScript">
    /**  
          *     @desc: context menu object
          *     @type: public
      *     @param: width - menu width
      *     @param: height - menu height
        *     @topic: 0  
          */ 
function dhtmlXContextMenuObject(width,height){
  this.menu=new dhtmlXMenuBarObject(document.body,width,height,name,1);
  this.menu.hideBar();
  this.menu.contextMenu=this;
  this.menu.enableWindowOpenMode(false);
  this.menu.setOnClickHandler(this._innerOnClick);
}

    /**  
          *     @desc: set onClick context menu handler
          *     @type: public
      *     @param: func - user defined function
        *     @topic: 0  
          */ 
dhtmlXContextMenuObject.prototype.setContextMenuHandler=function(func){ 
  if (typeof(func)=="function"this.onClickHandler=func; else this.onClickHandler=eval(func)
  }

    /**  
          *     @desc: default menu onclick precessor
          *     @type: private
      *     @param: id - clicked node id
        *     @topic: 0  
          */ 
  
dhtmlXContextMenuObject.prototype._innerOnClick=function(id){
  var that=document.body.contextMenu; 
  if (document.body.onclickdocument.body.onclick();
  if (that.onClickHandlerreturn that.onClickHandler(id,that.zoneId);
  return true;
}

    /**  
          *     @desc: set context zones
          *     @type: public
      *     @param: htmlObject - id of html tag or html object
      *     @param: zoneId - id of zone
        *     @topic: 0  
          */
dhtmlXContextMenuObject.prototype.setContextZone=function(htmlObject,zoneId){
  if (typeof(htmlObject)!="object"
    htmlObject=document.getElementById(htmlObject);
    
  htmlObject.contextOnclick=htmlObject.onmousedown;
  htmlObject.onmousedown=this._contextStart;
  htmlObject.contextMenu=this;
  htmlObject.contextMenuId=zoneId;
}
    /**  
          *     @desc: open context menu
          *     @type: private
      *     @param: e - event object
        *     @topic: 0  
          */
dhtmlXContextMenuObject.prototype._contextStart=function(e){
  if (!ee=event; 
  if (document.body.onclickdocument.body.onclick();
  
  if ((!e)||(e.button!=2))
  {
    if (this.contextOnclickthis.contextOnclick();
    return true;
  }
  else this.contextMenu.menu.showBar();
  
  var a=this.contextMenu.menu.topNod;
  a.style.position="absolute";
  a.style.left=e.clientX+document.body.scrollLeft;
  a.style.top=e.clientY+document.body.scrollTop;
  

  
  document.body.oncontextmenu=new Function("document.body.oncontextmenu=new Function('if (document.body.onclick) document.body.onclick(); return false;'); return false; ");    
  document.body.onclick=this.contextMenu._contextEnd;
  document.body.contextMenu=this.contextMenu;
  this.contextMenu.zoneId=this.contextMenuId;
  return false;  
}
    /**  
          *     @desc: close context menu
          *     @type: private
      *     @param: e - event object
        *     @topic: 0  
          */
dhtmlXContextMenuObject.prototype._contextEnd=function(e){
  var menu=this.contextMenu.menu;
  menu._closePanel(menu);
  menu.lastOpenedPanel="";
  menu.lastSelectedItem=0;
  menu.hideBar();
  document.body.onclick=null;
  return false;  
}
    
    </script>  
  <style rel="STYLESHEET" type="text/css">
.contextMenu{
  font-family:arial; font-size:8pt;
  padding:0 0 0 2;
  margin: 0 1 0 1;
  text-align:left;
  cursor:default;  
}

.contextMenuOver, .contextMenuDown{
  font-family:arial; font-size:8pt;
  padding:0 0 0 2;
  margin: 0 1 0 1;
  text-align:left;
  background-color:#6495ed;
  color:white; 
  cursor:default;
}
.contextMenuOver td
  color:white;  
}
.menuTable{
  border:1px solid;
  margin : 0px;
  padding : 3 1 4 1;
}  
  </style>
  <!-- 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=50gray()
  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==idreturn 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.disablez.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.enablez.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(widththis.topNod.width=width;
      if(heightthis.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.onShowthis.onShow()};
    /**  
          *     @desc: hide menu
          *     @type: public
        *     @topic: 0
          */
    dhtmlXProtobarObject.prototype.hideBar=function(){ this.topNod.style.display="none"if (this.onHidethis.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.disableImagethis.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 (!thatthat=this.objectNode;
      if (that.topNod.dstatusreturn;
      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 (disabledImageSrcthis.disableImage=disabledImageSrc;
      
      if (this.topNod.onclick==this.dummy)
        if (disabledImageSrcthis.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 (!ee=event; 
      //e.cancelBubble=true;
      if (this.timeoutopclearTimeout(this.timeoutop);
      this.timeoutop=setTimeoutthis.objectNode._delayedTimerCall(this.objectNode,"_onmouseoutY"),100);
    };
    
    dhtmlXButtonPrototypeObject.prototype._onmouseoverX=function(e){
      if (!ee=event; 
      //e.cancelBubble=true;    
      if (this.timeoutopclearTimeout(this.timeoutop);
      this.timeoutop=setTimeoutthis.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.parentObjectthis.parentObject=document.body;
    
    if (!vModethis.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._extendedInitthis._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 (minWidththis.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==idreturn 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==1node.cAr[2]++;
            else node.cAr[0]--;
          else 
            if (rest==1node.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.timeoutopsclearTimeout(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.timeoutopswindow.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].CSSTagz_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].CSSTagz_count++;
          if (z_count>this.maxItems) {
            node.items[i].topNod.parentNode.style.display="none";
            if (node.cAr[2]==0node.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<0return 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==panelthis.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.defaultActionitem.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.defaultActionitem.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==idreturn 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].removeItemthis.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 (menuAlignthat.setBarAlign(menuAlign);
     
     that.maxItems=node.getAttribute("maxItems")||99;
     var absolutePosition=node.getAttribute("absolutePosition");          
     var aleft=node.getAttribute("left");     
      var atop=node.getAttribute("top");
       if (absolutePositionthat.topNod.style.top=atop || 0;
       if (absolutePositionthat.topNod.style.left=aleft || 0;
     if (absolutePosition=="yes"that.topNod.style.position="absolute";
     
     var name=node.getAttribute("name");
     if(namethat.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.lengththat._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.widththis.width=1;     
      if(!this.heightthis.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>'+
              '<tclass="'+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.widththis.width=120;     
      if(!this.heightthis.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 (idthis.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.disableImagethis.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.parentPanelthis.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 (!ee=event;
      e.cancelBubble=true;

      if (!that)  that=this.objectNode;  
      var thatM=that.parentPanel.topMenu;
      if (that.topNod.dstatusreturn;
      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")
      
      setTimeoutnew 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 (!panelreturn;
      z=panel.topNod.timeoutop;          
      if (z)  clearTimeout(z)
      
      if (!panel.parentPanelreturn;
      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 (!ee=event; e.cancelBubble=true;    
      that=this.panel.topMenu;
      if (this.timeoutopclearTimeout(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 (!ee=event; e.cancelBubble=true;    
      that=this.panel.topMenu;
      if (this.timeoutopclearTimeout(this.timeoutop);
      
      if ((!that.ieWinMode))
        {
        this.timeoutop=setTimeoutnew 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 (!panelreturn;
      if (this.ieWinMode)
        if ((panel.topMenu==panel)||((item)&&(this.ieWinModeState==1)))  return
      
      if (itemthis._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 (panelthis._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<0z=0;
          panel.topNod.style.left=z;
          if (panel.topNod.ieFixpanel.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.ieFixpanel.topNod.ieFix.style.top=z2;

            z=xs-panel.topNod.offsetWidth; if (z<0z=0}
          panel.topNod.style.left=z;
          if (panel.topNod.ieFixpanel.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<0z=0;
          panel.topNod.style.top=z;
          if (panel.topNod.ieFixpanel.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.ieFixpanel.topNod.ieFix.style.left=z2;
            uf=1;
            z=ys-panel.topNod.offsetHeight; if (z<0z=0}
          panel.topNod.style.top=z;
          if (panel.topNod.ieFixpanel.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 (!panelreturn;
//      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.ieFixzi.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.ieFixpanel.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.CSSImageTagitem.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.CSSImageTagitem.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 (idthis.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.alltd.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 (idthis.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.readyStatedhtmlObject.onloadAction(dhtmlObject.mainObject);
      else  
      if (dhtmlObject.xmlDoc.readyState != 4return 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 (zreturn 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 (!ee=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.dhtmlDragAndDropreturn 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 (!ee=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.lastLandingthis.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.lastLandingthis.lastLanding.dragLanding._dragOut(this.lastLanding)this.lastLanding=0}
       }
  }
  dhtmlDragAndDropObject.prototype.stopDrag=function(e){
    dragger=window.dhtmlDragAndDrop;
    if (dragger.lastLandingdragger.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 style="cursor:default;">
    <tr>
      <td>
      <div style="width:150; border-bottom:1px solid black;" id="alfa1">Test zone 1</div>
      <div style="width:150; border-bottom:1px solid black;" id="alfa2">Test zone 2</div>
      <div style="width:150; border-bottom:1px solid black;" id="alfa3">Test zone 3</div>
      </td>
      <td style="padding-left:20px;">
      <div style="width:150; border-bottom:1px solid black;" id="alfa4">Test zone 4</div>
      <div style="width:150; border-bottom:1px solid black;" id="alfa5">Test zone 5</div>
      <div style="width:150; border-bottom:1px solid black;" id="alfa6">Test zone 6</div>
      </td>      
    </tr>
    <tr>
      <td colspan="2">
      Press right mouse button on one of test zones.      
      </td>
    </tr>

  </table>
<hr>
<XMP>
<script>
    //init context menu
    aMenu=new dhtmlXContextMenuObject('120',0,"Demo menu");
    aMenu.menu.setGfxPath("fancyMenuBarImg/");    
    aMenu.menu.loadXML("fancyMenuBarImg/_context.xml");        
    aMenu.setContextMenuHandler(onButtonClick);
    
    //set context zones
    aMenu.setContextZone("alfa1",1);
    aMenu.setContextZone("alfa2",2);
    aMenu.setContextZone("alfa3",3);  
    
    //init context menu
    bMenu=new dhtmlXContextMenuObject('120',0,"Demo menu");
    bMenu.menu.setGfxPath("fancyMenuBarImg/");    
    bMenu.menu.loadXML("fancyMenuBarImg/_context2.xml");        
    bMenu.setContextMenuHandler(onButtonClick2);
    
    //set context zones
    bMenu.setContextZone("alfa4",1);
    bMenu.setContextZone("alfa5",2);
    bMenu.setContextZone("alfa6",3);      
    
</script>
</XMP>


  <script>
    function onButtonClick2(itemId,itemValue)
    {
      var z=itemId.split("_");
      if (z.length>1)
      document.getElementById("alfa"+(itemValue*1+3)).style.fontSize=z[1];
    };
    
    function onButtonClick(itemId,itemValue)
    {
      var z=itemId.split("_");
      if (z.length>1)
      document.getElementById("alfa"+itemValue).style.backgroundColor=z[1];
    };
    
    
    aMenu=new dhtmlXContextMenuObject('120',0,"Demo menu");
    aMenu.menu.setGfxPath("fancyMenuBarImg/");    
    aMenu.menu.loadXML("fancyMenuBarImg/_context.xml");        
    aMenu.setContextMenuHandler(onButtonClick);
    aMenu.setContextZone("alfa1",1);
    aMenu.setContextZone("alfa2",2);
    aMenu.setContextZone("alfa3",3);        

    //init context menu
    bMenu=new dhtmlXContextMenuObject('120',0,"Demo menu");
    bMenu.menu.setGfxPath("fancyMenuBarImg/");    
    bMenu.menu.loadXML("fancyMenuBarImg/_context2.xml");        
    bMenu.setContextMenuHandler(onButtonClick2);
    
    //set context zones
    bMenu.setContextZone("alfa4",1);
    bMenu.setContextZone("alfa5",2);
    bMenu.setContextZone("alfa6",3);      
  </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. Build a simple fancy menu
24. Add/delete menu items
25. Customizable layout: customize menu layout
26. Vertical layout menu
27. Easy skinable menu with CSS
28. Menu Item properties
29. Direct link menu
30. Black Menu
31. Dropdown menu
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.