<!doctype html>
<html>
<head>
	<title>Picture This 2: Control</title>
	<link rel="stylesheet" type="text/css" href="control.css">
	<script src="ptlib.js"></script>
<script>
var domain = "http://localhost";
var mypopup = window.open(domain+'/PT2/display.php', 'myWindow');

<?php 
if ($_POST['key']=="pardot") $banner2="pardot";
if ($_POST['key']=="desk") $banner2="desk";
if ($_POST['key']=="cloud") $banner2="cloud";
if ($_POST['key']=="match") $banner2="match";
if ($_POST['key']=="powerpair") $banner2="powerpair";
$matchoptions = array_slice(scandir('match'), 2); //all the matches
$nummatchoptions = count($matchoptions);
print "var allmatchcards = new Array();\r\n";
print "var matchcards = new Array();\r\n";
print "var matchcheck = new Array();\r\n";
for ($i=0;$i<$nummatchoptions;$i++)
{
	print "allmatchcards["."$i"."] = \""."$matchoptions[$i]"."\";\r\n";
}
//if ($banner2!="match") $cardfolder = $banner2; else $cardfolder = "salesforce";
//$cardfolder = $banner2;
$cardfolder = "interplay1";
$team1 = "Expert 1";
$team2 = "Expert 2";
$clocktime = $_POST['clocktime'];
$cloudmode = $_POST['cloudmode'];
$directmode = $_POST['directmode'];
?>

var cardfolder = "<?=$cardfolder?>";
var ptCode = 0;
var theGame = "idle";
var team1pick1 = 99;
var team1pick2 = 99;
var team2pick1 = 99;
var team2pick2 = 99;
var team1r1 = 0;
var team1c1 = 0;
var team2r1 = 0;
var team2c1 = 0;
var team1r2 = 0;
var team1c2 = 0;
var team2r2 = 0;
var team2c2 = 0;
var clocktime = <?=$clocktime?>;
var clockmin="01";
var clocksec="30";
var team1score = 0;
var team2score = 0;
var bigkeys = 0;
var teamname1 = "<?=$team1?>";
var teamname2 = "<?=$team2?>";
var cloudmode = <?=$cloudmode?>;
var newname = "";
var newnamechars = 0;
var live = 0;
var livestate = 0;
var bumpX = -2903;
var bumpY = -407;
var bumpmode=0;
var solved1=0;
var solved2=0;
var clockloop=0;
var donelist1 = new Array();
var donelist2 = new Array();
var directmode = <?=$directmode?>;
var GameOn = 0;
var controls=0;

//removes the big keyboard
//do not move this function to ptlib
//it will be different depending on the game.
function offBigKeys()
{
	live=0;
	if (cloudmode==1) goBigClouds(0,0,0); else cardbackshalf(cardfolder,1);
}

function getnewset()
{
	//shuffle the entire deck
	shuffle(allmatchcards);
	tempcards = allmatchcards.slice(0);
	//pick 15
	var selectcards = tempcards.slice(0,15);
	//double it
	var selectcards2 = selectcards.concat(selectcards);
	//shuffle it for team 1
	shuffle(selectcards2);
	var team1cards = selectcards2.slice(0);
	//shuffle it for team 2
	shuffle(selectcards2);
	var team2cards = selectcards2.slice(0);
	//put the two decks together
	matchcards = team1cards.concat(team2cards);
	matchcheck = team1cards.concat(team2cards);
}
function initscores()
{
	var nametext1 = document.getElementById('team1name');
	var nametext2 = document.getElementById('team2name');
	var scorebox = document.getElementById('stats');
	nametext1.innerHTML=teamname1;
	nametext2.innerHTML=teamname2;
	nametext1.style.visibility="visible";
	nametext2.style.visibility="visible";
	scorebox.style.visibility="visible";
	var message = ["names","dash",1,teamname1,1];
	mypopup.postMessage(message,domain);
	var message = ["names","dash",2,teamname2,1];
	mypopup.postMessage(message,domain);
	var message = ["show","stats",0,"div"];
	mypopup.postMessage(message,domain);
}
//helper helper function for getAssets
function putstart()
{
	var message=["image",5,6,"graphics/gamestartwhite.png",1,0];
	mypopup.postMessage(message,domain);
	var message=["image",5,7,"graphics/exitblue.png",1,0];
	mypopup.postMessage(message,domain);
	controls=1;
}
//help function for init
function getAssets(allassets)
{
	if (allassets)
	{
		getnewset();
		initscores();
	}
	setclock(clocktime);
	if (cloudmode==1) goBigClouds(0,0,0); else cardbackshalf(cardfolder,1);
	theGame = "halfmatch";	
	//var assettimer = setTimeout(function(){ putstart(); },2500 );
	//set the team names
	var message = ["names", theGame, 1, "Expert 1", 1];
	mypopup.postMessage(message,domain);
	var message = ["names", theGame, 2, "Expert 2", 1];
	mypopup.postMessage(message,domain);
	var team1name = document.getElementById['team1name'];
	var team2name = document.getElementById['team2name'];
	team1name.innerHTML="Expert 1";
	team2name.innerHTML="Expert 2";
}
function init()
{
	clearalltext();
	//cardbackshalf(cardfolder,1);
	//APPARENTLY ALWAYS DOES THIS RIGHT NOW
	//NO DIFFERENCE BETWEEN BLUE ICON AND RED ARROW
	//SINCE CARDFOLDER IS HARDWIRED TO SALESFORCE
	if (directmode)
	{
		//slide3different("<?=$banner2?>3.png","<?=$banner2?>2.png","<?=$banner2?>1.png",0)
			setbanner("<?=$banner2?>1",1);
			setbanner("<?=$banner2?>2",2);
			setbanner("<?=$banner2?>3",3);
			getAssets(1);
		//var assettimer = setTimeout(function(){ getAssets(1); },7500 );
	}
	else
	{
		if (cardfolder!="match") //a game has been selected
		{
			setbanner("<?=$banner2?>1",1);
			setbanner("<?=$banner2?>2",2);
			setbanner("<?=$banner2?>3",3);
			getAssets(1);
		}
		else //a game has not been selected?
		{
			slide3("<?=$banner2?>.png",0);
			//setallbanners("<?=$banner2?>.png");
			getAssets(0);
		}
	}	
}
//puts up dots if match is correct
function doDots(team)
{
	if (team==1)
	{
		var message1=["image",team1r1,team1c1,"graphics/green_dot.png", 1,1]; 
		var message2=["image",team1r2,team1c2,"graphics/green_dot.png", 1,1]; 
		var imageid1="r"+team1r1+"c"+team1c1;
		var imageid2="r"+team1r2+"c"+team1c2;
		team1r1=0;
		team1r2=0;
		team1c1=0;
		team1c2=0;
		donelist1.push(team1pick1);
		donelist1.push(team1pick2);
		team1pick1=99;
		team1pick2=99;
	}
	else
	{
		var message1=["image",team2r1,team2c1,"graphics/green_dot.png", 1,1]; 
		var message2=["image",team2r2,team2c2,"graphics/green_dot.png", 1,1];
		var imageid1="r"+team2r1+"c"+team2c1;
		var imageid2="r"+team2r2+"c"+team2c2;
		team2r1=0;
		team2r2=0;
		team2c1=0;
		team2c2=0;
		donelist2.push(team2pick1);
		donelist2.push(team2pick2);
		team2pick1=99;
		team2pick2=99;
	}
	mypopup.postMessage(message1,domain);
	mypopup.postMessage(message2,domain);
	var image1 = document.getElementById(imageid1);
	var image2 = document.getElementById(imageid2);
	data = "small_graphics/green_dot.png";
	image1.src=data;
	image2.src=data;
	image1.style.visibility="visible";
	image2.style.visibility="visible";
	hideallborders();	
}
//puts the card backs up after a wrong match
function doBacks(team)
{
	if (team==1)
	{
		//this is the same every time
		//var cardback = "cardbacks/"+cardfolder+"/red.png";
		//in order to put up the cloud, we will need:
		//determine which cards they are. Do we have this?
		//they appears to be (team1r1,team1c2) and (team1r2,team1c2)
		//a list of the cloud cards. Do we have this?
		//it should just be 1.png, 2.png, 3.png, etc.
		//how to convert row/col to a number...
		var index1 = ((team1r1-1)*6)+team1c1;
		var index2 = ((team1r2-1)*6)+team1c2;
		var back1 = "cardbacks/"+cardfolder+"/red.png";
		var back2 = "cardbacks/"+cardfolder+"/red.png";
		//var message1=["image",team1r1,team1c1,cardback, 1,1]; 
		//var message2=["image",team1r2,team1c2,cardback, 1,1]; 
		var message1=["image",team1r1,team1c1,back1, 1,1]; 
		var message2=["image",team1r2,team1c2,back2, 1,1]; 
		var imageid1="r"+team1r1+"c"+team1c1;
		var imageid2="r"+team1r2+"c"+team1c2;
		team1r1=0;
		team1c1=0;
		team1r2=0;
		team1c2=0;
		team1pick1=99;
		team1pick2=99;
	}
	else
	{
		//var cardback = "cardbacks/"+cardfolder+"/blue.png";
		var index1 = ((team2r1-1)*6)+(team2c1-6);
		var index2 = ((team2r2-1)*6)+(team2c2-6);
		var back1 = "cardbacks/"+cardfolder+"/blue.png";
		var back2 = "cardbacks/"+cardfolder+"/blue.png";
		//var message1=["image",team2r1,team2c1,cardback, 1,1]; 
		//var message2=["image",team2r2,team2c2,cardback, 1,1];
		var message1=["image",team2r1,team2c1,back1, 1,1]; 
		var message2=["image",team2r2,team2c2,back2, 1,1];
		var imageid1="r"+team2r1+"c"+team2c1;
		var imageid2="r"+team2r2+"c"+team2c2;
		team2r1=0;
		team2c1=0;
		team2r2=0;
		team2c2=0;
		team2pick1=99;
		team2pick2=99;
	}
	mypopup.postMessage(message1,domain);
	mypopup.postMessage(message2,domain);
	var image1 = document.getElementById(imageid1);
	var image2 = document.getElementById(imageid2);
	//var data = "small_"+cardback;
	var data1 = "small_"+back1;
	var data2 = "small_"+back2;
	//image1.src=data;
	//image2.src=data;
	image1.src=data1;
	image2.src=data2;
	image1.style.visibility="visible";
	image2.style.visibility="visible";	
	hideallborders();
}
function doGameClockStart()
{
	GameOn=1;
	controls=0;
	//do any additional initialization required at first clock start
}
//deals with keystrokes coming from the arduino
function goHalfMatch(ptCode,row,col)
{
	var match = 0;
	if (col>6) 
	{
		var index = ptCode; 
		var team = 2;
	}
	else 
	{
		var index = ptCode;
		var team = 1;
	}
	if ((team==1)&&(donelist1.indexOf(index)<0))
	{
		if (team1pick1==99) //first pick
		{
			
		var pickimage = "match/"+matchcards[index];
		var message=["image",row,col,pickimage, 1, 1]; 
		mypopup.postMessage(message,domain);
		var imageid="r"+row+"c"+col;
		var image = document.getElementById(imageid);
		data = "small_"+pickimage;
		image.src=data;
		image.style.visibility="visible";			
			
			team1pick1=index;
			team1r1 = row;
			team1c1 = col;
		}
		else //second pick
		{
			if ((team1pick1!=99)&&(team1pick2==99)&&(index!=team1pick1))
			{
				
				var pickimage = "match/"+matchcards[index];
				var message=["image",row,col,pickimage, 1, 1]; 
				mypopup.postMessage(message,domain);
				var imageid="r"+row+"c"+col;
				var image = document.getElementById(imageid);
				data = "small_"+pickimage;
				image.src=data;
				image.style.visibility="visible";				
				
				team1pick2=index;
				team1r2 = row;
				team1c2 = col;
				//match?
				if (matchcards[team1pick1]==matchcards[team1pick2])
				{
					var message1=["border",row,col,"border_green.png", 1];
					var message2=["border",team1r1,team1c1,"border_green.png", 1];
					var message3=["sound","dingding_left.wav"];
					var data = "small_graphics/border_green.png";
					match=1;
					matchcheck[team1pick1]="";
					matchcheck[team1pick2]="";
					solved1++;
					if (solved1==15) clockstop();
				}
				else
				{
					var message1=["border",row,col,"border_red.png", 1];
					var message2=["border",team1r1,team1c1,"border_red.png", 1];
					var message3=["sound","dong_left.wav"];
					var data = "small_graphics/border_red.png";
					match=0;
				}
				mypopup.postMessage(message1,domain);
				mypopup.postMessage(message2,domain);
				mypopup.postMessage(message3,domain);				
				var borderid1="br"+row+"c"+col;
				var borderid2="br"+team1r1+"c"+team1c1;
				var border1 = document.getElementById(borderid1);
				var border2 = document.getElementById(borderid2);
				border1.src=data;
				border2.src=data;
				border1.style.visibility="visible";
				border2.style.visibility="visible";
				if (match==1) 
				{
					team1score=team1score+2;
					var scoretext = document.getElementById('score1');
					scoretext.innerHTML=team1score;
					var message=["score",1,team1score,1];
					mypopup.postMessage(message,domain);
					var halftimer1 = setTimeout(function(){ doDots(1); },750 ); 
				}
				else 
				{
					var halftimer1 = setTimeout(function(){ doBacks(1); },570 );
				}
				
			}
		}
	}
	if ((team==2)&&(donelist2.indexOf(index)<0))
	{
		if (team2pick1==99) //first pick
		{
			team2pick1=index;
			team2r1 = row;
			team2c1 = col;
			
		var pickimage = "match/"+matchcards[index];
		var message=["image",row,col,pickimage, 1, 1]; 
		mypopup.postMessage(message,domain);
		var imageid="r"+row+"c"+col;
		var image = document.getElementById(imageid);
		data = "small_"+pickimage;
		image.src=data;
		image.style.visibility="visible";
		
		}
		else //second pick
		{
			if ((team2pick1!=99)&&(team2pick2==99)&&(index!=team2pick1))
			{
				
		var pickimage = "match/"+matchcards[index];
		var message=["image",row,col,pickimage, 1, 1]; 
		mypopup.postMessage(message,domain);
		var imageid="r"+row+"c"+col;
		var image = document.getElementById(imageid);
		data = "small_"+pickimage;
		image.src=data;
		image.style.visibility="visible";
		
				team2pick2=index;
				team2r2 = row;
				team2c2 = col;
				//match?
				if (matchcards[team2pick1]==matchcards[team2pick2])
				{
					var message1=["border",row,col,"border_green.png", 1];
					var message2=["border",team2r1,team2c1,"border_green.png", 1];
					var message3=["sound","dingding_right.wav"];
					var data = "small_graphics/border_green.png";
					match=1;
					matchcheck[team2pick1]="";
					matchcheck[team2pick2]="";
					solved2++;
					if (solved2==15) clockstop();
				}
				else
				{
					var message1=["border",row,col,"border_red.png", 1];
					var message2=["border",team2r1,team2c1,"border_red.png", 1];
					var message3=["sound","dong_right.wav"];
					var data = "small_graphics/border_red.png";
					match=0;
				}
				mypopup.postMessage(message1,domain);
				mypopup.postMessage(message2,domain);	
				mypopup.postMessage(message3,domain);				
				var borderid1="br"+row+"c"+col;
				var borderid2="br"+team2r1+"c"+team2c1;
				var border1 = document.getElementById(borderid1);
				var border2 = document.getElementById(borderid2);
				border1.src=data;
				border2.src=data;
				border1.style.visibility="visible";
				border2.style.visibility="visible";
				if (match==1) 
				{
					team2score=team2score+2;
					var scoretext = document.getElementById('score2');
					scoretext.innerHTML=team2score;
					var message=["score",2,team2score,1];
					mypopup.postMessage(message,domain);
					var halftimer2 = setTimeout(function(){ doDots(2); },570 ); 
				}
				else 
				{
					var halftimer2 = setTimeout(function(){ doBacks(2); },570 );
				}
			}
		}
	}
}

</script>
</head>
<body>
<div id="container">
<div id="games">
<?php include("panel.php"); ?>
</div>
<div id="keyboard">
<input type="text" class="arduino" id="keyin" value="" onkeypress="return dokey(event)">
<BR><div id="ptindex">0</div><div id="ptgrid">r0 c0</div>
</div>

<div id="smallboard">
	<img id="smallscreen" src="small_graphics/smallscreen.png">
<!-- banners -->
	<img id="banner1" class="row0" class="col1" src="small_banners/match.png">
	<img id="banner2" class="row0" class="col5" src="small_banners/match.png">
	<img id="banner3" class="row0" class="col9" src="small_banners/match.png">
<?php include "preview.php"; ?>
</div>
</div>
</body>
<script>
var inittimer = setTimeout(function(){ init(); },1000 );
var loop = setInterval("setFocus();", 100);
</script>
</html>