Context Menu Script

I wrote this context menu script that enables the developer to add a context menu to any element, launched by any action the developer specify.

One can add it to the page embbed or via a link:
function initContextMenu() {
document.write('<div id="contextmenu" class="contextmenu"></div>');
}

function writeContextMenu(content) {
var contextMenu = document.getElementById("contextmenu");
contextMenu.innerHTML = content;
}

function showContextMenu(e) {
var contextMenu = document.getElementById("contextmenu");

var frameWidth, frameHeight, pageOffsetX, pageOffsetY;

if (self.clientWidth) {
frameWidth = self.innerWidth;
        frameHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientWidth) {
frameWidth = document.documentElement.clientWidth;
        frameHeight = document.documentElement.clientHeight;
} else if (document.body) {
frameWidth = document.body.clientWidth;
        frameHeight = document.body.clientHeight;
}

if (self.pageXOffset) {
pageOffsetX = self.pageXOffset;
pageOffsetY = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollLeft) {
pageOffsetX = document.documentElement.scrollLeft;
pageOffsetY = document.documentElement.scrollTop;
} else if (document.body) {
pageOffsetX = document.body.scrollLeft;
pageOffsetY = document.body.scrollTop;
}

if ((frameWidth - e.clientX) < contextMenu.offsetWidth) {
contextMenu.style.left = (pageOffsetX + e.clientX - contextMenu.offsetWidth) + "px";
} else {
contextMenu.style.left = e.clientX + "px";
}

if ((frameHeight - e.clientY) < contextMenu.offsetHeight) {
contextMenu.style.top = (pageOffsetY + e.clientY - contextMenu.offsetHeight) + "px";
} else {
contextMenu.style.top = e.clientY + "px";
}

contextMenu.style.visibility = "visible";
}

function hideContextMenu() {
if (document.getElementById("contextmenu")) document.getElementById("contextmenu").style.visibility = "hidden";
}

// Write the menu to page
initContextMenu();

// Set the click handler for the page
if (!document.addEventListener){
document.attachEvent("onclick", hideContextMenu);
} else {
document.addEventListener("click", hideContextMenu, false);
}

One should add some CSS styling for the context menu box element:
div.contextmenu {
background-color: #d0d0d0;
border: 2px solid;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
left: 0px;
padding: 0px 1px 1px 0px;
position: absolute;
top: 0px;
visibility: hidden;
z-index: 600;
}

div.contextmenu a.menuItem {
color: #000000;
cursor: default;
display: block;
padding: 3px 1em;
text-decoration: none;
white-space: nowrap;
}

div.contextmenu a.menuItem:hover, div.menu a.menuItemHighlight {
background-color: #000080;
color: #ffffff;
}

div.contextmenu div.menuItemSep {
border-top: 1px solid #909090;
border-bottom: 1px solid #f0f0f0;
margin: 4px 2px;
}

Here is an example of how one can implement it on an ActiveWidgets Version 1 grid:
// set row template
var row = new Active.Templates.Row;
grid.setTemplate("row", row);

// set the contextmenu handler
row.setEvent("oncontextmenu", function(){this.action("contextmenu")});
grid.setAction("contextmenu", function(src){
grid.setProperty("selection/index",src.getProperty("item/index"));

var contextMenuContent = '';

contextMenuContent += '<a class="menuItem" href="javascript:customFunctionA('+src.getProperty("item/index")+')"><strong>Custom Function A</strong></a>';
contextMenuContent += '<a class="menuItem" href="javascript:customFunctionB()">Custom Function B</a>';
contextMenuContent += '<div class="menuItemSep"></div>';
contextMenuContent += '<a class="menuItem" href="javascript:customFunctionC()">Custom Function C</a>';

writeContextMenu(contextMenuContent);
showContextMenu(event);
}
);

It would be appreciated if someone could post an example of how to implement it on a row in an ActiveWidgets Version 2 grid

Here follows an example on how to implement it in Version 2:

function raiseMenuEvent(event){
this.raiseEvent("onRowContextMenu", event, this.$0);
}

grid.getRowTemplate().setEvent("oncontextmenu", raiseMenuEvent);

grid.onRowContextMenu = function(event, row){
grid.setRowSelected(row);

var contextMenuContent = '';

contextMenuContent += '<a class="menuItem" href="javascript:customFunctionA('+row+')"><strong>Custom Function A</strong></a>';
contextMenuContent += '<a class="menuItem" href="javascript:customFunctionB()">Custom Function B</a>';
contextMenuContent += '<div class="menuItemSep"></div>';
contextMenuContent += '<a class="menuItem" href="javascript:customFunctionC()">Custom Function C</a>';

writeContextMenu(contextMenuContent);
showContextMenu(event);

}