<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>RISD/Samsung 2013</title>
	</head>

	<script type=text/javascript>
		var PAIRS = 9;
		var bottles = 0;
		var state = 0;
		var cards = 0;
		var last = -1;
		var players = 1;
		var turn = 0;
		var timer = 0;
		var pairs = 0;
		var ticking = 0;
		var have_all = (typeof (document.all) != 'undefined');
		var have_byid = (typeof (document.getElementById) != 'undefined');
		var back = new Image();
		back.src = "Back.png";
		var t0 = 0;

		function byID (id)
		{
			if (have_byid)
				return document.getElementById(id);
			else if (have_all)
				return eval ("document.all." + id);
		}

function load()
		{

for (var a=[],i=0;i<87;++i) a[i]=i;
function shuffle(array) {
  var tmp, current, top = array.length;
  if(top) while(--top) {
    current = Math.floor(Math.random() * (top + 1));
    tmp = array[current];
    array[current] = array[top];
    array[top] = tmp;
  }
  return array;
}
a = shuffle(a);

			if (bottles) return;
			bottles = new Array();
			for (var i = 0; i < 87; ++i)
			{
				bottles[i] = new Image();
				bottles[i].src = a[i] + ".png";
			}
		}

		function init (n)
		{
			load();
			players = n;
			cards = new Array();
			state = new Array();

			var c, i, j, x;
			c = byID ("cards");
			x = byID ("over");
			c.removeChild (x);
			while (c.childNodes.length) /* leave out overlay table */
				c.removeChild (c.lastChild);
			c.appendChild (x);
			for (i = 0; i < 2 * PAIRS; ++i)
			{
				cards[i] = i >> 1;
				x = document.createElement ("img");
				x.id = "" + i;
				x.onclick = Function ("cardclick(" + i + ")");
				x.src = "Back.png";
				c.appendChild (x);
			}

			while (i) /* Fisher-Yates */
			{
				j = parseInt (Math.random() * i);
				x = cards[--i];
				cards[i] = cards[j];
				cards[j] = x;
			}

			begin();
			if (!ticking)
				tick();
			t0 = new Date().getTime();
		}
		function restart() { init (players); }

		function begin()
		{
			score = new Array (0, 0);
			pairs = timer = turn = 0;
			last = -1;

			var i;
			for (i = 0; i < 2 * PAIRS; ++i)
			{
				state[i] = 0;
				img = byID ("" + i);
				img.className = "";
				img.src = back.src;
			}

			showscore();
			byID ("clock").innerHTML = "0:00";
			byID ("over").style.visibility = 0 ? "visible" : "hidden";
		}

		function tick()
		{
			ticking = 1;
			if (pairs < PAIRS)
			{
				timer += 1;
				var m = parseInt (timer / 60);
				var s = timer - (60 * m);
				s = s < 10 ? "0" + s : s;
				byID ("clock").innerHTML = m + ":" + s;
			}
			window.setTimeout ("tick()", 1000);
		}
			
		function cardclick (n)
		{
			var i = parseInt (n);
			if (state[i]) return;
			byID(n).src = bottles[cards[n]].src;
			state[i] = 1;
			if (last < 0) /* first move of turn */
			{
				last = i;
				return;
			}

			if (cards[last] == cards[i]) /* hit */
				done (last, i);
			else /* miss */
			{
				if (players == 1) score[1] += 1;
				window.setTimeout ("cover (" + last + ")", 300);
				window.setTimeout ("cover (" + i + ")", 500);
				window.setTimeout ("showscore();", 510);
				turn = (turn + 1) % players;
			}
			last = -1;
		}

		function done (i, j)
		{
			state[i] = state[j] = -1;
			byID ("" + i).className = "done";
			byID ("" + j).className = "done";
			score[turn] += 1;
			pairs += 1;
			showscore();
		}

		function showscore()
		{
			var i, e, p;
			for (i = 0; i < 2; ++i)
			{
				p = i + 1;
				e = byID ("playa" + p);
				if (e != undefined)
				{
					e.className = (i == turn) ? "up" : "";
					if (players == 1)
						p = (i == 1) ? "Miss" : "Done";
					else
						p = "Player " + p;
					e.innerHTML = p + ": <b>" + score[i] + "</b>";
				}
			}
			if (pairs == PAIRS)
			{
				var s = "";
				if (players == 2)
					s = "Player " + (score[1] > score[0] ? 2 : 1) + " wins";
				else {
					var t = new Date().getTime() - t0;
					timer = parseInt (t / 1000);
					if (timer < 60)
						s = "Legendary!";
					else if (timer < 90)
						s = "Fantastic!";
					else if (timer < 120)
						s = "Great!";
					else if (timer < 150)
						s = "Good!";
					else if (timer < 180)
						s = "O.K.";
					else if (timer < 210)
						s = "Not bad.";
					else
						s = "";
					var ms = parseInt (t);
					var sec = ms / 1000;
					var mn = sec / 60;
					ms = "" + (ms % 1000);
					sec = "" + parseInt (sec % 60);
					mn = "" + parseInt (mn);
					while (ms.length < 3) ms = "0" + ms;
					while (sec.length < 2) sec = "0" + sec;
					s = "<big>" + mn + ":" + sec + "</big><br>" + s + "<br><a href=\"index.html\">Play again?</a>";
					/* s = "<big>" + mn + ":" + sec + "</big>" + "<br>" + s + "<br><a href=\"#\">Play again</a>"; */
				}
				byID ("msg").innerHTML = s;
				postgame();
				window.setTimeout ('byID ("over").style.visibility = "visible"', 600);
			}
		}

		function postgame()
		{
			if (pairs < PAIRS) return;
			for (var j = 0; j < 2 * PAIRS; ++j)
				byID ("" + j).className = "dusted";
		}
		function cover (i)
		{
			if (state[i] <= 0) return;
			if (--state[i] == 0)
				byID ("" + i).src = back.src;
		}

		function showstate()
		{
			for (var i = 0; i < 2 * PAIRS; ++i)
				byID ("d" + i).innerHTML = state[i];
		}
	</script>	
	
	<style type=text/css>
		body {
			margin: 0;
			font-family: Arial, Verdana, Helvetica;
		}
		#over {
			visibility: hidden;
			position: absolute;  
			z-index:99;
			width: 720px;
			padding-top:180px;
		}
		#msg {
			font-size: 24px;
			line-height: 48px;

		}
		#msg big {
			font-size: 60;
		}

		#all {
			width: 720px;
/*			height: 100%;  */
		}
		#cards {
			width: 720px;
		}
		#cards img {
/*			border: solid 1px #000; */
			margin: 5px;
		}
		#cards img.done {
/*			border: solid 1px #fff;  */
			opacity: .5;
			filter: alpha (opacity = 50);
		}
		#cards img.dusted {
			border: solid 1px #fff;
			opacity: .1;
			filter: alpha (opacity = 10);
		}
		#mwgm {
			padding-left: 16px;
			font-size: 26px;
		}
		#clock {
			color: gray;
			font-size: 36px;
			text-align: right;
			padding-right: 16px;
/*			padding-top: 8px;  */
		}
	</style>

	<body onload=init(1)>
		<table id=all cellpadding=0 cellspacing=0 border=0 style="margin:auto; padding-top:12px;">
			<tr id=panel style="height:64px;">
				<td align=left id=mwgm>RISD/Samsung 2013</td>
				<td align=right id=clock title=inaccurate>0:00</td>
			</tr>
			<tr>
				<td colspan=2 align=center>
					<div id=cards>
						<table id=over onclick=restart()>
							<tr><td align=center id=msg>Play!</td></tr>
						</table> 
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>