var OutLookMenu2 = new Class({
	options:{
		'id':'menu_list',
		'buttonTag':'h3',
		'contentTag':'ul',
		'menuShowTime':2000
	},
	initialize: function( options ){
		this.setOptions( options );
		var self = this;
		this.createMenus();
		this.createContent();
		this.clear = function(){
			if( $( self.options.id ).clear == 1){
				var buttons = $$( '#' + this.options.id + " " + this.options.buttonTag );
				var contents = $$( '#' + this.options.id + " " + this.options.contentTag );
				buttons.each( function( other, j ){
					other.removeClass('outlook_bn_over');
				});
				contents.each( function( content, j ){
					content.setStyle('opacity', 0 );
				});
				$( self.options.id ).clear = 0;
			}
		},
		$('home').addEvent( 'mouseout', function( event ){
			event = new Event( event );
			var area = $( self.options.id );
			var contents = $$( '#' + self.options.id + " " + self.options.contentTag );
			if( event.page.x <  area.getPosition().x ){
				self.clear();
			}
		});
		$('home').addEvent( 'mousemove', function( event ){
			event = new Event( event );
			var area = $( self.options.id );
			if( event.page.y > area.getPosition().y + area.getStyle('height').toInt() + 800 ){
				self.clear();
			}
			if( event.page.y <  area.getPosition().y ){
				self.clear();
			}
			if( event.page.x > area.getPosition().x + area.getStyle('width').toInt() + 200 ){
				self.clear();
			}
			if( event.page.x <  area.getPosition().x ){
				self.clear();
			}
			//alert( area.getPosition().y +"---"+area.getStyle('height').toInt() );
			//alert(event.page.y)
		})
	},
	createContent: function(bn){
		var contents = $$( '#' + this.options.id + " " + this.options.contentTag );
		contents.each( function( content, i ){
			content.getChildren().each(function( content3, index ){
				var content3Fx = new Fx.Styles( content3, {duration:100, wait:false});
				
				content3.addEvent('mouseenter', function(){
					content3Fx.start({
						'padding-left': [0,10]
					});
				});
				content3.addEvent('mouseleave', function(){
					content3Fx.start({
						'padding-left': [10,0]
					});
				});
			});
		});
	},
	createMenus: function(){
		var buttons = $$( '#' + this.options.id + " " + this.options.buttonTag );
		var contents = $$( '#' + this.options.id + " " + this.options.contentTag );
		var self = this;
		buttons.each(function( bn, index) {
			var content = bn.getNext();
			content.setStyles({
				'display':'none',
				'opacity': 0,
				'position':'absolute',
				'left':( bn.getLeft() + bn.getSize().size.x),
				'top':( bn.getTop() )
			});
			content.addEvents({
				'mouseleave':function(event){
					content.setStyles({
						'opacity': 0
					});
					contents.each( function( other, j ){
						if( index != j ) {
							content.setStyles({
								'opacity': 0
							});
						}
					});
					bn.removeClass('outlook_bn_over');
				},
				'mouseenter':function(event){
					$( self.options.id ).clear = 1;
				}
			});
			bn.addEvent( 'mouseleave', function(event){
				if( self.index != index ){
					content.setStyles({
						'opacity': 0
					});
				}

			});
			bn.addEvent( "mouseenter", function( event ) {
				self.index = index;
				var change = {};
				bn.addClass('outlook_bn_over');
				buttons.each( function( other, j ){
					if( index != j ) {
						other.removeClass('outlook_bn_over');
					}
				});
				contents.each( function( other, j ){
					if( self.index != j ) {
						other.setStyles({
							'opacity': 0
						});
					}
				});
				content.setStyles({
					'display':'',
					'opacity': 0.9,
					'position':'absolute',
					'zIndex':2000,
					'left':( bn.getLeft() + bn.getSize().size.x),
					'top':( bn.getTop() )
				});
				content.setProperty('show', 1);
				$( self.options.id ).clear = 1;
			});
			
		});
	}
});
OutLookMenu2.implement( new Options );