/************************************************************************/
	/*                                                                      */
	/* Copyright 2010 by Stan Reckard     (www.artbylogic.com)              */
	/*                                                                      */
	/* This file and its contents are copyrighted by Stan Reckard.  All     */
	/* rights reserved. No content, programming code or images may be sold, */
	/* published or distributed without express permission from the author. */
	/* Do not remove copyright notices.  By violating these terms you may   */
	/* be held liable for any resulting loss or damage.                     */
	/*                                                                      */
	/* No support, guarantee or warranty is offered or implied. By using    */
	/* any of this code you assume full risk and responsibility for that    */
	/* use.  Written permission must be obtained before any use.            */
	/*                                                                      */
	/************************************************************************/

var colorPicked = "#fff";
var className = '';

window.onload = initMentalStretch;

function initMentalStretch() {
	var el = document.getElementById('guessPanel');
	if (el)
		disableSelection(el);
	
	el = document.getElementById('colorPanel');
	if (el)
		disableSelection(el);
		
	el = document.getElementById('guessHistPanel');
	if (el)
		disableSelection(el);
}

function goHome() {
	window.location = "http://www.artbylogic.com";
}

function getScreenDimensions() {
	var myWidth = 0, myHeight = 0;
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} 
	else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} 
	else { // if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
		//IE 4 compatible
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}

  return { width:myWidth, height:myHeight };
}

function showGameInstructions() {
	// Show popup dialog with a Close button
	var dlgWidth = 600;
	var dlgHeight = 400;
	var sDim = getScreenDimensions();
	var xPos = (sDim.width - dlgWidth) / 2;
	var yPos = (sDim.height - dlgHeight) / 2;
	
	var isModal = true;
		
	//var contentHTML = '<div style="text-align:center">Instructions</div>';

	var contentHTML = '<div id="showInstructions">' + "\n";
	contentHTML += '<div id="instructionsTitleBar"><span id="hdrInstructions">Mental Stretch Instructions</span></div>' + "\n";
	contentHTML += '<div id="iconInstructions">&nbsp;</div>' + "\n";
	contentHTML += '<div id="closeInstructions" onclick="closeDialog();"><a title="close" href="#" onclick="closeDialog();">X</a></div>' + "\n";
	contentHTML += '<div id="bodyInstructions">' + "\n";
	contentHTML += 'Mental Stretch is a Masermind clone; a code-breaker puzzle. You can choose your level of difficulty by selecting the number of colors and positions to use.&nbsp;';
	contentHTML += 'The goal is to deduce the code in as few guesses as possible.  The code is a sequence of colors.';
	contentHTML += '<br/>';
	contentHTML += '<br/>';
	contentHTML += 'At the top of the game board you can select the number of positions, the number of colors, and whether to allow duplicate colors in the code.  Once you ';
	contentHTML += 'make any changes here, you need to click on "New Game" for them to take effect.  Note that if the number of colors is less than the number of positions ';
	contentHTML += 'then duplicate colors will be enforced.';
	contentHTML += '<br/>';
	contentHTML += '<br/>';		
	contentHTML += 'The area below this is where you make your guess.  There will be a number of squares (according to the number of positions chosen) with hashed backgrounds. ';
	contentHTML += 'To place a guess, you need to set a color in each of these squares and then click the "Try it" button.  Colors are set by clicking on colored boxes in ';
	contentHTML += 'the area titled \'Colors:\' and then clicking on a box in the \'New Guess:\' area. ';
	contentHTML += '<br/>';
	contentHTML += '<br/>';
	contentHTML += 'Once you have placed your guess by clicking "Try it", your guess ';
	contentHTML += 'will display in the \'History:\' section (sorted newest to oldest).  Next to each guess in the \'History:\' section there will be zero or more small boxes. ';
	contentHTML += '<br/>';
	contentHTML += '<br/>';	
	contentHTML += 'A small black box means that you have a color in the correct location (it does not tell you which color or which location).  So, if there are two small black boxes ';
	contentHTML += 'next to a guess, this tells you that you have two colors in the right positions (you just don\'t know which colors they are.) ';
	contentHTML += 'A small white box means that you have a correct color but in the wrong location.';
	contentHTML += '<br/>';
	contentHTML += '<br/>';
	contentHTML += 'The total number of possible arrangements of colors (allowing duplicates) is colors^positions where "^" means exponentiation.  Thus, for the default setting ';
	contentHTML += 'of 8 colors and 5 positions there are 8^5 = 32,768 possible combinations.  For the maximum challenge of 20 colors and 20 positions there are (allowing duplicates) ';
	contentHTML += '20^20 =  1 x 10^26 possible arrangements!  ';
	contentHTML += '<br/>';
	contentHTML += '<br/>';	
	contentHTML += 'If duplicates are not allowed, then for 8 colors and 5 positions there are 8*7*6*5*4 = 6,720 possible arrangements. ';
	contentHTML += 'And for 20 colors and 20 positions there are 20! = 2 x 10^18 possibilities!';
	contentHTML += '<br/>';
	contentHTML += '<br/>';	
	contentHTML += 'For more information on Masermind clones, including strategies for solving, see <a href="http://en.wikipedia.org/wiki/Mastermind_game">Wikipedia</a><br/>';
	contentHTML += '<br/>';
	contentHTML += 'Enjoy!';  
	contentHTML += '<input name="close" id="closeInstructionsButton" type="button" value="OK" onclick="closeDialog(1);" />' + "\n";
	contentHTML += '</div></div>' + "\n";
	
	var cd = showDialog(contentHTML, document.body, isModal, xPos, yPos, dlgWidth, dlgHeight);
	
	disableSelection(cd); 
	return false;
}

// disable text selection
function disableSelection(target){
	if (typeof target.onselectstart!="undefined") //IE route
		target.onselectstart=function(){return false}
	else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
		target.style.MozUserSelect="none"
	else  { //All other route (ie: Opera)
		target.onmousedown=function(){return false;}
		//target.onclick=function() {return true;}
	}	
	target.style.cursor = "default"
}

function getClassName(el, fSetCursor) {
	className = el.className;
	//if (!className.length || (className == 'noColor'))
	//	return 'noColor';
	//alert('getClassName: ' + className);
	if (fSetCursor)
		setGameCursor(el, className, false);
	return className;
}
function setClassName(el) {
	// class = color_#
	//alert('set class to ' + className);
	if (className.length)
		el.className = className;
}

function getColor(el) {
	colorPicked = (document.defaultView) 
					   ? document.defaultView.getComputedStyle(el,null).getPropertyValue('background-color') 
					   : el.currentStyle['backgroundColor']; 
	//alert('get ' + colorPicked);
	return colorPicked;
}
function setColor(el) {
	//alert('set to ' + colorPicked);
	el.style.backgroundColor = colorPicked;
}
function choiceMade(po, btn) {
	//alert('choiceMade');
	// Loop thru the colors the user picked and convert to a string of digits delimited by commas and put in soln.
	var soln = "";
	var i, el, elid, pos, id, clrClass;
	
	// Loop through the slots (user choices)
	for (i=0; i < po; i++) {
		elid = 'slot' + i;
		el = document.getElementById(elid);
		if (el) {
			// get the background color from the className
			// clr = getColor(el);
			clrClass = getClassName(el, false);  // get the suffix which is a number representing the color
			// alert('color class: ' + clrClass);
			// id = el.id;
			pos = clrClass.indexOf('_');
			if (pos == -1) {
				alert('You need to set the colors before submitting your guess.');
				return false; // halt the submit
			}
			clrIdx = parseInt(clrClass.substr(pos+1));
			soln = soln + clrIdx.toString();
			if (i < (po-1))					
				soln = soln + ',';
		}
	}
	
	//alert('guess=' + soln);
	document.mentalstretch.guess.value = soln;
	return true;  // submit
} // end choiceMade

function setGameCursor(el, colorClass, showDefault) {
	// Import a bmp image into http://www.favicon.cc/ and convert to 32x32 ico.  Then rename to cur
	// Better and bigger:  png2ico.exe at  http://www.winterdrache.de/freeware/png2ico/index.html or via download.com
	// Rename to .cur after converting .png to .ico
	// Set png image to 32x32 or 24x24  or 16x16.
	//colorClass = "greenO5sm";  // redX11sm
	if (!colorClass.length || (colorClass == 'noColor'))
		return;
	
	if (!showDefault)
		showDefault = false;
	var cursorImg;
	if (showDefault)
		cursorImg = 'default';
	else
		cursorImg = "url('" + colorClass + ".cur" + "'), pointer";
	
	//cursorImg = "url('color_1.cur'), pointer";
	//alert(cursorImg);
				
	//el.style.cursor = cursorImg;
	el.style.cursor = 'default';
	
	//alert('found ' + el.style.cursor);

	document.getElementById('colorPanel').style.cursor = cursorImg;
	document.getElementById('guessPanel').style.cursor = cursorImg;
	document.getElementById('guessColorWrapper').style.cursor = cursorImg;
}