var menuClass = Class.create();

menuClass.prototype = {
	
	//Constructor
	initialize: function(el) {
		this.el = el;
		this.sfHover();		
	},
	
	respondToHover: function(event, el) {
		if($$('li.selected')[0]) {
		$$('li.selected')[0].removeClassName('activeLink');
		}		  		
	  	el.addClassName('activeLink');
	},
	
	respondToNotHover: function(event, el) {		 
  		el.removeClassName('activeLink');
	  	if($$('li.selected')[0]) {
	  		$$('li.selected')[0].addClassName('activeLink');
  	  	}
	},
	
	sfHover: function() {

	var sfEls = document.getElementById("mainLevel").getElementsByTagName("LI");
	
	for (var i=0; i<sfEls.length; i++) {
		
		if (sfEls[i].parentNode.id == "mainLevel"){
			
			$(sfEls[i]).observe('mouseover', this.respondToHover.bindAsEventListener(this, sfEls[i]));
			
			$(sfEls[i]).observe('mouseout', this.respondToNotHover.bindAsEventListener(this, sfEls[i]));
																								
			}						
		}
	}
	
}


//instantiate and use the object
// --- this is now done in the template right after the elements are loaded 
//EventSelectors.addLoadEvent(function(e1) {
//	new menuClass(e1);
//});