// Juan Luis Almazo.
// Estrategas Digitales.

/************************************************/
var browserName = navigator.appName
var ie = false;

if (browserName == "Microsoft Internet Explorer"){
	ie = true;
}
/************************************************/


var timer = null;
var element = null;

function fade_in(id){
	
	element = document.getElementById(id);
	
	animate_fade("in", 0);
}

function fade_out(id){
	
	element = document.getElementById(id);
	if(ie){
		animate_fade("out", 100);
	}else{
		var opac = element.style.opacity;
		animate_fade("out", opac);
	}
	
	
}

function animate_fade(type, opac){

	clearTimeout(timer);
	
	switch(type){
		
		case "in":
		
			if(ie){
				element.style.display="block";				
			}else{
				
				if(opac <= 1){
					
					element.style.opacity = opac;
					element.style.display = "block";
					opac += 0.1;
					timer = setTimeout("animate_fade('in', " + opac + ")", 50);
				}
			}
		
			break;
		
		case "out":

			if(ie){
				//element.style.display="none";
				if(opac >= 0){
					//The solution I found for IE is to fade the image out instead of the expdiv1 element, so the transition looks better.
					document.getElementById("recuadro_imagenes").style.filter = 'alpha(opacity=' + opac + ')';
					opac -= 25;
					timer = setTimeout("animate_fade('out', " + opac + ")", 5);
				}else{
					element.style.display = "none";
				}
				
			}else{
				
				if(opac >= 0){
					element.style.opacity = opac;
					opac -= 0.1;
					timer = setTimeout("animate_fade('out', " + opac + ")", 50);
				}else{
					element.style.display = "none";
				}			
			}

			break;
	}

}

////////////////////////////////////////////////////////////////////////////////////////////////

var timer_image = null;
var element_image = null;

function fade_in_image(id){
	
	element_image = document.getElementById(id);
	
	animate_fade_image("in", 0);
}

function fade_out_image(id){
	
	element_image = document.getElementById(id);
	
	if(ie){
		animate_fade_image("out", 100);
	}else{
		var opac = element_image.style.opacity;
		animate_fade_image("out", opac);
	}
	
	//alert("fade out:" + id + ":" + opac);
	
}

function animate_fade_image(type, opac){

	clearTimeout(timer_image);

	switch(type){
		
		case "in":
		
			if(ie){
				//element_image.style.display="block";
				if(opac <= 100){
					element_image.style.filter = 'alpha(opacity=' + opac + ')';
					element_image.style.display = "block";
					opac += 25;
					timer_image = setTimeout("animate_fade_image('in', " + opac + ")", 5);
				}
				
			}else{
				
				if(opac <= 1){
					element_image.style.opacity = opac;
					element_image.style.display = "block";
					opac += 0.1;
					timer_image = setTimeout("animate_fade_image('in', " + opac + ")", 50);
				}
			}
			
			break;
		
		case "out":

			if(opac >= 0){
				
				if(ie){
					element_image.style.filter = 'alpha(opacity=' + opac + ')';
					opac -= 25;
					timer_image = setTimeout("animate_fade_image('out', " + opac + ")", 5);
				}else{
					element_image.style.opacity = opac;
					opac -= 0.1;
					timer_image = setTimeout("animate_fade_image('out', " + opac + ")", 50);
				}
				
			}else{
				element_image.style.display = "none";
			}

			break;
	}

}