/**
 * ...
 * @author Nityanand Ojha
 */
 

var displayText = "<p><b>Answers</b><br><br> 1 - b &emsp;  2 - a  <br> <br>  3 - a  &emsp;  4 - c <br> <br>  5 - b</p>";

var dialogBox;
var dialogBoxWidth = 300;
var dialogBoxHeight = 160;

var convPrac = document.getElementById("convPrac");
convPrac.addEventListener("click", openConvPractPopup);

function openConvPractPopup(e){
	e.target.style.pointerEvents = "none";
	e.target.style.opacity = 0.5;
	
	dialogBox = document.createElement("div");
	dialogBox.style.position = "absolute";
	dialogBox.style.top = 368+"px";
	dialogBox.style.left = 46+"px";
	dialogBox.style.width = dialogBoxWidth+"px";
	dialogBox.style.height = dialogBoxHeight+"px";
	dialogBox.style.backgroundColor = "#fff";
	dialogBox.className = "dialogBox";
	
	document.getElementById("main").appendChild(dialogBox);
	
	var dialogBoxTxt = document.createElement("div");
	dialogBox.appendChild(dialogBoxTxt);
	dialogBoxTxt.innerHTML = displayText;
	dialogBoxTxt.style.width = dialogBoxWidth-50+"px";
	dialogBoxTxt.style.height = dialogBoxHeight+"px";
	dialogBoxTxt.style.fontSize = 18+"px";
	dialogBoxTxt.style.lineHeight = "17px";
	dialogBoxTxt.style.margin = '0px 0 0 5px';
	
	var closeImg = new Image(50, 50);
	closeImg.style.position = "absolute";
	closeImg.src = "Assets/images/xclose.png";
	dialogBox.appendChild(closeImg);
	closeImg.style.cursor = "pointer";
	closeImg.style.top = -2+"px";
	closeImg.style.left = dialogBox.offsetWidth-closeImg.offsetWidth+"px";
	closeImg.addEventListener("click", onCloseClicked);
}

function onCloseClicked(e){
	convPrac.style.pointerEvents = "auto";
	convPrac.style.opacity = 1;
	
	document.getElementById("main").removeChild(dialogBox);
	dialogBox = null;
}