(function($){
	$.fn.menu = function(){
		var selected = false;
		var handlers = new Array();
		$(this).each(function(){
			var $item = $(this);
			if($item.find('ul').length){
				$item.data('selected',false);
				$item.mouseover(function(e){
					var $this = $(this);
					var $aobj = $this.find('a');
					$aobj.addClass('active');

					clearHandlers();//limpio todos los handlers que estén en cola
					clearSubitems();//limpio los subitems que puedan haber todavia en la dom (es poco probable, pero no cuesta nada hacerlo)

					/*
					*	Calculo la posición donde estaría el menú dependiendo del alto de la página y la posición del scroll
					*/
					var offset = $this.offset(),
					$subItems = $('<div class="div_subitems"></div>').attr('refid', $aobj.attr('id')).append('<ul></ul>').append('<div class="div_close"><img src="../images/close.png" border="0"></div>')
					.click(function(){
						//Limpio todo
						clearSubitems();
						clearHandlers();
					});

					$subItems.css('display','none').find('ul').append($this.find('ul').html()); //lo inicio con display none para obtener el height más tarde
					$('body').append($subItems);
					var top = offset.top - 5;
					var wHeight = ($(window).height()+$(window).scrollTop());//total del height de la pagina (incluyendo si se hace scroll)
					if((top + $subItems.height()) > wHeight) top = (wHeight - $subItems.height());
					top = Math.round(top);
					$subItems.css({'display':'','top': top+'px','left':(Math.round((offset.left+$this.outerWidth())))+'px'});//Seteo las propiedades más importantes

					$subItems.mouseleave(function(e){
						close($subItems, true, e);//Hago que se cierre en el mouse leave, solo si el cursor no está encima del mismo
						e.preventDefault();
					});
					$subItems.mouseover(function(e){
						close($subItems, true, e);//Hago lo mismo en el mouseover para que se "active" otra vez
						e.preventDefault();
					});

					$this.mouseleave(function(e){//Hago un close con un poco de delay
						close($subItems, true, e);
						e.preventDefault();
					});

					e.preventDefault();
				});
			}
		});

		function clearHandlers(){
			for (var i=0; i<handlers.length;i++){
				clearTimeout(handlers[i]);
			}
			handlers = new Array();
		}

		function clearSubitems(){
			$('div.div_subitems').each(function(){
				close($(this), false);
			});
		}

		function close(obj, withDelay, event){
			clearHandlers();
			if(withDelay) {
				var erase = function(){
					var $relTarget = $(event.relatedTarget);
					if($relTarget != obj &&  $relTarget.parents('.div_subitems').length==0 && $relTarget.attr('class') != 'div_subitems') {
						$('#'+obj.attr('refid')).removeClass('active');
						obj.remove();
					}
				};
				var t = setTimeout(erase,350);
				handlers.push(t);
			}else {
				$('#'+obj.attr('refid')).removeClass('active');
				obj.remove();
			}
		}
	};
})(jQuery);