$(document).ready(function() {
  template_path = 'tpl/img/';
  // preload the images
  $('<img>').attr('src', template_path + 'nav-item-bg-on.gif');
  $('<img>').attr('src', template_path + 'nav-item-link-bg-on.gif');
  $('<img>').attr('src', template_path + 'nav-item-bg-next-on.gif');
  $('<img>').attr('src', template_path + 'nav-first-item-bg-on.gif');
  $('#navigation > li').each(function(){
    child_width = $(this).width() + 25;
    $(this).children('ul').css('min-width', child_width+'px');
  });
  $('#navigation > li:not(:first-child)').mouseover(function(){
    $(this).css('background-image', 'url(' + template_path + 'nav-item-bg-on.gif)');
    $(this).children('a').css('background-image', 'url(' + template_path + 'nav-item-link-bg-on.gif)');
    $(this).next().css('background-image', 'url(' + template_path + 'nav-item-bg-next-on.gif)');
    $(this).children('ul').css('visibility', 'visible');
  });
  $('#navigation > li:not(:first-child)').mouseout(function(){
    $(this).css('background-image', 'url(' + template_path + 'nav-item-bg.gif)');
    $(this).children('a').css('background-image', 'url(' + template_path + 'nav-item-link-bg.gif)');
    $(this).next().css('background-image', 'url(' + template_path + 'nav-item-bg.gif)');
    $(this).children('ul').css('visibility', 'hidden');
  });
  $('#navigation > li:first-child').mouseover(function(){
    $(this).css('background-image', 'url(' + template_path + 'nav-first-item-bg-on.gif)');
    $(this).children('a').css('background-image', 'url(' + template_path + 'nav-item-link-bg-on.gif)');
    $(this).next().css('background-image', 'url(' + template_path + 'nav-item-bg-next-on.gif)');
    $(this).children('ul').css('visibility', 'visible');
  });
  $('#navigation > li:first-child').mouseout(function(){
    $(this).css('background-image', 'url(' + template_path + 'nav-first-item-bg.gif)');
    $(this).children('a').css('background-image', 'url(' + template_path + 'nav-item-link-bg.gif)');
    $(this).next().css('background-image', 'url(' + template_path + 'nav-item-bg.gif)');
    $(this).children('ul').css('visibility', 'hidden');
  });
});