;(function() {
   var TwentyFiveTimer = (function() {
     function TwentyFiveTimer(element) {
       this.counter = 0; // the counting variable
       this.element = element; // the element to show timer result
       this.reset();
     }
 
     TwentyFiveTimer.prototype.reset = function() {
      tf.ticker.removeListener(this); // remove self instance from the ticker list.
      this.counter = 60 * 25; // 25 minutes;
      $(this.element).html("25:00");
    }

    // the tick function, core logic of the app
    TwentyFiveTimer.prototype.tick = function() {
      this.counter -= 1; // the real counting down.
      if (this.counter < 0) this.counter = 0; // dont forget to set the boundary.

      // the minute
      var minute = Math.floor( this.counter / 60 );
      if (minute < 10) minute = '0' + minute;

      // the second
      var second = this.counter % 60;
      if (second < 10) second = '0' + second;

      // display it, finally.
      $(this.element).html(minute + ":" + second);
    }
    TwentyFiveTimer.prototype.start = function() {
      tf.ticker.addListener(this); // add self instance to the ticker list, so we will get tick invoked.
    }

    TwentyFiveTimer.prototype.restart = function () {
      this.reset();
      this.start();
    }

    // finish the class implementation, at last we return it to the outter scope.
    return TwentyFiveTimer;
})();
  // and set it to our global scope to let other module to use it.
  tf.TwentyFiveTimer = TwentyFiveTimer;
})();

 // jQuery ready callback
 $(function() {
   // default page transition
   $.mobile.defaultPageTransition = 'slide'
 
   $('#timer').html('25:00');
 
   var timer = new tf.TwentyFiveTimer($('#timer'));
   timer.start();

  // handle the reset button
  $('#reset').click( function(e){
    timer.restart();
  });

});