$(function() {
	var velocidade = 200;

	$('li img').fadeTo('fast', 0);
	$(document.body).append($('<div/>').attr('id', 'borda'));
	$('h1').hover(
		function() {
			$('div#grupo').css('left', '-320px').css('display', 'block');
			$('body').attr('class', '').addClass($('a:first').parent().attr('id')).stop().animate({
				borderLeftWidth: '25px'
			}, velocidade);
			$('div#grupo').stop().animate({
				left: '25px'
			}, velocidade);
			$('div#borda').stop().animate({
				left: '0'
			}, velocidade);
		},
		function() {
			$('body').stop().animate({
				borderLeftWidth: '0'
			}, velocidade, 'linear', function() {
				$('body').attr('class', '');
			});
			$('div#grupo').css('display', 'block').stop().animate({
				left: '-320px'
			}, velocidade);
			$('div#borda').stop().animate({
				left: '-8px'
			}, velocidade);
		}
	);
	
	$('#nav_grupo li a').hover(
		function() {
			$(this).stop().fadeTo('fast', .7);
			$(this).next().css('left', '-320px');
			$(this).next().css('display', 'block');
			$('body').attr('class', '').addClass($(this).parent().attr('id')).stop().animate({
				borderLeftWidth: '25px'
			}, velocidade);
			$(this).next().stop().animate({
				left: '25px'
			}, velocidade);
			$(this).next().find('img').stop().fadeTo('slow', 1);
		},
		function() {
			var classe = $(this).parent().attr('id');
			$(this).stop().fadeTo('fast', 1);
			$(this).next().css('display', 'block');
			$('body').stop().animate({
				borderLeftWidth: '0'
			}, velocidade, 'linear', function() {
				$('body').attr('class', '');
			});
			$(this).next().stop().animate({
				left: '-320px'
			}, velocidade);
			$(this).next().find('img').stop().fadeTo('slow', 0);
		}
	);
});