// here we setup out menus
// we first look for elements of class 'topMenu'
// and then for elements of class 'dropDownMenu'.
// we will attach the two in the order they were found.
/*
function setupMenus(e) {
  var menus = $$('.topMenu');
  var dropDowns = $$('.dropDownMenu');
  if ( menus.length != dropDowns.length ) {
    alert('there are ' + menus.length + ' menus but ' + dropDowns.length + ' drop downs');
    return;
  }

  // now lets go through and create a DropDownMenu
  // object which will setup the positions and
  // beging listening for mouse motion over the top menu
  for ( var i = 0; i < menus.length; i++ ) {
    var menu = new DropDownMenu(menus[i], dropDowns[i]);
  }
}

// DropDownMenu is a class that takes
// two parameters, the object that you hover
// over and an object that will appear when the
// hover occurs.  there is some simple code here
// to position the second at the bottom of the first.

var DropDownMenu = Class.create();

DropDownMenu.prototype = {

  show : function(e) {
    var topMenuDimensions = Element.getDimensions(this.topMenu);
    var topMenuPosition = Position.cumulativeOffset(this.topMenu);

    this.dims = new Object();
    this.dims.topMenuX1 = topMenuPosition[0];
    this.dims.topMenuY1 = topMenuPosition[1];
    this.dims.topMenuX2 = topMenuPosition[0] + topMenuDimensions.width;
    this.dims.topMenuY2 = topMenuPosition[1] + topMenuDimensions.height;

    var dropDownMenuDimensions = Element.getDimensions(this.dropDownMenu);
    this.dims.dropDownMenuX1 = this.dims.topMenuX1;
    this.dims.dropDownMenuY1 = this.dims.topMenuY2;
    this.dims.dropDownMenuX2 = this.dims.topMenuX1 + dropDownMenuDimensions.width;
    this.dims.dropDownMenuY2 = this.dims.topMenuY2 + dropDownMenuDimensions.height;

    Element.setStyle(this.dropDownMenu, { top  : this.dims.topMenuY2, left : this.dims.topMenuX1});
    Element.show(this.dropDownMenu);
    Event.observe(document, 'mousemove', this.mouseMoveCall.bindAsEventListener(this), true);
  },

  // we will set the location of the dropDownMenu based on the
  // the position and size of the topMenu

  initialize : function(topMenu, dropDownMenu) {
    this.topMenu = topMenu;
    this.dropDownMenu = dropDownMenu;

    Event.observe(topMenu, 'mouseover', this.show.bindAsEventListener(this), true);
  },

  // when the mouse moves we need to check if we are still over 
  // the dropDownMenu or the topMenu.  if not then we should hide
  // the drop down menu.

  mouseMoveCall : function(e) {
    var x = Event.pointerX(e);
    var y = Event.pointerY(e);

    var outsideTopMenu = x < this.dims.topMenuX1 || x > this.dims.topMenuX2 || y < this.dims.topMenuY1 || y > this.dims.topMenuY2;
    var outsideDropDownMenu = x < this.dims.dropDownMenuX1 || x > this.dims.dropDownMenuX2 || y < this.dims.dropDownMenuY1 || y > this.dims.dropDownMenuY2;

    if ( outsideTopMenu && outsideDropDownMenu ) {
      Event.stopObserving(document, 'mousemove', this.mouseMoveCall.bindAsEventListener(this), true);
      Element.hide(this.dropDownMenu);
    }
  }
};
*/


function getCSSRule(ruleName, deleteFlag) {               // Return requested style obejct
   if (document.styleSheets) {                            // If browser can play with stylesheets
      for (var i=0; i<document.styleSheets.length; i++) { // For each stylesheet
         var styleSheet=document.styleSheets[i];          // Get the current Stylesheet
         var ii=0;                                        // Initialize subCounter.
         var cssRule=false;                               // Initialize cssRule. 
         do {                                             // For each rule in stylesheet
            if (styleSheet.cssRules) {                    // Browser uses cssRules?
               cssRule = styleSheet.cssRules[ii];         // Yes --Mozilla Style
            } else {                                      // Browser usses rules?
               cssRule = styleSheet.rules[ii];            // Yes IE style. 
            }                                             // End IE check.
            if (cssRule)  {                               // If we found a rule...
               if (cssRule.selectorText==ruleName) {      // Does current rule match ruleName?
                  if (deleteFlag=='delete') {             // Yes.  Are we deleteing?
                     if (styleSheet.cssRules) {           // Yes, deleting...
                        styleSheet.deleteRule(ii);        // Delete rule, Moz Style
                     } else {                             // Still deleting.
                        styleSheet.removeRule(ii);        // Delete rule IE style.
                     }                                    // End IE check.
                     return true;                         // return true, class deleted.
                  } else {                                // found and not deleting.
                     return cssRule;                      // return the style object.
                  }                                       // End delete Check
               }                                          // End found rule name
            }                                             // end found cssRule
            ii++;                                         // Increment sub-counter
         } while (cssRule)                                // end While loop
      }                                                   // end For loop
   }                                                      // end styleSheet ability check
   return false;                                          // we found NOTHING!
}                                                         // end getCSSRule 

function killCSSRule(ruleName) {                          // Delete a CSS rule   
   return getCSSRule(ruleName,'delete');                  // just call getCSSRule w/delete flag.
}                                                         // end killCSSRule

function addCSSRule(ruleName) {                           // Create a new css rule
   if (document.styleSheets) {                            // Can browser do styleSheets?
      if (!getCSSRule(ruleName)) {                        // if rule doesn't exist...
         if (document.styleSheets[0].addRule) {           // Browser is IE?
            document.styleSheets[0].addRule(ruleName, null,0);      // Yes, add IE style
         } else {                                         // Browser is IE?
            document.styleSheets[0].insertRule(ruleName+' { }', 0); // Yes, add Moz style.
         }                                                // End browser check
      }                                                   // End already exist check.
   }                                                      // End browser ability check.
   return getCSSRule(ruleName);                           // return rule we just created.
} 

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}