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