javascript onclick for thumbnails

Hi,

i was struggling for a function where only 1 thumbnail should be active
and others inactive when clicked on the particular thumbnail.
code:

   1. view:
   2. <script type="javascript">
   3. function PlayVideo_options(videoFile, id) {
   4. document.getElementById(id).className = 'video_option
active_video';
   5. }
   6. </script>
   7.
   8. <div id="video_options">
   9. <% for eligible_exercise in excercises %>
  10. <% exercise = eligible_exercise.exercise %>
  11. <div onclick="PlayVideo_options('<%= exercise.path_to_video
%>', 'active_<%= exercise.id %>')" class="video_option" id="active_<%=
exercise.id %>">
  12. <div class="thumbnail"><img src="<%=
exercise.path_to_thumbnail %>" width="80" height="75" /></div>
  13. </div>
  14. <% end %>
  15. </div>

what i want is, when user clicks on 1st thumbnail the class should
become 'video_option active_video'.And when clicks on 2nd thumbnail, the
2nd thumbnail should become 'video_option active_video' and the 1st
thumbnail should become 'video_option'

Means there should be only 1 thumbnail in class="video_option
active_video" state when clicked and others in class="video_option"
and i was getting all active when clicked using above function

thanks in advance !!

what i want is, when user clicks on 1st thumbnail the class should
become 'video_option active_video'.And when clicks on 2nd thumbnail,
the
2nd thumbnail should become 'video_option active_video' and the 1st
thumbnail should become 'video_option'

Means there should be only 1 thumbnail in class="video_option
active_video" state when clicked and others in class="video_option"
and i was getting all active when clicked using above function

Read up on prototype's $$, addClassName and removeClassName functions
(on prototypejs.org)

Fred