define(function (require) {
    var activity = require("sugar-web/activity/activity");
    var mustache = require("mustache");

    // Manipulate the DOM only when it is ready.
    require(['domReady!'], function (doc) {

        // Initialize the activity.
        activity.setup();

        var requestAnimationFrame = window.requestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame;

        function Stopwatch() {
            this.elem = document.createElement('li');
            var stopwatchList = document.getElementById('stopwatch-list');
            stopwatchList.appendChild(this.elem);

            this.template =
                '<p class="counter">00:00:00</p>' +
                '<button class="start-stop-button">Start</button>' +
                '<button class="mark-button">Mark</button>' +
                '<button class="reset-button">Reset</button>' +
                '<p class="marks"></p>';

            this.elem.innerHTML = mustache.render(this.template, {});

            this.counterElem = this.elem.querySelector('.counter');
            this.marksElem = this.elem.querySelector('.marks');
            this.running = false;
            this.previousTime = Date.now();
            this.tenthsOfSecond = 0;
            this.seconds = 0;
            this.minutes = 0;
            this.marks = [];

            var that = this;

            this.startStopButton = this.elem.querySelector('.start-stop-button');
            this.startStopButton.onclick = function () {
                that.onStartStopClicked();
            };

            this.markButton = this.elem.querySelector('.mark-button');
            this.markButton.onclick = function () {
                that.onMarkClicked();
            };

            this.resetButton = this.elem.querySelector('.reset-button');
            this.resetButton.onclick = function () {
                that.onResetClicked();
            };
        }

        Stopwatch.prototype.onStartStopClicked = function () {
            if (!this.running) {
                this.running = true;
                this.tick();
            }
            else {
                this.running = false;
            }
            this.updateButtons();
        };

        Stopwatch.prototype.onMarkClicked = function () {
            this.marks.push(this.minutes + ':' + this.seconds + '.' +
                            this.tenthsOfSecond);
            this.updateMarks();
        };

        Stopwatch.prototype.onResetClicked = function () {
            this.tenthsOfSecond = 0;
            this.seconds = 0;
            this.minutes = 0;
            if (!this.running) {
                this.updateView();
            }
        };

        Stopwatch.prototype.tick = function () {
            if (!this.running) {
                return;
            }

            var currentTime = Date.now();

            if ((currentTime - this.previousTime) > 100) {
                this.previousTime = currentTime;
                this.update();
                this.updateView();
            }

            requestAnimationFrame(this.tick.bind(this));
        };

        Stopwatch.prototype.update = function () {
            this.tenthsOfSecond += 1;
            if (this.tenthsOfSecond == 10) {
                this.tenthsOfSecond = 0;
                this.seconds += 1;
            }
            if (this.seconds == 60) {
                this.seconds = 0;
                this.minutes += 1;
            }
        };

        Stopwatch.prototype.updateView = function () {
            this.counterElem.innerHTML = this.minutes + ':' +
                this.seconds + '.' + this.tenthsOfSecond;
        };

        Stopwatch.prototype.updateMarks = function () {
            this.marksElem.innerHTML = '';
            for (var i = 0; i < this.marks.length; i++) {
                this.marksElem.innerHTML += this.marks[i];
                if (i !== (this.marks.length -1)) {
                    this.marksElem.innerHTML += ' - ';
                }
            }
        };

        Stopwatch.prototype.updateButtons = function () {
            if (this.running) {
                this.startStopButton.innerHTML = "Stop";
            }
            else {
                this.startStopButton.innerHTML = "Start";
            }
        };

        // Start with five stopwatches.
        for (var i = 0; i < 5; i++) {
            new Stopwatch();
        }
    });

});

@@ -488,16 +488,378 @@
 Frame;%0A%0A
+        // Utility to fill a string number with zeros.%0A        function pad(n, width, z) %7B%0A            z = z %7C%7C '0';%0A            width = width %7C%7C 2;%0A            n = n + '';%0A            if (n.length %3E= width) %7B%0A                return n;%0A            %7D%0A            else %7B%0A                return new Array(width - n.length + 1).join(z) + n;%0A            %7D%0A        %7D%0A%0A
         
@@ -2761,16 +2761,20 @@
 ks.push(
+pad(
 this.min
@@ -2769,32 +2769,33 @@
 pad(this.minutes
+)
  + ':' + this.se
@@ -2783,24 +2783,28 @@
 es) + ':' + 
+pad(
 this.seconds
@@ -2795,32 +2795,33 @@
 pad(this.seconds
+)
  + '.' +%0A       
@@ -2833,32 +2833,36 @@
                 
+pad(
 this.tenthsOfSec
@@ -2865,16 +2865,17 @@
 fSecond)
+)
 ;%0A      
@@ -4037,16 +4037,20 @@
 rHTML = 
+pad(
 this.min
@@ -4053,16 +4053,17 @@
 .minutes
+)
  + ':' +
@@ -4071,32 +4071,36 @@
                 
+pad(
 this.seconds + '
@@ -4095,16 +4095,17 @@
 .seconds
+)
  + '.' +
@@ -4105,16 +4105,20 @@
 + '.' + 
+pad(
 this.ten
@@ -4128,16 +4128,17 @@
 OfSecond
+)
 ;%0A      

Fill numbers with zeros