var imageCount = 0;
var imageShown = false;

/**
 *	fades in an image (banner or question)
 */
function showImage(url, isBanner) {
	var frm1 = document.getElementById("question.iframe1");
	var frm2 = document.getElementById("question.iframe2");
	
	if ((imageCount%2)==0) {
		var oldfrm = frm2;
		var newfrm = frm1;
	} else {
		var oldfrm = frm1;
		var newfrm = frm2;
	}
	
	var oldcontent = document.getElementById(oldfrm.id + ".content");
	var newcontent = document.getElementById(newfrm.id + ".content");
	
	// set url
	if (isBanner) {
		newfrm.className = "banner";
		newfrm.style.zIndex = "2";
		oldfrm.style.zIndex = "1";
		newcontent.style.border = "1px solid #999999";
	} else {
		newfrm.className = "question";
		url = "question.html?url=" + escape(url); // use helper page for question images -> make sure center works
		newcontent.style.border = "none";
	}
	
	changeOpacity(newfrm.id, 0);
	newcontent.src = url;
	
	// fade in
	var totalMs = 500;
	
	if (isBanner) {
		setTimeout("document.getElementById('banner.sidebar').style.visibility = 'visible';", totalMs);
	} else {
		setTimeout("document.getElementById('banner.sidebar').style.visibility = 'hidden';", 0);
	}
	
	for (var i = 0; i <= 10; i++) {
		var t = (i/10) * totalMs;
		setTimeout("changeOpacity('" + newfrm.id + "', " + eval(i*10) + ")", t);
		setTimeout("changeOpacity('" + oldfrm.id + "', " + eval(100 - i*10) + ")", t);
	}
	
	// special gui settings for banners on low res
	if (screen.width <= 1024) {
        if (isBanner) { 
            newfrm.style.marginLeft = "0px";
            document.getElementById('banner.sidebar').style.left = "480px";
            document.getElementById('banner.sidebar').style.marginLeft = "0px";
        } else {
            newfrm.style.marginLeft = "auto";
            document.getElementById('banner.sidebar').style.left = "50%";
            document.getElementById('banner.sidebar').style.marginLeft = "240px";
        }
    } 
	
	// update image count
	imageCount++;
	
	if (!isBanner) {
		// quick-fix: make sure the old page is not displayed any more even if the fadeout did not fully work or the banner 
		// has some script to force it into foreground; reset background-frame to new content too (note that fade-out 
		// will not really work for banner any more, as due to call-sequence and timeouts this is started before banner is fully faded out)
		
		oldfrm.className = "question";
		oldcontent.src = url; 
		oldcontent.style.border = "none";
	}
}
		
function askQuestion(inText) {
	var frm1 = document.getElementById("question.iframe1");
	var frm2 = document.getElementById("question.iframe2");
	
	if ((imageCount%2)==0) {
		var oldfrm = frm2;
		var newfrm = frm1;
	} else {
		var oldfrm = frm1;
		var newfrm = frm2;
	}
	
	var oldcontent = document.getElementById(oldfrm.id + ".content");
	var newcontent = document.getElementById(newfrm.id + ".content");
	
	newfrm.className = "question";
	url = "question_text.html?frage=" + escape(inText); // use helper page for question images -> make sure center works
	newcontent.style.border = "none";
	
	changeOpacity(newfrm.id, 0);
	newcontent.src = url;
	
	// fade in
	for(var i = 0; i <= 10; i++) {
		var t = (i/10) * 500;
		setTimeout("changeOpacity('" + newfrm.id + "', " + eval(i*10) + ")", t);
		setTimeout("changeOpacity('" + oldfrm.id + "', " + eval(100 - i*10) + ")", t);
	}
	
	imageCount++;
}

function startQuestion() {
	cancelQuestionStatus();
	document.getElementById("input.question.question").value = "";
	document.getElementById("input.question.answer").value = "";
	document.getElementById("input.question.hint1").value = "";
	document.getElementById("input.question.hint2").value = "";
	document.getElementById("input.question.hint3").value = "";
	document.getElementById("input.question.category").selectedIndex = 0;
	document.getElementById("input.question.language").selectedIndex = 0;
	document.getElementById("curtain").style.display = "";
	document.getElementById("question").style.display = "";
	document.getElementById("input.question.question").focus();
}

function cancelQuestion() {
	document.getElementById("question").style.display = "none";
	document.getElementById("curtain").style.display = "none";
}

function setQuestionStatus(txt, hideBack) {
	document.getElementById("table.question.input").style.display = "none";
	document.getElementById("table.question.status").style.display = "";
	var x = txt;
	if (!hideBack) x = x + "<br/><br/><a href='javascript:cancelQuestionStatus();'>" + getString("back") + "</a>";
	document.getElementById("td.question.status").innerHTML = x;
}

function cancelQuestionStatus() {
	document.getElementById("table.question.status").style.display = "none";
	document.getElementById("table.question.input").style.display = "";
}

function addQuestion() {
	var sbcat = document.getElementById("input.question.category");
	var sblan = document.getElementById("input.question.language");

	var question = document.getElementById("input.question.question").value.trim();
	var answer = document.getElementById("input.question.answer").value.trim();
	var hint1 = document.getElementById("input.question.hint1").value.trim();
	var hint2 = document.getElementById("input.question.hint2").value.trim();
	var hint3 = document.getElementById("input.question.hint3").value.trim();
	var category = sbcat.options[sbcat.selectedIndex].value;
	var language = sblan.options[sblan.selectedIndex].value;

	var service = new ServiceObject(TRIVIAL_URL);	
	service.addParam ("inQuestion", question); 			
	service.addParam ("inAnswer", answer); 
	service.addParam ("inHint1", hint1); 
	service.addParam ("inHint2", hint2); 
	service.addParam ("inHint3", hint3); 
	service.addParam ("inCategoryId", category); 			
	service.addParam ("inLanguageId", language); 			
	var error = service.call("addTextQuestion");
	if (error) {
		setQuestionStatus(error);
	} else {
		setQuestionStatus(getString("questionadded") + "<br><br><a href='javascript:startQuestion()'>" + getString("questionanother") + "</a>", true);
	}

}