var menuEffects = new Class({
	initialize: function(selector, options) {
		this.options = Object.extend({
			subElement: false,
			subElementSelector: 'li'
		}, options || {})
		this.selector = selector;
		this.currTimer = 500;
		$ES(selector + ' li ul').each(function(el) {
			el.setStyles({
				'display': 'block',
				'opacity': 0
			});
			elParent = $(el.parentNode);
			
			currentMenu = new Fx.Style(el, 'opacity');
			elParent.addEvents({
				'mouseover': function(submenu, myParent) {
					myParent.addClass('hover');
					submenu.clearTimer();
					submenu.custom(1);
				}.pass([currentMenu, elParent]),
				'mouseout': function(submenu, myParent) {
					myParent.removeClass('hover');
					submenu.clearTimer();
					submenu.custom(0);
				}.pass([currentMenu, elParent])
			})
			
		}.bind(this));
	}
});
function processMenuEffects(){
	var slideOver = [];
	$$('#nav li.one').each(function(el,i){
		slideOver[i] = new Fx.Style(el, 'top', {transition: Fx.Transitions.elasticOut, duration: 1000});
		el.addEvents({
			'mouseover': function(itemBorder) {
				itemBorder.clearTimer();
				itemBorder.custom(2);
			}.pass(slideOver[i]),
			'mouseout': function(itemBorder) {
				itemBorder.clearTimer();
				itemBorder.custom(-2);
			}.pass(slideOver[i])
		});
	});
	var myMenus = new menuEffects('.navigation ul', {
		subElement: true
	});	
}
window.addEvent('domready',function() {
	processMenuEffects();
});