var rotateID = 1;
var animFadeOut = null;
var animFadeIn = null;

var attributes = {
   width: { to: 0 },
   height: { to: 0 }
};
var attrFadeOut = {
   opacity: { to: 0 }
};
var attrFadeIn = {
   opacity: { to: 1.0 }
};

var fadeIn = function(e) {
    setTimeout("updateContent()", 4000);
}

var fadeOut = function(e) {
    div = document.getElementById('feature');
    if (div) {
      rotateID++;
      if (rotateID > 4) rotateID = 1;
      div.innerHTML = "<img src='images/rotate/rotate" + rotateID + ".jpg' width='400'  align='center' id='feature_img' alt='main' />";
        animFadeIn.animate();
      }
}

function updateContent() {
    animFadeOut.animate();
}

function initFeature() {
  animFadeOut = new YAHOO.util.Anim('feature', attrFadeOut, 1);
  animFadeOut.onComplete.subscribe(fadeOut);
  animFadeIn = new YAHOO.util.Anim('feature', attrFadeIn, 2);
  animFadeIn.onComplete.subscribe(fadeIn);
  setTimeout("updateContent()", 4000);
}

YAHOO.util.Event.onAvailable('feature', initFeature);