//tells whether or not to swap
var theInterval = null;
var rotater = null;

var theImage = null;
var theTitle = null;
var theLink = null;

var imageArr = null;
var nameArr = null;
var linkArr = null;

//fade vars
var opacity = 100;
var fadePerc = 5; //the higher, the faster the fade
var direction = "out";

//current picture index
var curPic = -1;

function init() {
	theImage = document.getElementById("recipeRotaterImage");
	theTitle = document.getElementById("recipeRotaterTitle");
	theLink = document.getElementById("recipeRotaterLink");
	
	rotateImages();
	
	rotater = setInterval('rotateImages()', 5000);
}

function rotateImages() {
	if (curPic == (imageArr.length - 1))
		curPic = 0;
	else
		curPic++;
		
	theInterval = setInterval('fadePic()', 1);
}

function changePic(image, name, link) {
	theImage.src = image;
	theTitle.innerHTML = name;
	theLink.href = link;
}

function fadePic() {
	if (direction == "out") {
		changeOpacity(theImage, opacity);
		opacity -= fadePerc;
	}
	if (direction == "out" && opacity <= 0) {
		//load new image and change direction
		changePic(imageArr[curPic].src, nameArr[curPic], linkArr[curPic]);
		direction = "in";
		opacity = 0;
	}
	if (direction == "in") {
		opacity += fadePerc;
		changeOpacity(theImage, opacity);
		if (opacity >= 99) {
			clearInterval(theInterval);
			direction = "out";
		}
	}
}

function changeOpacity(obj, opacity) {
	obj.style.opacity = (opacity / 100);
	obj.style.MozOpacity = (opacity / 100);
	obj.style.KhtmlOpacity = (opacity / 100);
	obj.style.filter = "alpha(opacity=" + opacity + ")";
}