$(document).ready(function() {
  var selected = $("#menu li.selected");
  var idSelected = 0;
  
  $("span.delimiter", selected).addClass('end');
  $("span.delimiter", $(selected).prev()).addClass('start');

  $("#menu > ul > li[class!='first']").each(function(index) {
    if($(this).attr('class') == 'selected')
      idSelected = index;
    
    $(this).addClass('menuItem'+index);
  });
  $("#header > ul > li").each(function(index) {
    $(this).addClass('menuItem'+index);
    if(index == idSelected && index != 0)
    {
      $("#header > ul > li.selected").removeClass('selected');
      $(this).addClass('selected');
    }
  });
  $("#header > ul > li").not('.selected').css('opacity', 0);

  $("#menu > ul > li[class!='first']").hover(
    function(){
      selected.removeClass('selected');
      
      $("#header > ul > li").stop().animate({opacity: 0}, 'slow');
      $("#header > ul > li." + $(this).attr('class')).stop().animate({opacity: 1}, 'slow');
      
      $(this).addClass('selected');
      $("#menu > ul > li span").removeClass('start');
      $("#menu > ul > li span").removeClass('end');
      $("span.delimiter", this).addClass('end');
      $('span.delimiter', $(this).prev()).addClass('start');
    },
    function(){
      $(this).removeClass('selected');
      $("#menu > ul > li span").removeClass('start');
      $("#menu > ul > li span").removeClass('end');
      $("#header > ul > li").stop().animate({opacity: 0}, 'slow');
      $("#header > ul > li.selected").stop().animate({opacity: 1}, 'slow');
    }
  );
  $("#menu > ul").hover(
    function(){},
    function(){ backToSelected(); }
  )
  $("#menu > ul > li[class='first']").hover(
    function(){ backToSelected(); },
    function(){}
  )

  $("#menu > ul > li").hover(
    function() {
		  $('.submenu', this).slideDown('fast').show();
		},
    function() {
      $('.submenu', this).slideUp('fast'); 
    }
  );
  
  function backToSelected()
  {
    selected.addClass('selected');
    $('span.delimiter', selected.prev()).addClass('start');
    $('span.delimiter', selected).addClass('end');
  }
});
