/*
 * Copyright (C) 1995-2011 by 4system Polska Sp. z o.o.
 * All Rights Reserved.
 */

componentImageWithBlank = function(name) 
{
	this.__componentText = __componentText;
	this.__componentText(name);

	this.images = new Array();
	this.baskets = new Array();
	this.texts = new Array();
	this.resourcesStatus = "online";
	this.resourcesURL = "";
	this.spaceBetweenImages = 0;	
	this.compAudio = null;
	this.dropAudioComp = null;
	
	this.interactions = true;
	this.interactionsType = "matching";		
};

componentImageWithBlank.prototype = new __componentText;
componentImageWithBlank.prototype.type = "componentImageWithBlank";

componentImageWithBlank.prototype.onBaseCreate = function(obj) {
	this.captureMouseEvents();
};

componentImageWithBlank.prototype.onCreate = function(obj)
{
	if ( PageInterface.GetValue("state") != psDesigning && lms && this.disableOnlineOfflineMix != false ) 
	{
		this.resourcesStatus 	= lms.resourcesStatus();
		this.resourcesURL 		= lms.resourcesURL();
	} 
	else this.resourcesURL = resourcesURL;
	
	if (this.enableFlashPlayer) {
		var e = new componentFlashAudioPlayer;
		e.myParent = this;
		e.id = this.id + 'Audio';
		e.step = -1;
		e.src = this.flashAudioPlayerSrc;
		e.x = 0;
		e.y = 0;
		e.w = 1;
		e.h = 1;
		e.loop = false;
		e.flashVars = "";
		this.compAudio = page.addChild(e);
		
		var e = new componentFlashAudioPlayer;
		e.myParent = this;
		e.id = this.id + 'dropAudioComp';
		e.step = -1;
		e.src = this.flashAudioPlayerSrc;
		e.x = 0;
		e.y = 0;
		e.w = 1;
		e.h = 1;
		e.loop = false;
		e.flashVars = "";
		this.dropAudioComp = page.addChild(e);		
	} else {		
		var audioElement = new componentAudio;
		audioElement.myParent = this;
		audioElement.id = this.id+'Audio'; 
		audioElement.src = this.src;
		audioElement.pvWMP64 = false;
		audioElement.pvWMP7up = false;
		audioElement.step = -1;
		audioElement.editorPaint = this.editorPaint;
		this.compAudio = page.addChild(audioElement);	
		audioElement.allowNextStep = true;
		
		var audioElement = new componentAudio;
		audioElement.myParent = this;
		audioElement.id = this.id+'dropAudioComp'; 
		audioElement.src = this.src;
		audioElement.pvWMP64 = false;
		audioElement.pvWMP7up = false;
		audioElement.step = -1;
		audioElement.editorPaint = this.editorPaint;
		this.dropAudioComp = page.addChild(audioElement);		
		audioElement.allowNextStep = true;
	}
	
	var splitedContent = this.content.split('||');
	
	var  maxTextDimArr = this.getTextMaxWidth(splitedContent);
	//var  maxImgDimArr = this.getImagesMaxHeight(splitedContent);
	var  maxImgDimArr = [ this.imageW, this.imageH ]
	
	var tempX = this.x;
	var tempY = this.y + 20;	
	
	var spaceBetweenElements = (this.w - splitedContent.length)/(splitedContent.length-1);
	
	var lastImageX = this.x;
	var maxWidth = 0;
	
	if ((maxTextDimArr[0]+5) > maxImgDimArr[0]) maxWidth = (maxTextDimArr[0]+5);
		else maxWidth = maxImgDimArr[0];
	
	this.spaceBetweenImages = (this.w - (splitedContent.length*maxWidth))/(splitedContent.length-1)-3;
	
	for(var i=0; i < splitedContent.length; i++){
		var oneRow = splitedContent[i].split('#!#');
		
		var img = new Image();
		img.src = this.resourcesURL + oneRow[0];
		
		if ((maxTextDimArr[0]+5) < maxImgDimArr[0]) {
			var imageX = lastImageX + (maxTextDimArr[0]+5)/2 - this.imageW/2 + 3;
			var textX = lastImageX;
		}else {
			var imageX = lastImageX + (maxTextDimArr[0]+5)/2 - this.imageW/2;
			var textX = lastImageX;
		};		
		
		var imageComp = new componentImage;
		imageComp.mymyParent = this; 
		imageComp.id = this.id+'_IMG_'+i; 
		imageComp.x = imageX;
		imageComp.y = tempY;
		imageComp.w = this.imageW;
		imageComp.h = this.imageH;	
		imageComp.src = oneRow[0];
		imageComp.canDragging = false;
		
		tempX += imageComp.w + this.spaceBetweenImages;
		
		page.addChild(imageComp);
		this.images.push( imageComp );
		
		var basketTextComp = new __componentText;
		basketTextComp.myParent = this; 
		basketTextComp.id = this.id+'_DDB_'+i; 
		basketTextComp.x = textX;
		basketTextComp.y = maxImgDimArr[1] + tempY;
		basketTextComp.text = '<div id="'+this.id+'_'+i+'_basket" style="position: relative; border: 1px solid black; width:'+eval(maxTextDimArr[0]+3)+'px; height:'+eval(maxTextDimArr[1]+3)+'px; margin: 0px; font-size: 0pt; line-height:'+getFontSize(this.fontSize, 'px')+'px;">.</div>';
		basketTextComp.canDragging = false;
		basketTextComp.onCreate = this.onCreateBasket;		
		page.addChild(basketTextComp);
		this.baskets.push( basketTextComp );
		
		var ddelementText = new __componentText;
		ddelementText.myParent = this; 
		ddelementText.id = this.id+'_DDE_'+i; 
		ddelementText.x = textX+3;
		ddelementText.y = this.y + this.h - eval(maxTextDimArr[1]*2);
		ddelementText.x_backup = ddelementText.x;
		ddelementText.y_backup = ddelementText.y;
		ddelementText.startX = ddelementText.x;
		ddelementText.startY = ddelementText.y;		
		ddelementText.w = maxTextDimArr[0]+5;
		ddelementText.h = maxTextDimArr[1]+5;
		ddelementText.destinationBasketId = this.id+'_DDB_'+i;
		ddelementText.insideBasketId = "";
		ddelementText.text = oneRow[2];
		ddelementText.align = "center";
		ddelementText.valign = 'middle';
		
		ddelementText.font.family = this.fontFamily;
		ddelementText.font.color = this.fontColor;
		ddelementText.font.size = this.fontSize;
		
		ddelementText.borderWidth = 1;
		ddelementText.borderColor = this.elementBorderColor;
		ddelementText.padding = 0;
		ddelementText.bgColor = this.elementBckColor;	
		ddelementText.cursor = this.elementCursor;		
		ddelementText.canDragging = true;
		ddelementText.solved = false;
		ddelementText.orgZ = ddelementText.z = basketTextComp.z+i+1;
		ddelementText.audioSrc = oneRow[1];
		ddelementText.dropAudio = oneRow[3];
		
		ddelementText.onCreate = this.onCreateText;
		ddelementText.beginDrag = this.beginDragText;
		ddelementText.endDrag = this.endDragText;
		ddelementText.onMove = this.mouseMoveText;	
		
		ddelementText.eventMouseOver = this.onMouseOverText;		
		ddelementText.eventMouseOut = this.onMouseOutText;	
		ddelementText.baseOnPaint = ddelementText.onPaint;
		ddelementText.onPaint = this._onPaint;						
		
		page.addChild(ddelementText);		
		this.texts.push( ddelementText );

		if ((maxTextDimArr[0]+5) < maxImgDimArr[0]) {
			lastImageX += maxImgDimArr[0] + this.spaceBetweenImages + 3;
		}else {
			lastImageX += (maxTextDimArr[0]+5) + this.spaceBetweenImages +3 ;
		};
	};
	
	if (PageInterface.GetValue("state") != psDesigning) this.randomDDElements(this.texts);
};

componentImageWithBlank.prototype._onPaint = function() 
{
	if (this.locked) {
		if (this.solved) {
			this.setBgColor(this.myParent.elementCorrectBckColor);
		}else { 
			this.setBgColor(this.myParent.elementInCorrectBckColor);
		}
		return;
	}
	this.baseOnPaint();
}

componentImageWithBlank.prototype.onCreateBasket = function(text) 
{
	this.setZIndex(this.myParent.z);
}
componentImageWithBlank.prototype.onCreateText = function(text) 
{
	this.captureMouseEvents();
};

componentImageWithBlank.prototype.editorPaint = function()
{
	return '';
}

componentImageWithBlank.prototype.onMouseOverText = function()
{
	if (this.audioSrc == '' || this.audioSrc == 'undefined' || typeof(this.audioSrc) == 'undefined')
		return;
		
	if (this.myParent.enableFlashPlayer) {
		this.myParent.compAudio.flashVars = "playIdx="
		+ this.myParent.getDropAudioIndex(this.audioSrc) + "&autoStart=true&playOnce=true";
		this.myParent.compAudio.show();
	} else {
		this.myParent.compAudio.setUrl(this.resourcesURL + this.audioSrc);
		this.myParent.compAudio.actionMediaPlay();
	};		
};

componentImageWithBlank.prototype.onMouseOutText = function()
{
	if (this.myParent.enableFlashPlayer) {
		this.myParent.compAudio.flashVars = "";
		this.myParent.compAudio.show();
	} else {
		this.myParent.compAudio.actionMediaStop();
	};	
};

componentImageWithBlank.prototype.onPaint = function() 
{
	if (this.locked) return;	

	var newX = this.x - this.x;
	var newY = this.y - this.y; 
	
	for (var i=0; i < this.texts.length; i++) {
		this.texts[i].x = this.texts[i].x_backup;
		this.texts[i].y = this.texts[i].y_backup;
		this.texts[i].startX = this.texts[i].x_backup;
		this.texts[i].startY = this.texts[i].y_backup;
		
		this.texts[i].insideBasketId = '';
		this.texts[i].solved = false;
		
		this.texts[i].startX -= newX;
		this.texts[i].startY -= newY;
		
		this.texts[i].x -= newX;
		this.texts[i].y -= newY;
		
		this.texts[i].setX(this.texts[i].x);
		this.texts[i].setY(this.texts[i].y);	
		
		this.texts[i].obj.style.border = this.elementBorderColor + " solid 1px";
		this.texts[i].obj.style.background = this.elementBckColor;		
	};
}

componentImageWithBlank.prototype.onRepaint = function() 
{
	if (PageInterface.GetValue("allowCAI") && this.showCorrectAnswerIndicator)
	{
		for (var i=0; i < this.texts.length; i++) {
			if (!this.texts[i].solved) {
				this.texts[i].obj.style.border = this.elementInCorrectBorderColor + " solid 1px";
				this.texts[i].obj.style.background = this.elementInCorrectBckColor;
			}else { 
				this.texts[i].obj.style.border = this.elementCorrectBorderColor + " solid 1px";
				this.texts[i].obj.style.background = this.elementCorrectBckColor;
			}
		}
	}
};

componentImageWithBlank.prototype.get_random = function(from, to) {
    var ranNum = Math.floor( Math.random() * (to-from+1) ) + from;
    return ranNum;
};

componentImageWithBlank.prototype.randomDDElements = function(arr) 
{
	var indexes = new Array();
	var sizes = new Array();
	
	for (var i=0; i<arr.length; i++) {
		indexes.push(i);
		sizes.push( 
			{ 
				x: arr[i].x, 
				y: arr[i].y,
				x_backup: arr[i].x_backup,
				y_backup: arr[i].y_backup		
			}
		);
	};
	
	var randomIndexes = new Array();
	while( indexes.length != 0 ) {
		randomIndexes.push( indexes.splice( this.get_random(0, indexes.length-1),1 ) );
	};
	for (var i=0; i<arr.length; i++) {
		arr[i].x = sizes[ randomIndexes[i] ].x;
		arr[i].y = sizes[ randomIndexes[i] ].y;
		arr[i].x_backup = sizes[ randomIndexes[i] ].x_backup;
		arr[i].y_backup = sizes[ randomIndexes[i] ].y_backup;

		arr[i].startX = arr[i].x;
		arr[i].startY = arr[i].y;
		arr[i].startY = arr[i].x_backup;
		arr[i].startY = arr[i].y_backup;	
	
		arr[i].x = sizes[randomIndexes[i]].x;
		arr[i].y = sizes[randomIndexes[i]].y;
	};
};

componentImageWithBlank.prototype.onShow = function() 
{
	for (var i=0; i < this.texts.length; i++) {
		this.texts[i].show();
		this.baskets[i].show();
		this.images[i].show();
	};
};

componentImageWithBlank.prototype.getImagesMaxHeight = function(arr) 
{
	var width = 0;
	var height = 0;
	
	for (var i=0; i < arr.length; i++) {
		var oneRow = arr[i].split('#!#');
		
		var img = new Image();
		img.src = this.resourcesURL + oneRow[0];
		
		if ( width < img.width ) width = img.width;
		if ( height < img.height ) height = img.height;
		
	};
	return [width, height];
};

componentImageWithBlank.prototype.getTextMaxWidth = function(arr) 
{
	var width = 0;
	var height = 0;
	var maxWidth = 0;
	var maxHeight = 0;
	
	var sizeDiv = '<span id="'+this.id+'sizeDiv" style="visibility: hidden; position: absolute; font-family:' + this.fontFamily
		+ '; font-size:'+getFontSize(this.fontSize, 'px')+'px; color:' + this.fontColor + ';  left:0px; top:0px; border: solid #000000 0px;"></span>';
	
	var obj = document.getElementById(this.id);
	obj.innerHTML += sizeDiv;
		
	for (var i=0; i < arr.length; i++) {
		var oneRow = arr[i].split('#!#');
		var elem = document.getElementById(this.id+"sizeDiv");
		if (elem) {
			elem.innerHTML = oneRow[2];
			elem.style.fontFamily = this.fontFamily;
			elem.style.fontSize = getFontSize(this.fontSize, 'px');
			width = elem.offsetWidth;
			height = elem.offsetHeight;
		};
		
		if ( width > maxWidth ) maxWidth = width;
		if ( height > maxHeight ) maxHeight = height;
	};
	return [maxWidth, maxHeight];
};

componentImageWithBlank.prototype.mouseMoveText = function(e) 
{
	return;
};

componentImageWithBlank.prototype.getDropAudioIndex = function(audioFile)
{
	var result = -1;
	var contentArr = this.content.split('||');
	for(var i=0; i < contentArr.length; i++){
		var oneArr = contentArr[i].split('#!#');
		if (oneArr[1] == audioFile) {
			result = i*2;
			break;
		}else if (oneArr[3] == audioFile) {
			result = i*2+1;
			break;
		}
	}
	return result;
};

componentImageWithBlank.prototype.playDropAudio = function(audioFile) 
{
	if (audioFile == '' || audioFile == 'undefined' || typeof(audioFile) == 'undefined')
		return;

	if (this.enableFlashPlayer) {
		this.compAudio.flashVars = "";
		this.compAudio.show();	
		this.dropAudioComp.flashVars = "playIdx="
		+ this.getDropAudioIndex(audioFile) + "&autoStart=true&playOnce=true";
		this.dropAudioComp.show();
	} else {
		this.dropAudioComp.setUrl(this.resourcesURL + audioFile);
		this.dropAudioComp.actionMediaPlay();
	};	
};	

componentImageWithBlank.prototype.clickText = function() 
{
	//showMessage(this.z)
}

componentImageWithBlank.prototype.beginDragText = function() 
{
	if (this.myParent.showAnswerIndicatorAnyTime){
		this.obj.style.border = this.myParent.elementBorderColor + " solid 1px";
		this.obj.style.background = this.myParent.elementBckColor;
	};

	this.setZIndex(1000);
};

componentImageWithBlank.prototype.endDragText = function(e) 
{
	this.setZIndex(this.orgZ);
	
	var ddbasket = document.getElementById(this.destinationBasketId);
	var ddelement = document.getElementById(this.id);
	/** ddbasket.style.borderColor = "black"; */
	
	this.myParent.playDropAudio(this.dropAudio);
	
	var middlePoint = { 
		x: (ddelement.offsetLeft + ddelement.offsetWidth/2), 
		y: (ddelement.offsetTop + ddelement.offsetHeight/2)
	};
	
	for (var i=0; i < this.myParent.baskets.length; i++){
		var ddbasket = document.getElementById(this.myParent.id+'_DDB_'+i);
		var left = this.myParent.findPosX(ddbasket);
		var right = this.myParent.findPosX(ddbasket) + ddbasket.offsetWidth;
		var top = this.myParent.findPosY(ddbasket);
		var bottom = this.myParent.findPosY(ddbasket) + ddbasket.offsetHeight;
		
		if ( middlePoint.x > left && middlePoint.x < right && middlePoint.y > top && middlePoint.y < bottom ) {
			this.inArea = ddbasket;
			break;
		}else this.inArea = null; 
	};
	
	if (this.inArea && !this.myParent.checkIsFilled(this, this.inArea.id)){
		this.myParent.setIntoBasket(this, ddelement, this.inArea)

	}else {
		this.myParent.moveToStart(this, ddelement);
	};
};

componentImageWithBlank.prototype.moveToStart = function(sender, elem) 
{
	if (sender.myParent.showAnswerIndicatorAnyTime){
		sender.obj.style.border = sender.myParent.elementBorderColor + " solid 1px";
		sender.obj.style.background = sender.myParent.elementBckColor;
	};
	
	sender.solved = false;
	sender.x = sender.startX;
	sender.y = sender.startY;
	sender.insideBasketId = '';
	elem.style.left = sender.startX;
	elem.style.top = sender.startY;
};

componentImageWithBlank.prototype.setIntoBasket = function(sender, dde, obj) 
{
	var x = sender.myParent.findPosX(obj)+3;
	var y = sender.myParent.findPosY(obj)+3;

	dde.style.left = x;
	dde.style.top = y;
	
	sender.x = x;
	sender.y = y;
	sender.insideBasketId = obj.id;
	sender.solved = (obj.id == sender.destinationBasketId);
};

componentImageWithBlank.prototype.checkIsFilled = function(obj, destBasket) 
{
	for (var i=0; i < this.texts.length; i++) {
		if (this.texts[i].id != obj.id && this.texts[i].insideBasketId == destBasket){
			this.moveToStart(obj, obj);	
			return true;
		}
	}	
	return false;
};
	
componentImageWithBlank.prototype.findPosX = function (obj) {
	var curleft = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x) {
		curleft += obj.x;
	}
	return curleft;
}

componentImageWithBlank.prototype.findPosY = function(obj) {
	var curtop = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y) {
		curtop += obj.y;
	}
	return curtop;
}

componentImageWithBlank.prototype.getAnswer = function()
{
	var result = '';
	var sep = '';
	for (var i=0; i < this.texts.length; i++) {
		if (result != '') sep = '#!#';
		result += sep + this.texts[i].id +'||'+this.texts[i].insideBasketId;
	}
	return(result);
};

componentImageWithBlank.prototype.setAnswer = function(valInt, showCorrect)
{
	if ((typeof(valStr) == 'undefined' || valStr == '') && !showCorrect) return;
	if (valStr == '' && (typeof(showCorrect) == 'undefined' || showCorrect.toString() == '')) showCorrect = true;
	
	if (valInt != '' && !showCorrect){
		var splited = valInt.split('#!#');
		for (var i=0; i < splited.length; i++){
			var elem = splited[i].split('||');
			var ddelement = document.getElementById(elem[0]);
			var ddbasket = document.getElementById(elem[1]);
			var j=-1;
			
			do{
				j++;
			}while (this.texts[j].id != elem[0] && j < this.texts.length)
			
			if (ddbasket) this.setIntoBasket(this.texts[j], ddelement, ddbasket);		
		};
	}else{
		for (var i=0; i < this.texts.length; i++) {
			var ddelement = document.getElementById(this.texts[i].id);
			var ddbasket = document.getElementById(this.texts[i].destinationBasketId);
			
			this.setIntoBasket(this.texts[i], ddelement, ddbasket);
		};
	};
	this.onRepaint();		
};

componentImageWithBlank.prototype.checkAnswer = function() 
{
	return (this.parseCheckAnswer(this));
};

componentImageWithBlank.prototype.parseCheckAnswer = function(index)
{
	var result = true;
	for (var i=0; i < this.texts.length; i++) {
		if (!this.texts[i].solved) {
			if (this.returnWhenIncorrect && page.countAnswers != 0){
				this.moveToStart(this.texts[i], this.texts[i]);	
			}
			result = false;
		}
		if (this.showAnswerIndicatorAnyTime && this.showCorrectAnswerIndicator){
			if (this.texts[i].solved){
				this.texts[i].obj.style.border = this.elementCorrectBorderColor + " solid 1px";
				this.texts[i].obj.style.background = this.elementCorrectBckColor;
			}else{
				this.texts[i].obj.style.border = this.elementInCorrectBorderColor + " solid 1px";
				this.texts[i].obj.style.background = this.elementInCorrectBckColor;
			}
		};
	};
	return result;
};

componentImageWithBlank.prototype.onLock = function() {
	for (var i=0; i < this.texts.length; i++) {
		this.texts[i].canDragging = false;
		this.texts[i].locked = true;
	};
};

componentImageWithBlank.prototype.onUnLock = function() {
	for (var i=0; i < this.texts.length; i++) {
		this.texts[i].canDragging = true;
		this.texts[i].locked = false;
	};
};

componentImageWithBlank.prototype.interactionsCorrectResponsesCount = function()
{
	return 1;
};

componentImageWithBlank.prototype.interactionsCorrectResponses = function(index)
{
	var result = '';
	var sep = '';
	for (var i=0; i < this.texts.length; i++) {
		if (result != '') sep = '#!#';
		result += sep + this.texts[i].id +'||'+this.texts[i].destinationBasketId; 
	}
	return(result);
};

componentImageWithBlank.prototype.interactionsStudentResponse = function()
{
	return this.getAnswer();
};

componentImageWithBlank.prototype.interactionsCorrectResponsesAsText = function(index)
{
	var result = '';
	var sep = '';
	for (var i=0; i < this.texts.length; i++) {
		if (result != '') sep = '#!#';
		result += sep + this.texts[i].id +'||'+this.texts[i].destinationBasketId; 
	}
	return(result);
};

componentImageWithBlank.prototype.interactionsStudentResponseAsText = function()
{
	return this.getAnswer();
};











