multiple updates and new files to support multiple foaf person profile pages

webapp/src/edu/cornell/mannlib/vitro/webapp/controller/individual/IndividualResponseBuilder.java

@@ -82,6 +82,7 @@ class IndividualResponseBuilder {
 		body.put("relatedSubject", getRelatedSubject());
 		body.put("namespaces", namespaces);
 		body.put("temporalVisualizationEnabled", getTemporalVisualizationFlag());
+		body.put("profilePageTypesEnabled", getprofilePageTypesFlag());
 		body.put("verbosePropertySwitch", getVerbosePropertyValues());
 		
 		//Execute data getters that might apply to this individual, e.g. because of the class of the individual
@@ -91,6 +92,13 @@ class IndividualResponseBuilder {
 			log.error("Data retrieval for individual lead to error", ex);
 		}
 		
+		// for quick profile view - users can toggle between the quick and the full views, 
+		// so the "destination" let's us know which view they are targeting. On normal
+		// page request, this string is empty and the default template is loaded.
+        String targetedView = "";
+		targetedView = vreq.getParameter("destination");
+		body.put("targetedView", targetedView);
+
 		//Individual template model
 		IndividualTemplateModel itm = getIndividualTemplateModel(individual);
 		/* We need to expose non-getters in displaying the individual's property list, 
@@ -100,6 +108,7 @@ class IndividualResponseBuilder {
 		 */
 		// body.put("individual", wrap(itm, BeansWrapper.EXPOSE_SAFE));
 	    body.put("labelCount", getLabelCount(itm.getUri(), vreq));
+	    body.put("profileType", getProfileType(itm.getUri(), vreq));
 		body.put("individual", wrap(itm, new ReadOnlyBeansWrapper()));
 		
 		body.put("headContent", getRdfLinkTag(itm));	       
@@ -169,6 +178,12 @@ class IndividualResponseBuilder {
 		return "enabled".equals(property);
 	}
 
+	private boolean getprofilePageTypesFlag() {
+		String property = ConfigurationProperties.getBean(vreq).getProperty(
+				"MultiViews.profilePageTypes");
+		return "enabled".equals(property);
+	}
+
     private Map<String, Object> getVerbosePropertyValues() {
         Map<String, Object> map = null;
         
@@ -275,4 +290,29 @@ class IndividualResponseBuilder {
         }    
         return theCount;
     }
+
+    private static String PROFILE_TYPE_QUERY = ""
+        + "PREFIX display: <http://vitro.mannlib.cornell.edu/ontologies/display/1.1#> \n"
+        + "SELECT ?profile WHERE { \n"
+        + "    ?subject display:hasDefaultProfilePageType ?profile \n"
+        + "}" ;
+           
+    private static String getProfileType(String subjectUri, VitroRequest vreq) {
+        String queryStr = QueryUtils.subUriForQueryVar(PROFILE_TYPE_QUERY, "subject", subjectUri);
+        log.debug("queryStr = " + queryStr);
+        String profileType = "none";
+        try {
+            ResultSet results = QueryUtils.getQueryResults(queryStr, vreq);
+            if (results.hasNext()) {
+                QuerySolution soln = results.nextSolution();
+                String profileStr = soln.get("profile").toString();
+                if ( profileStr.length() > 0 ) {
+                    profileType = profileStr.substring(profileStr.indexOf("#")+1,profileStr.length());
+                }
+            }
+        } catch (Exception e) {
+            log.error(e, e);
+        }    
+        return profileType;
+    }
 }

webapp/web/css/individual/individual-property-groups.css

@@ -5,6 +5,10 @@ span#toggleContainer {
     padding:10px 8px 0 0;
     font-size: 0.85em;
 }
+section.property-group  { 
+    padding-top: 15px;
+    border-top:none; 
+}
 section.property-group h2 { 
     padding: 8px 10px 4px 12px; 
 }
@@ -17,7 +21,7 @@ section.property-group h2 {
 }
 section.property-group div {
     margin-top:15px;
-    display:none;
+/*    display:none; */
 }
 section.property-group h2 {
     font-size: 1.15em !important; 
@@ -25,8 +29,42 @@ section.property-group h2 {
     font-weight: normal !important;
     background: #fafaf9 !important; 
 }
-/* this class is referenced in java script; the important is needed to override the color in the previous selector */
-section.property-group h2.expandedPropGroupH2 {
-    background:#e4ecf3 !important;
-    color:#2485ae !important;  
+ul.propertyTabsList  {
+    margin-left: 4px;
+    margin-top: 24px
+}
+ul.propertyTabsList li {
+    font-size: 1.0em;
+}
+ul.propertyTabsList li:first-child {
+    width: 7px;
+}
+li.nonSelectedGroupTab {
+    float:left;
+    border: 1px solid #DFE6E5;
+    background-color:#E4ECF3;
+    padding: 6px 8px 6px 8px;
+    cursor:pointer;
+    border-top-right-radius: 4px;
+    -moz-border-radius-topright: 4px;
+    -webkit-border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    -moz-border-radius-topleft: 4px;
+    -webkit-border-top-left-radius: 4px;
+}
+li.selectedGroupTab {
+    float:left;
+    border: 1px solid #DFE6E5;
+    border-bottom-color:#fff;
+    background-color:#FFF;
+    padding: 6px 8px 6px 8px;
+    border-top-right-radius: 4px;
+    -moz-border-radius-topright: 4px;
+    -webkit-border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    -moz-border-radius-topleft: 4px;
+    -webkit-border-top-left-radius: 4px;
+}
+li.groupTabSpacer {
+    float:left;border-bottom: 1px solid #DFE6E5;background-color:#fff;width:3px;height:37px
 }

webapp/web/js/individual/propertyGroupControls.js

@@ -3,57 +3,65 @@
 $(document).ready(function(){
         
     $.extend(this, individualLocalName);
-    
+    adjustFontSize();
+    padSectionBottoms();
     retrieveLocalStorage();
     
-    // expands/collapses the div within each property group
-    $.each($('section.property-group'), function() {
-        var groupName = $(this).attr("id");
-        $(this).children("nav").children("img").click(function() {
-            if ( $("div[id='" + groupName + "Group']").is(":visible") ) {
-                $("div[id='" + groupName + "Group']").slideUp(222);
-                $(this).attr("src", $(this).attr("src").replace("collapse-prop-group","expand-prop-group"));
-                $("section#" + groupName).children("h2").removeClass("expandedPropGroupH2");
+    // ensures that shorter property group sections don't cause the page to "jump around"
+    // when the tabs are clicked
+    function padSectionBottoms() {
+        $.each($('section.property-group'), function() {
+            var sectionHeight = $(this).height();
+            if ( sectionHeight < 1000 ) {
+                    $(this).css('margin-bottom', 1000-sectionHeight + "px");
+            }
+        });
+    }
+
+    // controls the property group tabs
+    $.each($('li.clickable'), function() {
+        var groupName = $(this).attr("groupName");
+        var $propertyGroupLi = $(this);
+        
+        $(this).click(function() {
+            
+            if ( $propertyGroupLi.attr("class") == "nonSelectedGroupTab clickable" ) {
+                $.each($('li.selectedGroupTab'), function() {
+                    $(this).removeClass("selectedGroupTab clickable");
+                    $(this).addClass("nonSelectedGroupTab clickable");
+                });
+                $propertyGroupLi.removeClass("nonSelectedGroupTab clickable");
+                $propertyGroupLi.addClass("selectedGroupTab clickable");
+            }
+            if ( $propertyGroupLi.text() == "View All" ) {
+                processViewAllTab();
             }
             else {
-                $("div[id='" + groupName + "Group']").slideDown(222);
-                $(this).attr("src", $(this).attr("src").replace("expand-prop-group","collapse-prop-group"));
-                $("section#" + groupName).children("h2").addClass("expandedPropGroupH2");
+                padSectionBottoms();
+                var $visibleSection = $('section.property-group:visible');
+                $visibleSection.hide();
+                $('h2[pgroup=tabs]').addClass("hidden");
+                $('nav#scroller').addClass("hidden"); 
+                $('section#' + groupName).show();
             }
             manageLocalStorage();
+            return false;
         });
     });
     
-
-    // expands/collapses all property groups together
-    $.each($('a#propertyGroupsToggle'), function() {
-        $('a#propertyGroupsToggle').click(function() {
-            var anchorHtml = $(this).html();
-            if ( anchorHtml.indexOf('expand') > -1 ) {
-                $.each($('section.property-group'), function() {
-                    $("div[id='" + $(this).attr("id") + "Group']").slideDown(222);
-                    var innerSrc = $(this).children("nav").children("img").attr("src");
-                    $(this).children("nav").children("img").attr("src",innerSrc.replace("expand-prop-group","collapse-prop-group"));
-                    $(this).children("h2").addClass("expandedPropGroupH2");
-                });
-                $(this).html("collapse all");
-            }
-            else {
-                $.each($('section.property-group'), function() {
-                    $("div[id='" + $(this).attr("id") + "Group']").slideUp(222);
-                    var innerSrc = $(this).children("nav").children("img").attr("src");
-                    $(this).children("nav").children("img").attr("src",innerSrc.replace("collapse-prop-group","expand-prop-group"));
-                    $(this).children("h2").removeClass("expandedPropGroupH2");
-                });
-                $(this).html("expand all");
-            }
-            manageLocalStorage();
+    function processViewAllTab() {
+        $.each($('section.property-group'), function() {
+            $(this).css("margin-bottom", "1px");
+            $(this).children('h2').css("margin-top", "-15px").css("border-bottom","1px solid #DFEBE5").css("padding","12px 25px 10px 20px");
+            $(this).show(); 
+            $('h2[pgroup=tabs]').removeClass("hidden");
+            $('nav#scroller').removeClass("hidden"); 
         });        
-   }); 
+    }
    
-    //  Next two functions --  keep track of which property group tabs have been expanded,
+    //  Next two functions --  keep track of which property group tab was selected,
     //  so if we return from a custom form or a related individual, even via the back button,
-    //  the property groups will be expanded as before.
+    //  the same property group will be selected as before.
     function manageLocalStorage() {
         var localName = this.individualLocalName;
         // is this individual already stored? If not, how many have been stored?
@@ -78,13 +86,9 @@ $(document).ready(function(){
                 amplify.store("profiles", profiles)
             }
         }
-        var groups = [];
-        $.each($('section.property-group').children("nav").children("img"), function() {
-            if ( $(this).attr('src').indexOf('collapse-prop-group') > -1 ) {
-                groups.push($(this).attr('groupName'));
-            }
-        });
-        amplify.store(localName, groups);
+        var selectedTab = [];
+        selectedTab.push($('li.selectedGroupTab').attr('groupName'));
+        amplify.store(localName, selectedTab);
         var checkLength = amplify.store(localName);
         if ( checkLength.length == 0 ) {
             amplify.store(localName, null);
@@ -93,23 +97,81 @@ $(document).ready(function(){
 
     function retrieveLocalStorage() {
         var localName = this.individualLocalName;
-        var groups = amplify.store(individualLocalName);
-            if ( groups != undefined ) {
-                for ( i = 0; i < groups.length; i++) {
-                    var groupName = groups[i];
-                    // unlikely, but it's possible a group that was previously opened and stored won't be displayed
-                    // because the object properties would have been deleted. So ensure that the group in local
-                    // storage has been rendered on the page. More likely, a user navigated from a quick view to a full
-                    // profile, opened a group, then navigated back to the quick view where the group isn't rendered.
-                    if ($("section#" + groupName).length ) {
-                        $("div[id='" + groupName + "Group']").slideDown(1);
-                        $("img[groupName='" + groupName + "']").attr("src", $("img[groupName='" + groupName + "']").attr("src").replace("expand-prop-group","collapse-prop-group"));
-                        $("section#" + groupName).children("h2").addClass("expandedPropGroupH2");
+        var selectedTab = amplify.store(individualLocalName);
+        
+        if ( selectedTab != undefined ) {
+            var groupName = selectedTab[0];
+            
+            // unlikely, but it's possible a tab that was previously selected and stored won't be displayed
+            // because the object properties would have been deleted (in non-edit mode). So ensure that the tab in local
+            // storage has been rendered on the page.     
+            if ( $("ul.propertyTabsList li[groupName='" + groupName + "']").length ) { 
+                // if the selected tab is the default first one, don't do anything
+                if ( $('li.clickable').first().attr("groupName") != groupName ) {   
+                    // deselect the default first tab
+                    var $firstTab = $('li.clickable').first();
+                    $firstTab.removeClass("selectedGroupTab clickable");
+                    $firstTab.addClass("nonSelectedGroupTab clickable");
+                    // select the stored tab
+                    $("li[groupName='" + groupName + "']").removeClass("nonSelectedGroupTab clickable");
+                    $("li[groupName='" + groupName + "']").addClass("selectedGroupTab clickable");
+                    // hide the first tab section
+                    $('section.property-group:visible').hide();
+
+                    if ( groupName == "viewAll" ) {
+                        processViewAllTab();
                     }
-                }
-                if ( groups.length == $('section.property-group').length ) {
-                    $('a#propertyGroupsToggle').html('collapse all');
+
+                    // show the selected tab section
+                    $('section#' + groupName).show();
                 }
             }
         }
+    }
+    // if there are so many tabs that they wrap to a second line, adjust the font size to 
+    //prevent wrapping
+    function adjustFontSize() {
+        var width = 0;
+        $('ul.propertyTabsList li').each(function() {
+            width += $(this).outerWidth();
+        });
+        if ( width < 922 ) {
+            var diff = 926-width;
+            $('ul.propertyTabsList li:last-child').css('width', diff + 'px');
+        }
+        else {
+            var diff = width-926;
+            if ( diff < 26 ) {
+                $('ul.propertyTabsList li').css('font-size', "0.96em");
+            }
+            else if ( diff > 26 && diff < 50 ) {
+                $('ul.propertyTabsList li').css('font-size', "0.92em");
+            }
+            else if ( diff > 50 && diff < 80 ) {
+                $('ul.propertyTabsList li').css('font-size', "0.9em");
+            }
+            else if ( diff > 80 && diff < 130 ) {
+                $('ul.propertyTabsList li').css('font-size', "0.84em");
+            }
+            else if ( diff > 130 && diff < 175 ) {
+                $('ul.propertyTabsList li').css('font-size', "0.8em");
+            }
+            else if ( diff > 175 && diff < 260 ) {
+                $('ul.propertyTabsList li').css('font-size', "0.73em");
+            }
+            else {
+                $('ul.propertyTabsList li').css('font-size', "0.7em");
+            }
+
+            // get the new width
+            var newWidth = 0
+            $('ul.propertyTabsList li').each(function() {
+                newWidth += $(this).outerWidth();
+            });
+            var newDiff = 926-newWidth;
+            $('ul.propertyTabsList li:last-child').css('width', newDiff + 'px');
+        }
+    }
 });
+
+

webapp/web/templates/freemarker/body/individual/individual-vitro.ftl

@@ -6,7 +6,7 @@
 <#-- Default individual profile page template -->
 <#--@dumpAll /-->
 <section id="individual-intro" class="vcard" role="region">
-    <#-- Image -->
+    <!-- Image -->
     <#assign individualImage>
         <@p.image individual=individual 
                   propertyGroups=propertyGroups 
@@ -48,16 +48,18 @@
 
 <#assign nameForOtherGroup = "other"> <#-- used by both individual-propertyGroupMenu.ftl and individual-properties.ftl -->
 
-<#-- Property group menu -->
-<#-- With release 1.6 the property group is no longer used. The include statement
-     remains in the event a particular VIVO site still wants to use it with the new
-     collapsible groups.
+<!-- Property group menu or tabs -->
+<#-- 
+    With release 1.6 there are now two types of property group displays: the original property group
+     menu and the horizontal tab display, which is the default. If you prefer to use the property
+     group menu, simply substitute the include statement below with the one that appears after this
+     comment section.
      
-     <#include "individual-propertyGroupMenu.ftl">
+     <#include "individual-property-group-menus.ftl">
 -->
 
-<#-- Ontology properties -->
-<#include "individual-properties.ftl">
+<#include "individual-property-group-tabs.ftl">
+
 <script>
     var individualLocalName = "${individual.localName}";
 </script>

webapp/web/templates/freemarker/body/individual/individual.ftl

@@ -1,27 +1,7 @@
 <#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
 
-<#-- Default VIVO individual profile page template (extends individual.ftl in vitro) -->
+<#-- Default individual profile page template -->
 
 <#include "individual-setup.ftl">
-<#import "lib-vivo-properties.ftl" as vp>
-
-<#assign individualProductExtension>
-    <#-- Include for any class specific template additions -->
-    ${classSpecificExtension!}
-    <@vp.webpages propertyGroups editable />
-    <!--PREINDIVIDUAL OVERVIEW.FTL-->
-    <#include "individual-overview.ftl">
-        </section> <!-- #individual-info -->
-    </section> <!-- #individual-intro -->
-    <!--postindiviudal overiew tfl-->
-</#assign>
 
 <#include "individual-vitro.ftl">
-
-${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/individual/individual-vivo.css" />',
-                  '<link rel="stylesheet" href="${urls.base}/css/individual/individual-property-groups.css" />')}
-
-${headScripts.add('<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.truncator.js"></script>',
-                  '<script type="text/javascript" src="${urls.base}/js/amplify/amplify.store.min.js"></script>')}
-${scripts.add('<script type="text/javascript" src="${urls.base}/js/individual/individualUtils.js"></script>',
-              '<script type="text/javascript" src="${urls.base}/js/individual/propertyGroupControls.js"></script>')}

webapp/web/templates/freemarker/body/partials/individual/individual-adminPanel.ftl

@@ -6,7 +6,7 @@
 
 <#if individual.showAdminPanel>
     <section id="admin">
-        <h3>Admin Panel</h3><a class="edit-individual" href="${individual.controlPanelUrl()}" title="edit this individual">Edit this individual</a>
+        <h3 id="adminPanel">Admin Panel</h3><a class="edit-individual" href="${individual.controlPanelUrl()}" title="edit this individual">Edit this individual</a>
         
         <section id = "verbose-mode">
         <#if verbosePropertySwitch?has_content>

webapp/web/templates/freemarker/body/partials/individual/individual-properties.ftl

@@ -2,83 +2,39 @@
 
 <#-- Template for property listing on individual profile page -->
 
-<#import "lib-properties.ftl" as p>
-<#assign subjectUri = individual.controlPanelUrl()?split("=") >
-
-<#if ( propertyGroups.all?size > 1 ) >
-    <span id="toggleContainer">
-        <a id="propertyGroupsToggle" href="javascript:" title="expand all groups">expand all</a>
-    </span>
-<#else>
-    <p style="clear:both"><br /></p> 
-</#if>
-<#list propertyGroups.all as group>
-    <#assign groupName = group.getName(nameForOtherGroup)>
-    <#assign verbose = (verbosePropertySwitch.currentValue)!false>
-    <#if groupName?has_content>
-		<#--the function replaces spaces in the name with underscores, also called for the property group menu-->
-    	<#assign groupNameHtmlId = p.createPropertyGroupHtmlId(groupName) >
-    <#else>
-        <#assign groupName = "Properties">
-    	<#assign groupNameHtmlId = "properties" >
-    </#if>
-    
-    <section id="${groupNameHtmlId}" class="property-group" role="region">
-        <nav class="scroll-up" role="navigation">
-            <img src="${urls.images}/individual/expand-prop-group.png" groupName="${groupNameHtmlId}" alt="expand property group" title="expand this property group"/>
-        </nav>
-        
-        <#-- Display the group heading --> 
-            <h2 id="${groupNameHtmlId}">${groupName?capitalize}</h2>
-        
-        <#-- List the properties in the group -->
-            <div id="${groupNameHtmlId}Group" >
-            <#list group.properties as property>
-                <article class="property" role="article">
-                    <#-- Property display name -->
-                    <#if property.localName == "authorInAuthorship" && editable  >
-                        <h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property /> 
-                            <a id="managePubLink" class="manageLinks" href="${urls.base}/managePublications?subjectUri=${subjectUri[1]!}" title="manage publications" <#if verbose>style="padding-top:10px"</#if> >
-                                manage publications
-                            </a>
-                        </h3>
-                    <#elseif property.localName == "hasResearcherRole" && editable  >
-                        <h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property /> 
-                            <a id="manageGrantLink" class="manageLinks" href="${urls.base}/manageGrants?subjectUri=${subjectUri[1]!}" title="manage grants & projects" <#if verbose>style="padding-top:10px"</#if> >
-                                manage grants & projects
-                            </a>
-                        </h3>
-                    <#elseif property.localName == "organizationForPosition" && editable  >
-                        <h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property /> 
-                            <a id="managePeopleLink" class="manageLinks" href="${urls.base}/managePeople?subjectUri=${subjectUri[1]!}" title="manage people" <#if verbose>style="padding-top:10px"</#if> >
-                                manage affiliated people
-                            </a>
-                        </h3>
+        <#list group.properties as property>
+            <article class="property" role="article">
+                <#-- Property display name -->
+                <#if property.localName == "authorInAuthorship" && editable  >
+                    <h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property /> 
+                        <a id="managePubLink" class="manageLinks" href="${urls.base}/managePublications?subjectUri=${subjectUri[1]!}" title="manage publications" <#if verbose>style="padding-top:10px"</#if> >
+                            manage publications
+                        </a>
+                    </h3>
+                <#elseif property.localName == "hasResearcherRole" && editable  >
+                    <h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property /> 
+                        <a id="manageGrantLink" class="manageLinks" href="${urls.base}/manageGrants?subjectUri=${subjectUri[1]!}" title="manage grants & projects" <#if verbose>style="padding-top:10px"</#if> >
+                            manage grants & projects
+                        </a>
+                    </h3>
+                <#elseif property.localName == "organizationForPosition" && editable  >
+                    <h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property /> 
+                        <a id="managePeopleLink" class="manageLinks" href="${urls.base}/managePeople?subjectUri=${subjectUri[1]!}" title="manage people" <#if verbose>style="padding-top:10px"</#if> >
+                            manage affiliated people
+                        </a>
+                    </h3>
+                <#else>
+                    <h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property /> </h3>
+                </#if>
+                <#-- List the statements for each property -->
+                <ul class="property-list" role="list" id="${property.localName}List">
+                    <#-- data property -->
+                    <#if property.type == "data">
+                        <@p.dataPropertyList property editable />
+                    <#-- object property -->
                     <#else>
-                        <h3 id="${property.localName}">${property.name} <@p.addLink property editable /> <@p.verboseDisplay property /> </h3>
+                        <@p.objectProperty property editable />
                     </#if>
-                    <#-- List the statements for each property -->
-                    <ul class="property-list" role="list" id="${property.localName}List">
-                        <#-- data property -->
-                        <#if property.type == "data">
-                            <@p.dataPropertyList property editable />
-                        <#-- object property -->
-                        <#else>
-                            <@p.objectProperty property editable />
-                        </#if>
-                    </ul>
-                </article> <!-- end property -->
-            </#list>
-        </div>
-    </section> <!-- end property-group -->
-</#list>
-<script>
-var propGroupCount = ${propertyGroups.all?size};
-if ( propGroupCount == 1 ) {
-    $('section.property-group').find('div').show();
-    $('section.property-group').find("h2").addClass("expandedPropGroupH2");
-    $('section.property-group').children("nav").children("img").hide();
-//    var innerSrc = $('section.property-group').children("nav").children("img").attr("src");
-//    $('section.property-group').children("nav").children("img").attr("src",innerSrc.replace("expand-prop-group","collapse-prop-group"));
-}
-</script>
+                </ul>
+            </article> <!-- end property -->
+        </#list>

webapp/web/templates/freemarker/body/partials/individual/individual-property-group-menus.ftl

@@ -0,0 +1,53 @@
+<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
+
+<#-- Template for property listing on individual profile page -->
+
+<#import "lib-properties.ftl" as p>
+<#assign subjectUri = individual.controlPanelUrl()?split("=") >
+<#assign nameForOtherGroup = nameForOtherGroup!"other">
+
+<#if (propertyGroups.all)??>
+    <#assign groups = propertyGroups.all>   
+    <#if groups?has_content>
+        <#if (groups?size > 1) || (groups?first).getName(nameForOtherGroup)?has_content> 
+            <nav id="property-group-menu" role="navigation">
+                <ul role="list">
+                    <#list groups as group>
+                        <#assign groupname = group.getName(nameForOtherGroup)>                        
+                        <#if groupname?has_content>
+                    		<#--create property group html id is the function that will replace all spaces with underscore to make a valid id-->
+                        	<#assign groupnameHtmlId = p.createPropertyGroupHtmlId(groupname) >
+                            <#-- capitalize will capitalize each word in the name; cap_first only the first. We may need a custom
+                            function to capitalize all except function words. -->
+                            <li role="listitem"><a href="#${groupnameHtmlId}" title="group name">${groupname?capitalize}</a></li>
+                        </#if>
+                    </#list>
+                </ul>
+            </nav>
+        </#if> 
+    </#if>
+</#if>
+<#list propertyGroups.all as group>
+    <#assign groupName = group.getName(nameForOtherGroup)>
+    <#assign verbose = (verbosePropertySwitch.currentValue)!false>
+    
+    <section class="property-group" role="region">
+        <nav class="scroll-up" role="navigation">
+            <a href="#branding" title="scroll up">
+                <img src="${urls.images}/individual/scroll-up.gif" alt="scroll to property group menus" />
+            </a>
+        </nav>
+        
+        <#-- Display the group heading --> 
+        <#if groupName?has_content>
+    		<#--the function replaces spaces in the name with underscores, also called for the property group menu-->
+        	<#assign groupNameHtmlId = p.createPropertyGroupHtmlId(groupName) >
+            <h2 id="${groupNameHtmlId}">${groupName?capitalize}</h2>
+        <#else>
+            <h2 id="properties">Properties</h2>
+        </#if>
+        
+        <#-- List the properties in the group -->
+        <#include "individual-properties.ftl">
+    </section> <!-- end property-group -->
+</#list>

webapp/web/templates/freemarker/body/partials/individual/individual-property-group-tabs.ftl

@@ -0,0 +1,65 @@
+<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
+
+<#-- Template for property listing on individual profile page -->
+
+<#import "lib-properties.ftl" as p>
+<#assign subjectUri = individual.controlPanelUrl()?split("=") >
+<#assign tabCount = 1 >
+<#assign sectionCount = 1 >
+<!-- ${propertyGroups.all?size} -->
+<ul class="propertyTabsList">
+    <li  class="groupTabSpacer">&nbsp;</li>
+<#list propertyGroups.all as groupTabs>
+    <#assign groupName = groupTabs.getName(nameForOtherGroup)>
+    <#if groupName?has_content>
+		<#--the function replaces spaces in the name with underscores, also called for the property group menu-->
+    	<#assign groupNameHtmlId = p.createPropertyGroupHtmlId(groupName) >
+    <#else>
+        <#assign groupName = "Properties">
+    	<#assign groupNameHtmlId = "properties" >
+    </#if>
+        <#if tabCount = 1 >
+            <li class="selectedGroupTab clickable" groupName="${groupNameHtmlId}">${groupName?capitalize}</li>
+            <li class="groupTabSpacer">&nbsp;</li>
+            <#assign tabCount = 2>
+        <#else>
+            <li class="nonSelectedGroupTab clickable" groupName="${groupNameHtmlId}">${groupName?capitalize}</li>
+            <li class="groupTabSpacer">&nbsp;</li>
+        </#if>
+</#list>
+<#if (propertyGroups.all?size > 1) >
+    <li  class="nonSelectedGroupTab clickable" groupName="viewAll">View All</li>
+    <li  class="groupTabSpacer">&nbsp;</li>
+</#if>
+</ul>
+<#list propertyGroups.all as group>
+    <#assign groupName = group.getName(nameForOtherGroup)>
+    <#assign groupNameHtmlId = p.createPropertyGroupHtmlId(groupName) >
+    <#assign verbose = (verbosePropertySwitch.currentValue)!false>
+    <section id="${groupNameHtmlId}" class="property-group" role="region" style="<#if (sectionCount > 1) >display:none<#else>display:block</#if>">
+    <nav id="scroller" class="scroll-up hidden" role="navigation">
+        <a href="#branding" title="scroll up" >
+            <img src="${urls.images}/individual/scroll-up.gif" alt="scroll to property group menus" />
+        </a>
+    </nav>
+    
+    <#-- Display the group heading --> 
+    <#if groupName?has_content>
+		<#--the function replaces spaces in the name with underscores, also called for the property group menu-->
+    	<#assign groupNameHtmlId = p.createPropertyGroupHtmlId(groupName) >
+        <h2 id="${groupNameHtmlId}" pgroup="tabs" class="hidden">${groupName?capitalize}</h2>
+    <#else>
+        <h2 id="properties" pgroup="tabs" class="hidden">Properties</h2>
+    </#if>
+        <div id="${groupNameHtmlId}Group" >
+            <#-- List the properties in the group   -->
+            <#include "individual-properties.ftl">
+        </div>
+</section> <!-- end property-group -->
+<#assign sectionCount = 2 >
+</#list>
+
+${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/individual/individual-property-groups.css" />')}
+${headScripts.add('<script type="text/javascript" src="${urls.base}/js/amplify/amplify.store.min.js"></script>')}
+${scripts.add('<script type="text/javascript" src="${urls.base}/js/individual/propertyGroupControls.js"></script>')}
+

webapp/web/templates/freemarker/lib/lib-properties.ftl

@@ -74,7 +74,7 @@
 Assumes property is non-null. -->
 <#macro objectPropertyListing property editable template=property.template>
     <#local localName = property.localName>
-    <h2 id="${localName}">${property.name?capitalize} <@addLink property editable /> <@verboseDisplay property /></h2>    
+    <h2 id="${localName}" class="mainPropGroup">${property.name?capitalize} <@addLink property editable /> <@verboseDisplay property /></h2>    
     <ul id="individual-${localName}" role="list">
         <@objectProperty property editable />
     </ul>
@@ -188,21 +188,21 @@ name will be used as the label. -->
      
      Note that this macro has a side-effect in the call to propertyGroups.pullProperty().
 -->
-<#macro image individual propertyGroups namespaces editable showPlaceholder="never">
+<#macro image individual propertyGroups namespaces editable showPlaceholder="never" imageWidth=160 >
     <#local mainImage = propertyGroups.pullProperty("${namespaces.vitroPublic}mainImage")!>
     <#local thumbUrl = individual.thumbUrl!>
     <#-- Don't assume that if the mainImage property is populated, there is a thumbnail image (though that is the general case).
          If there's a mainImage statement but no thumbnail image, treat it as if there is no image. -->
     <#if (mainImage.statements)?has_content && thumbUrl?has_content>
         <a href="${individual.imageUrl}" title="individual photo">
-        	<img class="individual-photo" src="${thumbUrl}" title="click to view larger image" alt="${individual.name}" width="160" />
+        	<img class="individual-photo" src="${thumbUrl}" title="click to view larger image" alt="${individual.name}" width="${imageWidth!}" />
         </a>
         <@editingLinks "${mainImage.localName}" mainImage.first() editable />
     <#else>
         <#local imageLabel><@addLinkWithLabel mainImage editable "Photo" /></#local>
         ${imageLabel}
         <#if showPlaceholder == "always" || (showPlaceholder="with_add_link" && imageLabel?has_content)>
-            <img class="individual-photo" src="${placeholderImageUrl(individual.uri)}" title = "no image" alt="placeholder image" width="160" />
+            <img class="individual-photo" src="${placeholderImageUrl(individual.uri)}" title = "no image" alt="placeholder image" width="${imageWidth!}" />
         </#if>
     </#if>
 </#macro>
@@ -213,7 +213,7 @@ name will be used as the label. -->
     ${label.value}
     <#if (labelCount > 1)  && editable >
         <span class="inline">
-            <a id="manageLabels" href="${urls.base}/manageLabels?subjectUri=${individual.uri!}" style="margin-left:20px;font-size:0.7em">
+            <a id="manageLabels" href="${urls.base}/manageLabels?subjectUri=${individual.uri!}">
                 manage labels
             </a>
         </span>
@@ -223,12 +223,18 @@ name will be used as the label. -->
 </#macro>
 
 <#-- Most specific types -->
-<#macro mostSpecificTypes individual>
+<#macro mostSpecificTypes individual >
     <#list individual.mostSpecificTypes as type>
         <span class="display-title">${type}</span>
     </#list>
 </#macro>
 
+<#macro mostSpecificTypesPerson individual editable>
+    <#list individual.mostSpecificTypes as type>
+        <div id="titleContainer"><span class="<#if editable>display-title-editable<#else>display-title-not-editable</#if>">${type}</span></div>
+    </#list>
+</#macro>
+
 <#--Property group names may have spaces in them, replace spaces with underscores for html id/hash-->
 <#function createPropertyGroupHtmlId propertyGroupName>
 	<#return propertyGroupName?replace(" ", "_")>