body{
  background:#222;
}
#simon{
  position:absolute;
  top:50%;
  left:50%;
  width:300px;
  height:300px;
  border-radius:2000px;
  border:10px solid #000;
  margin:-150px 0 0 -150px;
  overflow:hidden;
  background:#000;
}
#simon:after{
  display:block;
  content:'';
  width:100%;
  height:100%;
  background:-webkit-radial-gradient(#000,#fff);
  opacity:.2;
  position:absolute;
  pointer-events:none;
}
#simon .controls{
  
  height:50%;
  width:50%;
  border-radius:50%;
  position:absolute;
  top:50%;
  left:50%;
  margin:-25% 0 0 -25%;
  background:#000;
}
#simon .controls:before,#simon .controls:after{
  display:block;
  position:absolute;
  background:#000;
  content:'';
}
#simon .controls:before{
  height:20%;
  width:200%;
  top:40%;
  left:-50%;
}
#simon .controls:after{
  height:200%;
  width:20%;
  top:-50%;
  left:40%;
}
#simon .b{
  cursor:pointer;
  height:50%;
  width:50%;
  opacity:.5;
  float:left;
}
#simon .yellow{
  clear:left;
}
.yellow{background:yellow;}
.green{background:green;}
.blue{background:blue;}
.red{background:red;}
#simon .hl{opacity:1;}

#controls{
  position:absolute;
  top:50%;
  left:50%;
  margin:-23px 0 0 -26px;
}
#controls .msg1,#controls .msg2{
  font-family:Codystar;
  color:#FFF;
  text-align:center;
  font-size:20px;
}

var Game=(function(){
  var faces=$("#simon .b");
  var sequence=[];
  var userSequence=[];
  function init(){
    makeFacesClickable();
    $(".new-game").on('click',start);
  }
  function start(){
    $(".msg1,.msg2").html(" ");
    sequence=[];
    userSequence=[];
    addNextSequence();
    playSequence();
  }
  function makeFacesClickable(){
    faces.on('click',function(){
      highlight.call(this);
      userSequence.push($(this).index("#simon .b"));
      checkUserSequence();
    });
  }
  function checkUserSequence(){
    if(userSequence.join('')!=sequence.slice(0,userSequence.length).join('')) {
      $(".msg1").html("GAME");
      $(".msg2").html("OVER");
      return false;
    } else if(userSequence.length==sequence.length) {
      $(".msg1").html(sequence.length)
      addNextSequence();
      userSequence=[];
      setTimeout(playSequence,1000);
      return true;
    }
  }
  function addNextSequence(){
    sequence.push(Math.floor(Math.random()*4));
  }
  function highlight(){
    $(this)
      .addClass('hl');
    setTimeout(dehighlight.bind(this),300);
  }
  function dehighlight(){
    $(this)
      .removeClass('hl');
  }
  function playSequence(){
    for(var i=0;i<sequence.length;i++) {
      setTimeout(highlight.bind(faces.eq(sequence[i])),i*400);
    }
  }
  return {
    init:init,
    start:start};
})();

Game.init();
Game.start();

$(window).on('resize',function(){
  var m = Math.min($(window).height(),$(window).width());
  m-=50;
  $("#simon").css({
    height:m+'px',
    width:m+'px',
    margin:(-m/2)+'px 0 0 '+(-m/2)+'px'
  });
});