/**
* Menu which provides a DIV which you can put whatver you want in. The div is shown on-rollover
**/


var $currmenu = null;
var timeout = null;

function setclosetimeout() {
  timeout = window.setTimeout("hidemenu()", 500);
}

function cancelclosetimeout() {
  window.clearTimeout(timeout);
}

function showmenu($div) {
  var $parent = $div.parent('li');
  
  $div.css('position', 'absolute');
  $div.css('top', $parent.offset().top + $parent.height());
  
  if ($div.width() > 400) {
    // Big: Center underneath menu item
    $div.css('left', $parent.offset().left - $div.width() / 2 + $parent.width() / 2);
    
  } else {
    // Small: Left align under item
    $div.css('left', $parent.offset().left);
  }
  
  $div.show();
  $div.parent('li').addClass('on');
  
  $div.bind('mouseleave', setclosetimeout);
  $div.bind('mouseenter', cancelclosetimeout);
  
  $currmenu = $div;
}

function hidemenu() {
  $currmenu.hide();
  $currmenu.parent('li').removeClass('on');
  $currmenu.unbind('mouseleave', setclosetimeout);
  $currmenu.unbind('mouseenter', cancelclosetimeout);
  $currmenu = null;
}

$(document).ready(function() {
  $('ul.p7PMM > li').mouseenter(function() {
    $(this).addClass('on');
    cancelclosetimeout();
    if ($(this).children('div.main') == $currmenu) return;
    if ($currmenu) hidemenu();
    showmenu($(this).children('div.main'));
  });
  
  $('ul.p7PMM > li').mouseleave(function() {
    $(this).removeClass('on');
  });
  
  $(window).resize(function() {
    if ($currmenu) showmenu($currmenu);
  });
});