$(document).ready(function(){
  $('#navigation li ul').css({
    display: "none",
//    position: "absolute",
    left: "auto"
  });

  $('.menuItem').hover(function(){ 
    // Mouse over function
    var $l = $(this).position().left;
    var $t = $(this);
    //~ var $x = $(this).width();
    //~ var $n = $(this).text();
    //~ $('#Message').text('name=' + $n + ' width=' + $x + ' left=' + $l);
    $('#navigation-blob').animate(
      {width: $(this).width(), left: $l},
	{duration: 'slow', easing: 'swing', queue: 'false', complete: function() {
//	    $('#Message').text('Yes!');
	    $t
	      .find('ul')
	      .css({top: 31})
	      .stop(true, true)
	      .slideDown('slow', 'easeOutBounce');
	},}
    );
  }, function() { 
    // Mouse out function
    $('#navigation-blob').animate(
      {width: $('#menu-active').width(), left: $('#menu-active').position().left},
	{duration: 'slow', easing: 'swing', queue: false}
    );
    $(this)
      .find('ul')
      .stop(true, true)
      .slideUp('slow', 'easeOutBounce');
  });
  
  $('.subMenuItem').children().css({ // set initial color of submenu items
	  backgroundImage: 'none',
	  backgroundColor: '#dddee0' /* dark grey */
  });
  $('.subMenuItem a').css({
	  color: '#228',
	  fontFamily: 'verdana',
	  fontSize: '12px',
	  textAlign: 'left',
	  paddingTop: '5px'
  });
  $('<div id="navigation-bg"></div>').css({
	top: -8,
	left: 50,
	width: 660,
	height: 45
  }).appendTo('#navigation'); //.hide();
  
  $('.menuItem > ul > li').hover(function() { // highlight drop down menu item
    $(this).children(':first').css({backgroundColor: '#7b7e87' /* dark grey */});
    $(this).css({backgroundColor: '#7b7e87' /* dark grey */});
    $(this).children('a').css({color: '#dd8'});
  }, function() {
    $(this).children(':first').css({backgroundColor: '#dddee0' /* light grey */});
    $(this).css({backgroundColor: '#dddee0' /* light grey */});
    $(this).children('a').css({color: '#228'});
  });


  $('.submenu li').hover(function() { // highlight submenu item
    $(this).children(':first').css({backgroundPosition: '-420px -33px', color: '#135'});
//    $(this).children(':first').removeClass('submenu');
//    $(this).children(':first').addClass('hilite');
    $('.submenu li#submenu-active a').css({ backgroundPosition: '-420px -98px', color: '#135' });
  }, function() {
    $(this).children(':first').css({backgroundPosition: '-420px -1px', color: '#59f'});
//    $(this).children(':first').removeClass('hilite');
//    $(this).children(':first').addClass('submenu');
    $('.submenu li#submenu-active a').css({ backgroundPosition: '-420px -98px', color: '#135' });
  });
  $('.submenu li#submenu-active a').css({ backgroundPosition: '-420px -98px', color: '#135' });
//  $('#submenu-spacer li').css({ width: '90px' });
//  alert("Hello");
  
  setTimeout(function() {
	  $('ul.subMenuItem').each(function() {
		  var $x = $(this).width();
		  var $l = $(this).parent().position().left;
		  var $n = $(this).text();
//		  $('#Message').text($('#Message').text() + ' name=' + $n + ' width=' + $x + ' left=' + $l);
		  $(this).children('li').css({
			  width: $x,
			  left: $l
		  });
		  $(this).children('a').css({
			  width: $x,
			  left: $l
		  });
		  $(this).css({
			  left: $l
		  });
	  });
	  alert("Hello " + $('#menu-active').width());
	  $('<div id="navigation-blob"></div>').css({
		width: 0,
		height: 34,
		top: -3,
		left: $('#menu-active a').position().left + ($('#menu-active a').width() / 2)
	  }).appendTo('#navigation').animate({width: $('#menu-active a').width() + 10, left: $('#menu-active a').position().left}, 
		{duration: 'slow', easing: 'swing', queue: false}); //.hide();
	alert("Hello");
  }, 1000);
});