anchor.diff:      });
   
       $('.accordion').accordion({collapsible: true});
  -    $('#content span').qtip({content: {text: false}, position: {
  +    $('#content span[title]').qtip({content: {text: false}, position: {
   	            corner: {
   		            target: 'topMiddle',
   		            tooltip: 'bottomLeft'
  
positive.code:         </c:forEach>
      </c:forEach>
  
      
      <h2>Active Roles</h2>
      <div class="accordion">
      <c:forEach var="role" items="${person.roles}">
          <c:if test="${not role.terminated}">
          <h3><a href="#">${role.title}</a></h3>
          <div>
              Some content about a role goes here.  It should be a lot so that we can justify using the accordion model.
              Some content about a role goes here.  It should be a lot so that we can justify using the accordion model.
              Some content about a role goes here.  It should be a lot so that we can justify using the accordion model.
          </div>
          </c:if>
      </c:forEach>
      </div>
  
      <h2>Expired Roles</h2>
      <div class="accordion">
      <c:forEach var="role" items="${person.roles}">
          <c:if test="${role.terminated}">
          <h3><a href="#">${role.title}</a></h3>
          <div>
              Some content about a role goes here.  It should be a lot so that we can justify using the accordion model.
              Some content about a role goes here.  It should be a lot so that we can justify using the accordion model.
              Some content about a role goes here.  It should be a lot so that we can justify using the accordion model.
          </div>
          </c:if>
      </c:forEach>
      </div>
  </div>
  
  <div class="center"><a href="${flowExecutionUrl}&_eventId=submitNewSearch"><button>New Search</button></a></div>
  
negative.code: </script>
  
  <div id="calculated-person">
  
      <c:set var="officialName" value="${person.officialName}"  />
      <c:set var="preferredName" value="${person.preferredName}" />
          <h2><strong><c:if test="${not empty officialName.prefix}"><span title="Prefix">${officialName.prefix}</span></c:if>
      <c:if test="${not empty officialName.given}"><span title="Given">${officialName.given}</span></c:if>
      <c:if test="${not empty officialName.middle}"><span title="Middle">${officialName.middle}</span></c:if>
      <c:if test="${not empty officialName.family}"><span title="Family">${officialName.family}</span></c:if><c:if test="${not empty officialName.suffix}">, <span title="Suffix">${officialName.suffix}</span></c:if></strong></h2>
      <div align="left" style="text-transform: lowercase;">official name</div>
  
  
      <!-- TODO what about other names? -->
      <c:if test="${officialName ne preferredName}">
      <p><strong>Preferred Name</strong>: <c:if test="${not empty preferredName.prefix}"><span title="Prefix">${preferredName.prefix}</span></c:if>
      <c:if test="${not empty preferredName.given}"><span title="Given">${preferredName.given}</span></c:if>
      <c:if test="${not empty preferredName.middle}"><span title="Middle">${preferredName.middle}</span></c:if>
      <c:if test="${not empty preferredName.family}"><span title="Family">${preferredName.family}</span></c:if><c:if test="${not empty preferredName.suffix}">, <span title="Suffix">${preferredName.suffix}</span></c:if>
      </p>
      </c:if>
  
      <p><strong><spring:message code="dateOfBirth.label" />:</strong> <fmt:formatDate value="${person.dateOfBirth}" dateStyle="long" /></p>
      <p><strong><spring:message code="gender.label" />:</strong> <spring:message code="${person.gender}.genderDisplayValue" /></p>
      <p><strong>Contact Email: </strong></p>
      <p><strong>Contact Phone: </strong></p>
  
      <div style="text-align: right;"><a href="#" id="activationKeyLink" class="button"><button>Generate New Activation Key</button></a></div>
      <div id="activationKeyDialog" title="Activation Key"></div>
  
  
  
      <h2>Identifiers</h2>
      <c:forEach var="identifierEntry" items="${person.identifiersByType}">
  