<div id="tic-tac-toe">
<div class="span3 new_span">
<div class="row">
<h1 class="span3">Tic Tac Toe</h1>
<div class="span3">
<div class="input-prepend input-append">
    <span class="add-on win_text">O won</span><strong id="o_win" class="win_times add-on">0</strong><span class="add-on">time(s)</span>
    </div>
    <div class="input-prepend input-append">
    <span class="add-on win_text">X won</span><strong id="x_win" class="win_times add-on">0</strong><span class="add-on">time(s)</span>
    </div>
      
</div>


    
</div>
<ul class="row" id="game">
<li id="one" class="btn span1" >+</li>
<li id="two" class="btn span1">+</li>
<li id="three" class="btn span1">+</li>
<li id="four" class="btn span1">+</li>
<li id="five" class="btn span1">+</li>
<li id="six" class="btn span1">+</li>
<li id="seven" class="btn span1">+</li>
<li id="eight" class="btn span1">+</li>
<li id="nine" class="btn span1">+</li>
</ul>
<div class="clr">&nbsp;</div>
<div class="row"><a href="#" id="reset" class="btn-success btn span3" >Restart</a></div></div>
</div>

/*******tic-tac-toe******/
#tic-tac-toe .disable {text-transform:uppercase; font-size:30px; font-family:Georgia, "Times New Roman", Times, serif}
#tic-tac-toe #game li {float:left; padding:0; list-style:none; text-align:center; margin-bottom:20px; color:#fff; height:60px; line-height:60px; font-size:40px; color:#ccc}
#tic-tac-toe #game li.disable{color:#fff}
#tic-tac-toe #game {float:left; padding:0; clear:both}
.new_span {width:226px}
#tic-tac-toe #reset { padding:5px 10px; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:20px; clear:both; cursor:pointer; float:left; text-align:center; text-transform:uppercase; outline:none; width:204px}
.input-prepend span.pre_text {width:55px}
.input-prepend .span1{width:93px}
.input-prepend {margin-bottom:10px}
.clr {clear:both; height:0}
#tic-tac-toe h1 {text-align:center; font-size:28px}
#tic-tac-toe li::-moz-selection {background:none;color:#000;}
#tic-tac-toe li::-webkit-selection {background:none;color:#000;}
#tic-tac-toe {width:220px; margin:0 auto}
.input-append .win_times {background:#fff; width:101px}
.input-append .win_text {width:52px}
/*******tic-tac-toe END******/

// JavaScript Document
$(document).ready(function() {
var x = "x"
var o = "o"
var count = 0;
var o_win = 0;
var x_win = 0;
$('#game li').click(function(){

  if ($("#one").hasClass('o') && $("#two").hasClass('o') && $("#three").hasClass('o') || $("#four").hasClass('o') && $("#five").hasClass('o') && $("#six").hasClass('o') || $("#seven").hasClass('o') && $("#eight").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#four").hasClass('o') && $("#seven").hasClass('o') || $("#two").hasClass('o') && $("#five").hasClass('o') && $("#eight").hasClass('o') || $("#three").hasClass('o') && $("#six").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#five").hasClass('o') && $("#nine").hasClass('o') || $("#three").hasClass('o') && $("#five").hasClass('o') && $("#seven").hasClass('o'))
   {
	 alert('O has won the game. Start a new game')
	 $("#game li").text("+");
	$("#game li").removeClass('disable')
	$("#game li").removeClass('o')
	$("#game li").removeClass('x')
	$("#game li").removeClass('btn-primary')
	$("#game li").removeClass('btn-info')
   }
  else if ($("#one").hasClass('x') && $("#two").hasClass('x') && $("#three").hasClass('x') || $("#four").hasClass('x') && $("#five").hasClass('x') && $("#six").hasClass('x') || $("#seven").hasClass('x') && $("#eight").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#four").hasClass('x') && $("#seven").hasClass('x') || $("#two").hasClass('x') && $("#five").hasClass('x') && $("#eight").hasClass('x') || $("#three").hasClass('x') && $("#six").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#five").hasClass('x') && $("#nine").hasClass('x') || $("#three").hasClass('x') && $("#five").hasClass('x') && $("#seven").hasClass('x'))
  {
   alert('X wins has won the game. Start a new game')
   $("#game li").text("+");
	$("#game li").removeClass('disable')
	$("#game li").removeClass('o')
	$("#game li").removeClass('x')
	$("#game li").removeClass('btn-primary')
	$("#game li").removeClass('btn-info')	
  }
  else if (count == 9)
  {
	alert('Its a tie. It will restart.')
	$("#game li").text("+");
	$("#game li").removeClass('disable')
	$("#game li").removeClass('o')
	$("#game li").removeClass('x')
	$("#game li").removeClass('btn-primary')
	$("#game li").removeClass('btn-info')
	count = 0
  }
  else if ($(this).hasClass('disable'))
  {
    alert('Already selected')
  }
  else if (count%2 == 0)
  {
	  count++
	  $(this).text(o)
      $(this).addClass('disable o btn-primary')
	    if ($("#one").hasClass('o') && $("#two").hasClass('o') && $("#three").hasClass('o') || $("#four").hasClass('o') && $("#five").hasClass('o') && $("#six").hasClass('o') || $("#seven").hasClass('o') && $("#eight").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#four").hasClass('o') && $("#seven").hasClass('o') || $("#two").hasClass('o') && $("#five").hasClass('o') && $("#eight").hasClass('o') || $("#three").hasClass('o') && $("#six").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#five").hasClass('o') && $("#nine").hasClass('o') || $("#three").hasClass('o') && $("#five").hasClass('o') && $("#seven").hasClass('o'))
	    {
	   alert('O wins')
	   count = 0
	   o_win++
$('#o_win').text(o_win)
        }
  }
   else  
  {
	  count++
    $(this).text(x)
    $(this).addClass('disable x btn-info')
	   if ($("#one").hasClass('x') && $("#two").hasClass('x') && $("#three").hasClass('x') || $("#four").hasClass('x') && $("#five").hasClass('x') && $("#six").hasClass('x') || $("#seven").hasClass('x') && $("#eight").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#four").hasClass('x') && $("#seven").hasClass('x') || $("#two").hasClass('x') && $("#five").hasClass('x') && $("#eight").hasClass('x') || $("#three").hasClass('x') && $("#six").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#five").hasClass('x') && $("#nine").hasClass('x') || $("#three").hasClass('x') && $("#five").hasClass('x') && $("#seven").hasClass('x'))
        {
	 alert('X wins')
	 count = 0
	 x_win++
	 $('#x_win').text(x_win)
        }
  }

   });
    $("#reset").click(function () {
    $("#game li").text("+");
	$("#game li").removeClass('disable')
	$("#game li").removeClass('o')
	$("#game li").removeClass('x')
	$("#game li").removeClass('btn-primary')
	$("#game li").removeClass('btn-info')
	count = 0

  });
});