<!doctype html>
<html>
<head>
	<title>Picture This 2: Display</title>
	<link rel="stylesheet" type="text/css" href="pt2.css">
	<script src="flip.js"></script>
	<script>
	window.addEventListener('message',setstatus);
	function setstatus(event)
	{
		if(event.origin !== 'http://localhost') return;
		var message = event.data;
		var action = message[0];
		switch(action)
		{
		case "time":
			var clocktext = message[1];
			var vis  = message[2];
			var clock = document.getElementById('clock');
			var stats = document.getElementById('stats')
			clock.innerHTML = clocktext;
			if (vis==1) 
			{
				clock.style.visibility="visible";
				stats.style.visibility="visible";
			}
			break;
		case "clockgif":
			var clockfile = "graphics/00.png";
			var data = message[1];
			if (data==1) clockfile = "graphics/00.gif";
			clockgif = document.getElementById('clockgif');
			clockgif.src = clockfile;
			break;
		case "tag":
			var data = message[1];
			var vis  = message[2];
			var mytag = document.getElementById('tag');
			mytag.innerHTML=data;
			if (vis==1) mytag.style.visibility="visible";
			break;
		case "names":
			var game = message[1];
			var team = message[2];
			var data = message[3];
			var vis  = message[4];
			if (team==1)
			{

				var nametext = document.getElementById('team1name');
			}
			else
			{

				var nametext = document.getElementById('team2name');
			}
			nametext.innerHTML=data;
			if (vis==1) nametext.style.visibility="visible";
			break;
		case "score":
			var team   = message[1];
			var data   = message[2];
			var vis    = message[3];
			if (team==1) 
			{
				var scoretext = document.getElementById('score1');
			}
			else
			{
				var scoretext = document.getElementById('score2');
			}
			scoretext.innerHTML=data;
			if (vis==1) scoretext.style.visibility="visible";
			break;
		case "image":
			var row    = message[1];
			var col    = message[2];
			var data   = message[3];
			var vis    = message[4];
			var spin   = message[5];
			var old    = message[6];
			var imageid="r"+row+"c"+col;
			if (spin==1)
			{
				flip(imageid,data,16,1)
			}
			if (spin==2)
			{
				doubleflip(imageid,data,old,16,1)
			}
			if (spin==0)
			{
				var image = document.getElementById(imageid);
				//experimental
				image.style.marginLeft="";
				image.src=data;
				if (vis==1) image.style.visibility="visible";
			}
			break;
		case "border":
			var row    = message[1];
			var col    = message[2];
			var data   = "graphics/"+message[3];
			var vis    = message[4];
			var borderid="br"+row+"c"+col;
			var border = document.getElementById(borderid);
			border.src=data;
			if (vis==1) border.style.visibility="visible";
			break;
		case "banner":
			var col    = message[1];
			var data   = message[2];
			var bannerid="banner"+col;
			var banner = document.getElementById(bannerid);
			banner.src=data;
			banner.style.visibility="visible";
			break;
		case "text":
			var row    = message[1];
			var col    = message[2];
			var data   = message[3];
			var textid="tr"+row+"c"+col;
			var thetext = document.getElementById(textid);
			data="<div id='grid_cell'>"+data+"</div>";
			thetext.innerHTML=data;
			thetext.style.visibility="visible";
			break;
		case "hide":
			var row    = message[1];
			var col    = message[2];
			var data   = message[3];
			if (data=="image") var id="r"+row+"c"+col;
			if (data=="border") var id="br"+row+"c"+col;
			if (data=="text") var id="tr"+row+"c"+col;
			if (data=="div") var id=row;
			var theitem = document.getElementById(id);
			theitem.style.visibility="hidden";
			break;
		case "show":
			var row    = message[1];
			var col    = message[2];
			var data   = message[3];
			if (data=="image") var id="r"+row+"c"+col;
			if (data=="border") var id="br"+row+"c"+col;
			if (data=="text") var id="tr"+row+"c"+col;
			if (data=="div") var id=row;
			if (id=="stats")
			{
				var score1=document.getElementById('score1');
				var score2=document.getElementById('score2');
				var clock =document.getElementById('clock');
				score1.style.visibility="visible";
				score2.style.visibility="visible";
				clock.style.visibility ="visible";
			}
			var theitem = document.getElementById(id);
			theitem.style.visibility="visible";
			break;
		case "sound":
			var data = "sounds/"+message[1];
			var audio = new Audio(data);
			audio.play();
			break;
		case "bannerslide":
			var banner0=document.getElementById('banner0');
			var banner1=document.getElementById('banner1');
			var banner2=document.getElementById('banner2');
			var banner3=document.getElementById('banner3');
			var style0=getComputedStyle(banner0);
			var style1=getComputedStyle(banner1);
			var style2=getComputedStyle(banner2);
			var style3=getComputedStyle(banner3);
			var margin0 = parseInt(style0.getPropertyValue("margin-left"))+60;
			var margin1 = parseInt(style1.getPropertyValue("margin-left"))+60;
			var margin2 = parseInt(style2.getPropertyValue("margin-left"))+60;
			var margin3 = parseInt(style3.getPropertyValue("margin-left"))+60;
			var left0=margin0+"px";
			var left1=margin1+"px";
			var left2=margin2+"px";
			var left3=margin3+"px";
			banner0.style.marginLeft=left0;
			banner1.style.marginLeft=left1;
			banner2.style.marginLeft=left2;
			banner3.style.marginLeft=left3;
			break;
		case "bannerstep":
			var banner0=document.getElementById('banner0');
			var banner1=document.getElementById('banner1');
			var banner2=document.getElementById('banner2');
			var banner3=document.getElementById('banner3');
			var file0=banner0.src;
			var file1=banner1.src;
			var file2=banner2.src;
			banner1.src=file0;
			banner2.src=file1;
			banner3.src=file2;
			banner0.style.marginLeft="-1912px";
			banner1.style.marginLeft="8px";
			banner2.style.marginLeft="1928px";
			banner3.style.marginLeft="3848px";
			break;
		case "bump":
			var bumpX    = message[1];
			var bumpY   = message[2];
			var bumper=document.getElementById('bumpycloud');
			var style=getComputedStyle(bumper);
			var leftmargin=bumpX+"px";
			var topmargin=bumpY+"px";
			bumper.style.marginLeft=leftmargin;
			bumper.style.marginTop=topmargin;
			break;
		}
	}
	</script>
</head>
<body>
<div id="container">
<!-- banners -->
	<img id="banner0" class="row0" src="banners/startup3.png">
	<img id="banner1" class="row0" class="col1" src="banners/startup1.png">
	<img id="banner2" class="row0" class="col5" src="banners/startup2.png">
	<img id="banner3" class="row0" class="col9" src="banners/startup3.png">
<!-- stats -->
	<div id="stats">
		<div id="score1">0</div>
		<div id="clock">00:00</div>
		<img id="clockgif" src="graphics/00.png">
		<div id="score2">0</div>
		<div id="tag"></div>
	</div>
<!-- names -->
	<div id="team1name">TEAM ONE</div>
	<div id="team2name">TEAM TWO</div>
<!-- bumpy cloud -->
	<div id="bigbumpy"><img id="bumpycloud" src="graphics/bigcloud.jpg"></div>
<!-- row one -->
	<img id="r1c1" class="row1" class="col1" src="cardbacks/interplay1/blue.png">
	<img id="r1c2" class="row1" class="col2" src="cardbacks/interplay1/blue.png">
	<img id="r1c3" class="row1" class="col3" src="cardbacks/interplay1/blue.png">
	<img id="r1c4" class="row1" class="col4" src="cardbacks/interplay1/blue.png">
	<img id="r1c5" class="row1" class="col5" src="cardbacks/interplay1/blue.png">
	<img id="r1c6" class="row1" class="col6" src="cardbacks/interplay1/blue.png">
	<img id="r1c7" class="row1" class="col7" src="cardbacks/interplay1/red.png">
	<img id="r1c8" class="row1" class="col8" src="cardbacks/interplay1/red.png">
	<img id="r1c9" class="row1" class="col9" src="cardbacks/interplay1/red.png">
	<img id="r1c10" class="row1" class="col10" src="cardbacks/interplay1/red.png">
	<img id="r1c11" class="row1" class="col11" src="cardbacks/interplay1/red.png">
	<img id="r1c12" class="row1" class="col12" src="cardbacks/interplay1/red.png">
<!-- row two -->	
	<img id="r2c1" class="row2" class="col1" src="cardbacks/interplay1/blue.png">
	<img id="r2c2" class="row2" class="col2" src="cardbacks/interplay1/blue.png">
	<img id="r2c3" class="row2" class="col3" src="cardbacks/interplay1/blue.png">
	<img id="r2c4" class="row2" class="col4" src="cardbacks/interplay1/blue.png">
	<img id="r2c5" class="row2" class="col5" src="cardbacks/interplay1/blue.png">
	<img id="r2c6" class="row2" class="col6" src="cardbacks/interplay1/blue.png">
	<img id="r2c7" class="row2" class="col7" src="cardbacks/interplay1/red.png">
	<img id="r2c8" class="row2" class="col8" src="cardbacks/interplay1/red.png">
	<img id="r2c9" class="row2" class="col9" src="cardbacks/interplay1/red.png">
	<img id="r2c10" class="row2" class="col10" src="cardbacks/interplay1/red.png">
	<img id="r2c11" class="row2" class="col11" src="cardbacks/interplay1/red.png">
	<img id="r2c12" class="row2" class="col12" src="cardbacks/interplay1/red.png">
<!-- row three -->
	<img id="r3c1" class="row3" class="col1" src="cardbacks/interplay1/blue.png">
	<img id="r3c2" class="row3" class="col2" src="cardbacks/interplay1/blue.png">
	<img id="r3c3" class="row3" class="col3" src="cardbacks/interplay1/blue.png">
	<img id="r3c4" class="row3" class="col4" src="cardbacks/interplay1/blue.png">
	<img id="r3c5" class="row3" class="col5" src="cardbacks/interplay1/blue.png">
	<img id="r3c6" class="row3" class="col6" src="cardbacks/interplay1/blue.png">
	<img id="r3c7" class="row3" class="col7" src="cardbacks/interplay1/red.png">
	<img id="r3c8" class="row3" class="col8" src="cardbacks/interplay1/red.png">
	<img id="r3c9" class="row3" class="col9" src="cardbacks/interplay1/red.png">
	<img id="r3c10" class="row3" class="col10" src="cardbacks/interplay1/red.png">
	<img id="r3c11" class="row3" class="col11" src="cardbacks/interplay1/red.png">
	<img id="r3c12" class="row3" class="col12" src="cardbacks/interplay1/red.png">
<!-- row four -->
	<img id="r4c1" class="row4" class="col1" src="cardbacks/interplay1/blue.png">
	<img id="r4c2" class="row4" class="col2" src="cardbacks/interplay1/blue.png">
	<img id="r4c3" class="row4" class="col3" src="cardbacks/interplay1/blue.png">
	<img id="r4c4" class="row4" class="col4" src="cardbacks/interplay1/blue.png">
	<img id="r4c5" class="row4" class="col5" src="cardbacks/interplay1/blue.png">
	<img id="r4c6" class="row4" class="col6" src="cardbacks/interplay1/blue.png">
	<img id="r4c7" class="row4" class="col7" src="cardbacks/interplay1/red.png">
	<img id="r4c8" class="row4" class="col8" src="cardbacks/interplay1/red.png">
	<img id="r4c9" class="row4" class="col9" src="cardbacks/interplay1/red.png">
	<img id="r4c10" class="row4" class="col10" src="cardbacks/interplay1/red.png">
	<img id="r4c11" class="row4" class="col11" src="cardbacks/interplay1/red.png">
	<img id="r4c12" class="row4" class="col12" src="cardbacks/interplay1/red.png">
<!-- row five -->
	<img id="r5c1" class="row5" class="col1" src="cardbacks/interplay1/blue.png">
	<img id="r5c2" class="row5" class="col2" src="cardbacks/interplay1/blue.png">
	<img id="r5c3" class="row5" class="col3" src="cardbacks/interplay1/blue.png">
	<img id="r5c4" class="row5" class="col4" src="cardbacks/interplay1/blue.png">
	<img id="r5c5" class="row5" class="col5" src="cardbacks/interplay1/blue.png">
	<img id="r5c6" class="row5" class="col6" src="cardbacks/interplay1/blue.png">
	<img id="r5c7" class="row5" class="col7" src="cardbacks/interplay1/red.png">
	<img id="r5c8" class="row5" class="col8" src="cardbacks/interplay1/red.png">
	<img id="r5c9" class="row5" class="col9" src="cardbacks/interplay1/red.png">
	<img id="r5c10" class="row5" class="col10" src="cardbacks/interplay1/red.png">
	<img id="r5c11" class="row5" class="col11" src="cardbacks/interplay1/red.png">
	<img id="r5c12" class="row5" class="col12" src="cardbacks/interplay1/red.png">
	<!-- TEXTS -->
	<div id = "grid_text">
<!-- row one -->
	<div id="tr1c1" class="row1" class="col1"></div>
	<div id="tr1c2" class="row1" class="col2"></div>
	<div id="tr1c3" class="row1" class="col3"></div>
	<div id="tr1c4" class="row1" class="col4"></div>
	<div id="tr1c5" class="row1" class="col5"></div>
	<div id="tr1c6" class="row1" class="col6"></div>
	<div id="tr1c7" class="row1" class="col7"></div>
	<div id="tr1c8" class="row1" class="col8"></div>
	<div id="tr1c9" class="row1" class="col9"></div>
	<div id="tr1c10" class="row1" class="col10"></div>
	<div id="tr1c11" class="row1" class="col11"></div>
	<div id="tr1c12" class="row1" class="col12"></div>
<!-- row two -->	
	<div id="tr2c1" class="row2" class="col1"></div>
	<div id="tr2c2" class="row2" class="col2"></div>
	<div id="tr2c3" class="row2" class="col3"></div>
	<div id="tr2c4" class="row2" class="col4"></div>
	<div id="tr2c5" class="row2" class="col5"></div>
	<div id="tr2c6" class="row2" class="col6"></div>
	<div id="tr2c7" class="row2" class="col7"></div>
	<div id="tr2c8" class="row2" class="col8"></div>
	<div id="tr2c9" class="row2" class="col9"></div>
	<div id="tr2c10" class="row2" class="col10"></div>
	<div id="tr2c11" class="row2" class="col11"></div>
	<div id="tr2c12" class="row2" class="col12"></div>
<!-- row three -->
	<div id="tr3c1" class="row3" class="col1"></div>
	<div id="tr3c2" class="row3" class="col2"></div>
	<div id="tr3c3" class="row3" class="col3"></div>
	<div id="tr3c4" class="row3" class="col4"></div>
	<div id="tr3c5" class="row3" class="col5"></div>
	<div id="tr3c6" class="row3" class="col6"></div>
	<div id="tr3c7" class="row3" class="col7"></div>
	<div id="tr3c8" class="row3" class="col8"></div>
	<div id="tr3c9" class="row3" class="col9"></div>
	<div id="tr3c10" class="row3" class="col10"></div>
	<div id="tr3c11" class="row3" class="col11"></div>
	<div id="tr3c12" class="row3" class="col12"></div>
<!-- row four -->
	<div id="tr4c1" class="row4" class="col1"></div>
	<div id="tr4c2" class="row4" class="col2"></div>
	<div id="tr4c3" class="row4" class="col3"></div>
	<div id="tr4c4" class="row4" class="col4"></div>
	<div id="tr4c5" class="row4" class="col5"></div>
	<div id="tr4c6" class="row4" class="col6"></div>
	<div id="tr4c7" class="row4" class="col7"></div>
	<div id="tr4c8" class="row4" class="col8"></div>
	<div id="tr4c9" class="row4" class="col9"></div>
	<div id="tr4c10" class="row4" class="col10"></div>
	<div id="tr4c11" class="row4" class="col11"></div>
	<div id="tr4c12" class="row4" class="col12"></div>
<!-- row five -->
	<div id="tr5c1" class="row5" class="col1"></div>
	<div id="tr5c2" class="row5" class="col2"></div>
	<div id="tr5c3" class="row5" class="col3"></div>
	<div id="tr5c4" class="row5" class="col4"></div>
	<div id="tr5c5" class="row5" class="col5"></div>
	<div id="tr5c6" class="row5" class="col6"></div>
	<div id="tr5c7" class="row5" class="col7"></div>
	<div id="tr5c8" class="row5" class="col8"></div>
	<div id="tr5c9" class="row5" class="col9"></div>
	<div id="tr5c10" class="row5" class="col10"></div>
	<div id="tr5c11" class="row5" class="col11"></div>
	<div id="tr5c12" class="row5" class="col12"></div>
	</div>
<!-- BORDERS -->	
<!-- row one -->
	<img id="br1c1" class="row1" class="col1" src="graphics/border_green.png">
	<img id="br1c2" class="row1" class="col2" src="graphics/border_green.png">
	<img id="br1c3" class="row1" class="col3" src="graphics/border_green.png">
	<img id="br1c4" class="row1" class="col4" src="graphics/border_green.png">
	<img id="br1c5" class="row1" class="col5" src="graphics/border_green.png">
	<img id="br1c6" class="row1" class="col6" src="graphics/border_green.png">
	<img id="br1c7" class="row1" class="col7" src="graphics/border_green.png">
	<img id="br1c8" class="row1" class="col8" src="graphics/border_green.png">
	<img id="br1c9" class="row1" class="col9" src="graphics/border_green.png">
	<img id="br1c10" class="row1" class="col10" src="graphics/border_green.png">
	<img id="br1c11" class="row1" class="col11" src="graphics/border_green.png">
	<img id="br1c12" class="row1" class="col12" src="graphics/border_green.png">
<!-- row two -->	
	<img id="br2c1" class="row2" class="col1" src="graphics/border_green.png">
	<img id="br2c2" class="row2" class="col2" src="graphics/border_green.png">
	<img id="br2c3" class="row2" class="col3" src="graphics/border_green.png">
	<img id="br2c4" class="row2" class="col4" src="graphics/border_green.png">
	<img id="br2c5" class="row2" class="col5" src="graphics/border_green.png">
	<img id="br2c6" class="row2" class="col6" src="graphics/border_green.png">
	<img id="br2c7" class="row2" class="col7" src="graphics/border_green.png">
	<img id="br2c8" class="row2" class="col8" src="graphics/border_green.png">
	<img id="br2c9" class="row2" class="col9" src="graphics/border_green.png">
	<img id="br2c10" class="row2" class="col10" src="graphics/border_green.png">
	<img id="br2c11" class="row2" class="col11" src="graphics/border_green.png">
	<img id="br2c12" class="row2" class="col12" src="graphics/border_green.png">
<!-- row three -->
	<img id="br3c1" class="row3" class="col1" src="graphics/border_green.png">
	<img id="br3c2" class="row3" class="col2" src="graphics/border_green.png">
	<img id="br3c3" class="row3" class="col3" src="graphics/border_green.png">
	<img id="br3c4" class="row3" class="col4" src="graphics/border_green.png">
	<img id="br3c5" class="row3" class="col5" src="graphics/border_green.png">
	<img id="br3c6" class="row3" class="col6" src="graphics/border_green.png">
	<img id="br3c7" class="row3" class="col7" src="graphics/border_green.png">
	<img id="br3c8" class="row3" class="col8" src="graphics/border_green.png">
	<img id="br3c9" class="row3" class="col9" src="graphics/border_green.png">
	<img id="br3c10" class="row3" class="col10" src="graphics/border_green.png">
	<img id="br3c11" class="row3" class="col11" src="graphics/border_green.png">
	<img id="br3c12" class="row3" class="col12" src="graphics/border_green.png">
<!-- row four -->
	<img id="br4c1" class="row4" class="col1" src="graphics/border_green.png">
	<img id="br4c2" class="row4" class="col2" src="graphics/border_green.png">
	<img id="br4c3" class="row4" class="col3" src="graphics/border_green.png">
	<img id="br4c4" class="row4" class="col4" src="graphics/border_green.png">
	<img id="br4c5" class="row4" class="col5" src="graphics/border_green.png">
	<img id="br4c6" class="row4" class="col6" src="graphics/border_green.png">
	<img id="br4c7" class="row4" class="col7" src="graphics/border_green.png">
	<img id="br4c8" class="row4" class="col8" src="graphics/border_green.png">
	<img id="br4c9" class="row4" class="col9" src="graphics/border_green.png">
	<img id="br4c10" class="row4" class="col10" src="graphics/border_green.png">
	<img id="br4c11" class="row4" class="col11" src="graphics/border_green.png">
	<img id="br4c12" class="row4" class="col12" src="graphics/border_green.png">
<!-- row five -->
	<img id="br5c1" class="row5" class="col1" src="graphics/border_green.png">
	<img id="br5c2" class="row5" class="col2" src="graphics/border_green.png">
	<img id="br5c3" class="row5" class="col3" src="graphics/border_green.png">
	<img id="br5c4" class="row5" class="col4" src="graphics/border_green.png">
	<img id="br5c5" class="row5" class="col5" src="graphics/border_green.png">
	<img id="br5c6" class="row5" class="col6" src="graphics/border_green.png">
	<img id="br5c7" class="row5" class="col7" src="graphics/border_green.png">
	<img id="br5c8" class="row5" class="col8" src="graphics/border_green.png">
	<img id="br5c9" class="row5" class="col9" src="graphics/border_green.png">
	<img id="br5c10" class="row5" class="col10" src="graphics/border_green.png">
	<img id="br5c11" class="row5" class="col11" src="graphics/border_green.png">
	<img id="br5c12" class="row5" class="col12" src="graphics/border_green.png">
</div>
</body>
</html>
