jQuery(function(){
		
	var miBandera = "nemo";
	var miBoton;
	
	
	
	jQuery("#palestra-button").css({ opacity: 0.4 });
	
	jQuery("#gymnasion-button").css({ opacity: 0.4 });
	
	jQuery("#acropolis-button").css({ opacity: 0.4 });
	
	jQuery("#agora-button").css({ opacity: 0.4 });
	
	

	jQuery("#page-wrap div.button").click(function(){
		
		$clicked = jQuery(this);
		
		// if the button is not already "transformed" AND is not animated
		if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
			
			// Load this var with the Id of the button
			miBandera = $clicked.attr("id");
			
			// Clicked Button Opacity to One
			$clicked.animate({ opacity: 1 }, 300 );
			
			//we reset the other buttons to default style
			$clicked.siblings(".button").animate({ opacity: 0.4 }, 300 );

			// each button div MUST have a "xx-button" and the target div must have an id "xx" 
			var idToLoad = $clicked.attr("id").split('-');
			
			//we search trough the content for the visible div and we fade it out
			jQuery("#menu-lists").find("div:visible").fadeOut("fast", function(){
				//once the fade out is completed, we start to fade in the right div
				jQuery(this).parent().find("#"+idToLoad[0]).fadeIn();
			})
			
			
		}
	});
	
	
	
	jQuery("#page-wrap div.button").mouseover(function(){
		
		$onmaus = jQuery(this);
		
		miBoton = $onmaus.attr("id");
		
		// if the button is not already "transformed" AND is not animated
		if (miBandera != miBoton) {
			
			$onmaus.animate({ opacity: 0.8 }, 150 );
			
		}		
		
	});



	jQuery("#page-wrap div.button").mouseout(function(){
		
		$offmaus = jQuery(this);
		
		miBoton = $offmaus.attr("id");
		
		// if the button is not already "transformed" AND is not animated
		if (miBandera != miBoton) {
			
			$offmaus.animate({ opacity: 0.4 }, 100 );
			
		}		
		
	});

		
		

		
		
});