var computer, player, cplayer;

        var cells = [
                      'a1', 'a2', 'a3',
                      'b1', 'b2', 'b3',
                      'c1', 'c2', 'c3'
                    ]
        $().ready(function(){});



          $('#X').click(function(){
              pickX();
              $('#start').addClass('hide');
          })

          function pickX(){
            player = 'X';
            computer = 'O';
            main();
          }

          $('#O').click(function(){
            pickO();
            $('#start').addClass('hide');
          })

          function pickO(){
            player = 'O';
            computer = 'X';
            main();
          }

          function main(){
            play();
          }

          function play(){
              if(player == 'O'){
                $('#b2').html(computer);
                 cells = cells.filter(function(val){
                  return val != 'b2';
                })
              }
              $('.cell').click(function main (e){
                var playerMove = e.target.id;
                cells = $.grep(cells, function(val){
                  return val != playerMove;
                });
                
                var computerMove = cells[Math.floor(Math.random() * cells.length)];
                cells = $.grep(cells, function(val){
                  return val != computerMove;
                });
              
                
                if($(this).html() == ''){
                  $(this).append(player);
                }else{
                  return;
                }
                checkWin(player);
                if($('#showResult').html()){
                  return;
                }
                
                $('#' + computerMove).append(computer);  

                
                checkWin(computer);
                if($('#showResult').html()){
                  return
                } 
                
                checkDraw();
              });
          }


          function checkWin(winner){
            var win = [
                                ['a1', 'a2', 'a3'],
                                ['b1', 'b2', 'b3'],
                                ['c1', 'c2', 'c3'],
                                ['a1', 'b1', 'c1'],
                                ['a2', 'b2', 'c2'],
                                ['a3', 'b3', 'c3'],
                                ['a1', 'b2', 'c3'],
                                ['a3', 'b2', 'c1']
                             ];

            for(var i = 0 ; i < win.length ; i++){
                  if($('#' + win[i][0]).text() === winner &&
                   $('#' + win[i][1]).text() === winner &&
                   $('#' + win[i][2]).text() === winner
                  ){
                      $('#showResult').html(winner + " win");
                      $('#myModal3').modal('show');
                  }
            }
          }

          function checkDraw(){
            var count = 0;
            $('.cell').each(function(){
              if($(this).html()){
                count++;
              }
            });

            if(count == 9 && !$('#showResult').html() ){
              $('#showResult').html('Draw');
              $('#myModal3').modal('show');
            }
          }

          function reset(){
            $('.cell').html('') ;
            cells = [
                  'a1', 'a2', 'a3',
                  'b1', 'b2', 'b3',
                  'c1', 'c2', 'c3'
                ]
            $('.cell').unbind('click') ;
            $('#myModal1').reset();
            $('#myModal1').modal('show');
            
          }