var showMenu = new Class.create({
	initialize:function(myParent,myMainClass,mySubClass,options) {
		this.options = Object.extend({
			interval:50,
			totalTime:500
		},options||{});
		this.subMenus = [];
		this.mainClass = myMainClass;
		if ($(myParent)) {
			$(myParent).select('.'+mySubClass).each(function(mySub) {
				mySub.setStyle({'display':'none'});
				mySub.identify();
				// this class is only to initially hide and identify the sub menus.
				mySub.removeClassName(mySubClass);
				this.subMenus.push(mySub);
				mySub.observe('mouseover', this.resetMonitor.bindAsEventListener(this)).observe('mouseout', this.checkSub.bindAsEventListener(this));
				mySub.up('li.'+this.mainClass).observe('mouseover', this.showSub.bindAsEventListener(this)).observe('mouseout', this.checkSub.bindAsEventListener(this));
			},this);
		}
		this.resetSubs();
	},
	getSub:function(e) {
		if (!e.element().hasClassName(this.mainClass)) {
			var sub = e.element().up('li.'+this.mainClass).down('ul');
		} else {
			var sub = e.element().down('ul');
		}
		return sub || false;
	},
	showSub:function(e) {
		this.resetSubs();
		var sub = this.getSub(e);
		if(sub) {
			sub.show();
		}
	},
	checkSub:function(e) {
		var sub = this.getSub(e);
		if (!this.timeout) {
			this.monitorSub(sub);
		}
	},
	monitorSub:function(sub) {
		if (sub.visible() && this.options.totalTime > this.onTime) {
			this.onTime += this.options.interval;
			this.timeout = setTimeout(function() {this.monitorSub(sub)}.bind(this),this.options.interval);
		} else if (this.onTime >= this.options.totalTime) {
			this.resetSubs();
		} else {
			return false;
		}
	},
	resetSubs:function() {
		this.onTime = 0;
		this.subMenus.invoke('hide');
		this.resetMonitor();
	},
	resetMonitor:function() {
		clearTimeout(this.timeout);
		this.timeout='';
	}

});
Event.observe(window,'load', function(e) {
	var myMenu = new showMenu('leftInfo', 'mainMenu', 'subMenu');
});