runner UI does not run

runner UI does not run

Hi guys
I am trying to use the runner UI http://plugins.jquery.com/runner/


I have all these file included (last 2 are for the runner class)

  1.   <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  2.   <script src="js/jquery.ui.core.js" type="text/javascript"></script>
  3.   <script src="js/jquery.ui.widget.js" type="text/javascript"></script>
  4.   <script src="js/jquery.ui.slider.js" type="text/javascript"></script>
  5.   <script src="js/jquery.ui.datepicker.js" type="text/javascript"></script>
  6.   <script src="js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
  7.   <script src="js/jquery.runner.js" type="text/javascript"></script>
  8.   <script src="js/jquery.runner-min.js" type="text/javascript"></script> 


Then I have this code to inisilize runner

  1.     <script>
  2.         $(function(){
  3.             $('#triggerOn').datetimepicker({
  4.             timeFormat: "hh:mm tt"
  5.             });
  6.            
  7.            
  8.             $('#timer').runner(
  9.             { autostart: true }
  10.             );
  11.            
  12.             $('#timerStart').click(function() {
  13.                 $('#timer').runner('start');
  14.             });
  15.             $('#timerReset').click(function() {
  16.                 $('#timer').runner('reset');
  17.             });
  18.             $('#timerStop').click(function() {
  19.                 $('#timer').runner('stop');
  20.             });           
  21.            
  22.         });
  23.     </script>


this is my html code to display and click the button to start/stop/reset



  1.               <div style="margin: 20px auto; width: 190px; padding: 20px; background-color: #fff; display: block; height: 80px; border: 1px solid #ccc;">
  2.               <input type="text" id="timer" name="timer" value="" readyonly="true" style="width: 150px; height: 35px; font-size: 20px; font-weight: bold; text-align: center; background-color: #2D2D2D; color: #fff;"><br />
  3.                   <div style="margin:0 auto; width: 150px;">
  4.                   <div class="button" id="timerStart" style="display: inline;" >Start</div>
  5.                   <div class="button" id="timerStop" style="display: inline;" >Stop</div>
  6.                   <div class="button" id="timerReset" style="display: inline;" >Reset</div>
  7.                   </div>
  8.               </div>


Can somebody plkease tell me why it is not running? if i click on start it does not start and it does not autorun. it does not work at all and I get no errors in my console!.


Thanks