Creating a right click menu?

Creating a right click menu?

I am creating an app and need the functionality that would allow the user to right click a div element and then produce a little menu. For this i am trying to use the wdContextMenu to create it as it looks really impressive.

The problem i have is assigning the functionality to a div element when using an the initialize() of a MooTools class.

With my app i first create an object that during initialization creates two seperate div elements. I would then like to assign them two seperate menus when each is clicked. The problem is that for some reason whichever of the two divs is right-clicked, the same menu appears. Below is the code i use:
  1. this.leftpanelDiv= document.createElement("div");
  2. this.leftpanelDiv.id = "leftPanel";
  3. this.leftpanelDiv.style.width = "800px";
  4. this.leftpanelDiv.style.height = "800px";
  5. this.leftpanelDiv.style.border = "thin black solid";
  6. this.mainAppDiv.appendChild(this.leftpanelDiv);
  7. $(this.leftpanelDiv).contextmenu(document_Options);    //the right-click menu
  8. //----------------------------------------------------//
  9. this.rightpanelDiv= document.createElement("div");
  10. this.rightpanelDiv.id = "rightPanel";
  11. this.rightpanelDiv.style.width = "200px";
  12. this.rightpanelDiv.style.height = "800px";
  13. this.rightpanelDiv.style.border = "thin black solid";
  14. this.mainAppDiv.appendChild(this.rightpanelDiv);
  15. $(this.rightpanelDiv).contextmenu(panel_Options);

Now it has created two divs and assigned the context menu to it. This works fine in that the screen has two divs displayed and when they are right clicked a menu does appear. But for some reason it displays the same menu. It always shows the document_Options menu. I have no idea why?

Below are the options that i created:
  1. var document_Options =
  2. {
  3.       width: 150,
  4.       items:
  5.       [
  6.             {text: "Create Element", icon: "add.gif", alias: "1-1", action: examplefunc01 }
  7.       ]
    };   

  8. var panel_Options =
  9. {
  10.       width: 150,
  11.       items:
  12.       [
  13.             { text: "Delete Element", icon: "remove.gif", alias: "1-1", action: examplefunc02 }
  14.       ]
    };
I believe it could be because there are nested divs. The final document DOM looks like this:
  1. <div id="mainDiv">
  2.       <div id="leftPanel">
  3.       </div>
  4.       <div id="rightPanel">
  5.       </div>
  6. </div>
Can anyone think of a reason why both divs show the same menu?