Hey all... I'm a newbie here so please bear with me...

I am trying to make a memory/matching game for my website (just for fun!) and I'm a bit stuck trying to get the button to change from "Loading" to "Start Game" correctly - especially once the user has completed the game and wants to start over. The counter starts counting immediately once the user clicks "Ok" in the alert box. Does anyone have any suggestions for a better way to organize my code (especially for the button)?

My Javascript is very primitive as I am inexperienced so any code comments and explanations of why you changed what you did would be greatly appreciated!!

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Memory/Concentration Game</title>

<style type="text/css" >
h1 {
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:36px;
}
.footer {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:10px;
}
</style>

<script language="javascript" type="application/javascript">

	//Create Card Images Array
	var pics = new Array();
	//Loop Through Array & Create Image Files Names
	for( i=0; i<=8; i++ ) {
		pics[i] = new Image(); 
		pics[i].src = 'image'+i+'.gif';
	}

	//Initialize Variables
	var map = new Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8);
	var user = new Array();
	var cardArray = new Array();
	var clickArray = new Array(0,0);
	var timer, secs, mins, counterTime, id=0, allowClick, gameStart, gameEnd;

//Set Up Game Board
function startGame() {
		
	var gameDiv = document.getElementById('game');
	
	var gameTable='<table cellpadding="3" cellspacing="3" border="0">';
	
	for(rows=0; rows<=3; rows++) {
		gameTable += '<tr>';
		for(columns=0; columns<=3; columns++)gameTable+='<td align="center"><a href="javascript:showCardPicture('+((4*rows)+columns)+')" 	onclick="this.blur()"><img src="image0.gif" name="img'+((4*rows)+columns)+'" alt="" border="0"></a></td>';
		gameTable+='</tr>';
	}
	gameTable+='</table><br><br><form name="gameForm"><input type="button" value="Loading Cards" name="formBtn" onclick="init()"></form>';
	gameDiv.innerHTML = gameTable;
	
	init();
}

//Initialize the Game
function init() {
	clearTimeout(id);
	for(i=0; i<=15; i++)user[i]=0;
	timer=0;
	mins=0;
	secs=0;
	counterTime=0;
	gameEnd=0;
	allowClick=true;
	document.forms["gameForm"].formBtn.value="Loading Game";
	gameStart = setTimeout('gameGoing()', 3000);
	//id = setInterval('startClock()', 995);
	mixCards();
	for(i=0; i<=15; i++) { //Whole Number between 0-15 (16 cards)
		document.images[('img'+i)].src = "image0.gif";
		document.images[('img'+i)].alt = "";
	}
}

function gameGoing() {
	switch (document.forms["gameForm"].formBtn.value) {
		case "Loading Game":
			document.forms["gameForm"].formBtn.value = "Start Game";
			break;
		case "Start Game":
			document.forms["gameForm"].formBtn.onclick = clockGoing();
			break;
	}
}

function clockGoing() {
	id = setInterval('startClock()', 995);
}

//Start the Clock
function startClock() {
	mins = Math.floor(timer/60);
	secs = (timer - (mins*60) )+'';
	if(secs.length==1) { secs = "0" + secs };
	timer++;
	document.forms["gameForm"].formBtn.value=" " +mins+ ":" +secs+ " ";
}

//Mix Up the Cards
function mixCards() {
	for(z=0; z<5; z++) { // whole number between 0 and 4. Number of different card images (not doubles).
		for(x=0; x<=15; x++) {
			cardArray[0] = Math.floor( Math.random() * 16 );
			cardArray[1] = map[ cardArray[0] ];
			cardArray[2] = map[x];
			map[x] = cardArray[1]; //map[x <= 15] = map[whole # btwn 0 and 15]
			map[ cardArray[0] ] = cardArray[2]; // map[whole number between 0 and 15] = map[x <= 15]
		}
	}
}

function showCardPicture(but) {
	if(allowClick) {
		allowClick=false; 
		document.images[('img'+but)].src = 'image'+map[but]+'.gif';
		document.images[('img'+but)].alt = 'Image '+map[but];
		if(counterTime==0) {
			counterTime++;
			clickArray[0]=but;
			allowClick=true;
		} else {
			clickArray[1]=but;
			counterTime=0;
			setTimeout('returntoold()', 600);
		}
	}
}

function returntoold() {
	if( (clickArray[0] == clickArray[1]) && (!user[ clickArray[0] ]) ) { 
		document.images[('img'+clickArray[0])].src = "image0.gif";
		document.images[('img'+clickArray[0])].alt = "";
		allowClick = true;
	} else {
		if( map[ clickArray[0] ] != map[ clickArray[1] ] ) { //If # in clickArray[0] is NOT equal to # in clickArray[1]
			if( user[ clickArray[0] ] == 0 ) {
				document.images[('img'+clickArray[0])].src = "image0.gif";
				document.images[('img'+clickArray[0])].alt = "";
			}
			if( user[ clickArray[1] ] == 0 ) {
				document.images[('img'+clickArray[1])].src = "image0.gif";
				document.images[('img'+clickArray[1])].alt = "";
			}
		}
		if( map[ clickArray[0] ] == map[ clickArray[1] ] ) {
			if( user[clickArray[0]] == 0 && user[clickArray[1]] == 0 )gameEnd++;
				user[clickArray[0]] = 1;
				user[clickArray[1]] = 1;
		}
		if( gameEnd >= 8 ) {
			alert('You Won CRAZY CONCENTRATION in '+document.forms["gameForm"].formBtn.value+'!' );
			startGame();
		} else {
			allowClick = true;
		}
	}
}

</script>



</head>

<body>

<center>

<h1>Crazy Concentration Game</h1>

<div id="game">

</div><!--end Game div-->

<script language="javascript">
	window.onload=startGame;
</script>

<div class="footer">

</div><!--end Footer div-->

</center>


</body>
</html>