/*************
dragdrop.js
This drag & drop script is used for dragging a word out of a sentence.
*************/
insertStyleSheet("/lls/assets/styles/dragdrop.css");

/** correct and incorrect is added in global.js also **/
var correct=new Image(25,25);
correct.src="/lls/llonline/assets/images/correct.gif";
var incorrect=new Image(25,25);
incorrect.src="/lls/llonline/assets/images/incorrect.gif";

var evt=new universalEvent();
if (typeof(lls) == "undefined") var lls = new Object();
if (typeof(lls.dhtml) == "undefined") lls.dhtml = new Object();

lls.dhtml.dragObject2 = function(oid,parentObj) {
	if (te=document.getElementById(oid)) {
		this.type=2;
		this.id=oid;
		this.ref=te;
		this.parentObj = (arguments.length > 1)? parentObj : null;
		this.x=null;
		this.y=null;
		this.org_x=null;
		this.org_y=null;
		this.org_m_x=null;
		this.org_m_y=null;
		this.moveSpan=null;
		this.dropped=false;		//dropped is true if dnd object was placed ok.
		this.dragState=false;	// false=dropped, true=dragging
		this.dndIdent=parseInt(this.id.substring(0,this.id.lastIndexOf("-")).substr(this.id.lastIndexOf("-")+1));
		this.spIdent=parseInt(this.id.substr(this.id.lastIndexOf("-")+1));

		//setup look & feel of object
		this.ref.style.cursor="crosshair";
		this.ref.onmousedown=this.pick;
		this.ref.onmouseup=this.drop;
		this.ref.onclick=this.cancelEvent;
		this.ref.ondblclick=this.cancelEvent;

		//get coords of target sentence for comparison when dragging over.
		this.container = document.getElementById("dnd2-container-" + this.ident);
		this.bin = this.parentObj.bin;
		this.bin_tl_x = getTotalOffset(this.bin,"left");
		this.bin_tl_y = getTotalOffset(this.bin,"top");
		this.bin_br_x = this.bin_tl_x + this.bin.offsetWidth;
		this.bin_br_y = this.bin_tl_y + this.bin.offsetHeight;
		

		this.ref.style.left=getTotalOffset(this.ref,"left")+"px";
		this.ref.style.top=getTotalOffset(this.ref,"top")+"px";
		this.centreX = getTotalOffset(this.ref,"left") + (this.ref.offsetWidth/2);
		this.centreY = getTotalOffset(this.ref,"top") + (this.ref.offsetHeight/2);

		//create space on page where Div was when in static position.
		var temp;
		temp = this.ref.cloneNode(true);
		this.ref.parentNode.insertBefore(temp,this.ref);
		temp.id="";
		temp.style.visibility="hidden";
		temp.style.position="static";
		this.startPos = temp;
		this.ref.style.position="absolute";

	}
}

lls.dhtml.dragObject2.prototype.reset = function() {
	//if (this.moveSpan.parentNode) this.moveSpan.parentNode.removeChild(this.moveSpan);
	//this.parentObj.feedbackTick.src = "assets/images/spacer.gif";
	this.ref.style.left=getTotalOffset(this.startPos,"left")+"px";
	this.ref.style.top=getTotalOffset(this.startPos,"top")+"px";
	this.centreX = getTotalOffset(this.ref,"left") + (this.ref.offsetWidth/2);
	this.centreY = getTotalOffset(this.ref,"top") + (this.ref.offsetHeight/2);
	this.ref.style.display="block";
	this.dropped=false;
}

lls.dhtml.dragObject2.prototype.pick = function(e) {
	evt.refresh(e);
	evt.cancel();
	var dnd = findDNDById2(evt.evtSrcId);
	dnd.org_m_x = evt.mouseX;
	dnd.org_m_y = evt.mouseY;
	dnd.org_x = parseInt(dnd.ref.style.left);
	dnd.org_y = parseInt(dnd.ref.style.top);
	dnd.dragState=true;
	currentDragged = dnd;
}

var drag = function(e) {
	if (!currentDragged) return false;
	evt.cancel();
	evt.refresh(e);
	var dnd = currentDragged,hs;
	if (!dnd.dragState) return false;	//cancel if not dragging
	//alert(dnd.ref.style.left);
	dnd.ref.style.left = (dnd.org_x + (evt.mouseX-dnd.org_m_x)) + "px";
	dnd.ref.style.top = (dnd.org_y + (evt.mouseY-dnd.org_m_y)) + "px";
	dnd.centreX = getTotalOffset(dnd.ref,"left") + (dnd.ref.offsetWidth/2);
	dnd.centreY = getTotalOffset(dnd.ref,"top") + (dnd.ref.offsetHeight/2);
	if (dnd.type == 1) {
		if (checkOverlap(dnd)) {
			if (hs=findHoverSpan(dnd)) {
				pointer.style.display="block";
				pointer.style.top = (getTotalOffset(hs,"top") + hs.offsetHeight) + "px";
				pointer.style.left = (getTotalOffset(hs,"left") + (hs.offsetWidth-7)) + "px";
			}
			else pointer.style.display="none";
		}
		else pointer.style.display="none";
	}
	else if (dnd.type == 2) {
		if (checkOverlap2(dnd)) {
			dnd.bin.style.border="solid 1px red";
		}
		else dnd.bin.style.border="solid 1px white";
	}
}

lls.dhtml.dragObject2.prototype.drop = function(e) {
	evt.refresh(e);
	var dnd = findDNDById2(evt.evtSrcId);
	if (!dnd) dnd = currentDragged;
	if (!dnd.dragState) return false;	//cancel if not dragging
	evt.cancel();
	dnd.ref.style.color="#000";
	if (checkOverlap2(dnd)) {
		dnd.bin.src="/lls/llonline/assets/images/bin1.jpg";
		dnd.ref.style.display="none";
		dnd.dropped=true;
		dnd.parentObj.evaluate(dnd.spIdent);
	}
	else dnd.returnDrag();
	dnd.bin.style.border="solid 1px white";
	dnd.dragState=false;
	currentDragged = null;
}

lls.dhtml.dragObject2.prototype.returnDrag = function() {
	this.ref.style.left = this.org_x + "px";
	this.ref.style.top = this.org_y + "px";
}

lls.dhtml.dragObject2.prototype.cancelEvent = function(e) {
	evt.cancel();
	// now unselect text if anything has been selected by (double)clicking.
	if (isIE) document.selection.empty();
	else if (isGecko) window.getSelection().removeAllRanges();
}

lls.dhtml.dragObject2.prototype.setupSentence = function() {
	var words = this.dndSen.firstChild.nodeValue.split(" "),i,sp;
	removeChildElements(this.dndSen);
	for(i=0;i<words.length; i++) {
		sp = document.createElement("span");
		sp.appendChild(document.createTextNode(words[i] + " "));
		sp.id="dnd-" + this.ident + "-sp-" + i;
		this.dndSen.appendChild(sp);
	}
	sp=document.createElement("sp");
	sp.appendChild(document.createTextNode(this.ref.firstChild.nodeValue + " "));
	sp=this.dndSen.appendChild(sp);
	sp.style.display="none";
	sp.id="moveSpan-"+this.ident;
	this.moveSpan=sp;

	var img = document.createElement("img");
	img.setAttribute("src","/lls/llonline/assets/images/spacer.gif");
	img.width=25;
	img.height=25;
	this.feedbackTick = img;
	this.dndSen.appendChild(img);
}

var dragObject2 = lls.dhtml.dragObject2;
var currentDragged = null;

var rePositionDrags = function() {
	var darray;
	if (dints) darray = dints;
	else if (dobjs) darray = dobjs;
	
	var i;
	for(i=0;i<darray.length;i++) {
		if (dobjs) {
			if (!dobjs[i].dropped) dobjs[i].reset();
		}
		else if (dints) {
			for(j=0;j<dints[i].dobjs.length;j++) {
				if (!dints[i].dobjs[j].dropped) dints[i].dobjs[j].reset();
			}
		}
	}
}

var dints=new Array();
var createDNDs2 = function() {
	var i,d,j,sps,ident,temp,container,resetBut,ansBut,bin;
	for(i=0; i<arguments.length; i++) {
		if(d=document.getElementById(arguments[i])) {
			dints[i] = new dragInt2(arguments[i],i);
		}
	}
	document.onmouseup=cancelDrags;
	document.onmousemove=drag;
	window.onresize=rePositionDrags;
}

var findDNDById2 = function(oid) {
	var i,j;
	for(i=0;i<dints.length;i++) {
		for(j=0;j<dints[i].dobjs.length;j++) {
			if (dints[i].dobjs[j].id == oid) return dints[i].dobjs[j];
		}
	}
	return null;
}

var cancelDrags = function() {
	var darray;
	if (dints) darray = dints;
	else if (dobjs) darray = dobjs;
	var i;
	for(i=0;i<darray.length;i++) {
		darray[i].dragState=false;
	}
}

function getTotalOffset(htmlElement,dir) {
	var tot=0,prop="offset"+dir.substr(0,1).toUpperCase()+dir.substr(1).toLowerCase();
	if (typeof(eval("htmlElement." + prop)) == "number") {
		while (htmlElement.offsetParent) {
			tot += eval("htmlElement." + prop);
			htmlElement = htmlElement.offsetParent;
		}
		return tot;
	}
	else return null;
}

function checkOverlap2(dnd) {
	if (!dnd.bin) return false;
	if ((dnd.centreX < dnd.bin_br_x && dnd.centreX > dnd.bin_tl_x) && (dnd.centreY > dnd.bin_tl_y && dnd.centreY < dnd.bin_br_y)) {
		return true;
	}
	else return false;
}

lls.dhtml.dragInt2 = function (oid,intsArrPos) {
	var sps,img,d;
	if (d=document.getElementById(oid)) {
		this.ref = d;
		this.id = oid;
		this.ident = parseInt(d.id.substr(d.id.lastIndexOf("-")+1));
		this.intsArrPos = intsArrPos;
		sps=d.firstChild.nodeValue.split(" ");
		this.dobjs = new Array(sps.length);
		d.removeChild(d.firstChild);
		this.container = document.getElementById("dnd2-container-" + this.ident);
		this.correctPos=parseInt(document.getElementById("dnd2-pos-"+this.ident).firstChild.nodeValue);
		bin = document.createElement("img");
		insertAfter(bin,this.container);
		//bin.width=21;
		//bin.height=24;
		bin.width=26;
		bin.height=30;
		bin.id="dnd-bin-" + this.ident;
		this.bin = document.getElementById("dnd-bin-" + this.ident);
		this.bin.src="/lls/llonline/assets/images/bin2.jpg";
		this.bin.className="theBin";
		//this.bin.style.backgroundColor="#f44";
		
		this.resetBut = isIE?document.createElement("<input onclick=\"dints[" + this.intsArrPos + "].reset();\"'>"):document.createElement("input");
		this.resetBut.setAttribute("type","button");
		this.resetBut.setAttribute("value","Reset");
		insertAfter(this.resetBut,this.bin);
		if (isGecko) this.resetBut.setAttribute("onclick","dints[" + this.intsArrPos + "].reset();");
		this.ansBut = isIE?document.createElement("<input onclick=\"dints[" + this.intsArrPos + "].answer();\"'>"):document.createElement("input");
		this.ansBut.setAttribute("type","button");
		this.ansBut.setAttribute("value","Show answer");
		insertAfter(this.ansBut,this.resetBut);
		if (isGecko) this.ansBut.setAttribute("onclick","dints[" + this.intsArrPos + "].answer();");
		var img = document.createElement("img");
		img.setAttribute("src","/lls/llonline/assets/images/spacer.gif");
		img.width=25;
		img.height=25;
		this.feedbackTick = img;
		this.ref.parentNode.parentNode.appendChild(img);
		for (j=0;j<sps.length;j++) {
			temp = sps[j];
			sps[j] = document.createElement("span");
			sps[j].appendChild(document.createTextNode(temp));
			d.appendChild(sps[j]);
			if (j != (sps.length-1)) d.appendChild(document.createTextNode(" "));
			sps[j].id="dd-sp-" + this.ident + "-" + j;
			this.dobjs[j] = new dragObject2(sps[j].id,this);
		}
	}
	else alert("LLS dhtml: Drag object '" + oid + "' not found. Drag and Drop creation failed");
}

lls.dhtml.dragInt2.prototype.reset = function() {
	var i;
	
	for(i=0;i<this.dobjs.length; i++) {
		if (this.dobjs[i].dropped) this.dobjs[i].reset();
	}
	this.feedbackTick.src="/lls/llonline/assets/images/spacer.gif";
	this.bin.src="/lls/llonline/assets/images/bin2.jpg";
	this.bin.style.border="solid 1px white";
}

lls.dhtml.dragInt2.prototype.evaluate = function(span) {
	var i;
	if (this.dobjs[span].dropped && (span+1) == this.correctPos) this.feedbackTick.src=correct.src;
	else this.feedbackTick.src=incorrect.src;
}

lls.dhtml.dragInt2.prototype.answer = function() {
	var i;
	this.reset();
	goodDnd = this.dobjs[this.correctPos-1];
	goodDnd.ref.style.display="none";
	goodDnd.dropped=true;
	this.feedbackTick.src=correct.src;
	this.bin.src="/lls/llonline/assets/images/bin1.jpg";
	this.bin.style.border="solid 1px white";
}

var dragInt2 = lls.dhtml.dragInt2;