Events - Convert Some Procedural Code To Be More Object Oriented

I'm trying to convert some Procedural code to be more Object Oriented and I'm stuck...

The page is really simple:

It's just a big picture w/ a caption under it, and a few thumbnail pics off to the side, that when clicked, replace the big picture as well as swap out the caption for a new one.

In the code (external JS file):

I've got 2 arrays:

One that holds the thumbnail image file URLs, and the other that holds the captions.

And a function:

I've created an object prototype that I can instantiate in order to:

1.) create the event: do the actual swapping of the thumbnail, and the changing of the caption.

2.) and attach that event to the thumbnail's link onclick event handler.

The code below is the closest I've come to making it work. The problem is that when I click any of the thumbnail links it only executes the last event instead of the one that corresponds to the link that was just clicked. Hopefully someone can take a look at my code and let me know what I'm doing wrong.

Simplified version of the code:

The x,y,z variable assignments are only in the window.onload function for the sake of clarity, but the event object instantiation block has to be in there for anything to work at all.

I know that the event0,event1,event2 objects work, and are attached to the onclick handler because they will swap the last thumbnail and caption when I click any of the thumbnail links. Of course that's the problem now... any click only activates the last event. It's like it attached the last event to all the onclick event handlers.

In fact, if I only create the event0 object, it works like it's supposed to... but when I create the event1 object, it does what it's supposed to and it takes over for event0. Creating event2 makes it take over for all of them. Each subsequent event# object seems to attach its own addy[ ] and caption[ ] to each previous x[ ] link.