var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose;









$(document).ready(function() {	

	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		//Get the A tag
		var id = $(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set height and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(1000); 
	
	});
	
	
	
	$('a[name=modalespecie]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		//Get the A tag
		var id = $(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set height and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(500);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		
		$(id).css('width',  580);
		$(id).css('height', winH);
		
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
		
		$(id+'sub').css('width',  580);
		$('#dialog2sub').css('height', winH-50);
		$('#dialog2table').css('height', winH-50);
		
		if ((winH-50)<650)
		{
			$('#imgespecie').css('height', winH-50);
		}
		else
		{
		}
	
		//transition effect
		$(id).fadeIn(500); 
	
	});
	
	
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		$('#mask, .window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});








/*
$(document).ready(function(){

	$("#ingreso").click(
		function(event)
		{
			$("#menuDesp1").slideUp("fast");
			$("#menuDesp2").slideUp("fast");
			$("#menuDesp3").slideUp("fast");
			$("#menuDesp4").slideUp("fast");
			
			if ($("#loginForm").is(":hidden"))
			{
				$("#loginForm").slideDown("fast");
				$("#menuDesp1").removeClass("normalPosition");
				$("#menuDesp1").addClass("shiftedPosition");
				$("#menuDesp2").removeClass("normalPosition");
				$("#menuDesp2").addClass("shiftedPosition");
				$("#menuDesp3").removeClass("normalPosition");
				$("#menuDesp3").addClass("shiftedPosition");
				$("#menuDesp4").removeClass("normalPosition");
				$("#menuDesp4").addClass("shiftedPosition");
			}
			else
			{
				$("#loginForm").slideUp("fast");
				$("#menuDesp1").addClass("normalPosition");
				$("#menuDesp1").removeClass("shiftedPosition");
				$("#menuDesp2").addClass("normalPosition");
				$("#menuDesp2").removeClass("shiftedPosition");
				$("#menuDesp3").addClass("normalPosition");
				$("#menuDesp3").removeClass("shiftedPosition");
				$("#menuDesp4").addClass("normalPosition");
				$("#menuDesp4").removeClass("shiftedPosition");
			}
			event.preventDefault();
		}
	);
	
	$("#wrapper1").mouseleave(
		function()
		{
			$("#menuDesp1").slideUp("fast");
		}
	);
	$("#wrapper2").mouseleave(
		function()
		{
			$("#menuDesp2").slideUp("fast");
		}
	);
	$("#wrapper3").mouseleave(
		function()
		{
			$("#menuDesp3").slideUp("fast");
		}
	);
	$("#wrapper4").mouseleave(
		function()
		{
			$("#menuDesp4").slideUp("fast");
		}
	);

	$("#menu1").mouseover(
		function()
		{
			$("#menuDesp2").slideUp("fast");
			$("#menuDesp3").slideUp("fast");
			$("#menuDesp4").slideUp("fast");
			
			if ($("#menuDesp1").is(":hidden"))
			{
				$("#menuDesp1").slideDown("fast");
			}
		}
	);

	$("#menu2").mouseover(
		function()
		{
			$("#menuDesp1").slideUp("fast");
			$("#menuDesp3").slideUp("fast");
			$("#menuDesp4").slideUp("fast");
			
			if ($("#menuDesp2").is(":hidden"))
			{
				$("#menuDesp2").slideDown("fast");
			}
		}
	);

	$("#menu3").mouseover(
		function()
		{
			$("#menuDesp1").slideUp("fast");
			$("#menuDesp2").slideUp("fast");
			$("#menuDesp4").slideUp("fast");
			
			if ($("#menuDesp3").is(":hidden"))
			{
				$("#menuDesp3").slideDown("fast");
			}
		}
	);

	$("#menu4").mouseover(
		function()
		{
			$("#menuDesp1").slideUp("fast");
			$("#menuDesp2").slideUp("fast");
			$("#menuDesp3").slideUp("fast");
			
			if ($("#menuDesp4").is(":hidden"))
			{
				$("#menuDesp4").slideDown("fast");
			}
		}
	);
	
	$(".menuDesp1Content").mouseover(
		function()
		{
			$(this).addClass("menuDesp1Hover");
			$(this).removeClass("menuDesp1Content");
		}
	);
	$(".menuDesp1Content").mouseleave(
		function()
		{
			$(this).addClass("menuDesp1Content");
			$(this).removeClass("menuDesp1Hover");
		}
	);
	$(".menuDesp2Content").mouseover(
		function()
		{
			$(this).addClass("menuDesp2Hover");
			$(this).removeClass("menuDesp2Content");
		}
	);
	$(".menuDesp2Content").mouseleave(
		function()
		{
			$(this).addClass("menuDesp2Content");
			$(this).removeClass("menuDesp2Hover");
		}
	);
	$(".menuDesp3Content").mouseover(
		function()
		{
			$(this).addClass("menuDesp3Hover");
			$(this).removeClass("menuDesp3Content");
		}
	);
	$(".menuDesp3Content").mouseleave(
		function()
		{
			$(this).addClass("menuDesp3Content");
			$(this).removeClass("menuDesp3Hover");
		}
	);
	$(".menuDesp4Content").mouseover(
		function()
		{
			$(this).addClass("menuDesp4Hover");
			$(this).removeClass("menuDesp4Content");
		}
	);
	$(".menuDesp4Content").mouseleave(
		function()
		{
			$(this).addClass("menuDesp4Content");
			$(this).removeClass("menuDesp4Hover");
		}
	);

});
*/