var rgbValue = 51;
 var rgbStep = 6;
 var inColor = 51;
 var outColor = 255;
 var counter;

 function changeDisplay()
 {
 if (document.getElementById)
  {
  if (document.getElementById("message1").className != 'show')
  {
  document.getElementById("message1").className = 'show';
  document.getElementById("message2").className = 'hide';
  }
  else
  {
  document.getElementById("message1").className = 'hide';
  document.getElementById("message2").className = 'show';
  }
  }
 }

 function fadeIn()
 {
 if (rgbValue > inColor)
  {
  rgbValue = rgbValue - rgbStep;
  document.getElementById("message1").style.color = "rgb(" + rgbValue + "," + rgbValue + "," + rgbValue + ")";
  document.getElementById("message2").style.color = "rgb(" + rgbValue + "," + rgbValue + "," + rgbValue + ")";
  counter = setTimeout("fadeIn()",1);
  }
 else
  {
  clearTimeout(counter);
  setTimeout("fadeOut()",10000);
  }
 }

 function fadeOut()
 {
 if (rgbValue < outColor)
  {
  rgbValue = rgbValue + rgbStep;
  document.getElementById("message1").style.color = "rgb(" + rgbValue + "," + rgbValue + "," + rgbValue + ")";
  document.getElementById("message2").style.color = "rgb(" + rgbValue + "," + rgbValue + "," + rgbValue + ")";
  counter = setTimeout("fadeOut()",1);
  }
 else
  {
  clearTimeout(counter);
  changeDisplay();
  fadeIn();
  }
 }