var opened_one = null;

$(function(){
  // hide all panels first : bad need to do something about this
  $('div[id*="panel"]').hide();
  
  // make the panels absolute positioned
  $('div[id*="panel"]').css('position', 'absolute');
  
  // show the panel based on rel attribute of the current hovered link
  $('#menu a').hover(function(){
	// hide previously opened panel
	$(opened_one).hide();
	
    var link_rel = $(this).attr('rel');

    //get the position of the hovered element
    var pos = $(this).offset();
    
	// get the panel near by hovered element now
    $('div#' + link_rel).css({
      'left': pos.left + 'px',
      'top': (pos.top + $(this).height() + 10) + 'px',
      'zIndex': '5000'
    });
    
    // finaly show the relevant hidden panel
    $('div#' + link_rel).fadeIn('slow');

	// this is currently opened
	opened_one = $('div#' + link_rel);
	
    // hide it back when mouse arrow moves away
    $('div#' + link_rel).hover(function(){}, function(){
		$(this).fadeOut('slow');
    });

  }, function(){});
  
});