var close = true;
var timeout = false;

$j( document ).ready( function() {
		closeSubmenuItems();
		//$j( "#submenuItems" ).css( "padding", "5px" );
		$j( "a.menu-item" ).bind( "mouseover", function() {
			clearTimeout( timeout );
			var id = $j( this ).attr( "id" ).substring( 1 );
			
			var topY = $j( this ).offset().top + $j( this ).height() + 15;
			
			var leftX = $j( this ).offset().left;		
			$j( "#submenuItems" ).css( "left", leftX + "px" );
			$j( "#submenuItems" ).css( "top", topY + "px" );
			//console.log( $j( "#submenuItems" ).offset().left + " - " + $j( "#submenuItems" ).offset().top);
			
			
			$j( "#submenuItems" ).hide();
						
			$j( "#submenuItems" ).load( "/blocks/submenuAjaxLoad.php?id=" + id, function() {
				if( $j( this ).text() )
					$j( this ).show();
			} );
			
			$j( "#submenuItems" ).bind( "mouseenter", function(){
				clearTimeout( timeout );
				close = false;				
			});
			
			$j( "#submenuItems" ).bind( "mouseleave", function(){
				close = true;
				clearTimeout( timeout );
				timeout = setTimeout("closeSubmenuItems()", 1000 );
			});
			
		});
		
		
		$j( "a.menu-item" ).bind( "mouseleave", function() {
			close = true;
			clearTimeout( timeout );
			timeout = setTimeout("closeSubmenuItems()", 1000 );
		});
		
	});

function closeSubmenuItems(){
	
	if( close )
		$j("#submenuItems").hide();
	
	clearTimeout( timeout );
}