var DropDownMenu = new Class({
	options: {
		menuFx: [ {style: 'height', animate: true, _in: true, _out: false,
					  inValue: 'menu.scrollHeight', outValue: 0,
					  duration: 500, transition: Fx.Transitions.Bounce.easeOut},
					 {style: 'opacity', animate: true, _in: true, _out: false,
					  inValue: .8, outValue: 0,
					  duration: 500, transition: Fx.Transitions.linear} ],
		itemFx: [ ],
		menuItemFx: [ ]
	},
	
	initialize: function( items, menus, menuItems, options )
	{
		this.options = $merge( this.options, options || {} );
		this.items = $$(items) || [];
		this.menus = $$(menus) || [];
		this.menuItems = [];
		this.itemFx = [];
		this.menuFx = [];
		this.menuItemFx = [];
		
		this.menus.each( function(menu, i){
			this.menuItems[i] = menu.getElements( menuItems );
			this.menuItemFx[i] = [];
			
			this.menuItems[i].each( function(menuItem, idx){
				this.menuItemFx[i][idx] = [];
				
				this.options.menuItemFx.each( function(effect){
					var fx = {};
					if( effect.animate )
						fx.fx = new Fx.Style( menuItem, effect.style, {duration: effect.duration, transition: effect.transition} );
					else
						fx.style = effect.style;
					
					fx._in = effect._in;
					fx._out = effect._out;
					
					fx.inValue = eval(effect.inValue);
					fx.outValue = eval(effect.outValue);
					
					this.menuItemFx[i][idx].push( fx );
					
					menuItem.setStyle( effect.style, fx.outValue );
				}, this );
				
				menuItem.addEvent( 'mouseenter', function(event, i, j){
					this.menuItemFx[i][j].each( function(effect){
						if( $defined( effect.fx ) )
						{
							if( effect._in )
								effect.fx.start( effect.inValue );
							else
								effect.fx.set( effect.inValue );
						}
						else
						{
							if( effect._in )
								this.menuItems[i][j].setStyle( effect.style, effect.inValue );
						}
					}, this );
				}.bindWithEvent( this, [i, idx] ) );
				
				menuItem.addEvent( 'mouseleave', function(event, i, j){
					this.menuItemFx[i][j].each( function(effect){
						if( $defined( effect.fx ) )
						{
							effect.fx.stop();
							if( effect._out )
								effect.fx.start( effect.outValue );
							else
								effect.fx.set( effect.outValue );
						}
						else
						{
							if( effect._out )
								this.menuItems[i][j].setStyle( effect.style, effect.outValue );
						}
					}, this );
				}.bindWithEvent( this, [i, idx] ) );
			}, this);
			
			menu.setStyles( {'position': 'absolute', 'overflow': 'hidden'} );
				
			var itemSize = this.items[i].getCoordinates();
			var menuSize = menu.getCoordinates();
			
			menu.setStyle( 'top', this.items[i].offsetTop + itemSize.height - 1);
			
			if( menu.hasClass('DDM_CENTER') )
			{
				menu.setStyle( 'left', this.items[i].offsetLeft - (menuSize.width - itemSize.width)/2 );
				
				//if( window.ie )
					//menu.setStyle( 'left', this.items[i].offsetLeft + this.items[i].parentNode.offsetLeft - (menuSize.width - itemSize.width)/2 );
			}
			else if( menu.hasClass('DDM_RIGHT') )
			{
				menu.setStyle( 'left', this.items[i].offsetLeft - (menuSize.width - itemSize.width) );
				
				//if( window.ie )
					//menu.setStyle( 'left', this.items[i].offsetLeft + this.items[i].parentNode.offsetLeft - (menuSize.width - itemSize.width) );
			}
			else
			{
				menu.setStyle( 'left', this.items[i].offsetLeft );
				
				//if( window.ie )
					//menu.setStyle( 'left', this.items[i].offsetLeft + this.items[i].parentNode.offsetLeft );
			}
			
			this.menuFx[i] = [];
			this.options.menuFx.each( function(effect){
				var fx = {};
				if( effect.animate )
					fx.fx = new Fx.Style( menu, effect.style, {duration: effect.duration, transition: effect.transition} );
				else

					fx.style = effect.style;
				
				fx._in = effect._in;
				fx._out = effect._out;
				
				fx.inValue = eval(effect.inValue);
				fx.outValue = eval(effect.outValue);
				
				this.menuFx[i].push( fx );
				
				menu.setStyle( effect.style, fx.outValue );
			}, this );
			
			menu.addEvent( 'mouseleave', function(e, i){
				var size = this.items[i].getCoordinates();
				if( e.page.x < size.left || e.page.x > size.right || e.page.y < size.top || e.page.y > size.bottom )
				{
					this.menuFx[i].each( function(effect){
						if( $defined( effect.fx ) )
						{
							effect.fx.stop();
							if( effect._out )
								effect.fx.start( effect.outValue );
							else
								effect.fx.set( effect.outValue );
						}
						else
						{
							if( effect._out )
								this.menus[i].setStyle( effect.style, effect.outValue );
						}
					}, this );
					this.itemFx[i].each( function(effect){
						if( $defined( effect.fx ) )
						{
							effect.fx.stop();
							if( effect._out )
								effect.fx.start( effect.outValue );
							else
								effect.fx.set( effect.outValue );
						}
						else
						{
							if( effect._out )
								this.items[i].setStyle( effect.style, effect.outValue );
						}
					}, this );
				}
			}.bindWithEvent( this, i ) );
		}, this );
		
		this.items.each( function(item, i){
			this.itemFx[i] = [];
			this.options.itemFx.each( function(effect){
				var fx = {};
				if( effect.animate )
					fx.fx = new Fx.Style( item, effect.style, {duration: effect.duration, transition: effect.transition} );
				else
					fx.style = effect.style;
				
				fx._in = effect._in;
				fx._out = effect._out;
				
				fx.inValue = eval(effect.inValue);
				fx.outValue = eval(effect.outValue);
				
				this.itemFx[i].push( fx );
				
				item.setStyle( effect.style, fx.outValue );
			}, this );
			
			item.addEvent( 'mouseenter', function(event, i){
				this.menuFx[i].each( function(effect){
					if( $defined( effect.fx ) )
					{
						if( effect._in )
							effect.fx.start( effect.inValue );
						else
							effect.fx.set( effect.inValue );
					}
					else
					{
						if( effect._in )
							this.menus[i].setStyle( effect.style, effect.inValue );
					}
				}, this );
				this.itemFx[i].each( function(effect){
					if( $defined( effect.fx ) )
					{
						if( effect._in )
							effect.fx.start( effect.inValue );
						else
							effect.fx.set( effect.inValue );
					}
					else
					{
						if( effect._in )
							this.items[i].setStyle( effect.style, effect.inValue );
					}
				}, this );
			}.bindWithEvent( this, i ) );
			
			item.addEvent( 'mouseleave', function(e, i){
				var size = this.menus[i].getCoordinates();
				if( e.page.y < size.top || e.page.x < size.left || e.page.x > size.right || e.page.y > size.bottom )
				{
					this.menuFx[i].each( function(effect){
						if( $defined( effect.fx ) )
						{
							effect.fx.stop();
							if( effect._out )
								effect.fx.start( effect.outValue );
							else
								effect.fx.set( effect.outValue );
						}
						else
						{
							if( effect._out )
								this.menus[i].setStyle( effect.style, effect.outValue );
						}
					}, this );
					this.itemFx[i].each( function(effect){
						if( $defined( effect.fx ) )
						{
							effect.fx.stop();
							if( effect._out )
								effect.fx.start( effect.outValue );
							else
								effect.fx.set( effect.outValue );
						}
						else
						{
							if( effect._out )
								this.items[i].setStyle( effect.style, effect.outValue );
						}
					}, this );
				}
			}.bindWithEvent( this, i ) );
			
		}, this );
	}
});