var languages=new Object();
var tid;
var pid;
var inTO;
var outTO;
var completeTO;

var myLoadImg = document.createElement("img");
myLoadImg.src = "/images/bigrotation2.gif";
myLoadImg.alt = "Loading...";
myLoadImg.style.border = "0px solid white";
myLoadImg.style.backgroundColor = "white"; 
myLoadImg.style.verticalAlign = "middle"; 

var myDiv = document.createElement("div");
myDiv.className = "loadBox";
myDiv.appendChild(myLoadImg);

function replaceImage(puzzleID, newLanguage) {
	var oldSrc = document.getElementById("Image"+puzzleID).src;
	var srcArray = oldSrc.split("-");
	var langArray = srcArray[0].split("/");
	var oldLanguage = langArray[langArray.length-1].substr(0,2);
	
	var srcArray = srcArray[1].split("/");
	
	// If 
	//		a load box already exists, 
	//		language has not changed, 
	// do nothing
	if ((oldLanguage.toLowerCase() != newLanguage.toLowerCase()) && (document.getElementById("loadBox"+puzzleID) == null)) {
		clearTimeout(outTO);
		pid = puzzleID;
		//var marginTop = parseInt((document.getElementById("Image"+puzzleID).height - 32.0)/2.0);
		
		// Set temporary load box
		//myLoadImg.style.margin = marginTop.toString() + "px 0px 0px 0px;";
		//alert("marginTop: " + marginTop + ", myLoadImg.style.margin: " + myLoadImg.style.margin);
		myDiv.style.width = (document.getElementById("Image"+puzzleID).width+2) + "px";
		myDiv.style.height = (document.getElementById("Image"+puzzleID).height+5+32)/2.0 + "px";
		myDiv.style.paddingTop = parseInt((document.getElementById("Image"+puzzleID).height-32)/2.0) + "px";
		myDiv.id = "loadBox"+puzzleID;
		document.getElementById("Container"+puzzleID).appendChild(myDiv);
		
		// Fade in load box
		fadeIn("loadBox"+puzzleID,0);
		
		// Replace image source
		document.getElementById("Image"+puzzleID).src = urlPrefix + "/" + newLanguage + " - " + languages[newLanguage] + "/" + srcArray[1] + "/" + srcArray[2] + "/" + srcArray[3] + "-" + languages[newLanguage] + ".jpg";
		
		// Set handler when image loads
		document.getElementById("Image"+puzzleID).onload = checkLoadBoxComplete;
		
		completeTO = setTimeout("removeLoadBox()",60000); // Backup removal after 60 seconds
	}
}
function fadeIn(objId,opacity) {
	if (opacity <= 80) {
		setOpacity(document.getElementById(objId), opacity);
		opacity += 10;
		inTO = setTimeout("fadeIn(\'"+objId+"\',"+opacity+")", 50);
	}
}
function fadeOut(objId,opacity) {
	//alert("objId: " + objId + ", opacity: " + opacity + ", object: " + document.getElementById(objId));
	if (opacity > 0) {
		setOpacity(document.getElementById(objId), opacity);
		opacity -= 10;
		//setTimeout("doNothing()",50);
		outTO = setTimeout("fadeOut(\'"+objId+"\',"+opacity+")", 50);
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}
function checkLoadBoxComplete(evt) {
	clearTimeout(completeTO);
	clearTimeout(inTO);
	fadeOut("loadBox"+pid,80);
	completeTO = setTimeout("removeLoadBox()",1000);
}
function removeLoadBox() {
	document.getElementById("Container"+pid).removeChild(document.getElementById("loadBox"+pid));
}