In [ this post ] I introduced an HTML application that I intended to build.

I’ve been picking away at the logic (though haven’t gotten to the HTMP “5” stuff yet) and thought I’d share the milestone.

Note that the gray area in the screen shot below is not implemented yet.

Here are some of the features that ARE implemented.

  • Work and Rest mode count downs.
  • Start / Pause
  • Reset Time & Round Count
  • Title Bar Status Indicator
  • Local Time Indicator
  • Total elapsed time clock (not effected by paused time)
  • Accumulated Work Time
  • Accumulated Rest Time

A couple points of interest for newer JavaScript developers.

First, note the use of ENUM (ish) conscructs.

I can define an enum as follows:


var Mode = { "STOP": 0, "WORK": 1, "REST": 3, "HIGH": 4, "LOW": 5, "LOW": 6 };

And then use it this way:


var CurrentMode = Mode.REST;
....
 if (CurrentMode == Mode.REST) {
    ......
	}

Also, I can create a simple object like this. Note the object instance allocations after the definition :


function clock(h, m, s, ms) {
	this.hours = h;
	this.minutes = m;
	this.seconds = s;
	this.miliseconds = ms;
}

var workClock = new clock(0, 0, 0, 0);
var elapsedClock = new clock(0, 0, 0, 0);
var totalWorkClock = new clock(0, 0, 0, 0);
var totalRestClock = new clock(0, 0, 0, 0);

Then I can access Object Instance Properties like this:


workClock.minutes = RoundLengthMinutes;

The entire source listing is below.

You can run the page in it’s current form at http://www.misfitgeek.com/fighttimer/

Please report bugs and make feature suggestions using by submitting comments.

To view the source code click below.


<!DOCTYPE HTML>
<html>
<head>
    <meta content="en-us" http-equiv="Content-Language">
    <title>Fight Timer</title>
    <link rel="stylesheet" type="text/css" href="styles\main.css" />
    <script src="script/jquery-1.6.2.min.js" type="text/javascript">
    </script>
    <script src="script/jqclock_201.js" type="text/javascript"></script>
    <script src="script/jquery_timers-1_2.js" type="text/javascript">
    </script>
    <script type="text/javascript">

    var Mode = 
       { "STOP": 0, "WORK": 1, "REST": 3, "HIGH": 4, "LOW": 5, "LOW": 6 };

        function clock(h, m, s, ms) {
            this.hours = h;
            this.minutes = m;
            this.seconds = s;
            this.miliseconds = ms;
        }

        var workClock = new clock(0, 0, 0, 0);
        var elapsedClock = new clock(0, 0, 0, 0);
        var totalWorkClock = new clock(0, 0, 0, 0);
        var totalRestClock = new clock(0, 0, 0, 0);

        var CurrentMode = Mode.REST;
        var LastMode = Mode.REST;
        var RoundLengthMinutes = 2;
        var RoundLengthSeconds = 0;
        var RestMinutes = 1;
        var RestSeconds = 0;
        var Round = 0;
        var Initialized = false;

        //-----------------------------------------------------------------+
        // tick_down(c) : for clocks that count down. c represents an      |
        //              : instance of clock no hours processing since      |
        //              : intervals will never be > 60 minutes             |
        //-----------------------------------------------------------------+
        function tick_down(c) {
            if (c.miliseconds <= 0) {
                if (c.seconds <= 0) {
                    if (c.minutes <= 0) {
                        if (CurrentMode == Mode.REST) {
                            Round++;
                            $("#StopWatchRounds").text(Round);
                            workClock.minutes = RoundLengthMinutes;
                            workClock.seconds = RoundLengthSeconds;
                            $("#TimerText").text("WORK");
                            CurrentMode = Mode.WORK;
                            return;
                        }
                        else {
                            c.minutes = RestMinutes;
                            c.seconds = RestSeconds;
                            CurrentMode = Mode.REST;
                            $("#TimerText").text("REST");
                            return;
                        }
                    }
                    c.minutes--;
                    c.seconds = 60;
                }
                c.seconds--;
                c.miliseconds = 100;
            }
            c.miliseconds--;
            return formatTime(c);
        }

        //-----------------------------------------------------------------+
        // tick_up(c) : for clocks that count up. c represents an instance |
        //            : of clock.                                          |
        //-----------------------------------------------------------------+
        function tick_up(c) {
            if (c.miliseconds >= 100) {
                if (c.seconds >= 60) {
                    if (c.minutes >= 60) {
                        c.hours++;
                        c.minutes = 0;
                    }
                    c.minutes++;
                    c.seconds = 0;
                }
                c.miliseconds = 0;
                c.seconds++;
            }
            c.miliseconds++;
            return formatTime(c);
        }

        //-----------------------------------------------------------------+
        // formatTime(c) : format hours, minutes, seconds, miliseconds for |
        //               : output                                          |
        //-----------------------------------------------------------------+
        function formatTime(c) {
            var time = "";
            if (c.minutes < 10) {
                time += "0";
            }
            time += c.minutes + ":";

            if (c.seconds < 10) {
                time += "0";
            }
            time += c.seconds + ":";

            if (c.miliseconds < 10) {
                time += "0";
                time += c.miliseconds;
            }
            else if (c.miliseconds > 99) {
                time += "00";
            }
            else {
                time += c.miliseconds;
            }

            if (c.hours > 0) {
                if (c.hours < 10) {
                    time = "0" + c.hours + ":" + time;
                }
                else {
                    time = c.hours + ":" + time;
                }                
            }        
            return time;
        }

        //-----------------------------------------------------------------+
        // On Ready  : wire up jQuery clocks and button event handlers     |
        //-----------------------------------------------------------------+
        $(function () {
            var clock = $("div.workouttimer div.clock");
            var active = false;

            $("#ButtonStart").click(function () {
                $("#TimerText").text("WORK");
                Initialized = true;
                if (!active) {
                    active = !active;
                    $('#StopWatchTime').everyTime(10, 'controlled',  
                                                       function () 
                    {
                        $(this).html(tick_down(workClock));
                        if (CurrentMode == Mode.WORK) {
                         $("#TotalWorkClock").text(tick_up(totalWorkClock));
                        }
                        else if (CurrentMode == Mode.REST) {
                         $("#TotalRestClock").text(tick_up(totalRestClock));
                        }
                    });
                }
            });

            $("#ButtonStop").click(function () {
                $("#workmode").text("PAUSED");
                if (active) {
                    active = !active;
                    $("#StopWatchTime").stopTime('controlled');
                    $("#TimerText").text("PAUSED");
                }
            });

            $("#ButtonTimeReset").click(function () {
                if (CurrentMode == Mode.WORK) {
                    workClock.miliseconds = 0;
                    workClock.seconds = RoundLengthSeconds;
                    workClock.minutes = RoundLengthMinutes;
                    workClock.hours = 0;
                }
                else if (CurrentMode == Mode.REST) {
                    workClock.miliseconds = 0;
                    workClock.seconds = RestSeconds;
                    workClock.minutes = RestMinutes;
                    workClock.hours = 0;
                }
                $("#StopWatchTime").text(formatTime(workClock));
            });

            $("#ButtonRoundReset").click(function () {
                Round = 1;
                $("#StopWatchRounds").text(Round);
            });

            $("#ElapsedClock", clock).everyTime(10, function (i2) {
                if (Initialized) {
                    $("#ElapsedClock").text(tick_up(elapsedClock));
                }
            });


            $("#SelectRoundLength").change(function () {
                alert($("#SelectRoundLength").val());
            });

            $("#PageClock").clock({ "format": "12", "calendar": "false" });
        });

    </script>
</head>
<body>
   <div class="align-center">
      <span id="TimerText" style="text-align:center; font-size:52px"> 
       STOP
      </span><br /><br /> 
      <hr /><br />
      <div class="workouttimer">
         <div class="clock">
              <div class="work-time">
              <table style="border:0px;margin: auto;">
                 <tr>
                    <td>
                       <span id="StopWatchTime" class="stopwatch-time">
                           00:00:00
                       </span><br />
                       <input class="start" id="ButtonStart" 
                              name="ButtonStart" 
                              type="button" value="Start"  
                              style="width: 120px; font-size:24px" />&nbsp;
                       <input class="stop" id="ButtonStop" name="ButtonStop" 
                              type="button" value="Stop"  
                              style="width: 120px; font-size:24px" />&nbsp;
                       <input class="timereset" id="ButtonTimeReset" 
                              name="ButtonTimeReset" type="button" 
                              value="Reset" 
                              style="width: 120px; font-size:24px" />&nbsp;
                    </td>
                    <td><span id="StopWatchSpace" class="stopwatch-space">
                        &nbsp;
                    </span> </td>
                    <td>
                       <span id="StopWatchRounds" class="stopwatch-rounds">
                           0
                        </span><br />
                       <input class="RoundReset" id="ButtonRoundReset"  
                              name="ButtonRoundsReset" type="button" 
                              value="Reset" 
                              style="width: 120px; font-size:24px" />
                    </td>               
                 </tr>
              </table>
              </div>
          <br /><hr /><br />
             <table style="border:0px;margin: auto;">
             <tr>
                <td class="align-right">Total Work Time&nbsp;:&nbsp;</td>
                <td class="align-left"><span id="TotalWorkClock">
				    00:00:00
                </span></td>
                <td>&nbsp;&nbsp;&nbsp;</td>
                <td class="align-right">Total Rest Time&nbsp;:&nbsp;</td>
                <td class="align-left"><span id="TotalRestClock">
                    00:00:00
                </span></td>
                <td>&nbsp;&nbsp;&nbsp;</td>
                <td class="align-right">Total Elapsed Time&nbsp;:&nbsp;
                </td>
                <td class="align-left"><span id="ElapsedClock">
                    00:00:00
                </span></td>
                <td>&nbsp;&nbsp;&nbsp;</td>
                <td class="align-right">Current time&nbsp;:&nbsp;</td>
                <td class="align-left"><div id="PageClock">00:00:00</div>
                </td>
             </tr>
          </table>      
          </div>
      </div>
      <br /><hr /> 
      <br /> <br />

      <strong>Options</strong><br /><br />
      <hr /><br />
      <table style="border:0px;margin: auto;">
         <tr>
            <td class="align-right">Load Settings&nbsp;:&nbsp;</td>
            <td class="align-left">
               <select name="LoadSettings">
                  <option value="boxing" selected="selected">Boxing
                  </option>
               </select>
            </td>
            <td>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
            <td class="align-right">Save Settings&nbsp;:&nbsp;</td>
            <td class="align-left">
               <input name="TextSaveSettingsName" type="text" 
                      style="width: 180px" />&nbsp;
               <input name="ButtonSaveSettings" type="button" 
                      value="Save" />
            </td>
         </tr>
      </table>
      <br /><br />
      <hr />
      <table style="border:0px;margin: auto;">
         <tr>
            <td  style=" vertical-align:top;">
               <table style="border:0px;margin: auto;">
                 <tr>
                    <td class="align-right">Round Length&nbsp;:&nbsp;</td>
                    <td class="align-left">
                       <select id="SelectRoundLength" style="width: 80px;">
                          <option value=".5">30 sec</option>
                          <option value="1">1 min</option>
                          <option value="1.5">1 &frac12; min</option>
                          <option value="2">2 min</option>
                          <option value="2.5">2 &frac12; min</option>
                          <option value="3" selected="selected">3 min
                          </option>
                          <option value="3.5">3 &frac12; min</option> 
                          <option value="4">4 min</option>
                          <option value="4.5">4 &frac12; min</option>
                          <option value="5">5 min</option>
                          <option value="5.5">5 &frac12; min</option>  
                          <option value="6">6 min</option>
                          <option value="6.5">6 &frac12; min</option>
                          <option value="7">7 min</option>
                          <option value="7.5">7 &frac12; min</option> 
                          <option value="8">8 min</option>
                          <option value="8.5">8 &frac12; min</option>
                          <option value="9">9 min</option>
                          <option value="9.5">9 &frac12; min</option> 
                          <option value="10">10 min</option>
                          <option value="10.5">10 &frac12; min</option>
                          <option value="11">11 min</option>
                          <option value="11.5">11 &frac12; min</option> 
                          <option value="12">12 min</option>
                          <option value="12.5">12 &frac12; min</option>
                          <option value="13">13 min</option>
                          <option value="13.5">13 &frac12; min</option>
                          <option value="14">14 min</option>
                          <option value="14.5">14 &frac12; min</option>
                          <option value="15">15 min</option>
                          <option value="15.5">15 &frac12; min</option>                                                                                                                                          
                       </select>                                         
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">Rest Length&nbsp;:&nbsp;</td>
                    <td class="align-left">
                       <select id="SelectRestLength" style="width: 80px;">
                          <option value=".5">30 sec</option>
                          <option value="1" selected="selected">1 min
                          </option>
                          <option value="1.5">1 &frac12; min</option>
                          <option value="2">2 min</option>
                          <option value="3">3 min</option>
                          <option value="3.5">3 &frac12; min</option> 
                          <option value="4">4 min</option>
                          <option value="4.5">4 &frac12; min</option>
                          <option value="5">5 min</option>
                          <option value="5.5">5 &frac12; min</option>                                                                                                                                                                     
                       </select>                                         
                    </td>
                 </tr>  
                 <tr>
                    <td class="align-right">Start Delay&nbsp;:&nbsp;</td>
                    <td class="align-left">
                       <select id="SelectStartDelay" style="width: 80px;">
                          <option value="5">5 sec</option>
                          <option value="10" selected="selected">10 sec
                          </option>
                          <option value="15">15 sec</option>
                          <option value="20">20 sec</option>
                          <option value="25">25 sec</option>
                          <option value="30">30 sec</option> 
                          <option value="35">35 sec</option>
                          <option value="40">40 sec</option>
                          <option value="45">45 sec</option>
                          <option value="50">50 sec</option>  
                          <option value="55">55 sec</option>
                          <option value="60">60 sec</option>                                                                                                                                                                                               
                       </select>                                         
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">Work Warning&nbsp;:&nbsp;</td>
                    <td class="align-left">
                       <select id="SelectWorkWarn" style="width: 80px;">
                          <option value="5">5 sec</option>
                          <option value="10" selected="selected">10 sec
                          </option>
                          <option value="15">15 sec</option>
                          <option value="20">20 sec</option>
                          <option value="25">25 sec</option>
                          <option value="30">30 sec</option> 
                          <option value="35">35 sec</option>
                          <option value="40">40 sec</option>
                          <option value="45">45 sec</option>
                          <option value="50">50 sec</option>  
                          <option value="55">55 sec</option>
                          <option value="60">60 sec</option>                                                                                                                                                                                               
                       </select>                                         
                    </td>
                 </tr>    
                 <tr>
                    <td class="align-right">Rest Warning&nbsp;:&nbsp;</td>
                    <td class="align-left">
                       <select id="SelectRestWarning" style="width: 80px;">
                          <option value="5">5 sec</option>
                          <option value="10" selected="selected">10 sec
                          </option>
                          <option value="15">15 sec</option>
                          <option value="20">20 sec</option>
                          <option value="25">25 sec</option>
                          <option value="30">30 sec</option> 
                          <option value="35">35 sec</option>
                          <option value="40">40 sec</option>
                          <option value="45">45 sec</option>
                          <option value="50">50 sec</option>  
                          <option value="55">55 sec</option>
                          <option value="60">60 sec</option>                                                                                                                                                                                               
                       </select>                                         
                    </td>
                 </tr>    
                 <tr>
                    <td class="align-right">Text Font Size&nbsp;:&nbsp;</td>
                    <td class="align-left">
                       <select id="SelectTextFontSize" 
                               style="width: 80px;">
                         <option value="128" selected="selected">128 px
                         </option>
                       </select>
                    </td>
                 </tr>
                 
                 <tr>
                    <td class="align-right">Page Color&nbsp;:&nbsp;</td>
                    <td class="align-left">
                       <select id="SelectPageBGColor" style="width: 80px;">
                          <option value="black">Black</option>
                          <option value="red">Red</option>
                          <option value="white" selected="selected">White
                          </option>
                          <option value="yellow">Yellow</option>
                          <option value="green">Green</option>
                          <option value="brown">Brown</option>
                          <option value="blue">Blue</option>
                          <option value="silver">Silver</option>
                          <option value="orange">Orange</option>
                       </select>
                    </td>
                 </tr>
                                                                    
              </table>
            </td>
            <td>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
            <td  style=" vertical-align:top;">
               <table style="border:0px;margin: auto;">
                 <tr>
                    <td class="align-right">Time Text Size&nbsp;:&nbsp;</td>
                    <td class="align-left">
                       <select id="SelectTimeSize" style="width: 80px;">
                          <option value="128" selected="selected">128 px
                          </option>
                       </select>
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">Time Text Color&nbsp;:&nbsp;
                    </td>
                    <td class="align-left">
                       <select id="SelectTimeTextColor" 
                               style="width: 80px;">
                          <option value="black" selected="selected">Black
                          </option>
                          <option value="red">Red</option>
                          <option value="white">White</option>
                          <option value="yellow">Yellow</option>
                          <option value="green">Green</option>
                          <option value="brown">Brown</option>
                          <option value="blue">Blue</option>
                          <option value="silver">Silver</option>
                          <option value="orange">Orange</option>
                       </select>
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">Time Warning Color&nbsp;:&nbsp;
                    </td>
                    <td class="align-left">
                       <select id="SelectTimeWarningColor" 
                               style="width: 80px;">
                          <option value="black" selected="selected">Black
                          </option>
                          <option value="red">Red</option>
                          <option value="white">White</option>
                          <option value="yellow">Yellow</option>
                          <option value="green">Green</option>
                          <option value="brown">Brown</option>
                          <option value="blue">Blue</option>
                          <option value="silver">Silver</option>
                          <option value="orange">Orange</option>
                       </select>
                    </td>
                 </tr>                 
                 <tr>
                    <td class="align-right">Time Back Color&nbsp;:&nbsp;
                    </td>
                    <td class="align-left">
                       <select id="SelectTimeBGColor" style="width: 80px;">
                          <option value="black">Black</option>
                          <option value="red">Red</option>
                          <option value="white" selected="selected">White
                          </option>
                          <option value="yellow">Yellow</option>
                          <option value="green">Green</option>
                          <option value="brown">Brown</option>
                          <option value="blue">Blue</option>
                          <option value="silver">Silver</option>
                          <option value="orange">Orange</option>
                       </select>
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">Round Text Size&nbsp;:&nbsp;
                    </td>
                    <td class="align-left">
                       <select id="SelectRoundSize" style="width: 80px;">
                          <option value="128" selected="selected">128 px
                          </option>
                       </select>
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">Round Text Color&nbsp;:&nbsp;
                    </td>
                    <td class="align-left">
                       <select name="SelectRoundTextColor" 
                               style="width: 80px;">
                          <option value="black" selected="selected">Black
                          </option>
                          <option value="red">Red</option>
                          <option value="white">White</option>
                          <option value="yellow">Yellow</option>
                          <option value="green">Green</option>
                          <option value="brown">Brown</option>
                          <option value="blue">Blue</option>
                          <option value="silver">Silver</option>
                          <option value="orange">Orange</option>
                       </select>
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">Round Back Color&nbsp;:&nbsp;
                    </td>
                    <td class="align-left">
                       <select id="SelectRoundBGColor" style="width: 80px;">
                          <option value="black">Black</option>
                          <option value="red">Red</option>
                          <option value="white" selected="selected">White
                          </option>
                          <option value="yellow">Yellow</option>
                          <option value="green">Green</option>
                          <option value="brown">Brown</option>
                          <option value="blue">Blue</option>
                          <option value="silver">Silver</option>
                          <option value="orange">Orange</option>
                       </select>
                    </td>
                 </tr>
              </table>      
            </td>
            <td>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
            <td>
               <table style="border:0px;margin: auto;">
                 <tr>
                    <td class="align-right">Count Direction&nbsp;:&nbsp;
                    </td>
                    <td class="align-left">
                       <select id="SelectCountDirection" 
                               style="width: 80px;">
                          <option value="up" selected="selected">UP</option>
                          <option value="down">DOWN</option>
                       </select>
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">Total Rounds&nbsp;:&nbsp;</td>
                    <td class="align-left">
                       <select id="SelectTotalRounds" style="width: 80px;">
                          <option value="0" selected="selected">Infinate
                          </option>
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                          <option value="5">5</option>
                          <option value="6">6</option>
                          <option value="7">7</option>
                          <option value="8">8</option>
                          <option value="9">9</option>
                          <option value="10">10</option>
                          <option value="11">12</option>
                          <option value="12">12</option>
                          <option value="13">13</option>
                          <option value="14">14</option>
                          <option value="15">15</option>
                          <option value="16">16</option>
                          <option value="17">17</option>
                          <option value="18">18</option>
                          <option value="19">19</option>
                          <option value="20">20</option>
                          <option value="21">21</option>
                          <option value="22">22</option>
                          <option value="23">23</option>
                          <option value="24">24</option>
                          <option value="25">25</option>
                          <option value="26">26</option>
                          <option value="27">27</option>
                          <option value="28">28</option>
                          <option value="29">29</option>
                          <option value="30">30</option>
                       </select>
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">Round Begin Sound&nbsp;:&nbsp;
                    </td>
                    <td class="align-left">
                       <select id="SelectRoundBeginSOund" 
                               style="width: 80px;">
                          <option value="bell" selected="selected">Bell
                          </option>
                       </select>
                    </td>
                 </tr>                 
                 <tr>
                    <td class="align-right">Round End Sound&nbsp;:&nbsp;
                    </td>
                    <td class="align-left">
                       <select id="SelectRoundEndSound" 
                               style="width: 80px;">
                          <option value="bell" selected="selected">Bell
                          </option>
                       </select>
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">Warning Sound&nbsp;:&nbsp;</td>
                    <td class="align-left">
                       <select id="SelectWarningSound" style="width: 80px;">
                          <option value="bell" selected="selected">Bell
                          </option>
                       </select>
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">Final Sound&nbsp;:&nbsp;</td>
                    <td class="align-left">
                       <select id="SelectFinalSound" style="width: 80px;">
                              <option value="bell" selected="selected">Bell
                              </option>
                       </select>
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">Precision&nbsp;:&nbsp;</td>
                    <td class="align-left">
                       <select id="SelectRound BGColor" 
                               style="width: 80px;">
                          <option value="00" selected="selected">00</option>
                       </select>
                    </td>
                 </tr>
              </table>  
            </td>
            <td>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
            <td>
               <table style="border:0px;margin: auto;">
                 <tr>
                    <td class="align-right">Intervals&nbsp;:&nbsp;</td>
                    <td class="align-left">
                       <select id="SelectIntervalType" style="width: 80px;">
                          <option value="none" selected="selected">None
                          </option>
                          <option value="high">High</option>
                          <option value="low">Low</option>
                          <option value="both">Both</option>
                       </select>
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">High Interval&nbsp;:&nbsp;</td>
                    <td class="align-left">
                       <select id="SelectHighInterval" style="width: 80px;">
                          <option value="5">5 sec</option>
                          <option value="10">10 sec</option>
                          <option value="15">15 sec</option>
                          <option value="20">20 sec</option>
                          <option value="25">25 sec</option>
                          <option value="30" selected="selected">30 sec
                          </option> 
                          <option value="35">35 sec</option>
                          <option value="40">40 sec</option>
                          <option value="45">45 sec</option>
                          <option value="50">50 sec</option>  
                          <option value="55">55 sec</option>
                          <option value="60">1 min</option>      
                          <option value="65">1 min 5 sec</option>
                          <option value="70">1 min 10 sec</option>
                          <option value="75">1 min 15 sec</option>
                          <option value="80">1 min 20 sec</option>
                          <option value="85">1 min 25 sec</option>
                          <option value="90">1 min 30 sec</option> 
                          <option value="95">1 min 35 sec</option>
                          <option value="100">1 min 40 sec</option>
                          <option value="105">1 min 45 sec</option>
                          <option value="110">1 min 50 sec</option>  
                          <option value="115">1 min 55 sec</option>
                          <option value="120">2 min</option> 
                          <option value="125">2 min 5 sec</option>
                          <option value="130">2 min 10 sec</option>
                          <option value="135">2 min 15 sec</option>
                          <option value="140">2 min 20 sec</option>
                          <option value="145">2 min 25 sec</option>
                          <option value="150">2 min 30 sec</option> 
                          <option value="155">2 min 35 sec</option>
                          <option value="160">2 min 40 sec</option>
                          <option value="165">2 min 45 sec</option>
                          <option value="170">2 min 50 sec</option>  
                          <option value="175">2 min 55 sec</option>
                          <option value="180">3 min</option> 
                          <option value="185">3 min 5 sec</option>
                          <option value="190">3 min 10 sec</option>
                          <option value="195">3 min 15 sec</option>
                          <option value="200">3 min 20 sec</option>
                          <option value="205">3 min 25 sec</option>
                          <option value="210">3 min 30 sec</option> 
                          <option value="215">3 min 35 sec</option>
                          <option value="220">3 min 40 sec</option>
                          <option value="225">3 min 45 sec</option>
                          <option value="230">3 min 50 sec</option>  
                          <option value="235">3 min 55 sec</option>
                          <option value="240">4 min</option> 
                          <option value="245">4 min 5 sec</option>
                          <option value="250">4 min 10 sec</option>
                          <option value="255">4 min 15 sec</option>
                          <option value="260">4 min 20 sec</option>
                          <option value="265">4 min 25 sec</option>
                          <option value="270">4 min 30 sec</option> 
                          <option value="275">4 min 35 sec</option>
                          <option value="280">4 min 40 sec</option>
                          <option value="285">4 min 45 sec</option>
                          <option value="290">4 min 50 sec</option>  
                          <option value="295">4 min 55 sec</option>
                          <option value="300">5 min</option>                                                                                                                            
                       </select>
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">High Interval Color&nbsp;:&nbsp;
                    </td>
                    <td class="align-left">
                       <select id="SelectHighIntervalColor" 
                               style="width: 80px;">
                          <option value="black">Black</option>
                          <option value="red">Red</option>
                          <option value="white" selected="selected">White
                          </option>
                          <option value="yellow">Yellow</option>
                          <option value="green">Green</option>
                          <option value="brown">Brown</option>
                          <option value="blue">Blue</option>
                          <option value="silver">Silver</option>
                          <option value="orange">Orange</option>
                       </select>
                    </td>
                 </tr>                 
                 <tr>
                    <td class="align-right">High Interval Sound&nbsp;:&nbsp;
                    </td>
                    <td class="align-left">
                       <select id="SelectHighIntervalSound" 
                               style="width: 80px;">
                          <option value="bell" selected="selected">Bell
                          </option>
                       </select>
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">Low Interval&nbsp;:&nbsp;</td>
                    <td class="align-left">
                       <select id="SelectLowInterval" style="width: 80px;">
                          <option value="5">5 sec</option>
                          <option value="10">10 sec</option>
                          <option value="15">15 sec</option>
                          <option value="20">20 sec</option>
                          <option value="25">25 sec</option>
                          <option value="30" selected="selected">30 sec
                          </option> 
                          <option value="35">35 sec</option>
                          <option value="40">40 sec</option>
                          <option value="45">45 sec</option>
                          <option value="50">50 sec</option>  
                          <option value="55">55 sec</option>
                          <option value="60">1 min</option>      
                          <option value="65">1 min 5 sec</option>
                          <option value="70">1 min 10 sec</option>
                          <option value="75">1 min 15 sec</option>
                          <option value="80">1 min 20 sec</option>
                          <option value="85">1 min 25 sec</option>
                          <option value="90">1 min 30 sec</option> 
                          <option value="95">1 min 35 sec</option>
                          <option value="100">1 min 40 sec</option>
                          <option value="105">1 min 45 sec</option>
                          <option value="110">1 min 50 sec</option>  
                          <option value="115">1 min 55 sec</option>
                          <option value="120">2 min</option> 
                          <option value="125">2 min 5 sec</option>
                          <option value="130">2 min 10 sec</option>
                          <option value="135">2 min 15 sec</option>
                          <option value="140">2 min 20 sec</option>
                          <option value="145">2 min 25 sec</option>
                          <option value="150">2 min 30 sec</option> 
                          <option value="155">2 min 35 sec</option>
                          <option value="160">2 min 40 sec</option>
                          <option value="165">2 min 45 sec</option>
                          <option value="170">2 min 50 sec</option>  
                          <option value="175">2 min 55 sec</option>
                          <option value="180">3 min</option> 
                          <option value="185">3 min 5 sec</option>
                          <option value="190">3 min 10 sec</option>
                          <option value="195">3 min 15 sec</option>
                          <option value="200">3 min 20 sec</option>
                          <option value="205">3 min 25 sec</option>
                          <option value="210">3 min 30 sec</option> 
                          <option value="215">3 min 35 sec</option>
                          <option value="220">3 min 40 sec</option>
                          <option value="225">3 min 45 sec</option>
                          <option value="230">3 min 50 sec</option>  
                          <option value="235">3 min 55 sec</option>
                          <option value="240">4 min</option> 
                          <option value="245">4 min 5 sec</option>
                          <option value="250">4 min 10 sec</option>
                          <option value="255">4 min 15 sec</option>
                          <option value="260">4 min 20 sec</option>
                          <option value="265">4 min 25 sec</option>
                          <option value="270">4 min 30 sec</option> 
                          <option value="275">4 min 35 sec</option>
                          <option value="280">4 min 40 sec</option>
                          <option value="285">4 min 45 sec</option>
                          <option value="290">4 min 50 sec</option>  
                          <option value="295">4 min 55 sec</option>
                          <option value="300">5 min</option>    
                       </select>
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">Low Interval Color&nbsp;:&nbsp;
                    </td>
                    <td class="align-left">
                       <select id="SelectLowIntervalColor" 
                               style="width: 80px;">
                          <option value="black">Black</option>
                          <option value="red">Red</option>
                          <option value="white" selected="selected">White
                          </option>
                          <option value="yellow">Yellow</option>
                          <option value="green">Green</option>
                          <option value="brown">Brown</option>
                          <option value="blue">Blue</option>
                          <option value="silver">Silver</option>
                          <option value="orange">Orange</option>
                       </select>
                    </td>
                 </tr>
                 <tr>
                    <td class="align-right">Low Interval Sound&nbsp;:&nbsp;
                    </td>
                    <td class="align-left">
                       <select id="SelectLowIntervalSound" 
                               style="width: 80px;">
                          <option value="bell" selected="selected">Bell
                          </option>
                       </select>
                    </td>
                 </tr>
              </table>  
            </td>
         </tr>            
      </table>
   </div>
</body>
</html>