[30equals]

hey all

i'm working on a hover/slideout menu with submenus in horizontal sliding panels and with a scroller.
i already had some help from PGO to fix my rollover/out conflict.


now i don't really have a bug or something, it's just that as long i was developing one menu it was fine, but i need to implement three next to eachother. so that's three times the code. i built in a looping function so i don't need to copy/paste the code three times. but sometimes a page loads several seconds, so everything's freezed up. and on other pages there are other jquery things which slows it down even more...

colde:

$(".hover-menu").each(function(r){ // loop to append scrolling panels to all three menu blocks
   
		
			// dynamic id's
			var menuId = "#" + $(this).attr("id");
			var selectedId = 0 + (r*1000);
			var uniqueId = 1 + (r*1000);
			
			
			
			function addIdToLink(ind, domEle) {		
					$(domEle).parent().attr({tid:uniqueId}) ;
					$(domEle).attr({id:"link" + uniqueId}) ;			
					uniqueId++;
			}	
		
		
			$(menuId +" li:has(ul) span").each(addIdToLink); 
			
		
			function showTags(ind, domEle) {	
				  
				  //get the unique id
				  var ind = $(domEle).parent().attr("tid");
				  var menuDiv =  $(menuId).append("<div class='submenu' tid='" + ind + "' id='div" + ind + "'>" + $(domEle).html() + "</div>").attr({tid:ind}) ;  
				  menuDiv.find(".submenu ul").remove();  
				  menuDiv.attr({tid:ind}) ;	   
			};
		
		
			$(menuId +" ul").each(showTags);
			$(menuId +" .submenu:first").css({left:"0px"});
			$(menuId + " ul:first").remove();
	  
			$(menuId +' .submenu').wrapInner(
				jQuery('<div></div>').attr(
					{'className':'scroller'}
				)
			)	
			
			$(menuId + ' .scroller').jScrollPane();
			$(menuId +' .scroller').show();
			
			
		
			$(".submenu li span").click(function (e) {	
				
				e.stopPropagation();
			
				//get unique id
				var ind = $(e.target).parent().attr("tid")
			
				//ease out current
				$(e.target).parent().parent().parent().parent().animate( { left:"-245px"}, 800, "easeOutExpo");
					
				//get submenu of item
				$(menuId +" #div" + ind).css({left:"245px"});		
				$(menuId +" #div" + ind).animate( { left:"0px"}, 800, "easeOutExpo");	 
		  
				//keep track what div is selected
				selectedId = ind;
				
			});	
		
		
		
			$(menuId +" #backButton" + r).click(function (e) {	
		
						if(!(selectedId == 0 + (r*1000) || selectedId == "undefined")){
						
							//ease out current
							$(menuId +" #div" + selectedId).css({left:"0px"});
							$(menuId +" #div" + selectedId).animate( { left:"245px"}, 800, "easeOutExpo");
							
							var ind = $(menuId +" #link" + selectedId).parent().parent().parent().parent().attr("tid");
							
							$(menuId +" #div" + ind).css({left:"-245px"});		
							$(menuId +" #div" + ind).animate( { left:"0px"}, 800, "easeOutExpo");
							
							
							selectedId = ind; //keep track what div is selected					
					
						}//end if(!(selectedId == 0))			  
			  });
	
	
		  });//end each function menu