// JavaScript Document - for card-dragging (nons_drag, quest1, tener, etc)
//<![CDATA[
function Client(){//object, sniffer
	this.min = false; if (document.getElementById){this.min = true;};
	this.ua = navigator.userAgent; 	this.name = navigator.appName; this.ver = navigator.appVersion;  
	this.mac = (this.ver.indexOf('Mac') != -1);
	this.win = (this.ver.indexOf('Windows') != -1);
	this.gecko = (this.ua.indexOf('Gecko') > 1);
	if (this.gecko){	this.geckoVer = parseInt(this.ua.substring(this.ua.indexOf('Gecko')+6, this.ua.length));
		if (this.geckoVer < 20020000){this.min = false;}}
	this.firebird = (this.ua.indexOf('Firebird') > 1);
	this.safari = (this.ua.indexOf('Safari') > 1);
	if (this.safari){this.gecko = false;}
	this.ie = (this.ua.indexOf('MSIE') > 0);
	if (this.ie){this.ieVer = parseFloat(this.ua.substring(this.ua.indexOf('MSIE')+5, this.ua.length));
		if (this.ieVer < 5.5){this.min = false;}	}
	this.opera = (this.ua.indexOf('Opera') > -1); 
	if (this.opera){	this.operaVer = parseFloat(this.ua.substring(this.ua.indexOf('Opera')+6, this.ua.length));
		if (this.operaVer < 7.04){this.min = false;}	}
	if (this.min == false){alert('Your browser may not be able to handle this page.');}
	this.ie5mac = (this.ie&&this.mac&&(this.ieVer<6));
}
var C = new Client();

var topZ = 1000;
function VMen(fbk){var Output = fbk + '<br /><br />';
	document.getElementById('Mensaj').innerHTML = Output;
	var FDiv = document.getElementById('fbkDiv');
	topZ++; 	with(FDiv.style){zIndex = topZ; top = AltoYScroll(5) + 'px'; display = 'block';}
}

function NoVerM(){document.getElementById('fbkDiv').style.display = 'none';}
//DIMENSIONS
function PageDim(){//Get the page width and height
	this.W = 0;	this.H = 0;
	this.W = document.getElementsByTagName('body')[0].clientWidth;
	this.H = document.getElementsByTagName('body')[0].clientHeight;}
var pg = null;
function GetScrollTop(){
	if (document.documentElement && document.documentElement.scrollTop){return document.documentElement.scrollTop;}
	else{if (document.body){return document.body.scrollTop;}		else{return window.pageYOffset;}	}}
function Laltura(){	if (window.innerHeight){return window.innerHeight;}
	else{return document.getElementsByTagName('body')[0].clientHeight;}}
function AltoYScroll(TopPercent){var T = Math.floor(Laltura() * (TopPercent/100));	return GetScrollTop() + T; }

function Shuffle(InArray){
	var Num;	var Temp = new Array();	var Len = InArray.length;	var j = Len;
	for (var i=0; i<Len; i++){Temp[i] = InArray[i];}
	for (i=0; i<Len; i++){	Num = Math.floor(j  *  Math.random());		InArray[i] = Temp[Num];
		for (var k=Num; k < (j-1); k++) {Temp[k] = Temp[k+1];}
		j--;}
	return InArray;}

function Card(ID, OverlapTolerance){
	this.elm=document.getElementById(ID);
	this.name=ID;	this.css=this.elm.style;
	this.elm.style.left = 0 +'px';	this.elm.style.top = 0 +'px';
	this.HomeL = 0;	this.HomeT = 0;
	this.tag=-1;	this.index=-1;
	this.OverlapTolerance = OverlapTolerance;
}

function CardGetL(){return parseInt(this.css.left)}Card.prototype.GetL=CardGetL;
function CardGetT(){return parseInt(this.css.top)}Card.prototype.GetT=CardGetT;
function CardGetW(){return parseInt(this.elm.offsetWidth)}Card.prototype.GetW=CardGetW;
function CardGetH(){return parseInt(this.elm.offsetHeight)}Card.prototype.GetH=CardGetH;
function CardGetB(){return this.GetT()+this.GetH()}Card.prototype.GetB=CardGetB;
function CardGetR(){return this.GetL()+this.GetW()}Card.prototype.GetR=CardGetR;
function CardSetL(NewL){this.css.left = NewL+'px'}Card.prototype.SetL=CardSetL;
function CardSetT(NewT){this.css.top = NewT+'px'}Card.prototype.SetT=CardSetT;
function CardSetW(NewW){this.css.width = NewW+'px'}Card.prototype.SetW=CardSetW;
function CardSetH(NewH){this.css.height = NewH+'px'}Card.prototype.SetH=CardSetH;

function CardInside(X,Y){	var Result=false;
	if(X>=this.GetL()){if(X<=this.GetR()){if(Y>=this.GetT()){if(Y<=this.GetB()){Result=true;}}}}
	return Result;} Card.prototype.Inside=CardInside;

function CardSwapColours(){	var c=this.css.backgroundColor;	this.css.backgroundColor=this.css.color; 	this.css.color=c;}
Card.prototype.SwapColours=CardSwapColours;
function CardHighlight(){ this.css.backgroundColor='#006699'; this.css.color='#FFFFFF';} //colors of card when grabbed
Card.prototype.Highlight=CardHighlight;
function CardUnhighlight(){ this.css.backgroundColor='#CCCCFF';	this.css.color='#000000';}
Card.prototype.Unhighlight=CardUnhighlight;

function CardOverlap(OtherCard){
	var smR=(this.GetR()<(OtherCard.GetR()+this.OverlapTolerance))? this.GetR(): (OtherCard.GetR()+this.OverlapTolerance);
	var lgL=(this.GetL()>OtherCard.GetL())? this.GetL(): OtherCard.GetL();
	var HDim=smR-lgL;	if (HDim<1){return 0;}
	var smB=(this.GetB()<OtherCard.GetB())? this.GetB(): OtherCard.GetB();
	var lgT=(this.GetT()>OtherCard.GetT())? this.GetT(): OtherCard.GetT();
	var VDim=smB-lgT;	if (VDim<1){return 0;}
	return (HDim*VDim);}
Card.prototype.Overlap=CardOverlap;
function CardDockToR(OtherCard){	this.SetL(OtherCard.GetR() + 5);	this.SetT(OtherCard.GetT());}
Card.prototype.DockToR=CardDockToR;
function CardSetHome(){	this.HomeL=this.GetL();	this.HomeT=this.GetT();}
Card.prototype.SetHome=CardSetHome;
function CardGoHome(){	this.SetL(this.HomeL);	this.SetT(this.HomeT);}
Card.prototype.GoHome=CardGoHome;

function doDrag(e) {
	if (CurrDrag == -1) {return};
	if (C.ie){var Ev = window.event}else{var Ev = e}
	var difX = Ev.clientX-window.lastX; 	var difY = Ev.clientY-window.lastY; 
	var newX = DC[CurrDrag].GetL()+difX; 	var newY = DC[CurrDrag].GetT()+difY; 
	DC[CurrDrag].SetL(newX); 	DC[CurrDrag].SetT(newY);
	window.lastX = Ev.clientX; 	window.lastY = Ev.clientY; 
	return false;} 

function beginDrag(e, DragNum) { 
	CurrDrag = DragNum;
	if (C.ie){		var Ev = window.event;	document.onmousemove=doDrag; document.onmouseup=endDrag; }
	else{ var Ev = e; 	window.onmousemove=doDrag; window.onmouseup=endDrag;	} 
	DC[CurrDrag].Highlight();	topZ++;
	DC[CurrDrag].css.zIndex = topZ;
	window.lastX=Ev.clientX; 	window.lastY=Ev.clientY;
	return false;  } 

function endDrag(e) { 
	if (CurrDrag == -1) {return};
	DC[CurrDrag].Unhighlight();
	if (C.ie){document.onmousemove=null}else{window.onmousemove=null;}
	onEndDrag();		CurrDrag = -1;
	return true; } 

function onEndDrag(){//Is it dropped on any of the fixed cards?
	var Docked = false;
	var DropTarget = DroppedOnFixed(CurrDrag);
	if (DropTarget > -1){//If so, send home any card that is currently docked there
		for (var i=0; i<DC.length; i++){	if (DC[i].tag == DropTarget+1){	DC[i].GoHome();	DC[i].tag = 0;		D[i][2] = 0;	}	}
//Dock the dropped card
		DC[CurrDrag].DockToR(FC[DropTarget]);
		D[CurrDrag][2] = F[DropTarget][1];		DC[CurrDrag].tag = DropTarget+1;
		Docked = true; }//aqui podria meter VerifDrag() modificado para evitar presionar el boton verificar
	if (Docked == false){DC[CurrDrag].GoHome();		DC[CurrDrag].tag = 0;		D[CurrDrag][2] = 0;}
} 

function DroppedOnFixed(DNum){
	var Result = -1;	var OverlapArea = 0;	var Temp = 0;
	for (var i=0; i<FC.length; i++){	Temp = DC[DNum].Overlap(FC[i]);
		if (Temp > OverlapArea){	OverlapArea = Temp;		Result = i;}
	}
	return Result;}

function StartUp(){
	pg = new PageDim();
	DragTop = document.getElementById('arriba').offsetHeight + document.getElementById('arriba').offsetTop + 15;
	if (ShuffleQs == true){F = Shuffle(F);}//Shuffle left items
	D = Shuffle(D);//Shuffle items on the right
	var CurrTop = DragTop;	var TempInt = 0;	var DropHome = 0;	var Widest = 0;	var CardContent = '';
	for (var i=0; i<F.length; i++){
		CardContent = F[i][0];		FC[i] = new Card('F' + i, 10);		FC[i].elm.innerHTML = CardContent; 
		if (FC[i].GetW() > Widest){Widest = FC[i].GetW();}
	}
	if (Widest > DragWidth){Widest = DragWidth;}
	CurrTop = DragTop;
	DragWidth = Math.floor((DivWidth-Widest)/2) - 24;
	RightColPos = DivWidth + LeftColPos - (DragWidth + 14);
	var Highest = 0;	var WidestRight = 0;
	for (i=0; i<D.length; i++){
		DC[i] = new Card('D' + i, 10);
		CardContent = D[i][0];		DC[i].elm.innerHTML = CardContent; 
		if (DC[i].GetW() > DragWidth){DC[i].SetW(DragWidth);}
		with(DC[i].css){cursor = 'move';		backgroundColor = 'yellow';		color = '#000000';}
		TempInt = DC[i].GetH();
		if (TempInt > Highest){Highest = TempInt;}
		TempInt = DC[i].GetW();
		if (TempInt > WidestRight){WidestRight = TempInt;}
	}
	var HeightToSet = Highest;
	if (C.gecko||C.ie5mac){HeightToSet -= 12;}
	var WidthToSet = WidestRight;
	if (C.gecko||C.ie5mac){WidthToSet -= 12;}
	for (i=0; i<D.length; i++){
		DC[i].SetT(CurrTop);		DC[i].SetL(RightColPos);
		if (DC[i].GetH() < Highest){	DC[i].SetH(HeightToSet);}
		if (DC[i].GetW() < WidestRight){DC[i].SetW(WidthToSet);}
		DC[i].SetHome();		DC[i].tag = -1;
		CurrTop = CurrTop + DC[i].GetH() + 5;
	}
	CurrTop = DragTop;
	for (var i=0; i<F.length; i++){
		FC[i].SetW(Widest);
		if (FC[i].GetH() < Highest){FC[i].SetH(HeightToSet);}
		FC[i].SetT(CurrTop);		FC[i].SetL(LeftColPos);
		FC[i].SetHome();		TempInt = FC[i].GetH();
		CurrTop = CurrTop + TempInt + 5;
	}  CurrTop = (C.opera) ? CurrTop-65 : CurrTop-50;
if(document.getElementById('abajo')){document.getElementById('abajo').style.marginTop=CurrTop+'px';}
}

function VerifDrag(){
	if (Locked == true){return;}
	var TotalCorrect = 0;	Score = 0;	var fbk = '';	var i, j;
	for (i=0; i<D.length; i++){if ((D[i][2] == D[i][1])&&(D[i][2] > 0)){TotalCorrect++;}	else{DC[i].GoHome();}	}
	Score = Math.floor((100*(TotalCorrect-Penalties))/F.length);
	var AllDone = false;
	if (TotalCorrect == F.length) {AllDone = true;}
	if (AllDone == true){fbk = YourScoreIs + ' ' + Score + '%.';	VMen(fbk + '<br />' + bien);}
	else {PartFeedback = YourScoreIs + ' ' + Score + '%.';	fbk = IncorrectResponse + '<br />' + PartFeedback;
		VMen(fbk);		Penalties++; }
//If the exercise is over:
	if (AllDone == true){	
	Locked = true;	Finished = true; setTimeout('Finish()', 1700); return Score;}
}

function Instr(numer) {
var parr = document.getElementById('Hding');
var elboton = '&nbsp;<button onclick="VerifDrag()">&nbsp;Verificar / Check&nbsp;</button>&nbsp;'; 
var Eng2 = ' &larr; to see your score. <br/>[<a href="javascript:Instr(0)">Ver instrucciones en espa&ntilde;ol</a>]';
var Esp2 = ' &larr; para ver tu puntaje. <br />[<a href="javascript:Instr(1)">See instructions in English</a>]';
if (numer<2){parr.innerHTML = (numer==1) ? Eng1 + elboton + Eng2 : Esp1 + elboton + Esp2;}
if (numer>2){
	parr.innerHTML='<br />Tu puntaje final es '+numer+'%';
	with(parr.style){fontWeight='bold'; color='green'; fontSize='12px'; height='25px';}} //paddingTop=0;
if (top.location!=location){document.getElementsByTagName('BODY')[0].style.margin=0;}
}
function creaRes(){//antes del shuffle
var subr=''; var resp=document.getElementById('lasres');var engl=document.getElementById('ingles'); 
for ( i=0; i<F.length; i++){
	subr='<ins style="color: #FF3300">'+D[i][0]+'</ins>';
	RES[i]=F[i][0].replace("___",subr);resp.innerHTML+=RES[i]+'<br />';
	engl.innerHTML+='&bull; &nbsp;'+F[i][2]+'<br />';
	}
}
function escrEng(event,alto){//despues del shuffle
  var lalista=''; 
	if (Finished==true){lalista=document.getElementById('ingles').innerHTML;}
	if (Finished==false){for ( i=0; i<F.length; i++){lalista+='&bull; &nbsp;'+F[i][2]+'<br />';}}
	mouseleft=event.screenX; mousetop=event.screenY; 
	var arriba = mousetop-15; var izquierda = mouseleft-(160);
	venresp=window.open('','respuestas','height='+alto+',width=400,top='+arriba+',left='+izquierda+',resizable=yes');
	var tmp = venresp.document; 	tmp.write(resbody1+lalista+resbody2);	tmp.close();
	if (window.focus){venresp.focus();} 
}