D-pad navigation - data structure and programming?

Question

I am tasked with implementing d-pad navigation for an existing web application for GoogleTV (and I'm testing in Google Chrome, and so far they seem to operate similarly. In their notes for implementing d-pad navigation they have basic handlers for up, right, left, down and select.

At present I have a scheme to initialize a virtual cursor, and then for the various dpad strokes. I rely on using document.elementFromPoint() and looping through until I find a new element that was not previously selected. I'm using outline: css to indicate current position and I only show it when one of the dpad controls has been selected.

I have a step on initialization which adds the class dpadClickable to all the items which are clickable, and then as the cursor moves I have dpadHighlighted added to the new one and removed from all other elements. It looks right.

This all fails if I have an element which is scrollable, or if the orientation is such that moving my point downward finds nothing.

What I would like is a data structure to keep all my dpadClickable items in, and then on d-pad clicks, be able to iterate it to find the best closest top, down, left, and right elements. Like, should I do it based on the top and left properties? Or based on a calculated center point?

I found a jQuery library which sort of implements this, and am reverse-engineering it to some extent. But what I'd really like is a primer on this class of programming problem: should I be looking for graphics programming algorithms? games? Something else?

UPDATE: Question over on the User Experience StackExchange site: Adding D-pad navigation to an existing web application: Resources?

Answer 1

Have you looked at http://code.google.com/tv/web/lib/ where the official Google TV Java Script extensions / libraries are? They might help you with this.