--- a/PersonasBackend/personas/json_feeds.py	Tue Mar 11 22:38:54 2008 -0500
+++ b/PersonasBackend/personas/json_feeds.py	Wed Mar 12 21:48:11 2008 -0500
@@ -3,9 +3,6 @@
 
 from PersonasBackend.personas import models
 
-JSON_CATEGORY_ID_TEMPLATE = "personas-category-%d"
-JSON_PERSONA_ID_TEMPLATE = "persona-%d"
-
 def _makeJsonResponse( obj ):
     json = simplejson.dumps( obj, indent=4 )
     response = HttpResponse( json )
@@ -27,7 +24,7 @@
     for category in models.Category.objects.all():
         categoryDicts.append(
             {"label" : category.name,
-             "id" : JSON_CATEGORY_ID_TEMPLATE % category.id,
+             "id" : category.json_id,
              "type" : "list",
              "parent" : "personas-category-menu"}
             )
@@ -40,12 +37,12 @@
     for persona in models.Persona.objects.filter( status="published" ):
         personaDicts.append(
             {"label" : persona.name,
-             "id" : JSON_PERSONA_ID_TEMPLATE % persona.id,
+             "id" : persona.json_id,
              "dark" : ( persona.color_scheme == "dark" ),
              "baseURL" : "",
              "headerURL" : persona.get_header_url(),
              "footerURL" : persona.get_footer_url(),
-             "menu" : JSON_CATEGORY_ID_TEMPLATE % persona.category.id,
+             "menu" : persona.category.json_id,
              "preview" : "yes"}
             )
 

--- a/PersonasBackend/personas/models.py	Tue Mar 11 22:38:54 2008 -0500
+++ b/PersonasBackend/personas/models.py	Wed Mar 12 21:48:11 2008 -0500
@@ -198,6 +198,11 @@
     def __str__(self):
         return self.name
 
+    def _get_json_id( self ):
+        return "personas-category-%d" % self.id
+
+    json_id = property( _get_json_id )
+
 class Persona(models.Model):
     """
     Encapsulates the most recent revision of a Persona.
@@ -488,6 +493,11 @@
         return ( user.has_perm( "personas.can_publish" ) or
                  self.owner == user )
 
+    def _get_json_id( self ):
+        return "persona-%d" % self.id
+
+    json_id = property( _get_json_id )
+
 class Revision(models.Model):
     """
     Represents an old revision of a Persona.

--- a/PersonasBackend/personas/templates/personas/list.html	Tue Mar 11 22:38:54 2008 -0500
+++ b/PersonasBackend/personas/templates/personas/list.html	Wed Mar 12 21:48:11 2008 -0500
@@ -2,11 +2,33 @@
 
 {% block content %}
 {% if personas %}
-<p>Here's a list of all available Personas.  Enjoy!</p>
+<p>Here's a list of all available Personas.</p>
+<p>If you have the Personas extension installed, just mouseover the
+preview image for a Persona to preview it&mdash;when your mouse moves
+away from the image, your original Persona will replace the preview.</p>
+<p>If you like the Persona, you can click on the preview image to set it
+as your current Persona.</p>
+<p>Enjoy!</p>
+<script>
+function dispatchPersonaEvent(aType, aNode) {
+    var event = document.createEvent("Events");
+    event.initEvent(aType, true, false);
+    aNode.dispatchEvent(event);
+}
+</script>
 {% for persona in personas %}
 <div class="addon-listitem clearfix-right corner-box">
-  <img src="{{ persona.get_header_url }}" class="preview-image"
-       width="300" height="20" alt="" />
+  <div onclick="dispatchPersonaEvent('SelectPersona',
+                event.originalTarget)"
+       onmouseover="dispatchPersonaEvent('PreviewPersona',
+                    event.originalTarget)"
+       onmouseout="dispatchPersonaEvent('ResetPersona',
+                   event.originalTarget)">
+    <img persona="{{ persona.json_id }}"
+         category="{{ persona.category.json_id }}"
+         src="{{ persona.get_header_url }}" class="preview-image"
+         width="300" height="20" alt="" />
+  </div>
   <div class="addon-titleby">
     <h2 class="addonname">{{ persona.name }}</h2>
     <span class="developer"> by {{ persona.owner.first_name }}