var quizesUrl="http://quizzes.almotanabbi.com";


function Quiz(){

var questionsCount=5;		
var divId=null;
var trackId=1;
var timerCountdown=0;
var theTimer=null;

this.countdown=function(){
	if(timerCountdown==0){
		return;
	}
	timerCountdown--;
	if(timerCountdown<1){
	this.answer(0);
	}else{
		this.initializeTimer();
	}
}


this.initializeTimer=function(){

	document.getElementById("remainingTimeSpan").style.visibility="visible";
	
	if(timerCountdown<9){
		document.getElementById("remainingTimeSpan").style.color="red";
	}
	message=String(timerCountdown)+" ثانية";
	document.getElementById("remainingTimeSpan").innerHTML=message;
	theTimer=window.setTimeout("quiz.countdown()",1000);
}

		
		
this.renderQuestion=function(sequence,countDown,question,options){
	timerCountdown=countDown;

q='<form name="questionForm"><table cellspacing="2" cellpadding="3" class=\"questionTable\">';

q+='			<tr>';
q+='				<td class="questionTD" align="center" colspan="2" style="color:white">';
q+='					سؤال '+sequence+' من '+questionsCount+'';
q+='				</td>';
q+='			</tr>';
q+='			<tr>';
q+='				<td colspan="2" style="padding: 5px;font-size: 16px; font-weight: bold; line-height: 150%; background-color: #FFFFEC; border-width: 1px; border-color: #D6D7DE; border-style: solid">';
q+=					question;
q+='				</td>';
q+='			</tr>';

for(i=0;i<options.length;i++){
q+='			<tr>';
q+='				<td class="optionTD" nowrap="nowrap">';
q+='					<input type="radio" name="optionId" value="'+options[i]['optionId']+'" class="radioInput">';
q+='				</td>';
q+='				<td style="padding:3px;font-weight:normal;font-size: 15px; width: 100%; background-color: #FFFFEC; border-width: 1px; border-color: #D6D7DE; border-style: solid">';
q+=						options[i]['text'];
q+='				</td>';
q+='			</tr>';
}
q+='			<tr>';
q+='				<td colspan="2">';
q+='					<table style="width: 100%">';
q+='						<tr>';
q+='							<td>';
q+='								<span style="text-align: center; visibility: hidden; padding: 3px; white-space: nowrap; height: 20px; width: 50px; background-color: #F7F3F7; color: black; font-size: 13px; border-width: 1px; border-style: solid; border-color: C6C3C6" id="remainingTimeSpan"></span>';
q+='							</td>';
q+='							<td style="width: 100%">';
q+='							</td>';
q+='							<td>';
q+='								<input type="button" value="إرسال الإجابة" onclick="quiz.answer()">';
q+='							</td>';
q+='						</tr>';
q+='					</table>';
q+='				</td>';
q+='			</tr>';

q+='</table></form>';

document.getElementById(divId).innerHTML=q;

	if(sequence>1){
	// Initialise timer at the second question
		this.initializeTimer();
	}


}
this.initialise=function(divId1){
	divId=divId1;
	if(document.getElementById(divId)==null){
	alert("div is not defined");
	}
	
	document.getElementById(divId).className="questionElement";
	this.loadCSS();
	this.startTest1JSON();
}


this.startTest1JSON=function(){
this.QuizesDynamicTag("startTest1JSON.do");
}


this.answer=function(){
timerCountdown=0;
clearTimeout(theTimer);
	selectedValue=0;
	var o=document.questionForm['optionId'];
	for(i=0;i<o.length;i++){
		if(o[i].checked){
			selectedValue=o[i].value;
		}
	}
	this.QuizesDynamicTag("answerTest1QuestionJSON.do?optionId="+selectedValue);
}


	this.endTest=function(score,fullScoreUsersCount){
	r='<table style="width: 100%;;height:200px; font-weight: bold">';
	r+='	<tr>';
	r+='		<td style="height: 20%">';
	r+='		</td>';
	r+='	</tr>';
	r+='	<tr>';
	r+='		<td align="center" valign="middle">';
	r+='			نشكرك على مشاركتك في الإختبار';
	r+='		</td>';
	r+='	</tr>';
	r+='		<tr>';
	r+='			<td align="center">';
	if(score==100){
		r+='					<font color="red"><b>مبروك !! </b> </font>';
	}
	
	r+='				حققت نسبة إجابة <b>Q%</b>'.replace("Q",score);
	r+='				<br/><br/>';
	r+='			</td>';
	r+='		</tr>';
	r+='	<tr>';
	r+='		<td align="center">';
	r+='			عدد المشاركين الذين حققوا نسبة إجابة 100%: <b>Q</b> مشترك'.replace("Q",fullScoreUsersCount);
	r+='			<br />';
	r+='			<br />';
	r+='		</td>';
	r+='	</tr>';
	r+='	<tr>';
	r+='		<td align="center">';
	r+='			<a href="javascript:quiz.startTest1JSON()" style="color:yellow;font-size:16px">';
	r+='				إضغط هنا للمشاركة في الإختبار مرة أخرى';
	r+='			</a>';
	r+='		</td>';
	r+='	</tr>';
	r+='</table>';
	document.getElementById(divId).innerHTML=r;
	
	}



	this.loadCSS=function (){
			 var head = document.getElementsByTagName("head").item(0);
		// Create new Element
		scriptElement = document.createElement("link");
		scriptElement.id="jsonCSS";
	
	    scriptElement.setAttribute("rel", "stylesheet");
	    scriptElement.setAttribute("type", "text/css");
	    
	    scriptElement.setAttribute("href", quizesUrl+"/style_json.css?r="+Math.random());
	    head.appendChild(scriptElement);

	}
	
	 this.QuizesDynamicTag=function(action)
	 {
		 var head = document.getElementsByTagName("head").item(0);
		 var scriptElement = null;
		 scriptElement =	document.getElementById("quizes");
		 if(scriptElement != null)
		 {
		 // Remove existing one
		 scriptElement.parentNode.removeChild(scriptElement);
	     }
		// Create new Element
		scriptElement = document.createElement("script");
		scriptElement.id="quizes";
	
	    scriptElement.setAttribute("type", "text/javascript");
	    if(action.indexOf('?')==-1){
		    action+="?trackId="+trackId+"&r="+Math.random();
	    }else{
	       action+="&trackId="+trackId+"&r="+Math.random();
	    }
	    
	    scriptElement.setAttribute("src", quizesUrl+"/"+action);
	    head.appendChild(scriptElement);
     }

}     
     

quiz=new Quiz();  


function initialiseQuiz(divId){
quiz.initialise(divId);
}