var TwoUTMenu = Class.create({
	initialize: function(containerId,options){
		//add figure
		var menuItems = $$("#" + containerId + " ul.nav li a");
		for(i = 0,len = menuItems.length; i < len; i++){
			decorateHTML = "<div class='figure'>" + (i + 1) + "</div";
			menuItems[i].insert({top:decorateHTML});
		}
		
		//add event to li
		var menuItems = $$("#" + containerId + " ul.nav li");
		for(i = 0,len = menuItems.length; i < len; i++){
			if(!menuItems[i].hasClassName("nSeparator")){
				menuItems[i].observe("mouseover",this.displayNumber.bind(this));
				menuItems[i].observe("mouseout",this.removeNumber.bind(this));				
			}
		}
	},
	
	displayNumber: function(event){
		element = Event.element(event);
		var figureContainer = null;
		if(element.tagName.toLowerCase() == "div" && element.hasClassName("figure")){
			figureContainer = element;
		} else {
			figureContainer = element.down("div");
		}
		if(!Object.isUndefined(figureContainer)){
			figureContainer.setStyle({color:"white"});
		}
		Event.stop(event);
	},
	
	removeNumber: function(event){
		element = Event.element(event);
		var figureContainer = null;
		if(element.tagName.toLowerCase() == "div" && element.hasClassName("figure")){
			figureContainer = element;
		} else {
			figureContainer = element.down("div");
		}
		if(!Object.isUndefined(figureContainer)){
			figureContainer.setStyle({color:"#667bb4"});
		}
		Event.stop(event);
	}
});

document.observe("dom:loaded",function(){
	var twoUTMenu = new TwoUTMenu("nav");
});