window.onload = initAllQuizzes;

var initHTML = ["","",""]
var containerCount = [3,3,6,6,6,3];
var containerScore = [5];
var correctCount = [0,3,0,0,0,3];
var containerType = ["drag","checkbox", "drag", "drag", "drag", "checkbox"];

function initAllQuizzes()
{
	for (var i = 0; i < containerCount.length; i++)
	{
		if( containerType[i] == "drag" ) {
			initQuiz(i + 1);
		}
		else if( containerType[i] == "checkbox" ) {
			initCheckboxQuiz( i + 1 );
		}	
	}
}

/**
 * initialises the a checkbox quiz
 **/
function initCheckboxQuiz( containerID ) {
	
	var elem;

	for( var i=0 ; i<containerCount[ containerID-1 ] ; i++ ) {
		
		elem = xGetElementById("c" + containerID + "-click_" + ( i + 1));
		xAddEventListener( elem, "click", fnClick, true );
	
	}
	
	
} // end of function initCheckboxQuix

function initQuiz(containerId)
{
	// INIT SPECIFIC CONTAINER
	initHTML[(containerId - 1)] = xGetElementById("container" + containerId).innerHTML

	for (var i = 0; i < containerCount[(containerId - 1)]; i++)
	{
		var elem;
		
		// Set up drag capability
		elem = xGetElementById("c" + containerId + "-drag_" + ( i + 1));
		xEnableDrag("c" + containerId + "-drag_" + (i + 1), fnDragStart, fnDrag, fnDragEnd);
		elem.initX = xLeft(elem);
		elem.initY = xTop(elem);

		if (containerId == 1)
		{
			// Remove clones from picture
			elem = xGetElementById("c" + containerId + "-drag_" + ( i + 1) + "_clone");
			if (elem)
				document.body.removeChild(elem);
		}
	}
}

function fnClick( action ) {
	
	var containerID;
	var itemID;
	var elem;
	var myEvent;
	
	myEvent = new xEvent( action );
	elem = myEvent.target;
	containerID = elem.id.substring(2, 1);
	itemID = elem.id.substring( elem.id.length - 1 );

	if( itemID == correctCount[ containerID-1 ] ) {
		elem.src = elem.src.replace( "-mark", "-tick" );
		elem.alt = "yes";
	}
	else {
		elem.src = elem.src.replace( "-mark", "-cross" );
		elem.alt = "no";
	}
	
}

function fnDragStart(ele, mdx, mdy)
{
  var container =  ele.offsetParent;
	while (container.parentNode && (container.id.indexOf('container')==-1)) container = container.offsetParent;
	ele.offL = 0;
	ele.offR = 0;
	ele.offT = 0;
	ele.offB = 0;
	ele.bL = xPageX(container)-xPageX(ele);
	ele.bT = xPageY(container)-xPageY(ele);
	ele.bR = ele.bL+xWidth(container)-xWidth(ele);
	ele.bB = ele.bT+xHeight(container)-xHeight(ele);
	ele.style.clear = "left";
	ele.style.zIndex = 10;
}

function fnDrag(ele, mdx, mdy)
{
  ele.offL+=mdx;
  ele.offT+=mdy;
	var x = Math.min(ele.bR,Math.max(ele.bL,ele.offL));
	var y = Math.min(ele.bB,Math.max(ele.bT,ele.offT));

	
	xMoveTo(ele, x, y);
}


function fnDragEnd(ele, mx, my)
{
	var ret;
	var containerId = ele.id.substring(2, 1);
	var xModifier;
	var yModifier;
	var width;
	var height;
	
	ret = fnValidTarget(ele.id, mx, my);

	if (ret == null)
	{
		ele.className = "quiz_drag";
		xSlideTo(ele, ele.initX, ele.initY, 250);
	}
	else
	{
		if (ret.coords)
		{
			var eleID = "question" + containerId;
			var image = xGetElementById( eleID );
			var coords = ret.coords.split(",");
			xDisableDrag(ele);
			var newEle = xGetElementById(ele.id).cloneNode(true); 
			newEle.id = newEle.id + "_clone";
			xMoveTo(newEle, xPageX(image) + parseInt(coords[0])-10, xPageY(image) + parseInt(coords[1]));
			newEle.style.width = parseInt(coords[2]) - parseInt(coords[0]);
			newEle.style.height = ele.style.height;
			newEle.style.position = "absolute";
			newEle.className = "quiz_drop_correct_image";
			var x = document.body.appendChild(newEle);
			ele.style.visibility = "hidden";
			// Centre vertically
			//newEle.style.marginTop = ((parseInt(coords[3]) - parseInt(coords[1])) - xHeight(newEle)) / 2;
		}
		else
		{
			ret.className = "quiz_drop_correct";
			ret.innerHTML = ele.innerHTML;
			xDisableDrag(ele);
			ele.style.visibility = "hidden";
		}
		correctCount[(containerId - 1)]++;
	}

}

function fnValidTarget(id, mx, my)
{
	var elem;
	var ret = null;
	var sep = id.indexOf("_");
	var num = id.substring(sep + 1);
	var dropPrefix = "c" + id.substring(2, 1) + "-"
	var containerID = id.substring(2, 1);
	var eleID = "question" + containerID;
	
	if (containerID == 3 || containerID == 4 || containerID == 5 )
	{
		// CHECK AGAINST MAP ELEMENTS
		// CALCULATE OFFET OF AREA ELEMENT TO THE OWNING IMAGE
		var image = xGetElementById( eleID );
		var imageX = xPageX(image);
		var imageY = xPageY(image);
		var imageWidth = xWidth(image);
		var imageHeight = xHeight(image);
	
		var att = ((IsIE() && parseInt(jQuery.browser.version) < 8) ? "classname" : "class");
		var maps = document.getElementsByTagName("area"); 
		for (var i = 0; i < maps.length; i++)
		{ 
			var myClassname =maps[i].getAttribute(att).substring( 0, 3 );
			
			if( myClassname == dropPrefix ) {
				var map = maps[i]; 
				if ((map.getAttribute(att) != null) && (map.getAttribute(att) != ""))
				{
					var coords = map.coords.split(",");
					
					if (mx >= (parseInt(coords[0]) + imageX) && mx <= (parseInt(coords[2]) + imageX))
					{
						if (my >= (parseInt(coords[1]) + imageY) && my <= (parseInt(coords[3]) + imageY))
						{
							sep = map.getAttribute(att).indexOf("_");
							if (map.getAttribute(att).substring(sep + 1) == num)
							{
								ret = map;
								break;
							}
						}
					}
				}
			}
		} 
	}
	else if(id.substring(2, 1) == 1)
	{
		for (var i = 0; i < containerCount[id.substring(2, 1) - 1]; i++)
		{
			elem = xGetElementById(dropPrefix + "drop_" + ( i + 1));
			if (mx >= xPageX(elem) && mx <= (xPageX(elem) + xWidth(elem)))
			{
				if (my >= xPageY(elem) && my <= (xPageY(elem) + xHeight(elem)))
				{
					sep = elem.id.indexOf("_");
					if (elem.id.substring(sep + 1) == num)
					{
						ret = elem;
					}
				}
			}
		}
	}
	return ret;
}