function createBanner(idx){
    var r = "<img src='" + bannerImages[idx] + "' border='0' width='1000' height='380' />";
    if (bannerLinks[idx].length > 1) {
      r = "<a href='" + bannerLinks[idx] + "'>" + r + "</a>";
    }
    return r;
}

function startBannerFadeOut(){
  fadeState = fadeState - 0.1;
  if (fadeState <= 0) {
      startBannerRotate();
  } else {
      var el = document.getElementById("RotateBanner");
      el.style.opacity = fadeState;
      setTimeout(function(){startBannerFadeOut()},50);
  }

}

function startBannerFadeIn(){
  fadeState = fadeState + 0.1;
  if (fadeState >= 1) {
      	setTimeout(function(){startBannerFadeOut()},5000);
  } else {
      var el = document.getElementById("RotateBanner");
      el.style.opacity = fadeState;
      setTimeout(function(){startBannerFadeIn()},50);
  }

}


function startBannerRotate(){
  var nextIndex = (currentIdx + 1);
  if (nextIndex >= totalNum) {
    nextIndex = 0;
  }
  currentIdx = nextIndex;
  
	var el = document.getElementById("RotateBanner");
	el.innerHTML = createBanner(nextIndex);
	setTimeout(function(){startBannerFadeIn()},50);
}

function startBannerRotateFade(){
  var nextIndex = (currentIdx + 1);
  if (nextIndex >= totalNum) {
    nextIndex = 0;
  }
  currentIdx = nextIndex;

	var el = document.getElementById("RotateBanner");
//  el = $(el);

  var	firstChild = el.childNodes[0];
	var span = document.createElement("span")
	//span = $(span);
	span.innerHTML = createBanner(nextIndex)
	if(firstChild) {
		firstChild.fade({ duration: 0.8 });
		span.hide();
		setTimeout(function(){span.appear(); el.removeChild(el.childNodes[0])}, 700);
	}
	el.appendChild(span);
	setTimeout(function(){startBannerRotateFade()},5000);
}