<!DOCTYPE html">
<html>
	<head>
		<META content="text/html; charset=unicode" http-equiv=Content-Type>
		<META content="MSHTML 5.00.3315.2870" name=GENERATOR>
		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.8.10.custom.css" />
		
		<!-- JQUERY -->
		<script src="/js/jquery.min.js" type="text/javascript"></script>
		<!--<script src="/js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>-->
		
		<!-- BOOTSTRAP -->
		<script src="/js/bootstrap.min.js" type="text/javascript"></script>
		<style type="text/css">
			.icon
			{
				width:64px;
				height:64px;
				margin-top:0px;
				margin-bottom:0px;
				border:none;
			}
			.iconSmall
			{
				width:48px;
				height:48px;
				margin-top:0px;
				margin-bottom:0px;
				border:none;
			}
			.iconLarge
			{
				width:96px;
				height:96px;
				margin-top:0px;
				margin-bottom:0px;
				border:none;
			}
			.background
			{
				background:black;
				opacity:0.9;
				filter:alpha(opacity=90);
				-moz-border-radius: 5px;
				border-radius: 5px;
				box-shadow: 2px 2px 5px #000000;
			}
			body
			{
				font-family: Verdana;
			}
		</style>
	</head>
	<body style="background: url('background.jpg'); margin-top: 0px; margin-bottom:0px; margin-left:0px margin-rigjt:0px;">
		<script>
			<!--
			// Memory:	Written by Dan Hamblin
			//			23 March 2003
			//			Please credit my website: http://www.morphfx.co.uk
	
			// Pre-load images
			var imgCross_Red = new Image(64,64);
			var imgCross_Grn = new Image(64,64);
			var imgCross_Yel = new Image(64,64);
			var imgCross_Blu = new Image(64,64);
			var imgTriangle_Red = new Image(64,64);
			var imgTriangle_Grn = new Image(64,64);
			var imgTriangle_Yel = new Image(64,64);
			var imgTriangle_Blu = new Image(64,64);
			var imgCircle_Red = new Image(64,64);
			var imgCircle_Grn = new Image(64,64);
			var imgCircle_Yel = new Image(64,64);
			var imgCircle_Blu = new Image(64,64);	
			var imgSquare_Red = new Image(64,64);
			var imgSquare_Grn = new Image(64,64);
			var imgSquare_Yel = new Image(64,64);
			var imgSquare_Blu = new Image(64,64);
			var imgBLANK = new Image(64,64);
			var imgREADY = new Image(64,64);
			var imgGO = new Image(64,64);
	
			imgCross_Red.src="crs-red.png";
			imgCross_Grn.src="crs-grn.png";
			imgCross_Yel.src="crs-yel.png";
			imgCross_Blu.src="crs-blu.png";
			
			imgTriangle_Red.src = "tri-red.png";
			imgTriangle_Grn.src = "tri-grn.png";
			imgTriangle_Yel.src = "tri-yel.png";
			imgTriangle_Blu.src = "tri-blu.png";
			
			imgCircle_Red.src = "cir-red.png";
			imgCircle_Grn.src = "cir-grn.png";
			imgCircle_Yel.src = "cir-yel.png";
			imgCircle_Blu.src = "cir-blu.png";
			
			imgSquare_Red.src = "sqr-red.png";
			imgSquare_Grn.src = "sqr-grn.png";
			imgSquare_Yel.src = "sqr-yel.png";
			imgSquare_Blu.src = "sqr-blu.png";
	
			imgBLANK.src = "blank.png";
			imgREADY.src = "getready.png";
			imgGO.src = "go.png";
			
			// game variables
			var level = 1;
			var szSequence = "";
			var TimerID;
			var charpos = 0;
			var gameTime = 400;
			var szUserSequence="";
			var Score = 0;
			var IgnoreClick = true;
			var AllLoaded = false;

			// backward compatibility with older browsers and differing variants
			if(document.all && !document.getElementById) {
				document.getElementById = function(id)  {   return document.all[id];   }
			}
			
			function ResetCountDown() {
				gameTime = 400;
				document.getElementById("timeBar").style.width=gameTime;
			}
			
			function GameStart() {
				if( AllLoaded ) {
					level=1;
					szSequence = MakeSequence(level);
					ResetCountDown();
					ShowSequence();
					szUserSequence="";
					RevealSequence(szUserSequence);
					IgnoreClick=true;
					Score = 0;
					UpdateGameScreen();
				}
				else {
					alert("Please wait, page is still loading");
				}
				return
			}
	
			function NextLevel() {
				window.clearInterval( TimerID );
				TimerID = window.setInterval( "AddScore()",1 );
				IgnoreClick=true;
			}
	
			function UpdateGameScreen() {
				document.getElementById("Level").innerHTML = "LEVEL: " + level + " of 39";
				document.getElementById("Score").innerHTML = "SCORE: " + Score;
			}
	
			function AddScore() {
				// keep calling this function, adding score
				CountDown();
				Score++;
				UpdateGameScreen();
				if( gameTime <= 0 ) {
					window.clearInterval( TimerID );
					level++;
					if( level>=40 ) {
						// game has been completed!
						var szWinPos = "top=" + (screen.height-200)/2 + " left=" + (screen.width-500)/2;
						window.open("completed.htm","_gameover","fullscreen=no resizeable=no status=no toolbar=no menubar=no width=500 height=200 "+szWinPos )			
					}
					else {
						szSequence = MakeSequence(level);
						ResetCountDown();
						ShowSequence();
						szUserSequence="";
						RevealSequence(szUserSequence);
						UpdateGameScreen();
					}
				}
			}
	
	function ShowSequence() {
		// use a timer to show the images in the currently selected sequence
		document.images.shape.src = imgREADY.src
		charpos = 0
		window.clearInterval( TimerID )
		TimerID = window.setInterval( "DoSequence()",2000 )
		szUserSequence=""
		RevealSequence(szUserSequence)
	}
	
	function DoSequence() {
		document.images.shape.src = GetImage(szSequence.charAt(charpos++))
		window.clearInterval( TimerID )
		TimerID = window.setInterval( "BlankBetween()",1250 )
	}
	
	function BlankBetween() {
		window.clearInterval( TimerID )
		if( charpos < szSequence.length ) {
			document.images.shape.src = imgBLANK.src
			TimerID = window.setInterval( "DoSequence()",500 )
		}
		else {
			// game start now
			document.images.shape.src = imgGO.src
			TimerID = window.setInterval( "Go()",1000 )
			IgnoreClick = false
		}
		szUserSequence=""
		RevealSequence(szUserSequence)
	}
	
	function Go() {
		document.images.shape.src = imgBLANK.src
		window.clearInterval( TimerID )
		TimerID = window.setInterval( "CountDown()",200 )
	}
	
	function CountDown() {
		gameTime-=3;
		if( gameTime <0 ) gameTime=0;
		document.getElementById("timeBar").style.width=gameTime;
		if( (gameTime<3 ) && (!IgnoreClick) ) {
			gameTime=0;
			window.clearInterval( TimerID );
			var szWinPos = "top=" + (screen.height-200)/2 + " left=" + (screen.width-500)/2;
			window.open("timeup.htm","_gameover","fullscreen=no resizeable=no status=no toolbar=no menubar=no width=500 height=200 "+szWinPos )			
			IgnoreClick=true
		}
	}
	
	function Click(szChar) {
		var i=0;
		var game_over = false;
		
		if( !IgnoreClick ) {
			szUserSequence+=szChar;
			RevealSequence(szUserSequence);
		
			// check characters in actual sequence
			for( i=0; i< szUserSequence.length; i++ ) {
				if( szSequence.charAt(i) != szUserSequence.charAt(i) ) 	{
					game_over=true;
					// stop the count down
					window.clearInterval( TimerID );
					var szWinPos = "top=" + (screen.height-200)/2 + " left=" + (screen.width-500)/2;
					// display game over!				
					alert("Oops - sorry, you got it wrong!");
					//window.open("wrongshape.htm","_gameover","fullscreen=no resizeable=no status=no toolbar=no menubar=no width=500 height=200 "+szWinPos );
					
					IgnoreClick=true;
					RevealSequence(szSequence);
				}
			}
			if( szSequence.length == szUserSequence.length ) {
				// is sequence completed?		
				if( !game_over ) {
					// stop the count down
					NextLevel();
				}
			}
		}
	}
	
	function RevealSequence(szSequence) {
		document.images.Seq1.src = GetImage(szSequence.charAt(0));
		document.images.Seq2.src = GetImage(szSequence.charAt(1));
		document.images.Seq3.src = GetImage(szSequence.charAt(2));
		document.images.Seq4.src = GetImage(szSequence.charAt(3));
		document.images.Seq5.src = GetImage(szSequence.charAt(4));
		document.images.Seq6.src = GetImage(szSequence.charAt(5));
		document.images.Seq7.src = GetImage(szSequence.charAt(6));
		document.images.Seq8.src = GetImage(szSequence.charAt(7));
		document.images.Seq9.src = GetImage(szSequence.charAt(8));
		return
	}
	
	function GetImage(szBuffer) {
		// gets an image from a character buffer and returns it
		switch( szBuffer ) {
		// blue colour set
		case "a":
			return imgCross_Blu.src;
		case "b":
			return imgTriangle_Blu.src;
		case "c":
			return imgSquare_Blu.src;
		case "d":
			return imgCircle_Blu.src;
			
		// next colour set - green
		case "e":
			return imgCross_Grn.src;
		case "f":
			return imgTriangle_Grn.src;
		case "g":
			return imgSquare_Grn.src;
		case "h":
			return imgCircle_Grn.src;
			
		// next colour set - Red
		case "i":
			return imgCross_Red.src;
		case "j":
			return imgTriangle_Red.src;
		case "k":
			return imgSquare_Red.src;
		case "l":
			return imgCircle_Red.src;
		
		// next colour set - Yellow
		case "m":
			return imgCross_Yel.src;
		case "n":
			return imgTriangle_Yel.src;
		case "o":
			return imgSquare_Yel.src;
		case "p":
			return imgCircle_Yel.src;
		}
		return imgBLANK.src;
	}
	
	
	function MakeSequence(level) {
		// makes a new shape sequence based on the level
		// as the level increases the longer the sequence becomes
		// as the game gets harded, different colours for the same
		// shape are introduced
		// sequences are formulated from characters as follows:
		// a = cross	- blue
		// b = triangle - blue
		// c = square	- blue
		// d - circle	- blue
		
		// e = cross	- green
		// f = triangle - green
		// g = square	- green
		// h - circle	- green
		
		// i = cross	- red
		// j = triangle - red
		// k = square	- red
		// l - circle	- red
		
		// m = cross	- yellow
		// n = triangle - yellow
		// o = square	- yellow
		// p - circle	- yellow
		
		// level 1-9	only uses blue
		// level 10-19	blue, green
		// level 20-29	blue, green ,red
		// level 30-39	blue, green, red, yellow
		szSequence = "";
		var idx=0;
		
		if( level < 10 ) {
			// blue only, 1 to 9 shapes in sequence
			for( idx=0; idx<level; idx++ )
			{
				szSequence+=GetCharacter(4);
			}
			document.getElementById("GREENS").style.visibility="hidden";
			document.getElementById("REDS").style.visibility="hidden";
			document.getElementById("YELLOWS").style.visibility="hidden";
		}
		else if( level < 20 )
		{
			for( idx=9; idx<level; idx++ )
			{
				szSequence+=GetCharacter(8)
			}
			document.getElementById("GREENS").style.visibility="visible";
			document.getElementById("REDS").style.visibility="hidden";
			document.getElementById("YELLOWS").style.visibility="hidden";
		}
		else if( level < 30 ) {
			for( idx=19; idx<level; idx++ )
			{
				szSequence+=GetCharacter(12);
			}
			document.getElementById("GREENS").style.visibility="visible";
			document.getElementById("REDS").style.visibility="visible";
			document.getElementById("YELLOWS").style.visibility="hidden";
		}
		else if( level < 40 ) {
			for( idx=29; idx<level; idx++ ) {
				szSequence+=GetCharacter(16);
			}
			document.getElementById("GREENS").style.visibility="visible";
			document.getElementById("REDS").style.visibility="visible";
			document.getElementById("YELLOWS").style.visibility="visible";
		}
		return szSequence;
	}
	
	function GetCharacter(CharRange) 	{
		return String.fromCharCode( Math.floor(Math.random()*CharRange) + 97 );
	}

	

	
	//-->
	</script>


	<p align="center">
		<a href="JavaScript:GameStart()"><img src="new-game.png" style="border: none; width:128px height:32px"></a>
	</p>
	
	<div align="center" id="Level">LEVEL: 1 of 39</div>

	<div align="center" id="Score">SCORE: 0</div>
	<p align="center">
		<table class="background">
			<tr>
				<td>
					<img id="shape" src="loading.png" class="iconLarge"/>
				</td>
			</tr>
		</table>
		<table width=550px border=0>
			<tr>
			<td>
				<SMALL><div id="CountDown">&nbsp;</div></SMALL>
			</td>
		</tr>
	</table>
</p>


<!-- GAME COUNT DOWN TIMER-->
<p align="center">
	<table WIDTH="414" BORDER="0">
		<tr>
			<td>
				<img src="time_left.gif" style="width:3px;height:20px;" /><img src="time.gif" id="timeBar" style="width:400px;height:20px;" /><img src="time_right.gif" style="width:3px;height:20px" />
			</td>
		</tr>
	</table>
</P>

		<p align="center">
			<table class="background">
				<tr valign="center"><td>
					<img id="Seq1" src="blank.png" class="icon">
					<img id="Seq2" src="blank.png" class="icon">
					<img id="Seq3" src="blank.png" class="icon">
					<img id="Seq4" src="blank.png" class="icon">
					<img id="Seq5" src="blank.png" class="icon">
					<img id="Seq6" src="blank.png" class="icon">
					<img id="Seq7" src="blank.png" class="icon">
					<img id="Seq8" src="blank.png" class="icon">
					<img id="Seq9" src="blank.png" class="icon">
				</td></tr>
			</table>
		</p>

		<div style="text-align:center;">
			<div id="BLUES" style="display:block;">
				<a href="JavaScript:Click('a')"><img src="crs-blu.png" class="iconSmall"></a>
				<a href="JavaScript:Click('c')"><img src="sqr-blu.png" class="iconSmall"></a>
				<a href="JavaScript:Click('b')"><img src="tri-blu.png" class="iconSmall"></a>
				<a href="JavaScript:Click('d')"><img src="cir-blu.png" class="iconSmall"></a>
			</div>
			<div id="GREENS" style="display:block;">
				<a href="JavaScript:Click('e')"><img src="crs-grn.png" class="iconSmall"></a>
				<a href="JavaScript:Click('f')"><img src="sqr-grn.png" class="iconSmall"></a>
				<a href="JavaScript:Click('g')"><img src="tri-grn.png" class="iconSmall"></a>
				<a href="JavaScript:Click('h')"><img src="cir-grn.png" class="iconSmall"></a>
			</div>
			<div id="REDS" style="display:block;">
				<a href="JavaScript:Click('i')"><img src="crs-red.png" class="iconSmall"></a>
				<a href="JavaScript:Click('j')"><img src="sqr-red.png" class="iconSmall"></a>
				<a href="JavaScript:Click('k')"><img src="tri-red.png" class="iconSmall"></a>
				<a href="JavaScript:Click('l')"><img src="cir-red.png" class="iconSmall"></a>
			</div>
			<div id="YELLOWS" style="display:block;">
				<a href="JavaScript:Click('m')"><img src="crs-yel.png" class="iconSmall"></a>
				<a href="JavaScript:Click('n')"><img src="sqr-yel.png" class="iconSmall"></a>
				<a href="JavaScript:Click('o')"><img src="tri-yel.png" class="iconSmall"></a>
				<a href="JavaScript:Click('p')"><img src="cir-yel.png" class="iconSmall"></a>
			</div>
		</div>

		<div id="GameOverDlg" class="modal hide fade">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h3>Memory Game Over!</h3>
			  </div>
			  <div class="modal-body">
				Ooops; you're memory isn't quite what it should be!  Never mind; try again!
			  </div>
			  <div class="modal-footer">
				<a href="#" data-dismiss="modal" class="btn">Close</a>
			  </div>
			</div>


		<script>
			<!--
			AllLoaded=true;
			document.images.shape.src = imgBLANK.src;
			//-->
		</script>
	</body>
</html>