var numFrames = 4;

var stage;
var rotateInterval;

var inInterval;
var outInterval;
var deltaOpacity = .05;
var fadeTiming = 25;
var frameTiming = 10000;

var frameIndex;
var currentFrame;
var previousFrame;

function initCycle() {
 frameIndex = 1;
 currentFrame = document.getElementById("frame_" + frameIndex);
 frameNav = document.getElementById("frame_nav");

 setOpacity(currentFrame, 0);
 currentFrame.style.zIndex = 1;
 currentFrame.style.visibility = "visible";
 frameNav.style.visibility = "visible";
 
 inInterval = setInterval("fadeIn(currentFrame)", fadeTiming); 
 rotateInterval = setInterval("changeFrames()", frameTiming);
}

function changeFrames(newFrame) {
 var oldIndex = frameIndex;
 
 if (!newFrame || newFrame == "next") {
  nextIndex();
 } else if (newFrame == "previous") {
  previousIndex();
 } else if (newFrame == frameIndex) {
  return;
 } else {
  frameIndex = newFrame;
 }
 
 if (previousFrame && outInterval) {
  clearInterval(outInterval);
  outInterval = null;
  setOpacity(previousFrame, 0);
  previousFrame.style.visibility = "hidden";
 }
 
 if (inInterval) {
  clearInterval(inInterval);
  inInterval = null;
  setOpacity(currentFrame, 1);
 }
 
 previousFrame = currentFrame;
 currentFrame = document.getElementById("frame_" + frameIndex);
 
 previousFrame.style.zIndex = 0;
 currentFrame.style.zIndex = 1;
 currentFrame.style.visibility = "visible";
 
 inInterval = setInterval("fadeIn(currentFrame)", fadeTiming);
 outInterval = setInterval("fadeOut(previousFrame)", fadeTiming);
 
 if (newFrame) {
  clearInterval(rotateInterval);
  rotateInterval = setInterval("changeFrames()", frameTiming);
 }
 
 document.getElementById("frame_nav_" + oldIndex).src = "/Portals/_default/Skins/tql_templates/images/home/frames/" + oldIndex + ".gif";
 document.getElementById("frame_nav_" + frameIndex).src = "/Portals/_default/Skins/tql_templates/images/home/frames/" + frameIndex + "_circle.gif";
}

function nextIndex() {
 ++frameIndex;
 
 if (frameIndex > numFrames) {
  frameIndex = 1;
 }
}

function previousIndex() {
 --frameIndex;
 
 if (frameIndex < 1) {
  frameIndex = numFrames;
 }
}

function fadeIn(targetFrame) {
 var opacity = getOpacity(targetFrame);
 opacity *= 1;
 
 if (opacity >= 1) {
  clearInterval(inInterval);
  inInterval = null;
 }
 
 else {
  setOpacity(targetFrame, opacity + deltaOpacity);
 }
}

function fadeOut(targetFrame) {
 var opacity = getOpacity(targetFrame);
 opacity *= 1;
 
 if (opacity <= 0) {
  clearInterval(outInterval);
  outInterval = null;
  targetFrame.style.visibility = "hidden";
 }
 
 else {
  setOpacity(targetFrame, opacity - deltaOpacity);
 }
}

function setOpacity(targetFrame, opacity) {
 targetFrame.style.filter = "alpha(opacity=" + (100*opacity) + ")";
 targetFrame.style.opacity = opacity;
 targetFrame.style.MozOpacity = opacity;
}

function getOpacity(targetFrame) {
 if (targetFrame.style.opacity) {
  return targetFrame.style.opacity;
 }
 
 else {
  return targetFrame.style.MozOpacity;
 }
}