<html>
<head>
<title>ARIA Spreadsheet and Menubar</title>
<script type="text/javascript">
<!--
/* PLEASE NOTE THAT THIS IS PROTOTYPE CODE!  It was created as a proof of concept and is not a well designed or robust implementation!  It is not meant to be a best practice example - please use accordinging!  You have been warned.
*/
// functions for changing style rules

function changeStyleRule(oRule, styleName, styleValue) {
  if (oRule.style && oRule.style.setProperty) {
      oRule.style.setProperty(styleName, styleValue,"");
      //alert(oRule.style.getPropertyValue(styleName));
  }
}


// You must specify a "title" attribute in <style> tag or <link> tag for Mozilla.
function pageGetStyleSheet(sID,doc) {
  if(!doc)doc=document;
  if(!sID)
    return doc.styleSheets[0];

  if (doc.all) {
    return doc.styleSheets[sID];
  } else {
    for (var i = 0; i < doc.styleSheets.length; i++) {
      var oSS = doc.styleSheets[i];
      if (oSS.title == sID) return oSS;
    }
  }
}

function cssGetRules(oSS){
  return (document.all ? oSS.rules : oSS.cssRules);
}


// SIMPLE function to find a particular rule selector
function cssGetRule(rulesList, ruleIdent) {
  var foundRule = null;
  for (var i=0; i < rulesList.length; i++ ) {
    var sText = rulesList[i].selectorText;
    if (sText != "undefined" && sText != null) {
      if (sText.indexOf(ruleIdent) > -1 ) {
        foundRule = rulesList[i];
        break;
      }
    }
  }
  return foundRule;
}

var TOP_SUFFIX = "top";  // the top menu item has an id that is menuID + TOP_SUFFIX
var DROP_SUFFIX = "Items"; // the drop menu div has an id that is the menuID + DROP_SUFFIX
var SUB_SUFFIX = "sub" // items that have sub menus have "sub" in the id
var KEY_UP = 38;
var KEY_DOWN = 40;
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
var KEY_ESCAPE = 27;
var KEY_M=77;
var KEY=F10 = 121;
var KEY_SPACE = 32;
var KEY_TAB = 9;


var TEXT_NODE = 3;

Menubar = function(menubarId) {
  this.activeIdx = -1;  // index of the active menu
  this.dropOpen = false;  // indicates if menu is open (items are visible)
  this.itemIdx = -1;  // indicates the index of the active item in an open menu
  this.id = menubarId;
  this.menus = new Array(); // array of menu Ids
  this.menuItems = new Array(); // array of menu items - indexed by menu id
  this.subMenus = new Array(); // array of sub menu items - indexed by parend menu id
  this.activeSubId = null; // string with id of open sub menu; null if no sub menu open
  this.activeSubIndex = -1; // index of active item in sub menu; -1 if no sub menu open

}

/* getters and setters for MenuState object
*/

Menubar.prototype.setActiveMenuIndex = function(index) {
   this.activeIdx = index;
}
Menubar.prototype.getActiveMenuIndex = function() {
  return this.activeIdx;
}
Menubar.prototype.setActiveOpen = function(isOpen) {
  this.dropOpen = isOpen;
}
Menubar.prototype.isActiveOpen= function() {
  return this.dropOpen;
}
Menubar.prototype.setActiveItemIndex = function(index) {
  this.itemIdx = index;
}
Menubar.prototype.getActiveItemIndex = function() {
  return this.itemIdx;
}
Menubar.prototype.updateAllIndex= function(active, drop, item) {
  this.activeIdx = active;
  this.dropOpen = drop;
  this.itemIdx = item;
}
Menubar.prototype.getId = function() {
  return this.id;
}
Menubar.prototype.getMenus = function() {
  return this.menus; // return array of menu item ids
}
Menubar.prototype.getMenuItems = function(menuId) {
  return this.menuItems[menuId];
}
/*  Function to add a menu to the menu bar
 ** Must be called in menu order!!
 ** menuId - id of this menu item
 ** items - array of ids for the menu items in this menu
 ** returns number of menu items (lenght of menu array)
 */
Menubar.prototype.addMenu = function(menuId,items) {
  this.menus[this.menus.length] = menuId;
  this.menuItems[menuId] = items;

}
Menubar.prototype.addSubMenu = function(menuId, items) {
  this.subMenus[menuId] = items;

}
Menubar.prototype.getSubMenuItems = function(itemId) {

  return this.subMenus[itemId];
}
Menubar.prototype.setActiveSubOpen = function(menuId) {
  this.activeSubId = menuId;
}
Menubar.prototype.getActiveSubOpen = function() {
  return this.activeSubId;
}
Menubar.prototype.setActiveSubIndex= function(index) {
  this.activeSubIndex = index;
}
Menubar.prototype.getActiveSubIndex = function() {
  return this.activeSubIndex;
}
Menubar.prototype.hasSubMenu = function(itemObj) {
  var bHasSub = false;
  var itemId = itemObj.getAttribute("id");
  // see if id contains "sub"
  if (itemId.indexOf(SUB_SUFFIX) >  -1) {
    bHasSub = true;
  }
  return bHasSub;
}

Menubar.prototype.doMenu = function(event) {
  //alert(event.ctrlKey + " : " + event.shiftKey + " : " + event.keyCode);
  if (event.ctrlKey && event.altKey && event.keyCode == KEY_M) {
    gFocusBeforeMenus = event.target;
  //var theMenu = document.getElementById(this.getId());
    // set focus to first menu (as long as menus are defined)
    if (this.menus.length > 0) {

      if (this.isActiveOpen() ) {
        // close any open active items if press menu start key again
        var activeIndex = this.getActiveMenuIndex();
        var menu = document.getElementById((this.getMenus()[activeIndex] + DROP_SUFFIX));
        menu.style.display="none";
        this.updateAllIndex(-1,false,-1);

      }
    // set focus to the first menu
    this.setActiveMenuIndex(0);
    gFocusItem = document.getElementById((this.menus[0] + TOP_SUFFIX));
    setTimeout("doFocus();",0);
    } // end of if menus > 0
  }
}



Menubar.prototype.doNavigation = function(event) {
  var bEventContinue = true;  // browser can still use event
  var key = event.keyCode;
  if ((key >=KEY_LEFT && key <= KEY_DOWN) || key == KEY_ESCAPE) {
    var idx = this.getActiveMenuIndex();
    if (idx < 0) {
      idx = 0;
    }
    // if subIndex > -1 a submenu is open - up and down movement will occur in it
    var subIndex = this.getActiveSubIndex();
    var subMenuId = this.getActiveSubOpen();
    var menus = this.getMenus();
    var menuLen = menus.length;
    var activeMenuId = menus[idx];
    //var activeMenu = document.getElementById(activeMenuId);
    var curDrop = document.getElementById(activeMenuId + DROP_SUFFIX);


    if (key == KEY_LEFT || key == KEY_RIGHT) {

      var nextIdx = idx;
      if (key == KEY_LEFT) { // left
        nextIdx = (idx + (menuLen-1)) % menuLen;

      }
      else { // right
        nextIdx = ((idx + 1) % menuLen);
      }
      // if drop menu is displayed, close it and open the next one or move into submenu
      var bShowNext = this.isActiveOpen();
      if (bShowNext) {
        // current drop is open, see if it has submenu
        if (curDrop) {
          if (subMenuId != null) {
            // sub menu is open - close it
            this.hideSubMenu();
            if (key == KEY_LEFT) {
              // find parentItem and set focus to it
              gFocusItem = document.getElementById(subMenuId);
              setTimeout("doFocus();",0);
              return false;
            }
            // if right just close and move to next top level menu (which happens below)
          } // end of submenu open
          if (key == KEY_RIGHT && subMenuId == null) {
            // if right arrow and sub menu is not open- get current item in the drop down and see if it has a sub menu
            var itemIdx = this.getActiveItemIndex();
            var menuItems = this.getMenuItems(activeMenuId);
            var curItemInDrop= document.getElementById(menuItems[itemIdx]);
            var bHasSubMenu = this.hasSubMenu(curItemInDrop);
            //alert(bHasSubMenu + " " + curItemInDrop.getAttribute("id"));
            if (bHasSubMenu == true) {
               return this.showSubMenu(event,curItemInDrop.getAttribute("id"));

            }
          }
          // if haven't returned yet - then close the current drop
          curDrop.style.display = "none"; // only one menudrop child per menu
          this.setActiveItemIndex(0);

        }

      }
      this.setActiveMenuIndex(nextIdx);
      var nextMenuId = menus[nextIdx];
      gFocusItem=document.getElementById(nextMenuId + TOP_SUFFIX);
      if (bShowNext == true) {
        var drop = document.getElementById(nextMenuId + DROP_SUFFIX);
        if (drop) {
          drop.style.display="block";
          var menuItems = this.getMenuItems(nextMenuId);
          gFocusItem=document.getElementById(menuItems[0]);
        }
      }

      setTimeout("doFocus();",0);

    }

    if (key == KEY_UP || key == KEY_DOWN ) {
      var itemIdx = this.getActiveItemIndex();
      var bOpen = this.isActiveOpen();

      if (curDrop) {
        // first see if sub menu is open
        if (subMenuId != null) {
          // submenu is open - move within it
          var subMenus = this.getSubMenuItems(subMenuId);
          var subLen = subMenus.length;
          var nextSubIndex =subIndex;
          if (key == KEY_DOWN) {
            nextSubIndex = (subIndex +1) % subLen;
          }
          else if (key == KEY_UP) {
            nextSubIndex = (subIndex + (subLen - 1)) % subLen;
          }
          gFocusItem = document.getElementById(subMenus[nextSubIndex]);
          this.setActiveSubIndex(nextSubIndex);
          setTimeout("doFocus();",0);
          return false;

        } // end of if sub menus - back to regular processing

        var menuItems = this.getMenuItems(activeMenuId);
        var itemLen = menuItems.length;
        var nextItemIdx;
        if (!bOpen) { // open and set to the first item
          this.showMenu(event, activeMenuId, true);
          itemIdx = -1;
        }
        if (itemIdx == -1) {
          nextItemIdx = 0;
        }
        else if (key == KEY_DOWN ){
          nextItemIdx = (itemIdx +1) % itemLen;
        }
        else { //UP
          nextItemIdx = (itemIdx + (itemLen-1)) % itemLen;
        }

        this.setActiveItemIndex(nextItemIdx);
        gFocusItem=document.getElementById(menuItems[nextItemIdx]);
        setTimeout("doFocus();",0);
      } // end of id curDrop
    } // end of id up/down
  // need to prevent propagation of arrow keys
  /*  try {
      ev.preventDefault();
    }
    catch (err) {
      try {
        ev.returnValue=false;
      }
      catch (errNext) {
        ;
      }
  }*/
  bEventContinue = false;

  if (key == KEY_ESCAPE ) {
      this.closeMenu(event);
      bEventContinue = false;
      if (gFocusBeforeMenus) {
        gFocusItem  = gFocusBeforeMenus;
        setTimeout("doFocus();",0);
      }
      else {
        document.focus();
      }
  } // end of if KEY_ESCAPE
  } // end of if arrow or escape  key
  return bEventContinue;
}
Menubar.prototype.closeMenu = function(event) {
// hide the menus
    var isOpen = this.isActiveOpen();
    var activeIndex = this.getActiveMenuIndex();
    if (isOpen && activeIndex != -1) {
      // find the index of the active menu and close
      this.hideMenu(event);
    }
    else {
      var menus = this.getMenus();
      var activeMenuId = menus[activeIndex];
      var curDrop = document.getElementById(activeMenuId + DROP_SUFFIX);
          if (!isOpen && curDrop) {
        // one of the top level menus is active but drop down is not open
        gBlurItem = curDrop;
        setTimeout("doBlur()",0);
      }
    }

    this.updateAllIndex(-1,false,-1);
  }

Menubar.prototype.showMenu = function(event, menuId, bFocusFirst) {

    // get the drop menu
    var menu = document.getElementById((menuId + DROP_SUFFIX));
    var displayState = "block";
    var curIndex = this.findMenuIndex(menuId);
    // see if any menu is open
    var isOpen = this.isActiveOpen();
    if (isOpen) {
      // find the index of this menu item and see if it is different than the active one
      var activeIndex = this.getActiveMenuIndex();

      if (curIndex != activeIndex && activeIndex != -1 ) {
        // close the currently open drop menu
        this.hideMenu(event);
        // show this one
        displayState = "block";

      }
      else { // this is the current menu - hide it
        displayState = "none";
      }
    } // end of if menu open
    // else is not open - default value of displayState is block -so menu will be shown
    // set the activeOpen value
    var isOpen = (displayState == "block" ? true : false);
    this.setActiveOpen(isOpen);
    this.setActiveMenuIndex(curIndex);
    // style="display:none" must be set on the drop elements to use the element.style.display syntax
    // otherwise need to write cross browser routine to read the effective style (see DHTML book pg 878)
    menu.style.display = displayState;
    gFocusItem = menu;  // may be over written is need to set focus on specific menu item
    if (isOpen && bFocusFirst) {
      // set focus to an item in the menu
      if (this.getActiveItemIndex() == -1) {
        this.setActiveItemIndex(0);  // set to first item
      }
      var menuItems = this.getMenuItems(menuId);
      gFocusItem=document.getElementById(menuItems[this.getActiveItemIndex()]);

    }
      setTimeout("doFocus();",0);

}

Menubar.prototype.showSubMenu = function(event, menuId) {
// TODO fix to work with mouse - since only supporting keyboard right now - there will not be another drop menu open

// close any open submenus
    this.hideSubMenu();

    // get the drop menu
    var menu = document.getElementById((menuId + DROP_SUFFIX));
    var assocItem = document.getElementById(menuId);
    //var container = assocItem.parentNode; // HACK - I know that containing div is parent of menuitem should search for menuitem in parent chain
    var displayState = "block";

    this.setActiveSubOpen(menuId);
    // will set focus to first item
    this.setActiveSubIndex(0);
    // position drop menu

      var offTop= assocItem.offsetTop + "px";
      var offLeft = assocItem.offsetLeft + assocItem.offsetWidth + "px";
      with (menu.style) {
        top=offTop;
        left=offLeft;
        display = displayState;
      }

    var subItems =this.getSubMenuItems(menuId);
    var first = document.getElementById(subItems[0]);
    gFocusItem = first;

    setTimeout("doFocus();",0);
    event.stopPropagation();
    return false;  // do not  propagate event

}
Menubar.prototype.hideSubMenu = function() {
  var openId = this.getActiveSubOpen();
  if (openId != null) {
    var openSub = document.getElementById(openId + DROP_SUFFIX);
    openSub.style.display="none";
    this.setActiveSubOpen(null);
    this.setActiveSubIndex(-1);
  }
}

Menubar.prototype.hideMenu = function(event) {
  var isKey = false;
    if (event.keyCode) {
      isKey = true;
  }
  if ((isKey && event.keyCode == 13) || (isKey && event.keyCode == KEY_ESCAPE ) || !isKey) {
    var isOpen = this.isActiveOpen();
    var activeIndex = this.getActiveMenuIndex();
    if (isOpen) {
      var menu = document.getElementById((this.getMenus()[activeIndex] + DROP_SUFFIX));
      // style="display:none" must be set on the drop elements to use the element.style.display syntax
      // otherwise need to write cross browser routine to read the effective style (see DHTML book pg 878)
      menu.style.display="none";
      this.updateAllIndex(-1,false,-1);
      this.hideSubMenu();
      //event.cancelBubble = true; // this is not in the DOM but is supported by IE and Mozilla - could use stopPropagation();
      gBlurItem = menu;
      setTimeout("doBlur();",0);

    }


  }

}

Menubar.prototype.findMenuIndex = function(menuId) {
  var menus = this.getMenus();
  var menuLen = menus.length;
  var idx = -1;
  for (var i=0; i < menuLen; i++ ) {
    if (menus[i] == menuId) {
      idx = i;
      break;
    }
  }
  return idx;
}
Menubar.prototype.clearMenu = function() {
}

Menubar.prototype.doAlert = function (event, theElem, alertStr) {
// only called when is enter key or mouse click
  var isKey = false;
    if (event.keyCode) {
      isKey = true;
  }
  if (theElem.getAttribute("aria-disabled") !="true") {
      this.hideMenu(event);
      gAlertString = alertStr;
      setTimeout("delayedAlert(gAlertString);",0);

  }
  // always stop propagation of enter key or click
  if (event.stopPropagation) {
          event.stopPropagation();
        }
        else {
          try {
            event.cancelBubble=true;
          } catch (e) {
            ;
          }
      }



  return false; // do not propagate
}


Menubar.prototype.focusItem = function(event,menuIndex, itemIndex) {
// called from onmouseover of each menu item
  // TODO add error handling
  this.setActiveItemIndex(itemIndex);
  this.setActiveMenuIndex(menuIndex);
  //this.setActiveOpen(true);
  gFocusItem = event.target;
  setTimeout("doFocus();",0);
}

Menubar.prototype.doActionTotal = function(event,tableId,key) {
  this.hideMenu(event);
   doTotals(tableId, key);
   // always stop propagation of enter key or click
    if (event.stopPropagation) {
            event.stopPropagation();
          }
          else {
            try {
              event.cancelBubble=true;
            } catch (e) {
              ;
            }
      }

  return false;

}
Menubar.prototype.doActionColor = function(event,colorScheme) {
  this.hideMenu(event);
   doColor(colorScheme);
   // always stop propagation of enter key or click
    if (event.stopPropagation) {
            event.stopPropagation();
          }
          else {
            try {
              event.cancelBubble=true;
            } catch (e) {
              ;
            }
      }

  return false;

}
function doAction(event, theElem) {

  var isKey = false;
  if (event.keyCode) {
    isKey = true;
  }
  var bDoAction = false;
  if ((isKey && event.keyCode == 13) || !isKey) {
    if (theElem.getAttribute("aria-disabled") =="true") {
      bDoAction = false;
    }
    else {
      bDoAction = true;
    }
  }


  return bDoAction;
}




var topMenu = new Menubar("menuBar");
topMenu.addMenu("edit", new Array("cut","copy", "paste"));
topMenu.addMenu("2", new Array("2.1sub", "2.2","2.3","2.4sub"));
topMenu.addMenu("3", new Array("3.1", "3.2","3.3sub","3.4"));
topMenu.addMenu("four", new Array("4.1", "4.2","4.3","4.4","4.5"));
topMenu.addMenu("five", new Array("5.1", "5.2","5.3"));
topMenu.addSubMenu("2.1sub", new Array("2.1.1", "2.1.2","2.1.3", "2.1.4", "2.1.5"));
topMenu.addSubMenu("2.4sub", new Array("2.4.1", "2.4.2"));
topMenu.addSubMenu("3.3sub", new Array("3.3.1", "3.3.2", "3.3.3"));



// global vars for storing selection and focus information; indexed by the id of the parent table element
var gCurrentRow = new Array();
var gCurrentCol = new Array();
var gCurrentSelected = new Array();
var gCurrentCell = new Array();
var gSelectedCells = new Array();
var gSelecting = new Array();
var gTabCount = new Array();

gCurrentRow ["table2"] = -1;   // 0 based row number
gCurrentCol["table2"] = 0;  // 0 based column number
gCurrentSelected ["table2"]=null;  // currently selected row object
gCurrentCell["table2"] =null; // currently selected cell object
gSelectedCells["table2"] = new Array();  // array of currently selected cell objects
gSelecting["table2"] = false;  // boolean indicating if currently  in multi-select mode ( quicker than checking for entries in gCurrentSelectedCells
gTabCount["table2"] = 0;  // need to know if tabbing into or out of control


// global to store the item to be focused
gFocusItem =null;
// global to pass the item needing focus to doBlur() via a setTimeout()
var gBlurItem= null;
// global to store the alert string so can call alert() via setTimeout()
gAlertString = "";

function doFocus() {
  try {
    if (gFocusItem != null) {
      gFocusItem.focus();
      gFocusItem=null;
    }
  } catch (error) {
    alert("DEBUG: error in doFocus()");
  }
}
function doBlur() {
  try {
    if (gBlurItem != null) {
      gBlurItem.blur();
      gBlurItem=null;
    }
  } catch (error) {
    alert("DEBUG: error in doBlur()");
  }
}

function delayedAlert() {
  alert(gAlertString);
  gAlertString = "";
}


function setStyle(theObj, styleName, styleValue, priority) {
  var bSuccess = false;

  try {
    if (theObj.style && theObj.style.setProperty) {
      theObj.style.setProperty(styleName, styleValue,priority);
      bSuccess = true;
    }
  } catch (ex) {
    alert('exception caught setting style: ' + ex.message); // cannot do anything try the next method
  }
  if (!bSuccess) {
    try {
      theObj.style[styleName] = styleValue;
      bSuccess = true;
    } catch (exNext) {
      alert('exception caught setting direct style: ' + exNext.message); // cannot do anything
    }
  }
  return bSuccess;
} // end of setStyle

function findParentElem(evt, parentName) {
  var srcElem = null;
try {
  if (evt.srcElement) {
    srcElem = evt.srcElement;
  }
  else {
    srcElem = evt.currentTarget;
  }

  if (srcElem != null ) {
    // find the source table for the keyup event
    var tagName = srcElem.tagName;
    if (tagName != parentName) {
      // search parent heirarchy
      var parNode = srcElem.parentNode;
      while (parNode != null) {
        if (parNode.type == document.ELEMENT_TYPE) {
          if (parNode.tagName.toLowerCase() == parentName) {
            srcElem = parNode;
            break;
          }
        }
        parNode = parNode.parentNode;
      }
    }

  }
}
catch (anyError) {
  ; //srcElem = null;
}
  return srcElem;
}

function findParent (srcElem, parentName) {
try {
  if (srcElem != null ) {
    // find the source table for the keyup event
    var tagName = srcElem.tagName;
    if (tagName != parentName) {
      // search parent heirarchy
      var parNode = srcElem.parentNode;
      while (parNode != null) {
        if (parNode.type == document.ELEMENT_TYPE) {
          if (parNode.tagName.toLowerCase() == parentName) {
            srcElem = parNode;
            break;
          }
        }
        parNode = parNode.parentNode;
      }
    }

  }
}
catch (anyError) {
  ; //srcElem = null;
}
  return srcElem;
}


function doTableKeys(e) {
  var evt = (e != null) ? e : ((event) ? event : null);  // Mozilla will include e parameter
  var bDefaultHandler = true;
  try {
  var testCell = document.getElementById("testCell"); // could cache this test object for better performance
  if (!testCell.focus) {
  // test cell is the id of a table cell element with a  tabindex="-1".  See if we can set focus to it, if
  // not, just return, we can not support arrow keys
    //alert('no arrow key support');
    return bDefaultHandler;
  }

  var srcElem = findParentElem(evt,"table");
  //srcElem=document.getElementById(srcElem.getAttribute("id"));
  var activeTableId = srcElem.getAttribute("id");
  var rows = srcElem.rows;
  var key = evt.keyCode;
  var bCtrlKey = evt.ctrlKey;
  var  currentRow = gCurrentRow[activeTableId];
  var currentCol = gCurrentCol[activeTableId];
  var nextCell = null;

  if ((key >= KEY_LEFT && key <= KEY_DOWN) && !evt.altKey) {
    var nextRow = null;
    var nextRowNum = 0;
    var nextCol = null;
    var nextColNum = 0;


    if (gSelecting[activeTableId] == true && bCtrlKey == false) {
      clearSelected(activeTableId);
    }


    // process arrows
    if (key == KEY_DOWN ) { // down

      nextRowNum = currentRow + 1;
      if (rows.length > nextRowNum) {
      var prevCell = null;
        if (currentRow != -1) {
          var prevRow = rows[currentRow];
          prevCell = prevRow.cells[currentCol];
        }
        nextRow = rows[nextRowNum];
        gCurrentRow[activeTableId]=nextRowNum;
        nextCell = nextRow.cells[currentCol];
        gCurrentCell[activeTableId] = nextCell;
        processMovement(prevCell, nextCell, bCtrlKey, activeTableId);

        gFocusItem = nextCell;
        setTimeout("doFocus()", 0);

      }
    } // end of down
    if (key == KEY_UP) { // up
      nextRowNum = currentRow -1;
      if (nextRowNum >=0 ) {
        var prevCell = null;
        if (currentRow != -1) {
          var prevRow = rows[currentRow];
          prevCell = prevRow.cells[currentCol];
        }
        nextRow = rows[nextRowNum];
        gCurrentRow[activeTableId]=nextRowNum;
        nextCell = nextRow.cells[currentCol];
        gCurrentCell[activeTableId] = nextCell;
        processMovement(prevCell, nextCell, bCtrlKey, activeTableId);
        gFocusItem = nextCell;
        setTimeout("doFocus()", 0);

      }

    } // end of up
    if (key == KEY_LEFT ) { // left
      nextColNum = currentCol -1;
      var prevCell = null;
      if (nextColNum >= 0 && currentRow >= 0) {
        nextRow = rows[currentRow];
        if (nextRow != null) {
          prevCell = nextRow.cells[currentCol];
        }
        nextCell = nextRow.cells[nextColNum];
        gCurrentCol[activeTableId] = nextColNum;
        gCurerntCell  = nextCell;
        processMovement(prevCell, nextCell, bCtrlKey, activeTableId);

        gFocusItem = nextCell;
        setTimeout("doFocus()", 0);

      }

    } // end of if left
    if (key == KEY_RIGHT ) { // right
      nextColNum = currentCol + 1;
      var prevCell = null;
      if (currentRow >=0 ) {
        nextRow = rows[currentRow];
        if (nextRow != null && nextColNum < nextRow.cells.length) {
          prevCell = nextRow.cells[currentCol];
          nextCell = nextRow.cells[nextColNum];
          gCurrentCol[activeTableId] = nextColNum;
          gCurrentCell  = nextCell;
          processMovement(prevCell, nextCell, bCtrlKey, activeTableId);

          gFocusItem = nextCell;
          setTimeout("doFocus()", 0);
        }
      }


    } // end of if right
    bDefaultHandler = false;

  if (nextCell != null) {
    gCurrentCell[activeTableId]= nextCell;
  }
  } // end of if arrows
  else if (key == KEY_SPACE && bCtrlKey) {
    var currentCell = gCurrentCell[activeTableId];

    var bSelected = toggleSelection(activeTableId,currentCell);
    if (bSelected == "true") {
      currentCell.className = "cellFocusSelect";
    }
    else {
      currentCell.className = "cellFocus";
    }

  }
  else if (key == KEY_ESCAPE) {
    // pressing escape when editing a cell will end editng - this is not really what we want since
    // it does not allow the escape to clear the input cell field first - I tried that in ignoreArrows() but
    // could not get focus back to the cell after the escape.
    if (gCurrentCell[activeTableId] != null) {
      endEdit(gCurrentCell[activeTableId], false);
      gFocusItem = gCurrentCell[activeTableId];
    setTimeout("doFocus()",0);
    bDefaultHandler = false;
    }
  }

  else if (key == KEY_TAB && !evt.shiftKey ) {
    // table is losing focus set the style of the current cell to cellBlur
    gCurrentCell[activeTableId].className = "cellBlur";


  }

  } // end of try
  catch (errorInfo) {
    //alert(errorInfo);
  }
  return bDefaultHandler;
}
function processMovement(prevCell, nextCell, bCtrlKey, activeTableId) {
  if (bCtrlKey == true) {
          // leave prev cell in same state
          // set style of prevCell to appropriate state
          // set style of current cell to cellFocus
          if (prevCell != null) {
              var prevStyle = "";
              if (prevCell.getAttribute("aria-selected") == "true" ) {
                prevStyle = "cellSelect";
              }
              prevCell.className = prevStyle;
          }
          nextCell.className = "cellFocus";
          gSelecting[activeTableId] = true;
        }
        else {
          //bCtrlKey == false
          // clear select on previous cell
          // set style of previous cell to empty
          // select current cell
          // set style of current cell to cellFocusSelect
          if (prevCell != null) {
            removeSelection(activeTableId, prevCell);
            prevCell.className = "";
          }
            addSelection(activeTableId, nextCell);
            nextCell.className="cellFocusSelect";
          }
}

function addSelection(activeTableId, currentCell) {
    var selectedList = gSelectedCells[activeTableId];
    var isSelected = currentCell.getAttribute("aria-selected");
    if (isSelected != "true") {
      // set selected and add to selection list
      currentCell.setAttribute("aria-selected", "true");
      selectedList[selectedList.length] = currentCell;
      gSelectedCells[activeTableId] = selectedList;
    }
}

function removeSelection(activeTableId, currentCell) {
  var selectedList = gSelectedCells[activeTableId];
    var isSelected = currentCell.getAttribute("aria-selected");
    if (isSelected == "true" ) {
      currentCell.removeAttribute("aria-selected");
      // remove from list of selected cells
      var idx = -1;
      for (var j=0; j < selectedList.length; j++) {
        if (selectedList[j] == currentCell) {
          idx = j;
          break;
        }
      }
      if (idx <= 0) {
        // remove the cell from the selected List
        gSelectedCells[activeTableId] = selectedList.splice(idx,1,"");
      }
    }
}
function toggleSelection(activeTableId, currentCell) {
// toggle selection of the cell
  var selectedState = "";
  var selectedList = gSelectedCells[activeTableId];
  var isSelected = currentCell.getAttribute("aria-selected");
    if (isSelected == "true" ) {
      removeSelection(activeTableId, currentCell);

    }
    else {
      addSelection(activeTableId,currentCell);
      selectedState = "true"
    }
    return selectedState; // return current selection state of cell
} // end of toggleSelection

function clearSelected(activeTableId) {
  // clear the selected cells
    gSelecting[activeTableId] = false;
    var selectedCells = gSelectedCells[activeTableId];
    for (var k=0; k < selectedCells.length; k++) {
      selectedCells[k].className = "";
      selectedCells[k].setAttribute("aria-selected", "false");
    }
    gSelectedCells[activeTableId] = new Array();  // just create new, empty array
} // end of clearSelected()

function doClick(e,rowNum, colNum) {
  /* put the doClick() in each TD element and pass the row and column number because it was the easiest way to figure out what
  row and column was clicked in both IE and Mozilla.  Mozilla gives the element with the handler as the currentTarget rather than the
  actual element.  For example, with onclick on the TABLE, Mozilla gives the event.currentTarget as the TABLE when click on a cell.
  IE gives the event.srcElement as the TD that was clicked on.
  Also, could probably determine row and column programmatically if necessary rather than passing rowNum and colNum. Or, pass the element itself!
  */

  var evt = (e != null) ? e : ((event) ? event : null);  // Mozilla will include e parameter
  var srcElem = findParentElem(evt,"table");
  var activeTableId = srcElem.getAttribute("id");
  var prevCell = gCurrentCell[activeTableId];
  var rows = document.getElementById(activeTableId).rows;
  var thisRow = rows[rowNum];
  var thisCell = thisRow.cells[colNum];
  // update the global variables for the clicked on cell
  gCurrentCell[activeTableId] = thisCell;
  gCurrentRow[activeTableId] = rowNum;
  gCurrentCol[activeTableId] = colNum;
  var bCtrlKey = evt.ctrlKey;
  var bSameCell = (thisCell == prevCell);

  if (gSelecting[activeTableId] == true && bCtrlKey == false) {
    clearSelected(activeTableId);
  }

  if (bCtrlKey == false && !bSameCell) {
    // remove selection from prev cell
    // add this cell to selection
    // set state of prev cell to empty
    // set state of this cell to focusSelect
    if (prevCell != null) {
      removeSelection(activeTableId, prevCell);
      prevCell.className = "";
    }
    addSelection(activeTableId, thisCell);
    thisCell.className="cellFocusSelect";
  }
  else if (bCtrlKey == true && !bSameCell) {
    // leave prev cell in same selection state
    // update style of prev cell based on state
    // add this cell to selection
    // set this cell style to focusselect
    if (prevCell != null) {
      var prevStyle = "";
      if (prevCell.getAttribute("aria-selected") == "true" ) {
        prevStyle = "cellSelect";
      }
        prevCell.className = prevStyle;
    }
    addSelection(activeTableId, thisCell);
    thisCell.className="cellFocusSelect";
    gSelecting[activeTableId] = true;
  }
  else if (bCtrlKey == true && bSameCell) {
    var bSelected = toggleSelection(activeTableId,thisCell);
      if (bSelected == "true") {
        thisCell.className = "cellFocusSelect";
      }
      else {
        thisCell.className = "cellFocus";
      }
  }
  gFocusItem = thisCell;
  setTimeout("doFocus();", 0);

} // end of doClick


function doEvent(evtTarget, evtName, theEvent) {
  if (evtTarget.fireEvent) {
    // is IE, need "on" in front of event name
    evtName = "on" + evtName;
    evtTarget.fireEvent(evtName, theEvent);
  }
  else {
    evtTarget.dispatchEvent(theEvent);
  }
  return;
}


function doLink(linkId) {
  var theLink = document.getElementById(linkId);
  var bTryAgain = false;
  try {
    theLink.click();  // for IE
  } catch (clickError) {
    bTryAgain = true;
  }
  if (bTryAgain) {
    try {
      var mClick = document.createEvent("MouseEvents");
      mClick.initEvent("click",true, true);
      theLink.dispatchEvent(mClick);
    } catch (e) {
      alert(e.message); //+ "DEBUG: can't fire event to link element");
    }
  }

  return false;
}

function doEdit(event, parentCell, colNumber) {
// edit a spreadsheet cell.   Find text node of cell and store data.  Create an input field and label and add to cell; set text node value into cell; remove text node;
  if (parentCell.getAttribute("aria-readonly") =="true") {
    return;
  }
  if (parentCell.editMode != "true") {
    var inputId = "col" + colNumber;
    var inputField = document.createElement("input");
    setStyle(inputField, "border", "0", "");
    inputField.setAttribute("id", inputId);
    var dataNode = null;
    var editData = "";
    if (parentCell.hasChildNodes() ) {
      // TODO find parentCells text node - for now just assuming it is first child
       dataNode = parentCell.firstChild;
       parentCell.removeChild(dataNode);
       editData = dataNode.data;
    }
    parentCell.saveData = editData;
    parentCell.appendChild(inputField);
    inputField.setAttribute("value",editData);
    setStyle(inputField,"width", "100%","");
    try {
      inputField.addEventListener("blur",checkEdit, true);
      inputField.addEventListener("keydown", ignoreArrows,true);  // process arrow key input so it does not  get up to parent table onkeydown
    }
    catch (ex) { // IE
      inputField.attachEvent('blur',checkEdit, true);
      inputField.attachEvent('keydown', ignoreArrows, true);
    }

    // create label for the cell - use the columnheader as the label
    var parentTable = findParent(parentCell, "table");
    var colHeader = parentTable.rows[0].cells[colNumber];
    inputField.setAttribute("aria-labelledby", colHeader.id);

    parentCell.editMode = "true";
    // set focus to the input field
    gFocusItem=inputField;
    setTimeout("doFocus()", 0);
  } // end of if edit
  else   {
    endEdit(parentCell,true);

    gFocusItem = parentCell;
    setTimeout("doFocus()",0);

  } // end of else end edit


} // end of doEdit()

function endEdit(parentCell, bSave) {
// end editing remove input node, remove label node
// currently VERY dependent upon the organization of the DOM
// cell is in edit mode - store data and leave edit mode
  // find the input field
  if (parentCell.hasChildNodes() && parentCell.editMode == "true") {
    var inputNode = findChildNode(parentCell,"input");
    /*var inputNode = parentCell.firstChild;  // TODO should never be null but wrap in a try/catch
    var childNodeName = inputNode.nodeName
    childNodeName.toLowerCase();
    while (childNodeName != "input" && inputNode != null) {
        inputNode = inputNode.nextSibling;
        childNodeName = inputNode.nodeName.toLowerCase();
    }*/
    if (inputNode != null) {
      var storeData = parentCell.saveData;
      if (bSave == true) {
        storeData = inputNode.value;
      }
      // remove event listenters
      try {
        inputNode.removeEventListener("blur",checkEdit,true);
        inputNode.removeEventListener("keydown", ignoreArrows, true);
      }
      catch (ex) {
        inputField.detachEvent('blur',checkEdit, true);
        inputField.detachEvent('keydown', ignoreArrows, true);
      }

      parentCell.removeChild(inputNode);
      var labelNode = findChildNode(parentCell, "label");
      if (labelNode != null) {
        parentCell.removeChild(labelNode);
      }
      var newDataNode = document.createTextNode(storeData);
      parentCell.appendChild(newDataNode);
      parentCell.editMode="false";
    }
  }
} // end of endEdit

function findChildNode(startNode, nodeName) {
// TODO - currently only searchs siblings of startNode - does not recurse
  var foundNode = null;
  try {
    if (startNode.hasChildNodes() ) {
    var testNode = startNode.firstChild;
    while (testNode != null && (testNode.nodeName.toLowerCase() != nodeName)) {
      testNode = testNode.nextSibling;
    }
    foundNode = testNode;
  }
  } catch (error) {
    alert("DEBUG - error in findChildNode() - " + error.message);
    foundNode = null;
  }
  return foundNode;
}

function checkEdit(event) {
try {
  var srcElem = findParentElem(event,"table");
  var currentCell = gCurrentCell[srcElem.id];
  var parentCell = findParentElem(event,"td");
  if (parentCell == currentCell) {
    if (parentCell && parentCell.editMode == "true") {
      endEdit(parentCell,true);
    }

    gFocusItem = srcElem;
    setTimeout("doFocus();", 0);
  }
} catch (e) {
  alert("DEBUG - error in checkEdit: " + e.message);
}
}

function ignoreArrows(event) {
  var eventTarget = event.target;
  var key = event.keyCode;
  bEventContinue = true;  // let input field handle the key
  if (key >=KEY_LEFT && key <= KEY_DOWN) {
    if (event.stopPropagation) {
            event.stopPropagation();
        }
        else {
            event.cancelBubble = true;
        }
  }
  /* This does not work - I can not get focus back into the cell after the escape!!!
  else if (key == KEY_ESCAPE) {
    // first let escape be used to clear the cell, if cell is empty end editing
    if (eventTarget.value == "") {
      if (event.stopPropagation) {
        event.stopPropagation();
      }
      else {
        event.cancelBubble = true;
      }
      var srcElem = findParentElem(event,"table");
        var currentCell = gCurrentCell[srcElem.id];
        var parentCell = findParentElem(event,"td");
        if (parentCell == currentCell) {
          if (parentCell && parentCell.editMode == "true") {
            endEdit(parentCell,false);
          }

        }
        // focus the table - that will focus the currentCell
        gFocusItem = srcElem;
        setTimeout("doFocus();", 0);

    }

  } */


} // end of ignoreArrows
function setCell(tableId) {
  var currentCell = gCurrentCell[tableId];
  if (currentCell == null) {
    // no cell selected, set it to first cell
    var grid = document.getElementById(tableId);
    var rows = grid.rows;
    var firstRow = rows[0];
    currentCell = firstRow.cells[0];
    gCurrentRow[tableId] = 0;
    gCurrentCol[tableId] = 0;
    gCurrentCell[tableId] = currentCell;

  }
  currentCell.className="cellFocusSelect";
  gFocusItem = currentCell;
  setTimeout("doFocus()", 0);

}

// would like to change the style of the cell when focus leaves the table completely but not sure how to implement since table gets onblur when each cell loses focus
function blurCell(event, tableId) {
    var currentCell = gCurrentCell[tableId];
    if (currentCell != null) {
      currentCell.className="cellBlur";
    }

  // else do nothing
}

// very specific function to change the styles on the page
function doColor(colorScheme) {

  // get the styles
  var oSS = pageGetStyleSheet("basic", null);
  var ssRules = cssGetRules(oSS);

  var colorArray;
  if (ssRules != null) {
    switch(colorScheme) {
      case "grey":
        colorArray = new Array("#C0C0C0","#F5F5F5","#999999","#F5F5F5");
        changeColors(ssRules, colorArray);
        break;
      case "blues":
        colorArray = new Array("#00CED1", "#B0E0E6","#000080","#E0FFFF");
        changeColors(ssRules, colorArray);
        break;
      case "green":
        colorArray = new Array("#3CB371","#90EE90","#008000","#F0FFF0");
        changeColors(ssRules, colorArray);
        break;
      case "rose":
        colorArray = new Array("#CD5C5C","#F08080","#800000","#FFE4E1");
        changeColors(ssRules, colorArray);
      default:
        // do nothing
      break;
    } // end switch
  }

  return false; // do not propagate
}
function changeColors(ssRules, colorArray) {
  var theRule;
  // menubar background-color
  theRule = cssGetRule(ssRules, "menubar");
  changeStyleRule(theRule, "background-color", colorArray[0]);
  // menu background-color
  theRule = cssGetRule(ssRules, "menu");
  changeStyleRule(theRule, "background-color", colorArray[0]);
  theRule = cssGetRule(ssRules,"topMenu");
  changeStyleRule(theRule,  "border-color", colorArray[0]);
  changeStyleRule(theRule, "background-color", colorArray[0]);
  theRule = cssGetRule(ssRules, "cellFocusSelect");
  changeStyleRule(theRule, "background-color", colorArray[0]);
  theRule = cssGetRule(ssRules, "table");
  changeStyleRule(theRule, "border-color", colorArray[0]);
  theRule = cssGetRule(ssRules, "menudrop");
  changeStyleRule(theRule, "background-color", colorArray[1]);
  changeStyleRule(theRule, "border-color",colorArray[1]);
  theRule = cssGetRule(ssRules, "cellSelect");
  changeStyleRule(theRule, "background-color", colorArray[3]);
  theRule = cssGetRule(ssRules, "topMenu:focus");
  changeStyleRule(theRule, "border-color", colorArray[2]);
  changeStyleRule(theRule, "background-color", colorArray[2]);
  theRule = cssGetRule(ssRules, "topMenu:hover");
  changeStyleRule(theRule,  "border-color", colorArray[2]);
  changeStyleRule(theRule, "background-color", colorArray[2]);
  theRule = cssGetRule(ssRules, "menuitem:focus");
  changeStyleRule(theRule,  "border-color", colorArray[2]);
  changeStyleRule(theRule,  "background-color", colorArray[2]);
  theRule = cssGetRule(ssRules, "menuitem:hover");
  changeStyleRule(theRule, "border-color", colorArray[2]);
  changeStyleRule(theRule, "background-color", colorArray[2]);
  //theRule = cssGetRule(ssRules, "action");
  //changeStyleRule(theRule,  "color", colorArray[2]);
  theRule = cssGetRule(ssRules, "cellBlur");
  changeStyleRule(theRule,  "backgournd-color", colorArray[3]);



}
function doTotals(tableId, key) {
// simple function to do some totaling of information in the table
// hard coded to the format of this particular table (i.e. for demo purposes only - NOT general purpose)
// id of the table containing the data
// keyName - item name we are totaling
// column numbers are hard coded

var DATE_COL = 1;
var EXPENSE_COL = 2;
var display= "no results";
var results;
bEventContinue = false;
try {
  var activeTable = document.getElementById(tableId);
  var tableRows = activeTable.rows;

  //var prevRow = rows[currentRow];
  //        prevCell = prevRow.cells[currentCol];
  var lcKey = key.toLowerCase();
  if (lcKey == "date") {
    display = "";
    var exception = "";
    var dates = new Array();
    // find all unique dates then total each
    for(var i=1; i<tableRows.length; i++) {
      exception="";  //reset
      var bFound = false;
      var dateCell = tableRows[i].cells[DATE_COL];
        if (dateCell.firstChild && dateCell.firstChild.data) {
            var cellData =dateCell.firstChild.data;
            if (i == 1) {
              // first cell - force adding date to array
              bFound = false;
            }
            else {
              // see if date already exists in array
              for(var j=0; j<dates.length; j++) {
                if (dates[j] == cellData) {
                  bFound = true;
                  break;
                }
              }
            } // end of else
            if (bFound == false) {
              dates[dates.length] = cellData;
              results = getData(tableRows,cellData,DATE_COL);
              if (results.length > 0) {
                var total = calcTotal(results);
                if (total > 1000) {
                  exception = " !!! EXCEPTION: daily total over $1000 !!!"
                }
                display += "Total for " + cellData + " is $" + total + exception + "\n";

              }
            }
          } // end of if celldata
        } // end of for
  } // end of if date
  else {
    results = getData(tableRows,lcKey,EXPENSE_COL);
    if (results.length > 0) {
        var total = calcTotal(results);
        display = "Total for " + key + " is $" + total;
    }
  }

  gAlertString = display;
  setTimeout("delayedAlert(gAlertString);",0);

} catch (error) {
  alert("DEBUG- error in doTotals() " + error.message);
  bEventContinue = true;
}
  return bEventContinue;
}
function getData(tableRows,lcKey, colNum) {
// find all rows that contain key and store amount contents in array
var AMOUNT_COL = 3;
  var results = new Array();
  for (var i=1; i<tableRows.length; i++) {
    var keyCell = tableRows[i].cells[colNum];
    if (keyCell.firstChild && keyCell.firstChild.data) {
      var cellData =keyCell.firstChild.data;
      cellData = cellData.toLowerCase();
      if (cellData.indexOf(lcKey) > -1) {
        var amtCell  = tableRows[i].cells[AMOUNT_COL];
        var data = amtCell.firstChild.data; // lots of assumptions here!!!
         results[results.length] = data;
      }
    }
  }
  return results;
}
function calcTotal(results) {
  // results is array of strings to total - may have $
  var total =0;
  for (var i=0;  i < results.length; i++) {
    var value = null;
    var amt = results[i];
    var idx = amt.indexOf('$');
    if (idx > -1) {
      amt = amt.substring(idx+1); // assumes only one $ and it is at the beginning
    }
    value = parseFloat(amt, 10);
    if (value != NaN) {
      total += value;
    }
  }
  return total.toFixed(2);
}




-->
</script>
<style type="text/css" id="basic" title="basic">
table {
 empty-cells:show;
 border-collapse: collapse;  // Show empty table cells in IE
}

.menubar {
  background-color:#C0C0C0;
}
.menu {
  float:left;
  width:5em;
  padding:1px 3px;
  background-color:#C0C0C0;
  color:black;

}
.menudrop {
  display:none;
  background-color:#F5F5F5;
  width:150%;
  border: solid #999999 1px;


}
.menusub {
  display:none;
  background-color:#F5F5F5;
  border:solid #999999 1px;
  position:absolute;
  width:25%;
}

.content {
  margin-top:2em;
  position:absolute;
  clear:both;

}
.topMenu {
  border-style:solid;
  border-color:#C0C0C0;
  border-width:1px;
  background-color:#C0C0C0;
}

.topMenu:focus {
  background-color:#999999;
  border-style:dashed;
  border-color:#999999;
  border-width:1px;
  color:white;
}
.topMenu:hover {
  background-color:#999999;
  border-style:dashed;
  border-color:#999999;
  border-width:1px;
  color:white;
}

.menuitem {
  border-style:solid;
  border-color:#F5F5F5;
  border-width:1px;  /*color must be the same as background color (which is inherited from .menudrop) */
  text-align:justify;
}
.menuitem:focus {
  color:white;
  background-color:#999999;
  border-style:dashed;
  border-color:#999999;
  border-width:1px;

}
.menuitem:hover {
  background-color:#999999;
  border-style:dashed;
  border-color:#999999;
  border-width:1px;
  color:white;

}
.menuitem[aria-disabled="true"] {
  color:#666666;
}
.rowSelected {
  background-color:#66CCCC;

}
td[aria-readonly="true"] {
  color:#666666;
}
.cellFocusSelect {
  background-color:#CCCCCC;
  outline: 1px dashed green;

}
.cellFocus {
  outline: 1px dashed green;
}

.cellSelect {
  background-color:#DCDCDC;
}
.cellBlur {
  border-width:1px ;
  border-style:dotted;
  border-color:#999999;
  background-color:#F5F5F5;
}
table, th, td {

  border-width:2px;
  border-style:groove;
  border-color:#CCCCCC;

}

.action {
  color:#0000FF;
  text-decoration:underline;
}
a:visited {
  color:#000066;
}

.leftCellHi {
  border-left:2px dotted #00FF00;
  border-top:2px dotted #00FF00;
  border-bottom:2px dotted #00FF00;
}
.middleCellHi {
  border-top:2px dotted #00FF00;
  border-bottom:2px dotted #00FF00;
}

.rightCellHi {
  border-right:2px dotted #00FF00;
  border-top:2px dotted #00FF00;
  border-bottom:2px dotted #00FF00;
}
.nosize {
  position:absolute;
  width:0px;
  height:0px;
  overflow:hidden;
}


</style>

<style type="text/css"></style></head>
<body onkeydown="topMenu.doMenu(event);" role="application" onload="gFocusItem = document.getElementById('table2'); setTimeout('doFocus();',0); ">













<h1>Accessible Widgets </h1>
  

<div style="position:absolute;z-index:2;">
<div id="theMenuBar" class="menubar" role="menubar" onkeydown="return topMenu.doNavigation(event);" tabindex="-1">
  <div class="menu" id="edit" onclick="topMenu.showMenu(event, this.id, false);" onkeydown="if (event.keyCode == 13 ) {topMenu.showMenu(event, this.id, true);}" onmouseover="topMenu.showMenu(event,this.id,false);" onmouseout="topMenu.hideMenu(event);">
    <div tabindex="-1" role="menuitem" aria-haspopup="true" id="edittop" class="topMenu">Edit</div>
    <div class="menudrop" role="menu" id="editItems">
      <div id="cut" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do Cut');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'do cut');}" onmouseover="topMenu.focusItem(event,0,0);">Cut</div>
      <div id="copy" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do Copy');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'do copy');}" onmouseover="topMenu.focusItem(event,0,1);">Copy</div>
      <div id="paste" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do Paste');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'do paste');}" onmouseover="topMenu.focusItem(event,0,1);">Paste</div>
    </div>
  </div>
  <div class="menu" id="2" onclick="topMenu.showMenu(event, this.id,false);" onkeydown="if (event.keyCode == 13 ) {topMenu.showMenu(event, this.id, true);}" onmouseover="topMenu.showMenu(event,this.id,false);" onmouseout="topMenu.hideMenu(event);">
    <div tabindex="-1" role="menuitem" aria-haspopup="true" id="2top" class="topMenu">View</div>
    <div class="menudrop" role="menu" id="2Items" style="display:none;">
      <div tabindex="-1" role="menuitem" aria-haspopup="true" id="2.1sub" class="menuitem" onkeydown="if (event.keyCode == 13 ) {return topMenu.showSubMenu(event,this.id);}">Themes &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&gt;</div>
        <div class="menusub" role="menu" id="2.1subItems" style="display:none;">
          <div id="2.1.1" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionColor(event,'grey');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionColor(event,'grey');}">Basic Grey </div>
          <div id="2.1.2" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionColor(event,'blues');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionColor(event,'blues');}">The Blues</div>
          <div id="2.1.3" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionColor(event,'green');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionColor(event,'green');}">Garden</div>
          <div id="2.1.4" tabindex="-1" role="menuitem" class="menuitem" aria-disabled="true" onclick="return topMenu.doAlert(event,this,'do Item4');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionColor(event,'pink');}">In the Pink</div>
          <div id="2.1.5" tabindex="-1" role="menuitem" class="menuitem" oonclick="return topMenu.doActionColor(event,'rose');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionColor(event,'rose');}">Rose </div>
        </div><!-- end themes sub menu items -->
        <div tabindex="-1" role="menuitem" class="menuitem" id="2.2">Hide</div>
        <div tabindex="-1" role="menuitem" class="menuitem" id="2.3">Show</div>
        <div tabindex="-1" role="menuitem" aria-haspopup="true" id="2.4sub" class="menuitem" onclick="return topMenu.showSubMenu(event,this.id);" onkeydown="if (event.keyCode == 13 ) {return topMenu.showSubMenu(event,this.id);}">More &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &gt;</div>
        <!--<div tabindex="-1" role="menuitem" class="menuitem" id="2.4sub" onclick="return topMenu.showSubMenu(event,this.id);" onkeydown="if (event.keyCode == 13 ) {return topMenu.showSubMenu(event,this.id);}">More &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &gt;</div> -->
          <div class="menusub" role="menu" id="2.4subItems" style="display:none">
            <div id="2.4.1" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do Something 1');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'doSomething 1');}">one </div>
            <div id="2.4.2" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do Something 2');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'doSomething 2');}">two</div>
          </div> <!-- end of more sub menu -->
      </div><!-- end View drop menu -->
    </div>
  <div class="menu" id="3" onclick="topMenu.showMenu(event, this.id,false);" onkeydown="if (event.keyCode == 13 ) {topMenu.showMenu(event, this.id, true);}" onmouseover="topMenu.showMenu(event,this.id,false);" onmouseout="topMenu.hideMenu(event);">
  <div tabindex="-1" role="menuitem" aria-haspopup="true" id="3top" class="topMenu">Tools</div>
        <div class="menudrop" role="menu" id="3Items" style="display:none;">
          <div id="3.1" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do spell check');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'do spell check');}">Spelling...</div>
          <div id="3.2" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do error checking');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'do error checking');}">Error Checking...</div>
          <div id="3.3sub" tabindex="-1" role="menuitem" aria-haspopup="true" class="menuitem" onclick="return topMenu.showSubMenu(event,this.id);;" onkeydown="if (event.keyCode == 13) {return topMenu.showSubMenu(event,this.id);}">Show Rows &nbsp;&nbsp; &gt;</div>
          <div class="menusub" role="menu" id="3.3subItems" style="display:none">
                      <div id="3.3.1" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'highlight even rows');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'highlight even rows');}">even</div>
                      <div id="3.3.2" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'highlight odd rows');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'hghlight odd rows');}">odd</div>
                      <div id="3.3.3" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'highlight all rows');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'highlight all rows');}">all</div>
          </div> <!-- end of more sub menu -->
          <div id="3.4" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do Options');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'do Options');}">Options... </div>
        </div>
  </div>
  <div class="menu" id="four" onclick="topMenu.showMenu(event, this.id,false);" onkeydown="if (event.keyCode == 13 ) {topMenu.showMenu(event, this.id, true);}" onmouseover="topMenu.showMenu(event,this.id,false);" onmouseout="topMenu.hideMenu(event);">
  <div tabindex="-1" role="menuitem" aria-haspopup="true" id="fourtop" class="topMenu">Totals</div>
        <div class="menudrop" role="menu" id="fourItems" style="display:none;">
          <div id="4.1" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionTotal(event,'table2','lodging');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionTotal(event,'table2','lodging');}">Lodging </div>
          <div id="4.2" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionTotal(event,'table2','breakfast');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionTotal(event,'table2','breakfast');}">Breakfast </div>
          <div id="4.3" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionTotal(event,'table2','lunch');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionTotal(event,'table2','lunch');}">Lunch </div>
          <div id="4.4" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionTotal(event,'table2','dinner');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionTotal(event,'table2','dinner');}">Dinner </div>
          <div id="4.5" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionTotal(event,'table2','date');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionTotal(event,'table2','date');}">By Date </div>
        </div>
  </div>
  <div class="menu" id="five" onclick="topMenu.showMenu(event, this.id,false);" onkeydown="if (event.keyCode == 13 ) {topMenu.showMenu(event, this.id, true);}" onmouseover="topMenu.showMenu(event,this.id,false);" onmouseout="topMenu.hideMenu(event);">
  <div tabindex="-1" role="menuitem" aria-haspopup="true" id="fivetop" class="topMenu">Help</div>
        <div class="menudrop" role="menu" id="fiveItems" style="display:none;">
          <div id="5.1" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'Show Help Index');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'Show Help index');}">Help Index</div>
          <div id="5.2" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'Show navigation help');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'Show navigation help');}">Navigation Help</div>
          <div id="5.3" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'DHTML roadmap Example, March 2005');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'DHTML Roadmap example, March 2005');}">About</div>

        </div>
  </div>
</div>
</div>

<div class="content">
<div style="height:20em; overflow:auto;">
<table tabindex="0" border="2" cellspacing="0" id="table2" role="grid" onkeydown=" return doTableKeys(event);" onfocus="setCell(this.id);">
<thead>
<tr>
  <th tabindex="-1" role="columnheader" id="colhead1" style="width:6em" onclick="doClick(event,0,0);" onkeydown="if (event.keyCode==13) {return doLink('aEntry');}" class="cellFocusSelect"><span class="action" title="Sort by Entry #" onclick="alert('sort column on click');" tabindex="-1" id="aEntry">Entry #</span></th>
  <th tabindex="-1" role="columnheader" id="colhead2" onclick="doClick(event,0,1);" onkeydown="if (event.keyCode==13) {return doLink('aDate');}" style="width:10em"><span class="action" title="Sort by Date" onclick="alert('sort column on click');" tabindex="-1" id="aDate">Date</span></th>
  <th tabindex="-1" role="columnheader" id="colhead3" onclick="doClick(event,0,2);" onkeydown="if (event.keyCode==13) {return doLink('aExpense');}" style="width:20em"><span class="action" title="Sort by Expense Name" onclick="alert('sort column on click');" tabindex="-1" id="aExpense">Expense</span></th>
  <th tabindex="-1" role="columnheader" id="colhead4" onclick="doClick(event,0,3);" onkeydown="if (event.keyCode==13) {return doLink('aAmount');}" style="width:8em"><span class="action" title="Sort by Amount" onclick="alert('sort column on click');" tabindex="-1" id="aAmount">Amount</span></th>
  <th tabindex="-1" role="columnheader" id="colhead5" onclick="doClick(event,0,4);" onkeydown="if (event.keyCode==13) {return doLink('aMerchant');}" style="width:15em"><span class="action" title="Sort by Merchant" onclick="alert('sort column on click');" tabindex="-1" id="aMerchant">Merchant</span></th>
  <th tabindex="-1" role="columnheader" id="colhead6" style="width:8em"><span>Type</span></th>

</tr>
</thead>
<tbody>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,1,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">1</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" id="testCell" onclick="doClick(event,1,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}">03/14/05</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,1,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}">Conference Fee</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,1,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}">$449.00</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,1,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}">CSUN Center on Disability</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,1,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}">credit</td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,2,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">2</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,2,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}">03/15/05</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,2,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}">lodging</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,2,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}">$119.00</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,2,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}">LAX Hilton</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,2,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}">credit</td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,3,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">3</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,3,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}">03/15/05</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,3,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}">dinner</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,3,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}">$24.00</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,3,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}">Chili's</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,3,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}">cash</td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,4,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">4</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,4,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}">03/16/05</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,4,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}">lodging</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,4,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}">$119.00</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,4,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}">LAX Hilton</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,4,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}">credit</td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,5,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">5</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,5,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}">03/16/05</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,5,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}">breakfast</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,5,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}">$6.50</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,5,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}">Starbucks</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,5,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}">cash</td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,6,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">6</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,6,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}">03/16/05</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,6,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}">lunch</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,6,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}">$9.35</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,6,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}">Super Sub Stop</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,6,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}">cash</td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,7,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">7</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,7,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}">03/16/05</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,7,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}">dinner</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,7,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}">$40.00</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,7,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}">Davio's</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,7,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}">credit</td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,8,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">8</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,8,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,8,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,8,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,8,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,8,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,9,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">9</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,9,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,9,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,9,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,9,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,9,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,10,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">10</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,10,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,10,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,10,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,10,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,10,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,11,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">11</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,11,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,11,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,11,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,11,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,11,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,12,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">12</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,12,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,12,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,12,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,12,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,12,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,13,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">13</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,13,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,13,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,13,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,13,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,13,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,14,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">14</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,14,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,14,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,14,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,14,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,14,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,15,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">15</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,15,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,15,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,15,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,15,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,15,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,16,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">16</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,16,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,16,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,16,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,16,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,16,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,17,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">17</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,17,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,17,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,17,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,17,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,17,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
</tr>
<tr>
  <td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,18,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">18</td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,18,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,18,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,18,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,18,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
  <td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,18,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
</html>