/* ************************************
 * PLANO INTERACTIVO DEL TEATRO
 * ******************************/

$(document).ready(function(){
  	$('#datoszonas li').addClass('js');
		  	
	$('#planoLista a').click(function(e){
		e.preventDefault();
		var elhref = $(this).attr('href');
		var alturahref = $(elhref).height();
		var alturahrefdos = alturahref / 2;
		
		$('body').prepend('<div id="overlay"></div>');
		$('#overlay').css({'opacity': '0','display': 'block','height': '160em'})
				 .animate({opacity: 0.8},'normal');
		
		$(elhref).prepend('<span>Cerrar</span>')	
				 .animate({'top': '50%','marginTop': -alturahrefdos}, 700)
			 	 .addClass('activo');
		
		$('#datoszonas li span, #overlay').click(function(){
			$('#datoszonas li.activo').animate({'top': '-999em'}, 500)
									  .removeClass('activo')
									  .children('span').remove();
			$('#overlay').fadeOut('slow',function(){
				$(this).remove();
			})
		});
	});	

});