Adding a comment anywhere on the page (annotation)

[draganbabic]

This is in reference to using Disqus comments in order to annotate design mockups.

Here is what we have so far: http://sprawsm.com/discussions/

It simply allows you to embed a Disqus thread to a mockup inside a collapsible pane. We would like to be able to allow people to also annotate their mockups by attaching a comment box to any element on the page.

Here is what we've come up so far in terms of workflow:

1. User enters "annotation mode" and now as he hovers the page, all page elements are highlighted as they are hovered.
2. If an element already has existing comments, their number is shown in the comment bubble for as long as the user is in the annotation mode. If there are no comments for a particular element, a + is shown inside the comment bubble only once the element is hovered, indicating that it is commentable.
3. Clicking on the hovered element, a comment box is shown where the user can leave a comment or read existing ones.
4. Clicking anywhere outside the comment box closes it.
5. User can get out of the annotation mode by clicking a link that would disable the hovering/highlighting hovered element, and hide the comments and bubbles.

We would be able to create the designs for all these features, but we can't handle the JS ourselves, so we were wondering if you would be interested in helping us out with this inside the Superawesøme Discussions repo.

Thanks!