$(function()
{
  $('#menu area.has-submenu').hover(function(e)
  {
    var offset = $('#menu-image').offset();
    var coords = $(this).attr('coords').split(',');
    var dimensions = {
      top: 10000, left: 10000, bottom: 0, right: 0
    };
    for(var i = 0; i < coords.length; i++)
    {
      var coord = parseInt(coords[i]);
      if(i % 2) // Y
      {
        if(coord < dimensions.top) dimensions.top = coord;
        if(coord > dimensions.bottom) dimensions.bottom = coord;
      }
      else // X
      {
        if(coord < dimensions.left) dimensions.left = coord;
        if(coord > dimensions.right) dimensions.right = coord;
      }
    }
    var submenu_offset = {top: offset.top + dimensions.bottom, left: offset.left + dimensions.left};
    // alert(offset.top + ' ' + offset.left);
    // alert(dimensions.bottom + ' ' + dimensions.left);
    // alert(submenu_offset.top + ' ' + submenu_offset.left);
    $('#submenu').show();
    $('#submenu').offset(submenu_offset);
    var href = $(this).attr('href');
    href = href.replace('?catalog', '');
    //$('#submenu li a.girls').attr('href', href + 'girls/?catalog');
    //$('#submenu li a.boys').attr('href', href + 'boys/?catalog');
	$('#submenu li a.girls').attr('href', href + 'girls/');
    $('#submenu li a.boys').attr('href', href + 'boys/');
    $('#menu').data('hover', true);

  },
  function(e)
  {
    var timeout_id = setTimeout(function(e)
    {
      if(!$('#submenu').data('hover') && !$('#menu').data('hover'))
      {
        $('#submenu').hide();
      }
    }, 500);
    $('#menu').data('hover', false);
    $('#menu').data('timeout_id', timeout_id);

  });

  $('#menu area.has-submenu').click(function(e)
  {
    return false;
  });
  $('#submenu').hover(function(e)
  {
    $(this).data('hover', true);
    $(this).show();
  },
  function(e)
  {
    var timeout_id = setTimeout(function(e)
    {
      if(!$('#submenu').data('hover') && !$('#menu').data('hover'))
      {
        $('#submenu').hide();
      }
    }, 500);
    $(this).data('hover', false);
    if($('#menu').data('timeout_id'))
    {
      clearInterval($('#menu').data('timeout_id'));
    }
  });
  $('#submenu li').hover(function(e)
  {
    $(this).find('img.passive').hide();
    $(this).find('img.active').show();
  },
  function(e)
  {
    $(this).find('img.active').hide();
    $(this).find('img.passive').show();
  });
});