// JavaScript Document
// Fade In and Out of Front Page Images

document.write("<style type='text/css'> #image1 {visibility:hidden;} </style>");

current=0;
fade = 'out';
pic2 = new Image(800, 389);
pic2.src = "../graphics/rotate2.jpg";
pic3 = new Image(800, 389);
pic3.src = "../graphics/rotate3.jpg";
pic4 = new Image(800, 389);
pic4.src = "../graphics/rotate4.jpg";

function changeImage() {
	imageId = 'image1';
	holderId = 'main';
	image = document.getElementById(imageId);
	holder = document.getElementById(holderId);
	if (fade=='out') {
		if (current==0) {
			setOpacity(image, 0);
			image.style.visibility = 'visible';
			fadeIn(imageId,0);
			current=1; fade='in';
		} else 
		if (current==1) { 
			holder.innerHTML = "<img src='graphics/rotate2.jpg' alt='Lucie Campbell Diamond Ring' id='image1' />"; 
			imageId = 'image1';
			image = document.getElementById(imageId);
			setOpacity(image, 0);
			image.style.visibility = 'visible';
			fadeIn(imageId,0);
			current=2; fade='in';
		} else
		if (current==2) { 
			holder.innerHTML = "<img src='graphics/rotate3.jpg' alt='Lucie Campbell Diamond Ring with Sapphire' id='image1' />"; 
			imageId = 'image1';
			image = document.getElementById(imageId);
			setOpacity(image, 0);
			image.style.visibility = 'visible';
			fadeIn(imageId,0);
			current=3; fade='in';
		} else
		if (current==3) { 
			holder.innerHTML = "<img src='graphics/rotate4.jpg' alt='Lucie Campbell Diamond Ring with Ruby' id='image1' />"; 
			imageId = 'image1';
			image = document.getElementById(imageId);
			setOpacity(image, 0);
			image.style.visibility = 'visible';
			fadeIn(imageId,0);
			current=4; fade='in';
		} else
		if (current==4) { 
			holder.innerHTML = "<img src='graphics/rotate1.jpg' alt='Lucie Campbell Diamond Ring with Ruby' id='image1' />"; 
			imageId = 'image1';
			image = document.getElementById(imageId);
			setOpacity(image, 0);
			image.style.visibility = 'visible';
			fadeIn(imageId,0);
			current=1; fade='in';
		}
		setTimeout("changeImage()", 4000);
	} else {
		fadeOut(imageId, 100);
		fade='out';
		setTimeout("changeImage()", 1500);
	}
}

/*function initImage() {
  imageId = 'image1';
  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 += 10;
      window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 50);
    }
  }
}

function fadeOut(objId,opacity) {
  if (document.getElementById) {
    obj = document.getElementById(objId);
    if (opacity >= 0) {
      setOpacity(obj, opacity);
      opacity -= 10;
      window.setTimeout("fadeOut('"+objId+"',"+opacity+")", 50);
    }
  }
}

function startList() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("MainNav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}

window.onload = function() { 
	changeImage();
	startList();
}