more refactoring for multiple profile view support

webapp/web/css/individual/individual.css

@@ -89,7 +89,7 @@ img.individual-photo {
 h2#mainImage, #share-contact h2 {
     font-size: 1em;
     line-height: 1em;
-    padding-bottom: 0.3em
+    padding-bottom: 0.6em
 }
 #photo-wrapper {
     position: relative;

webapp/web/js/individual/individualUriRdf.js

@@ -2,7 +2,7 @@
 
 $(document).ready(function(){
     // This function creates and styles the "qTip" tooltip that displays the resource uri and the rdf link when the user clicks the uri/rdf icon.
-    $('#uriIcon').each(function()
+    $('span#iconControlsLeftSide').children('img#uriIcon').each(function()
     {
         $(this).qtip(
         {
@@ -34,6 +34,70 @@ $(document).ready(function(){
         });
     });
 
+    $('span#iconControlsVitro').children('img#uriIcon').each(function()
+    {
+        $(this).qtip(
+        {
+            content: {
+                prerender: true, // We need this for the .click() event listener on 'a.close'
+                text: '<h5>share the URI for this profile</h5> <input id="uriLink" type="text" value="' + $('#uriIcon').attr('title') + '" /><h5><a class ="rdf-url" href="' + individualRdfUrl + '">view profile in RDF format</a></h5><a class="close" href="#">close</a>'
+            },
+            position: {
+                corner: {
+                    target: 'bottomLeft',
+                    tooltip: 'topLeft'
+                }
+            },
+            show: {
+                when: {event: 'click'}
+            },
+            hide: {
+                fixed: true, // Make it fixed so it can be hovered over and interacted with
+                when: {
+                    target: $('a.close'),
+                    event: 'click'
+                }
+            },
+            style: {
+                padding: '1em',
+                width: 400,
+                backgroundColor: '#f1f2ee'
+            }
+        });
+    });
+
+    $('span#iconControlsRightSide').children('img#uriIcon').each(function()
+    {
+        $(this).qtip(
+        {
+            content: {
+                prerender: true, // We need this for the .click() event listener on 'a.close'
+                text: '<h5>share the URI for this profile</h5> <input id="uriLink" type="text" value="' + $('#uriIcon').attr('title') + '" /><h5><a class ="rdf-url" href="' + individualRdfUrl + '">view profile in RDF format</a></h5><a class="close" href="#">close</a>'
+            },
+            position: {
+                corner: {
+                    target: 'bottomRight',
+                    tooltip: 'topRight'
+                }
+            },
+            show: {
+                when: {event: 'click'}
+            },
+            hide: {
+                fixed: true, // Make it fixed so it can be hovered over and interacted with
+                when: {
+                    target: $('a.close'),
+                    event: 'click'
+                }
+            },
+            style: {
+                padding: '1em',
+                width: 400,
+                backgroundColor: '#f1f2ee'
+            }
+        });
+    });
+
     // Prevent close link for URI qTip from requesting bogus '#' href
     $('a.close').click(function() {
         $('#uriIcon').qtip("hide");

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

@@ -35,7 +35,8 @@
                     <@p.label individual editable labelCount />
 
                     <#--  Most-specific types -->
-                    <@p.mostSpecificTypes individual /><img id="uriIcon" title="${individual.uri}" class="middle" src="${urls.images}/individual/uriIcon.gif" alt="uri icon"/>
+                    <@p.mostSpecificTypes individual />
+                    <span id="iconControlsVitro"><img id="uriIcon" title="${individual.uri}" class="middle" src="${urls.images}/individual/uriIcon.gif" alt="uri icon"/></span>
                 </h1>
             </#if>
         </header>

webapp/web/templates/freemarker/body/partials/menupage/menupage-scripts.ftl

@@ -16,6 +16,10 @@
 </#list>
 
 <script type="text/javascript">
+    var firstBrowseClass = $("ul#browse-classes li:first").find("a").attr("data-uri");
+    if ( !firstBrowseClass || firstBrowseClass.length == 0 ) {
+        firstBrowseClass = '${firstNonEmptyVClass}';
+    }
     var menupageData = {
         baseUrl: '${urls.base}',
         <#if internalClass?has_content>
@@ -23,10 +27,13 @@
         <#else>
             dataServiceUrl: '${dataServiceUrlIndividualsByVClass}',
         </#if>
-        defaultBrowseVClassUri: '${firstNonEmptyVClass}'
+        defaultBrowseVClassUri: firstBrowseClass //'${firstNonEmptyVClass}'
     };
 </script>
 
+
+
+
 <#-- Script to enable browsing individuals within a class -->
 ${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery_plugins/jquery.scrollTo-min.js"></script>',
               '<script type="text/javascript" src="${urls.base}/js/menupage/browseByVClass.js"></script>')}