<div id="centered" class="circle-large">
  Session 25:00
</div>

<div id="right" class="circle-small">
 work 25 
</div>

<div id="left" class="circle-small">
 play 5
</div>

<div id="neg_work" class="circle-smaller">
 -
</div>

<div id="pos_work" class="circle-smaller">
 +
</div>

<div id="neg_play" class="circle-smaller">
 -
</div>

<div id="pos_play" class="circle-smaller">
 +
</div>

body {
  background-color: black;
}

.circle-large {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  line-height: 400px;
  text-align: center;
  border-color: green;
  border-style: solid;
}

.circle-small {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-size: 18px;
  color: #fff;
  line-height: 100px;
  text-align: center;
}

.circle-smaller {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 40px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background-color:black;
  color: lightgreen;
}

#centered{
    position: absolute;
    top: 20%;
    left: 40%;
    margin-top: -50px;
    margin-left: -50px;
}
#left{
    position: absolute;
    top: 90%;
    left: 60%;
    margin-top: -50px;
    margin-left: -50px;
    background-color: red;
}

#right{
    position: absolute;
    top: 90%;
    left: 38%;
    margin-top: -50px;
    margin-left: -50px;
    background-color:blue;
}

#pos_work{
    position: absolute;
    top: 99.999%;
    left: 44%;
    margin-top: -50px;
    margin-left: -50px;
    background-color:black;
}

#neg_work{
    position: absolute;
    top: 99.999%;
    left: 35%;
    margin-top: -50px;
    margin-left: -50px;
    background-color:black;
}


#pos_play{
    position: absolute;
    top: 99.999%;
    left: 66%;
    margin-top: -50px;
    margin-left: -50px;
    background-color:black;
}

#neg_play{
    position: absolute;
    top: 99.999%;
    left: 57%;
    margin-top: -50px;
    margin-left: -50px;
    background-color:black;
}

function reset_timer() {
  $(".circle-large").html("help me!");
}

function start_timer() {
  function update() {
    var updating_value = $("#centered").html().trim();
    var type_value = updating_value.split(' ')[0]
    var time_value = updating_value.split(' ')[1];
    var min_value = time_value.split(':')[0];
    var sec_value = time_value.split(':')[1];
    
    if (use_time == 0){
      setTimeout(update, 1000);
      return 0;
    }
    
    if(min_value == "0" && sec_value == "00" ) {
      if (type_value == "Session"){
        type_value = "Break";
        min_value = $("#left").html().trim().split(' ')[1];
      } else {
        type_value = "Session";
         min_value = $("#right").html().trim().split(' ')[1];
        use_time=0;
      }
    } else if (sec_value == "00") {
      min_value = Number(min_value) - 1;
      sec_value = "59";
    } else {
      sec_value = Number(sec_value) - 1;
      if (("" + sec_value).length < 2){
        sec_value = "0" + sec_value;
      }
    }
   
    var new_update = type_value + " " + min_value + ":" + sec_value;
    $("#centered").html(new_update);
    setTimeout(update, 1000);
    return 0;
  }
  setTimeout(update, 1000);
}

$(document).ready(function() {
    use_time=0;
    $(".circle-large").on("click",function(e){
      if (use_time == 1) {
            var min_value = $("#right").html().trim().split(' ')[1];
            var new_update =  "Session " + min_value + ":00";
        $("#centered").html(new_update);      
        use_time = 0;
      } else {
        use_time = 1;
      }
    }); 
  
      $("#neg_work").on("click",function(e){
        var new_value = $("#right").html().trim().split(" ")[1];
        if ( new_value > 1){
          new_value = Number(new_value) - 1;
        }
        $("#right").html("work " + new_value);
        $("#centered").html("Session " + new_value + ":00");
        use_time = 0;
      });
  
        $("#pos_work").on("click",function(e){
        var new_value = $("#right").html().trim().split(" ")[1];
        if ( new_value >= 1){
          new_value = Number(new_value) + 1;
        }
        $("#right").html("work " + new_value);
        $("#centered").html("Session " + new_value + ":00");
        use_time = 0;
      });
   
       $("#neg_play").on("click",function(e){
        var new_value = $("#left").html().trim().split(" ")[1];
        if ( new_value > 1){
          new_value = Number(new_value) - 1;
        }
        $("#left").html("play " + new_value);
        $("#centered").html("Break " + new_value + ":00");
        use_time = 0;
      });
  
        $("#pos_play").on("click",function(e){
        var new_value = $("#left").html().trim().split(" ")[1];
        if ( new_value >= 1){
          new_value = Number(new_value) + 1;
        }
        $("#left").html("play " + new_value);
        $("#centered").html("Break " + new_value + ":00");
        use_time = 0;
      });
  
    start_timer();
});