Таймер на событие

Здравствуйте,

Хочу сделать такое

на странице есть две картинки и 2 радиобокса (или больше), на радиобоксах время ( например на первом 10 минут на втором 1 час), выбираешь какой то радиобокс и кликаешь по картинке, когда ты кликаешь запускается таймер и рядом или вверху страницы появлялось текстовое поле (или что то другое) с временем обратного отсчета, когда таймер доходит до 0 картинка меняется на другую (например когда таймер не запущен квадрат желтый, после запуска он стает красным и когда таймер 0 он стает зеленым, но когда нажать на зеленый квадрат от должен превратится в желтый(вернутся в начальное положение)) также надо записывать в базу количество раз срабатывания таймера (пользователь запускает таймер ждет когда выйдет время и после этого когда он жмет таймер должен обнулится и в поле в базе надо добавить +1 срабатывание таймера)

помогите пожалуйста с реализацией такой идеи.

 

сделал такое

Код (Text):

1.  
2. <div align="center">
3. <p>&nbsp;<span id="clock1" style="width:450px; font-size:10px"></span>&nbsp;</p>
4. </div>
5. <script type="text/javascript">
6. <!--
7.  var hour0=0;
8.  var min0=0;
9.  var sec0=0;
10.  var timeId=null;
11.  
12.  function form2 (v) { return (v<10?'0'+v:v); }
13.  
14.  function changetime() {
15.   sec0--;
16.   if (sec0<0) {
17.    sec0=59;
18.    min0--;
19.    if (min0<0) {
20.     min0=59;
21.     if (hour0>0) hour0--;
22.     else { hour0=min0=sec0=0; }
23.    }
24.   }
25.  }
26.  
27.  function showtime () {
28.   var t=hour0*3600+min0*60+sec0;
29.   if (t>0) {
30.    document.getElementById('clock1').innerHTML = form2(hour0)+':'+form2(min0)+':'+form2(sec0);
31.    changetime();
32.    window.setTimeout("showtime();",1000);
33.   }
34.   else if (t<1) {
35.    document.getElementById('clock1').innerHTML = '';
36.    window.clearTimeout (timeID);
37.   }
38.  }
39.  
40.  function inittime (hour,min,sec) {
41.   hour0=Math.max(hour,0); min0=Math.max(min,0); sec0=Math.max(sec,0);
42.   timeID=window.setTimeout("showtime();",1000);
43.  }
44. // -->
45. </script>
46. <script type="text/javascript">
47.  function generate_list (name,min,step,max,deft) {
48.   document.writeln ('<select name="'+name+'" size="1">');
49.   for (var i=min; i<=max; i+=step) {
50.    document.write ('<option value="'+i+'"');
51.    if (i==deft) { document.write (' selected'); }
52.    document.writeln ('>'+(i<10?'0'+i:i)+'</option>');
53.   }
54.   document.writeln ('</select>');
55.  }
56. </script>
57.  
58. <div align="center">
59.  <form name="f1">
60.   <table align="center" width="90%" border="0" cellpadding="4" cellspacing="0"><tr>
61.    <td>Hour:&nbsp;<script type="text/javascript">generate_list ('hour0',0,1,50,1);</script></td>
62.    <td>Minute:&nbsp;<script type="text/javascript">generate_list ('min0',0,1,59,0);</script></td>
63.    <td>Second:&nbsp;<script type="text/javascript">generate_list ('sec0',0,1,59,0);</script></td>
64.    <td><input type="button" value="Start"
65.     onclick="inittime(
66.      document.f1.hour0.options[document.f1.hour0.selectedIndex].value,
67.      document.f1.min0.options[document.f1.min0.selectedIndex].value,
68.      document.f1.sec0.options[document.f1.sec0.selectedIndex].value);"></td>
69.   </tr></table>
70.  </form>
71. </div>

но так как мне надо картинку вместо кнопки

Код (Text):

1.  
2.   <table align="left" width="90%" border="1" cellpadding="4" cellspacing="0">
3.    <tr><input type="radio" name="1" value="0,1,0"> 1 Min<</tr>
4.    <tr><input type="radio" name="2" value="0,10,0"> 10 Min<br></tr>
5.    <tr><input type="image" src="img/yellow.jpg" alt="Click!" onClick="inittime();"></tr>
6.   </table>

есть проблемы
1. не работает onClick (после нажатия в строке ввода вижу координаты в виде GET запроса)
2. так и не получилось в onClick="inittime();" вставить параметры выделенного radio
3. таймер на работает после рефреша страницы.