Reverse Engineering the DOM, Javascript events & "what's going on"?

Question

I'm trying to figure out what's going on in the javascript of Google's live page preview.

Why aren't the links I'm adding to the DOM with Javascript clickable? (for a bit more context)

http://chesser.ca/2010/11/google-visual-image-search-hack-marklet/ for the "latest demo"

If you search on google, the results come up on page via live search. Then, if you mouseover one of the magnifying glasses in your result set, a number of things happen.

1. the mousover event for the magnifying glass fires
2. this calls an (as of yet) unknown function with unknown parameters
3. the function makes a cross-site call to google's image results query server
4. those results are stored in google's VS class memory `google.vs.ha`

I've copied the code from google's library and run it through an un-minifier so it's slightly more readable. I've also installed breakpoints in the code through firebug so I can inspect the dom & memory space before during and after I load the page.

My end goal is to be able to replicate the mousover event in code by calling the same function that is called - but - I'm stuck in trying to find the right function. (i'm sure it involves google.vs.Ga(a, b, c) but I'm just not quite there yet.

I know this is pretty much the craziest obsession ever - but - I dunno. Maybe if you're also reading stack on a Sunday you understand :)

What function is being called "On Hover" that sends out the command to get the image requests?

EDIT: There are a few upvotes on this so far tho I thought I'd add a bit more background to anyone wanting to catch up in firebug, you can follow what's happening in javascript at any time.

Is a picture of what google looks like "in memory" you can look at all of the functions and calls and the current state of variables.

You can also actually access and call those variables by putting links in your bookmarks bar. for example javascript:alert(google.base_href) after a search will tell you the URL you're at... and it gets way more exciting from there.

EDIT NUMER 2:

a huge thanks to Matt who managed to crack this in one go :)

 <a href="javascript:
     (function(){
         var all_divs = document.getElementsByTagName('div');
         for (i=0;i < all_divs.length; i++) {
             if (all_divs[i].className == 'vsc') {
                 google.vs.ea(all_divs[i]);
             }
         }
     })();">test all vsc</a>

Answer 1

My approach: I ran a profiler and hovered over the results as many times as possible (to hopefully make the function stand out in the profiler results)

The preview function seems to be google.vs.P

It is called with the following arguments:

• DOM element for the result (div.vsc)
• Result info (looks similar to the google.vs.ha store)

The second argument is computed by google.vs.ea, which takes a DOM element as its parameter.

I assume that, since it takes the element as its only parameter, this is probably the function called on hover.

So the hover listener probably looks something like this:

document.addEventListener('mouseover', function (event) {
    if (/\bvsc\b/.test(event.target.className)) {
        console.log('preview!');
        google.vs.ea(event.target);
    }
}, false);

Explanation

As requested below, here's a bit more info

I ran the profiler that ships with Webkit Inspector in Chromium. After hovering the results several times, the profiler results looked like this:

As you can see, the functions did in fact reach near the top.

So after that, I decided to overload google.vs.P and google.vs.ea to just print the arguments that were sent to them:

As you can see in the screenshot .. looking at the arguments, the relationship between the two functions becomes a bit more clear. (But, of course, there's still plenty of digging to be done down that rabbit hole..)

Hope this helps.