function initImage() {
  imageId = 'foto';
  image = document.getElementById(imageId);
  setOpacity(image, 0);
  image.style.visibility = 'visible';
  fadeIn(imageId,0);
}

function setOpacity(obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;

  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";

  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;

  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;

  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;
}

function fadeIn(objId,opacity) {
  if (document.getElementById) {
    obj = document.getElementById(objId);
    if (opacity <= 100) {
      setOpacity(obj, opacity);
      opacity += 5;
      window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
    }
  }
}


/*------------------------------------------------------------------------*/

// Definimos el tiempo que estará visible cada imagen
var velTransicion = 3000

/* Creamos las imágenes y definimos su ubicación
esto nos permite pre cargar las imágenes antes de mostrarlas */
img0 = new Image();
img0.src = "img/imagen1.png";

img1 = new Image();
img1.src = "img/imagen2.png";

img2 = new Image();
img2.src = "img/imagen3.png";

img3 = new Image();
img3.src = "img/imagen4.png";

// Creamos un array con las imágenes que utilizaremos en el efecto
var imageurl = new Array()
imageurl[0] = img0.src
imageurl[1] = img1.src
imageurl[2] = img2.src
imageurl[3] = img3.src

// Definimos la url que se cargará al hacer click en las imágenes
/*var url = new Array()
url[0] = "http://enlace1"
url[1] = "http://enlace2"
url[2] = "http://enlace3"*/

var valorFade = 0
var i = 0

// Creamos la función para el efecto FadeIn
function fadeInImagen() {
	// Se ejecuta para los valores 0 a 100
	if (valorFade <= 100) {
		// Mostramos la imagen correspondiente
		document.getElementById('foto').src = imageurl[i]
		// Definimos el link correspondiente
		/*document.getElementById('miEnlace').href = url[i]*/
		// Cambiamos el valor de la propiedad MozOpacity (para Firefox)
		document.getElementById('foto').style.MozOpacity = valorFade/100
		// Cambiamos el valor de la propiedad filter (para IE)
		document.getElementById('foto').style.filter = 'alpha(Opacity='+valorFade+')'
		valorFade = valorFade + 5
		var timer = setTimeout("fadeInImagen()",100)
	}
	
	else {
		/*clearTimeout(timer)
		valorFade = 100
		// Ejecutamos la función que aplica el efecto FadeOut
		var timer = setTimeout("fadeOutImagen()",velTransicion)*/
		clearTimeout(timer)
		i++
		if (i >= imageurl.length) {
			i = 0
		}
		valorFade = 10
		var timer = setTimeout("fadeInImagen()",velTransicion)
	}

}

function fadeOutImagen() {

	if (valorFade >= 20) {
		document.getElementById('foto').style.MozOpacity = valorFade/100
		document.getElementById('foto').style.filter = 'alpha(Opacity='+valorFade+')'
		valorFade = valorFade - 5
		var timer = setTimeout("fadeOutImagen()",60)
	}

	else {
		clearTimeout(timer)
		i++
		if (i >= imageurl.length) {
			i = 0
		}
		valorFade = 10
		var timer = setTimeout("fadeInImagen()",500)
	}
}