///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Concentration game for one or two players or a computer opponent                                              //
//                                                                                                               //
// initiate a new game with createGame(language, gameNum, allPics, imgPath, imgFileNameStem,                     // 
// imgType, imgWidth, imgHeight, rows, columns, timeOut, borderColor);                                           //
// all variables can be customized                                                                               //
// You can also start with no variables, but for then you have to use the default values (see above)             //
// if you want to customize only one variable, you have to set all variables before this one by '',              //
// e.g. createGame('','','', 'gfx/');                                                                            //
// the div where the game come up has to be named "gameField" with a number                                      //
// starting at 0, e.g. <div id="gameField0"></div>                                                               //
// You can place more than one game on a single site                                                             //
//                                                                                                               //
// language['en'] = all words used in the game; you can translate it to other languages (look at language_de.js) //
// gameNum = number of the div, where the game will come up if there are more than one game (default: 0)         //
// allPics = all images you want to provide for the game (default: 16),                                          //
// imgPath = the path to the image directory (default: images/),                                                 //
// imgFileNameStem = the stem of the image file name (default: img),                                             //
// imgType = the filetype of the images like gif, png or jpg (default: gif),                                     //
// imgWidth = the width of the images (default: 50px),                                                           // 
// imgHeight = the height of the images (default: 50px),                                                         //
// rows = the number of rows (default: 4),                                                                       //
// columns = the number of columns (default: 4),                                                                 //
// timeOut = the time the images should be shown, in seconds (default: 1 second),                                //
// borderColor = a border color (default: #999);                                                                 //
//                                                                                                               //
// all images have to be named this way: imgFileNameStem + number (starting by 1) + . + imgType,                 //
// e. g. pic1.gif, pic2.gif etc.                                                                                 //
// the image of the "backside" has to be named imgFileNameStem + 0 + . + imgType,                                //
// e.g. pic0.gif (default: img0.gif)                                                                             //                          
//                                                                                                               //
// (c) 2010 Jürgen Müller-Lütken, kontakt@p-six.de                                                               //
//                                                                                                               //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

var language = new Array();

	language['en'] = new Array(
  'Player 1',
  'Player 2',
  'Computer',
  'Player',
  'Failures',
  'Pairs',
  'Time',
  'Not enough images! You need [gamePix] images and there are only [totalPix] in your settings!',
  'The winner is [winner]! He had [failures] failures and got [pairs] pairs out of [totalPairs].',
  'New Game',
  'Settings',
  'Players',
  'Human vs:',
  'Human',
  'Computer\'s Memory:',
  'no',
  'middle',
  'perfect',
  'Computer\'s Strategy:',
  'no',
  'middle',
  'professional',
  'Who starts:',
  'You',
  'Computer',
  'Close',
  'Help',
  'This game is a Memory-like concentration game. Each image is duplicated. You have to find all pairs. You can play alone, with someone else or against the computer. With help of Settings you can choose playing mode and different strengths of computer\'s logic. Enjoy!',
  'The number of images has to be divisible by 2! Please change the number of rows or columns!'
  );

// global array for timeout ids
var pointers = new Array();

// some general functions
Array.prototype.isInArray = function(val)
{
	for(var i=0; i<this.length; i++)
	{
		if(this[i] == val)
			return true;
	}
	return false;
}

Array.prototype.shuffle = function()
{
	var tmp, rand;
	for(var i =0; i < this.length; i++)
	{
		rand = Math.floor(Math.random() * this.length);
		tmp = this[i]; 
		this[i] = this[rand]; 
		this[rand] = tmp;
	}
}

Array.prototype.getRandomElements = function(numberOfElements)
{
	var map = new Array();
	var nums = new Array();
	for(var j=0; j<numberOfElements; j++)
	{
		var unique = false;
		while(!unique)
		{
			var rand = Math.floor(Math.random()*(this.length));
			if(!nums.isInArray(rand))
			{
				unique = true;
				nums.push(rand);
				map.push(this[rand]);
			}
		}
	}
	return map;
}

Array.prototype.doubleElements = function()
{
	var length = this.length;
	for(var i=0; i<length; i++)
	{
		this.push(this[i]);
	}
}

Array.prototype.populate = function(elements)
{
		for(var i=1; i<elements; i++)
			this[i-1] = i;
}

Array.prototype.clean = function()
{
	var length = this.length;
	for(var i=0; i<length; i++)
			this.pop();
}

// starter function
function createGame(lang, gameNum, allPics, imgPath, imgFileNameStem, imgType, imgWidth, imgHeight, rows, columns, title, timeOut, borderColor)
{
	var mindGame = new MindGame(lang, gameNum, allPics, imgPath, imgFileNameStem, imgType, imgWidth, imgHeight, rows, columns, title, timeOut, borderColor);
	mindGame.buildGame();
}

// class MindGame; set up the Memory like game (Concentration game)
function MindGame(lang, gameNum, allPics, imgPath, imgFileNameStem, imgType, imgWidth, imgHeight, rows, columns, title, timeOut, borderColor)
{
	// setting (default) values
	var lang = (lang) ? lang : language['en'];
	var game = (gameNum) ? gameNum : 0;
	var path = (imgPath) ? imgPath : 'images';
	var imageFileNameStem = (imgFileNameStem) ? imgFileNameStem : '';
	var imageFileType = (imgType) ? imgType : 'gif';
	var imageHeight = (imgWidth) ? imgWidth : 50;
	var imageWidth = (imgHeight) ? imgHeight : 50;
	var numberOfAllPix = (allPics) ? allPics : 16;
	var numberOfRows = (rows) ? rows : 4;
	var numberOfColumns = (columns) ? columns : 4;
	var title = (title) ? title : 'Concentration';
	var timeout = (timeOut) ? (timeOut * 1000) : 1000;
	var borderColor = (borderColor) ? borderColor : '#999';
	// if computerplayer plays with middle memory, it shall NOT always find possible pairs.
	// you can make the memory better by setting 0.4 to a higher value (but not more than 0.8, I think,
	// otherwise it would be to close to the perfect memory which is 1 = ALWAYS finding pairs in opened images)
	var normalMemory = 0.4;
	var message = '';
	
	var imageBack = imageFileNameStem + '0.' + imageFileType;
	var numberOfGamePix = numberOfRows * numberOfColumns;
	
	// check some values for consistency
	if(numberOfGamePix > numberOfAllPix)
	{
		message = lang[7].replace(/\[gamePix\]/, numberOfGamePix);
		message = message.replace(/\[totalPix\]/, numberOfAllPix);
		alert(message);
	  return;
	}
	if((numberOfRows*numberOfColumns)%2 != 0)
	{
		alert(lang[28]);
		return;
	}
	
	// more necessary variables
	var numberOfPlayers = 1;
	var opponent, computerPlayerNum, computerMemory, computerStrategy, computerPics;
	var computerPlayer = false;
	var player = 1;
	var waitASecond = false;
	var pairs = 0;
	var isTimeRunning = false;
	var clicks = new Array();
	var images = new Array();
	var gameImages = new Array();
	var imagesInGame = new Array();
	var openedImages = new Array();
	var notOpenedImages = new Array();
	var gotLastPair = 0;
	var helpIsVisible = 'none';
	var settingsIsVisible = 'none';
	var chronoId, turnId;
	
	var allPlayers = new Array();
	for(var i=1; i<=numberOfPlayers; i++)
	{
		allPlayers[i] = new Array();
		allPlayers[i]['failures'] = 0;
		allPlayers[i]['pairs'] = 0;
		allPlayers[i]['time'] = 0;
	}	
	
	
	// functions for the clock
	
	function chronometro()
	{
		allPlayers[player]['time']++;
		document.getElementById('clock' + game).value = formatTime(allPlayers[player]['time']);
	}
	
	function formatTime(seconds)
	{
		var hours = Math.floor(seconds / 3600);
		seconds -= (hours * 3600);
		var minutes = Math.floor(seconds / 60);
		seconds -= (minutes * 60);
		return frontZero(hours) + ':' + frontZero(minutes) + ':' + frontZero(seconds);
	}
	
	function frontZero(val)
	{
		if(val < 10)
			val = '0' + val;
		return val;
	}
	
	
	// functions for showing and hiding Settings and Help panel
	
	function showElement()
	{
		this.parentNode.nextSibling.style.display = 'block';
		newGame();
	}
	
	function hideSettings()
	{
		var next = this.parentNode.nextSibling;
		while (next != null)
		{
			if(next.nextSibling == null)
				break;
			next.style.display = 'none';
			next = next.nextSibling;
		}
		document.getElementById('normalPlayerType').checked = 'checked';
		document.getElementById('normalMemory').checked = 'checked';
		document.getElementById('normalStrategy').checked = 'checked';
		document.getElementById('normalStart').checked = 'checked';
		document.getElementById('settings' + game).style.display = 'block';
		
		newGame();
	}
	
	function toggleSettings()
	{
		settingsIsVisible = (settingsIsVisible == 'none') ? 'block' : 'none';
		document.getElementById('settings' + game).style.display = settingsIsVisible;
	}
	
	function toggleHelp()
	{
		helpIsVisible = (helpIsVisible == 'none') ? 'block' : 'none';
		document.getElementById('help' + game).style.display = helpIsVisible;
	}
	
	
	// functions for playing the game

	function showPic(obj, yes)
	{
		var obj = (yes) ? obj : this;
		if(!isTimeRunning)
		{
			isTimeRunning = true;
			chronoId = setInterval(function() { chronometro() }, 1000);
			pointers[game] = chronoId;
		}
		if(!waitASecond)
		{
			if(!imagesInGame.isInArray(obj))
			{
				return;
			}
			if(!clicks.length)
			{
				clicks[0] = obj;
				document.getElementById('Description').innerHTML = roadSignDescription[obj.imageNum];
				if(!openedImages.isInArray(obj))
				{
					notOpenedImages.deleteElementByValue(obj.divNum, 'divNum');
				}
				obj.firstChild.style.display = 'none';
			}
			else
			{
				if(clicks[0].divNum == obj.divNum)
					return;
				clicks[1] = obj;
				document.getElementById('Description').innerHTML = roadSignDescription[obj.imageNum];
				if(!openedImages.isInArray(obj))
				{
					openedImages.push(obj);
					notOpenedImages.deleteElementByValue(obj.divNum, 'divNum');
				}
				obj.firstChild.style.display = 'none';
				waitASecond = true;
				checkIdentity();
				document.getElementById('numberOfTries' + game).value = allPlayers[player]['failures'];
			}
		}
	}
	
	function checkIdentity()
	{
		if(clicks[0].imageNum == clicks[1].imageNum)
		{
			countPairs();
			imagesInGame.deleteElementByValue(clicks[0].imageNum, 'imageNum');
			openedImages.deleteElementByValue(clicks[0].imageNum, 'imageNum');
		
			gotLastPair = player;
			waitASecond = false;
			clicks.clean();
			checkForGameEnd();
		}
		else
		{
			allPlayers[player]['failures']++;
			turnId = setTimeout(function() { hidePics() }, timeout);
		}
	}
	
	function countPairs()
	{
		allPlayers[player]['pairs']++;
		pairs++;
		document.getElementById('numberOfPairs' + game).value = allPlayers[player]['pairs'];
		
	}
	
	function checkForGameEnd()
	{
		if(pairs == numberOfGamePix/2)
		{
			clearTimeout(turnId);
			clearInterval(chronoId);
			isTimeRunning = false;
			if(numberOfPlayers > 1)
			{
				var winner = (numberOfPlayers > 1) ? getWinner() : 1;
				var winnerStr = (computerPlayer && winner == computerPlayerNum) ? lang[2] : lang[3] + ' ' + winner;
				message = lang[8].replace(/\[winner\]/, winnerStr);
				message = message.replace(/\[failures\]/, allPlayers[winner]['failures']);
				message = message.replace(/\[pairs\]/, allPlayers[winner]['pairs']);
				message = message.replace(/\[totalPairs\]/, pairs);
				alert(message);
			}
		}
		else if(computerPlayer && player == computerPlayerNum)		
			setTimeout( function() { computerChoosePics() }, 500);
	}
	
	function getWinner()
	{
		var winner = 1;
		for(var i=1; i<=numberOfPlayers; i++)
		{
			for(var j=1; j<=numberOfPlayers; j++)
			{
				if(allPlayers[j]['pairs'] > allPlayers[i]['pairs'])
				{
					winner = j;
				}
				if(j != winner && allPlayers[j]['pairs'] == allPlayers[winner]['pairs'] && j == gotLastPair)
					winner = gotLastPair;
			}
		}
		return winner;
	}
	
	function hidePics()
	{
		for(var i=0; i<2; i++)
			clicks[i].firstChild.style.display = 'block';
		clicks.clean();
		waitASecond = false;
		if(numberOfPlayers > 1)
			changePlayer();
	}
	
	function changePlayer()
	{
		if(numberOfPlayers > 1)
			player = (player < numberOfPlayers) ? player + 1 : 1;
		document.getElementById('Player' + game).firstChild.nodeValue = lang[3] + ' ' + player;
		document.getElementById('numberOfPairs' + game).value = allPlayers[player]['pairs'];
		document.getElementById('numberOfTries' + game).value = allPlayers[player]['failures'];
		document.getElementById('clock' + game).value = formatTime(allPlayers[player]['time']);
		if(computerPlayer && player == computerPlayerNum)
			setTimeout( function() { computerChoosePics() }, 500);
	}
	
	
	// functions for playing the computer opponent
	
	function isTrue()
	{
		if(Math.random() < normalMemory)
		{
			return true;
		}
		return false; 
	}
	
	Array.prototype.deleteElementByValue = function(val, str)
	{
		var length = this.length;
		for(var i=0; i<length; i++)
		{
			if(eval("this[" + i + "]." + str) == val)
			{
				this.splice(i, 1);
				i--;
				length--;
			}
		}
	}
	
	function computersMemory()
	{
		switch(computerMemory)
		{
			case 1: // no memory
			// never check for pairs in opened images
			break;
			
			case 2: // normal memory
			// in 40% of computer's turns ckeck for pairs in the opened images
			if(isTrue() && openedImages.length > 1)
				checkForPairsInOpenedImages();
			break;
			
			case 3: // perfect memory
			// check always for pairs in opened images
			if(openedImages.length > 1)
				checkForPairsInOpenedImages();
			break;
		}
	}
	
	function computersStrategy()
	{
		switch(computerStrategy)
		{
			case 1: // no strategy
			// choose random images from images in game
			if(!computerPics.length)
				computerPics = imagesInGame.getRandomElements(2);
			break;
			
			case 2: // adult strategy
			// choose one image from not opened images and one from opened images
			if(!computerPics.length)
			{
				if(openedImages.length > 0 && notOpenedImages.length > 0)
				{
					computerPics.push(notOpenedImages.getRandomElements(1).pop());
					if(!checkForPairsInOpenedImages(computerPics[0]))
						computerPics.push(openedImages.getRandomElements(1).pop());
				}
				else
					computerPics = imagesInGame.getRandomElements(2);
			}
			break;
			
			case 3: // professional strategy
			// choose always images from opened images
			if(!computerPics.length)
			{
				if(openedImages.length > 2)
					computerPics = openedImages.getRandomElements(2);
				else
					computerPics = imagesInGame.getRandomElements(2);
			}
			break;
		}
	}
	
	function computerChoosePics()
	{
		computerPics.clean();
		computersMemory();
		computersStrategy();
		computerShowPics();
	}
	
	function checkForPairsInOpenedImages(obj)
	{
		if(obj)
		{
			for(var i=0; i<openedImages.length; i++)
			{
				if(obj.divNum != i && openedImages[i].imageNum == obj.imageNum)
				{
					computerPics.push(openedImages[i]);
					return true;
				}
			}
		}
		else
		{
			for(var i=0; i<openedImages.length; i++)
			{
				for(var j=0; j<openedImages.length; j++)
				{
					if(j != i && openedImages[j].imageNum == openedImages[i].imageNum)
					{
						computerPics.push(openedImages[i]);
						computerPics.push(openedImages[j]);
						return true;
					}
				}
			}
		}
		return false
	}
	
	function computerShowPics()
	{
		setTimeout( function() { showPic(computerPics[0], true) }, 500);
		setTimeout( function() { showPic(computerPics[1], true) }, 1500);
	}
	
	
	// functions for starting the game again
	
	function getRadioButtonValue(element)
	{
		var buttons = document.getElementById(element).getElementsByTagName('input');
		for(var i=0; i<buttons.length; i++)
			if(buttons[i].checked == true)
				return buttons[i].value;
	}
	
	function clearGame()
	{
		clearTimeout(turnId);
		clearInterval(chronoId);
		gameImages.clean();
		clicks.clean();
		openedImages.clean();
		notOpenedImages.clean();
		imagesInGame.clean();
		player = 1;
		waitASecond = false;
		isTimeRunning = false;
		computerPlayer = false;
		pairs = 0;
		document.getElementById('Player' + game).firstChild.nodeValue = lang[3] + ' ' + player;
		document.getElementById('numberOfTries' + game).value = 0;
		document.getElementById('numberOfPairs' + game).value = 0;
		document.getElementById('clock' + game).value = '00:00:00';
	}
	
	// start a new game
	function newGame()
	{
		// clear and clean up
		clearGame();
		
		// set new values
		gameImages = images.getRandomElements((numberOfGamePix/2));
		gameImages.doubleElements();
		gameImages.shuffle();
		var counter = 0;
		for(var i=0; i<numberOfRows; i++)
		{
			for(j=0; j<numberOfColumns; j++)
			{
				var divElement = document.getElementById('g_'+ game + '_' + counter);
				divElement.firstChild.style.display = 'block';
				divElement.style.backgroundImage = 'url('+ (path + imageFileNameStem + gameImages[counter] + '.' + imageFileType) +')';
				divElement.imageNum = gameImages[counter];
				divElement.divNum = counter;
				imagesInGame.push(divElement);
				notOpenedImages.push(divElement);
				counter++;
			}
		}
		numberOfPlayers = Number(getRadioButtonValue('players' + game));
		if(numberOfPlayers > 1)
		{
			opponent = Number(getRadioButtonValue('opponents' + game));
			if(opponent == 2)
			{
				computerPics = new Array();
				computerPlayer = true;
				computerMemory = Number(getRadioButtonValue('computerMemory' + game));
				computerStrategy = Number(getRadioButtonValue('computerStrategy' + game));
				computerPlayerNum = (Number(getRadioButtonValue('start' + game)) == 1) ? 2 : 1;
			}
		}
		// at last clean the players values
		for(i=1; i<=numberOfPlayers; i++)
		{
			if(!allPlayers[i])
				allPlayers[i] = new Array();
			allPlayers[i]['pairs'] = 0;
			allPlayers[i]['failures'] = 0;
			allPlayers[i]['time'] = 0;
		}
		// if computer is opponent and computer starts, start here
		if(computerPlayer && player == computerPlayerNum)
			setTimeout( function() { computerChoosePics() }, 500);
	}
	
	
	// functions for building the game (including Settings and Help panels)
	
	this.buildGame = function()
	{
		if(images.length == 0)
			images.populate(numberOfAllPix);
		gameImages = images.getRandomElements((numberOfGamePix/2));
		gameImages.doubleElements();
		gameImages.shuffle();
		
		var gameElement = document.createElement("div");
		gameElement.setAttribute('style', 'width:' + ((numberOfColumns*imageWidth) + numberOfColumns) + 'px; border:3px solid ' + borderColor + '; padding:1px; margin: auto auto;');
		gameElement.setAttribute('id', 'g_'+ game);
		
		var rowElement = document.createElement("h2");
		var text = document.createTextNode(title);
		rowElement.setAttribute('id', 'gameTitle' + game);
		rowElement.setAttribute('style', 'color:' + borderColor + ';');
		rowElement.appendChild(text);
		gameElement.appendChild(rowElement);
		
		var counter = 0;
		for(var i=0; i<numberOfRows; i++)
		{
			rowElement = document.createElement("div");
			rowElement.setAttribute('style', 'width:' + ((numberOfColumns*imageWidth) + numberOfColumns) + 'px; height:' + imageHeight + 'px');
			for(j=0; j<numberOfColumns; j++)
			{
				var divElement = document.createElement("div");
				divElement.setAttribute('id', 'g_'+ game + '_' + counter);
			 	divElement.setAttribute('style', 'float:left; width:'+ imageWidth + 'px; height:' + imageHeight + 'px; margin:0px 1px 1px 0px; background:url(' + (path + imageFileNameStem + gameImages[counter] + '.' + imageFileType) +') center center no-repeat');
				divElement.setAttribute('imageNum', gameImages[counter]);
				divElement.imageNum = gameImages[counter];
				divElement.divNum = counter;
				divElement.onclick = showPic;
				var img = document.createElement('img');
				img.setAttribute('width', imageWidth + 'px');
				img.setAttribute('height', imageHeight + 'px');
				img.setAttribute('src', path + imageBack);
				notOpenedImages.push(divElement);
				imagesInGame.push(divElement);
				divElement.appendChild(img);
				rowElement.appendChild(divElement);
				counter++;
			}
			gameElement.appendChild(rowElement);
		}
		gameElement.appendChild(createInfoDisplay());
		gameElement.appendChild(createGameSettings());
		gameElement.appendChild(createHelpPanel());
		var gameField = document.getElementById('gameField' + game);
		// if the new game is placed into the same div
		if(gameField.hasChildNodes())
		{
			if(pointers[game])
				clearInterval(pointers[game]);
			gameField.replaceChild(gameElement, gameField.firstChild);
			gameField.appendChild(gameElement);
		}
		else
			gameField.appendChild(gameElement);
	}
	
	function createInfoDisplay()
	{
		var infoElement = document.createElement("div");
		infoElement.setAttribute('id', 'info' + game);
		infoElement.setAttribute('style', 'width:' + (((numberOfColumns*imageWidth) + numberOfColumns) - 16) + 'px; border:3px solid ' + borderColor + ';');
		// Number / Name of player who is playing
		var pElement = document.createElement("p");
		pElement.setAttribute('id', 'Player' + game);
		var text = document.createTextNode(lang[3] + " 1")
		pElement.appendChild(text);
		infoElement.appendChild(pElement);
		// Failures
		pElement = document.createElement("p");
		var inputElement = document.createElement('input');
		inputElement.setAttribute('type', 'text');
		inputElement.setAttribute('id', 'numberOfTries' + game);
		inputElement.setAttribute('value', 0);
		pElement.appendChild(inputElement);
		text = document.createTextNode(" " + lang[4])
		pElement.appendChild(text);
		infoElement.appendChild(pElement);
		// Pairs
		pElement = document.createElement("p");
		inputElement = document.createElement('input');
		inputElement.setAttribute('type', 'text');
		inputElement.setAttribute('id', 'numberOfPairs' + game);
		inputElement.setAttribute('value', 0);
		pElement.appendChild(inputElement);
		text = document.createTextNode(" " + lang[5])
		pElement.appendChild(text);
		infoElement.appendChild(pElement);
		// Time
		pElement = document.createElement("p");
		inputElement = document.createElement('input');
		inputElement.setAttribute('type', 'text');
		inputElement.setAttribute('id', 'clock' + game);
		inputElement.setAttribute('value', '00:00:00');
		pElement.appendChild(inputElement);
		text = document.createTextNode(" " + lang[6])
		pElement.appendChild(text);
		infoElement.appendChild(pElement);
		// New Game button
		pElement = document.createElement("p");
		pElement.setAttribute('class', 'buttonField');
		var button = document.createElement('button');
		button.setAttribute('id', 'newGame' + game);
		text = document.createTextNode(lang[9]);
		button.appendChild(text);
		button.onclick = newGame;
		pElement.appendChild(button);
		infoElement.appendChild(pElement);
		// Settings and Help buttons
		pElement = document.createElement("p");
		pElement.setAttribute('class', 'buttonField');
		button = document.createElement('button');
		button.setAttribute('id', 'settingsButton' + game);
		text = document.createTextNode(lang[10]);
		button.appendChild(text);
		button.onclick = toggleSettings;
		pElement.appendChild(button);
		button = document.createElement('button');
		button.setAttribute('id', 'helpButton' + game);
		text = document.createTextNode(lang[26]);
		button.appendChild(text);
		button.onclick = toggleHelp;
		pElement.appendChild(button);
		infoElement.appendChild(pElement);
			
		return infoElement;
	}
	
	function createGameSettings()
	{
		var settingsElement = document.createElement("div");
		settingsElement.setAttribute('style', 'width:' + (((numberOfColumns*imageWidth) + numberOfColumns) - 16) + 'px; border:3px solid ' + borderColor + '; display:none;');
		settingsElement.setAttribute('id', 'settings' + game);
		// Number of players
		var pElement = document.createElement("p");
		pElement.setAttribute('id', 'players' + game);
		var spanElement = document.createElement('span');
		spanElement.setAttribute('style', 'font-weight:bold');
		var text = document.createTextNode(lang[11] + " ");
		spanElement.appendChild(text);
		pElement.appendChild(spanElement);
		var inputElement = document.createElement('input');
		inputElement.setAttribute('id', 'Player1');
		inputElement.setAttribute('type', 'radio');
		inputElement.setAttribute('name', 'playersNum' + game);
		inputElement.setAttribute('value', '1');
		inputElement.setAttribute('checked', 'checked');
		inputElement.onchange = hideSettings;
		pElement.appendChild(inputElement);
		var label = document.createElement('label')
		label.setAttribute('for', 'Player1')
		text = document.createTextNode(" 1 ");
		label.appendChild(text);
		pElement.appendChild(label);
		inputElement = document.createElement('input');
		inputElement.setAttribute('type', 'radio');
		inputElement.setAttribute('name', 'playersNum' + game);
		inputElement.setAttribute('value', '2');
		inputElement.onchange = showElement;
		pElement.appendChild(inputElement);
		text = document.createTextNode(" 2");
		pElement.appendChild(text);
		settingsElement.appendChild(pElement);
		// type of players (human / computer)
		pElement = document.createElement("p");
		pElement.setAttribute('id', 'opponents' + game);
		pElement.setAttribute('style', 'display:none;');
		spanElement = document.createElement('span');
		spanElement.setAttribute('style', 'font-weight:bold');
		text = document.createTextNode(lang[12] + " ");
		spanElement.appendChild(text);
		pElement.appendChild(spanElement);
		inputElement = document.createElement('input');
		inputElement.setAttribute('type', 'radio');
		inputElement.setAttribute('name', 'playersType' + game);
		inputElement.setAttribute('value', '1');
		inputElement.setAttribute('checked', 'checked');
		inputElement.setAttribute('id', 'normalPlayerType');
		inputElement.onchange = hideSettings;
		pElement.appendChild(inputElement);
		text = document.createTextNode(" " + lang[13] + " ");
		pElement.appendChild(text);
		inputElement = document.createElement('input');
		inputElement.setAttribute('type', 'radio');
		inputElement.setAttribute('name', 'playersType' + game);
		inputElement.setAttribute('value', '2');
		inputElement.onchange = showElement;
		pElement.appendChild(inputElement);
		text = document.createTextNode(" " + lang[2]);
		pElement.appendChild(text);
		settingsElement.appendChild(pElement);
		// computer intelligence (AI) settings
		var computerIntelligence = document.createElement("div");
		computerIntelligence.setAttribute('style', 'display:none;');
		// strength of memory
		pElement = document.createElement("p");
		pElement.setAttribute('id', 'computerMemory' + game);
		spanElement = document.createElement('span');
		spanElement.setAttribute('style', 'font-weight:bold');
		text = document.createTextNode(lang[14] + " ");
		spanElement.appendChild(text);
		pElement.appendChild(spanElement);
		inputElement = document.createElement('input');
		inputElement.setAttribute('type', 'radio');
		inputElement.setAttribute('name', 'memory' + game);
		inputElement.setAttribute('value', '1');
		inputElement.onchange = newGame;
		pElement.appendChild(inputElement);
		text = document.createTextNode(" " + lang[15] + " ");
		pElement.appendChild(text);
		inputElement = document.createElement('input');
		inputElement.setAttribute('type', 'radio');
		inputElement.setAttribute('name', 'memory' + game);
		inputElement.setAttribute('value', '2');
		inputElement.setAttribute('checked', 'checked');
		inputElement.setAttribute('id', 'normalMemory');
		inputElement.onchange = newGame;
		pElement.appendChild(inputElement);
		text = document.createTextNode(" " + lang[16] + " ");
		pElement.appendChild(text);
		inputElement = document.createElement('input');
		inputElement.setAttribute('type', 'radio');
		inputElement.setAttribute('name', 'memory' + game);
		inputElement.setAttribute('value', '3');
		inputElement.onchange = newGame;
		pElement.appendChild(inputElement);
		text = document.createTextNode(" " + lang[17]);
		pElement.appendChild(text);
		computerIntelligence.appendChild(pElement);
		// strategy settings
		pElement = document.createElement("p");
		pElement.setAttribute('id', 'computerStrategy' + game);
		spanElement = document.createElement('span');
		spanElement.setAttribute('style', 'font-weight:bold');
		text = document.createTextNode(lang[18] + " ");
		spanElement.appendChild(text);
		pElement.appendChild(spanElement);
		inputElement = document.createElement('input');
		inputElement.setAttribute('type', 'radio');
		inputElement.setAttribute('name', 'strategy' + game);
		inputElement.setAttribute('value', '1');
		inputElement.onchange = newGame;
		pElement.appendChild(inputElement);
		text = document.createTextNode(" " + lang[19] + " ");
		pElement.appendChild(text);
		inputElement = document.createElement('input');
		inputElement.setAttribute('type', 'radio');
		inputElement.setAttribute('name', 'strategy' + game);
		inputElement.setAttribute('value', '2');
		inputElement.setAttribute('checked', 'checked');
		inputElement.setAttribute('id', 'normalStrategy');
		inputElement.onchange = newGame;
		pElement.appendChild(inputElement);
		text = document.createTextNode(" " + lang[20] + " ");
		pElement.appendChild(text);
		inputElement = document.createElement('input');
		inputElement.setAttribute('type', 'radio');
		inputElement.setAttribute('name', 'strategy' + game);
		inputElement.setAttribute('value', '3');
		inputElement.onchange = newGame;
		pElement.appendChild(inputElement);
		text = document.createTextNode(" " + lang[21]);
		pElement.appendChild(text);
		computerIntelligence.appendChild(pElement);
		// who is beginning
		pElement = document.createElement("p");
		pElement.setAttribute('id', 'start' + game);
		spanElement = document.createElement('span');
		spanElement.setAttribute('style', 'font-weight:bold');
		text = document.createTextNode(lang[22] + " ");
		spanElement.appendChild(text);
		pElement.appendChild(spanElement);
		inputElement = document.createElement('input');
		inputElement.setAttribute('type', 'radio');
		inputElement.setAttribute('name', 'start' + game);
		inputElement.setAttribute('value', '1');
		inputElement.setAttribute('checked', 'checked');
		inputElement.setAttribute('id', 'normalStart');
		inputElement.onchange = newGame;
		pElement.appendChild(inputElement);
		text = document.createTextNode(" " + lang[23] + " ");
		pElement.appendChild(text);
		inputElement = document.createElement('input');
		inputElement.setAttribute('type', 'radio');
		inputElement.setAttribute('name', 'start' + game);
		inputElement.setAttribute('value', '2');
		inputElement.onchange = newGame;
		pElement.appendChild(inputElement);
		text = document.createTextNode(" " + lang[24]);
		pElement.appendChild(text);
		computerIntelligence.appendChild(pElement);
			
		settingsElement.appendChild(computerIntelligence);
		// close settings button
		pElement = document.createElement("p");
		pElement.setAttribute('class', 'buttonField');
		var button = document.createElement('button');
		text = document.createTextNode(lang[25]);
		button.appendChild(text);
		button.onclick = toggleSettings;
		pElement.appendChild(button);
		settingsElement.appendChild(pElement);
		
		return settingsElement;
	}
	
	function createHelpPanel()
	{
		var helpElement = document.createElement("div");
		helpElement.setAttribute('style', 'width:' + (((numberOfColumns*imageWidth) + numberOfColumns) - 16) + 'px; border:3px solid ' + borderColor + '; display:none;');
		helpElement.setAttribute('id', 'help' + game);
		var text = document.createTextNode(lang[27]);
		helpElement.appendChild(text);
		// close button
		var pElement = document.createElement("p");
		pElement.setAttribute('class', 'buttonField');
		var button = document.createElement('button');
		text = document.createTextNode(lang[25]);
		button.appendChild(text);
		button.onclick = toggleHelp;
		pElement.appendChild(button);
		helpElement.appendChild(pElement);
		
		return helpElement;
	}
	
	
}