Untitled

<!DOCTYPE html>
<html lang="en">

<!--
Cory Mays
Comp 205
Example 6
Tic Tac Toe
-->

	<head>
		<title>TicTacToe</title>
		<style type="text/css">

		#i11 {position: absolute; top: 150px;
                left:10px; width: 50px; height: 50px;}
		#i12 {position: absolute; top: 150px;
                left:70px; width: 50px; height: 50px;}
		#i13 {position: absolute; top: 150px;
                left:130px; width: 50px; height: 50px;}
		#i21 {position: absolute; top: 210px;
                left:10px; width: 50px; height: 50px;}
                #i22 {position: absolute; top: 210px;
                left:70px; width: 50px; height: 50px;}
		#i23 {position: absolute; top: 210px;
                left:130px; width: 50px; height: 50px;}
                #i31 {position: absolute; top: 270px;
                left:10px; width: 50px; height: 50px;}
                #i32 {position: absolute; top: 270px;
                left:70px; width: 50px; height: 50px;}
		#i33 {position: absolute; top: 270px;
                left:130px; width: 50px; height: 50px;}


		</style>

		<script type="text/javascript">
           function recordPlay(imgid)
           {
            // change the src label to the correct filename
            // based on current player if img src is blank.jpg
            alert(document.getElementById(imgid).src);
            var fn = document.getElementById(imgid).src;
            var filebits = fn.split("/");
            alert(filebits[filebits.length-1]);
            var fbits = filebits[filebits.length-1];

            if (fbits == "blank.jpg")
            {
                if (document.getElementById("player").value == "O")
                {
                    document.getElementById(imgid).src = "O.jpg";
                    document.getElementById("player").value = "X";

                }
                else
                {
                    document.getElementById(imgid).src = "X.jpg";
                    document.getElementById("player").value = "O";
                }
            }


            }

            function resetGame()
            {
                var s;
                for(var i=1; i<=3; i++)
                {
                    for(var j=1; j<=3; j++)
                    {
                        s = "i"+i+j;
                        document.getElementById(s).src = "blank.jpg";
                        alert(s);
                    }
                }

            // set each src to blank.jpg
            // eg: document.getElementById(imgid).src = "blank.jpg"
            // and set current player to O to start game

            }
		</script>

	</head>

	<body>
        <p> Tic Tac Toe Grid </p>
	<table>
	<tr> <td> Player: </td> <td> <input type = "text"
           id = "player" value = "O"  onfocus = "this.blur();"/>
          </td> </tr>
       </table>
        <p>

	<img id = "i11" border = "3px" src = "blank.jpg"
          onclick = "recordPlay(this.id); "/>
	<img id = "i12" border = "3px" src = "blank.jpg"
           onclick = "recordPlay(this.id); "/>
	<img id = "i13" border = "3px" src = "blank.jpg"
          onclick = "recordPlay(this.id); "/>
	<img id = "i21" border = "3px" src = "blank.jpg"
          onclick = "recordPlay(this.id); "/>
        <img id = "i22" border = "3px" src = "blank.jpg"
           onclick = "recordPlay(this.id); "/>
	<img id = "i23" border = "3px" src = "blank.jpg"
          onclick = "recordPlay(this.id); "/>
        <img id = "i31" border = "3px" src = "blank.jpg"
          onclick = "recordPlay(this.id); "/>
        <img id = "i32" border = "3px" src = "blank.jpg"
           onclick = "recordPlay(this.id); "/>
	<img id = "i33" border = "3px" src = "blank.jpg"
          onclick = "recordPlay(this.id); "/>
        </p>
        <input type = "button" value = "Reset"
                     onclick = "resetGame();"/>


	</body>
</html>