$(document).ready(function() {

	$("body>div#topo>div#menu a").click(function(e) {
		moverMenu(this);
	});
	
	$("body>div#topo>div#menu a").hover(function() {
		nomeLink = this.id;
		nomeAba = "body>div#_" + nomeLink;
		nomeImagem = 'a#' + nomeLink + ' img';
		anterior = $(nomeImagem).css("border-bottom");
		$(nomeImagem).css("border-bottom", "2px solid white");
	}, function() {
		nomeLink = this.id;
		nomeAba = "body>div#_" + nomeLink;
		nomeImagem = 'a#' + nomeLink + ' img';
		$(nomeImagem).css("border-bottom", anterior);
	}

	);

});

var offset = 0;

function moverMenu(link) {

	nomeLink = link.id;
	nomeAba = "body>div#_" + nomeLink;
	nomeImagem = 'a#' + nomeLink + ' img';
	var topo = $(nomeAba).position().top;

	if (topo == 170 + offset) {
		subirMenu();
	} else {
		$("body>div#topo>div#menu a img").removeClass('On');
		$(nomeImagem).addClass('On');
		// sobre as outras abas
		$("body>div.AbaLink").animate( {
			'top' : 90 + offset
		}, 300);
		// sobe o topo
		$("body>div#topo").animate( {
			'top' : -50 + offset
		}, 500);
		// desce a Aba atual
		$(nomeAba).animate( {
			'top' : 170 + offset
		}, 300);
		// desce a marca
		$("body>div#topo img#marca").animate( {
			'top' : 60 + offset,
			'left' : 0
		}, 500);
	}

}

function subirMenu(link) {
	// remove a classe que sublinha
	$("body>div#topo>div#menu a img").removeClass('On');
	// sobe a marca
	$("body>div#topo img#marca").animate( {
		'top' : 40 + offset,
		'left' : 30
	}, 500);
	// desce o topo
	$("body>div#topo").animate( {
		'top' : 0 + offset
	}, 500);
	// sobe a aba atual
	$("body>div.AbaLink").animate( {
		'top' : 50 + offset
	}, 500);

}

function ativarMenu(link) {

	nomeLink = link.id;
	nomeAba = "body>div#_" + nomeLink;
	nomeImagem = 'a#' + nomeLink + ' img';
	var topo = $(nomeAba).position().top;

	$("body>div#topo>div#menu a img").removeClass('On');
	$(nomeImagem).addClass('On');
	// sobre as outras abas
	$("body>div.AbaLink").animate( {
		'top' : 50 + offset
	}, 0);
	// sobe o topo
	$("body>div#topo").animate( {
		'top' : -50 + offset
	}, 0);
	// desce a Aba atual
	$(nomeAba).animate( {
		'top' : 170 + offset
	}, 0);
	// desce a marca
	$("body>div#topo img#marca").animate( {
		'top' : 60 + offset,
		'left' : 0
	}, 0);

}