SDB implementation of RDF API (and merge from trunk)

webapp/web/js/json2.js

@@ -0,0 +1,487 @@
+/*
+    json2.js
+    2011-10-19
+
+    Public Domain.
+
+    NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+
+    See http://www.JSON.org/js.html
+
+
+    This code should be minified before deployment.
+    See http://javascript.crockford.com/jsmin.html
+
+    USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
+    NOT CONTROL.
+
+
+    This file creates a global JSON object containing two methods: stringify
+    and parse.
+
+        JSON.stringify(value, replacer, space)
+            value       any JavaScript value, usually an object or array.
+
+            replacer    an optional parameter that determines how object
+                        values are stringified for objects. It can be a
+                        function or an array of strings.
+
+            space       an optional parameter that specifies the indentation
+                        of nested structures. If it is omitted, the text will
+                        be packed without extra whitespace. If it is a number,
+                        it will specify the number of spaces to indent at each
+                        level. If it is a string (such as '\t' or ' '),
+                        it contains the characters used to indent at each level.
+
+            This method produces a JSON text from a JavaScript value.
+
+            When an object value is found, if the object contains a toJSON
+            method, its toJSON method will be called and the result will be
+            stringified. A toJSON method does not serialize: it returns the
+            value represented by the name/value pair that should be serialized,
+            or undefined if nothing should be serialized. The toJSON method
+            will be passed the key associated with the value, and this will be
+            bound to the value
+
+            For example, this would serialize Dates as ISO strings.
+
+                Date.prototype.toJSON = function (key) {
+                    function f(n) {
+                        // Format integers to have at least two digits.
+                        return n < 10 ? '0' + n : n;
+                    }
+
+                    return this.getUTCFullYear()   + '-' +
+                         f(this.getUTCMonth() + 1) + '-' +
+                         f(this.getUTCDate())      + 'T' +
+                         f(this.getUTCHours())     + ':' +
+                         f(this.getUTCMinutes())   + ':' +
+                         f(this.getUTCSeconds())   + 'Z';
+                };
+
+            You can provide an optional replacer method. It will be passed the
+            key and value of each member, with this bound to the containing
+            object. The value that is returned from your method will be
+            serialized. If your method returns undefined, then the member will
+            be excluded from the serialization.
+
+            If the replacer parameter is an array of strings, then it will be
+            used to select the members to be serialized. It filters the results
+            such that only members with keys listed in the replacer array are
+            stringified.
+
+            Values that do not have JSON representations, such as undefined or
+            functions, will not be serialized. Such values in objects will be
+            dropped; in arrays they will be replaced with null. You can use
+            a replacer function to replace those with JSON values.
+            JSON.stringify(undefined) returns undefined.
+
+            The optional space parameter produces a stringification of the
+            value that is filled with line breaks and indentation to make it
+            easier to read.
+
+            If the space parameter is a non-empty string, then that string will
+            be used for indentation. If the space parameter is a number, then
+            the indentation will be that many spaces.
+
+            Example:
+
+            text = JSON.stringify(['e', {pluribus: 'unum'}]);
+            // text is '["e",{"pluribus":"unum"}]'
+
+
+            text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t');
+            // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'
+
+            text = JSON.stringify([new Date()], function (key, value) {
+                return this[key] instanceof Date ?
+                    'Date(' + this[key] + ')' : value;
+            });
+            // text is '["Date(---current time---)"]'
+
+
+        JSON.parse(text, reviver)
+            This method parses a JSON text to produce an object or array.
+            It can throw a SyntaxError exception.
+
+            The optional reviver parameter is a function that can filter and
+            transform the results. It receives each of the keys and values,
+            and its return value is used instead of the original value.
+            If it returns what it received, then the structure is not modified.
+            If it returns undefined then the member is deleted.
+
+            Example:
+
+            // Parse the text. Values that look like ISO date strings will
+            // be converted to Date objects.
+
+            myData = JSON.parse(text, function (key, value) {
+                var a;
+                if (typeof value === 'string') {
+                    a =
+/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
+                    if (a) {
+                        return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
+                            +a[5], +a[6]));
+                    }
+                }
+                return value;
+            });
+
+            myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
+                var d;
+                if (typeof value === 'string' &&
+                        value.slice(0, 5) === 'Date(' &&
+                        value.slice(-1) === ')') {
+                    d = new Date(value.slice(5, -1));
+                    if (d) {
+                        return d;
+                    }
+                }
+                return value;
+            });
+
+
+    This is a reference implementation. You are free to copy, modify, or
+    redistribute.
+*/
+
+/*jslint evil: true, regexp: true */
+
+/*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply,
+    call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
+    getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
+    lastIndex, length, parse, prototype, push, replace, slice, stringify,
+    test, toJSON, toString, valueOf
+*/
+
+
+// Create a JSON object only if one does not already exist. We create the
+// methods in a closure to avoid creating global variables.
+
+var JSON;
+if (!JSON) {
+    JSON = {};
+}
+
+(function () {
+    'use strict';
+
+    function f(n) {
+        // Format integers to have at least two digits.
+        return n < 10 ? '0' + n : n;
+    }
+
+    if (typeof Date.prototype.toJSON !== 'function') {
+
+        Date.prototype.toJSON = function (key) {
+
+            return isFinite(this.valueOf())
+                ? this.getUTCFullYear()     + '-' +
+                    f(this.getUTCMonth() + 1) + '-' +
+                    f(this.getUTCDate())      + 'T' +
+                    f(this.getUTCHours())     + ':' +
+                    f(this.getUTCMinutes())   + ':' +
+                    f(this.getUTCSeconds())   + 'Z'
+                : null;
+        };
+
+        String.prototype.toJSON      =
+            Number.prototype.toJSON  =
+            Boolean.prototype.toJSON = function (key) {
+                return this.valueOf();
+            };
+    }
+
+    var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        gap,
+        indent,
+        meta = {    // table of character substitutions
+            '\b': '\\b',
+            '\t': '\\t',
+            '\n': '\\n',
+            '\f': '\\f',
+            '\r': '\\r',
+            '"' : '\\"',
+            '\\': '\\\\'
+        },
+        rep;
+
+
+    function quote(string) {
+
+// If the string contains no control characters, no quote characters, and no
+// backslash characters, then we can safely slap some quotes around it.
+// Otherwise we must also replace the offending characters with safe escape
+// sequences.
+
+        escapable.lastIndex = 0;
+        return escapable.test(string) ? '"' + string.replace(escapable, function (a) {
+            var c = meta[a];
+            return typeof c === 'string'
+                ? c
+                : '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+        }) + '"' : '"' + string + '"';
+    }
+
+
+    function str(key, holder) {
+
+// Produce a string from holder[key].
+
+        var i,          // The loop counter.
+            k,          // The member key.
+            v,          // The member value.
+            length,
+            mind = gap,
+            partial,
+            value = holder[key];
+
+// If the value has a toJSON method, call it to obtain a replacement value.
+
+        if (value && typeof value === 'object' &&
+                typeof value.toJSON === 'function') {
+            value = value.toJSON(key);
+        }
+
+// If we were called with a replacer function, then call the replacer to
+// obtain a replacement value.
+
+        if (typeof rep === 'function') {
+            value = rep.call(holder, key, value);
+        }
+
+// What happens next depends on the value's type.
+
+        switch (typeof value) {
+        case 'string':
+            return quote(value);
+
+        case 'number':
+
+// JSON numbers must be finite. Encode non-finite numbers as null.
+
+            return isFinite(value) ? String(value) : 'null';
+
+        case 'boolean':
+        case 'null':
+
+// If the value is a boolean or null, convert it to a string. Note:
+// typeof null does not produce 'null'. The case is included here in
+// the remote chance that this gets fixed someday.
+
+            return String(value);
+
+// If the type is 'object', we might be dealing with an object or an array or
+// null.
+
+        case 'object':
+
+// Due to a specification blunder in ECMAScript, typeof null is 'object',
+// so watch out for that case.
+
+            if (!value) {
+                return 'null';
+            }
+
+// Make an array to hold the partial results of stringifying this object value.
+
+            gap += indent;
+            partial = [];
+
+// Is the value an array?
+
+            if (Object.prototype.toString.apply(value) === '[object Array]') {
+
+// The value is an array. Stringify every element. Use null as a placeholder
+// for non-JSON values.
+
+                length = value.length;
+                for (i = 0; i < length; i += 1) {
+                    partial[i] = str(i, value) || 'null';
+                }
+
+// Join all of the elements together, separated with commas, and wrap them in
+// brackets.
+
+                v = partial.length === 0
+                    ? '[]'
+                    : gap
+                    ? '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']'
+                    : '[' + partial.join(',') + ']';
+                gap = mind;
+                return v;
+            }
+
+// If the replacer is an array, use it to select the members to be stringified.
+
+            if (rep && typeof rep === 'object') {
+                length = rep.length;
+                for (i = 0; i < length; i += 1) {
+                    if (typeof rep[i] === 'string') {
+                        k = rep[i];
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                        }
+                    }
+                }
+            } else {
+
+// Otherwise, iterate through all of the keys in the object.
+
+                for (k in value) {
+                    if (Object.prototype.hasOwnProperty.call(value, k)) {
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                        }
+                    }
+                }
+            }
+
+// Join all of the member texts together, separated with commas,
+// and wrap them in braces.
+
+            v = partial.length === 0
+                ? '{}'
+                : gap
+                ? '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}'
+                : '{' + partial.join(',') + '}';
+            gap = mind;
+            return v;
+        }
+    }
+
+// If the JSON object does not yet have a stringify method, give it one.
+
+    if (typeof JSON.stringify !== 'function') {
+        JSON.stringify = function (value, replacer, space) {
+
+// The stringify method takes a value and an optional replacer, and an optional
+// space parameter, and returns a JSON text. The replacer can be a function
+// that can replace values, or an array of strings that will select the keys.
+// A default replacer method can be provided. Use of the space parameter can
+// produce text that is more easily readable.
+
+            var i;
+            gap = '';
+            indent = '';
+
+// If the space parameter is a number, make an indent string containing that
+// many spaces.
+
+            if (typeof space === 'number') {
+                for (i = 0; i < space; i += 1) {
+                    indent += ' ';
+                }
+
+// If the space parameter is a string, it will be used as the indent string.
+
+            } else if (typeof space === 'string') {
+                indent = space;
+            }
+
+// If there is a replacer, it must be a function or an array.
+// Otherwise, throw an error.
+
+            rep = replacer;
+            if (replacer && typeof replacer !== 'function' &&
+                    (typeof replacer !== 'object' ||
+                    typeof replacer.length !== 'number')) {
+                throw new Error('JSON.stringify');
+            }
+
+// Make a fake root object containing our value under the key of ''.
+// Return the result of stringifying the value.
+
+            return str('', {'': value});
+        };
+    }
+
+
+// If the JSON object does not yet have a parse method, give it one.
+
+    if (typeof JSON.parse !== 'function') {
+        JSON.parse = function (text, reviver) {
+
+// The parse method takes a text and an optional reviver function, and returns
+// a JavaScript value if the text is a valid JSON text.
+
+            var j;
+
+            function walk(holder, key) {
+
+// The walk method is used to recursively walk the resulting structure so
+// that modifications can be made.
+
+                var k, v, value = holder[key];
+                if (value && typeof value === 'object') {
+                    for (k in value) {
+                        if (Object.prototype.hasOwnProperty.call(value, k)) {
+                            v = walk(value, k);
+                            if (v !== undefined) {
+                                value[k] = v;
+                            } else {
+                                delete value[k];
+                            }
+                        }
+                    }
+                }
+                return reviver.call(holder, key, value);
+            }
+
+
+// Parsing happens in four stages. In the first stage, we replace certain
+// Unicode characters with escape sequences. JavaScript handles many characters
+// incorrectly, either silently deleting them, or treating them as line endings.
+
+            text = String(text);
+            cx.lastIndex = 0;
+            if (cx.test(text)) {
+                text = text.replace(cx, function (a) {
+                    return '\\u' +
+                        ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+                });
+            }
+
+// In the second stage, we run the text against regular expressions that look
+// for non-JSON patterns. We are especially concerned with '()' and 'new'
+// because they can cause invocation, and '=' because it can cause mutation.
+// But just to be safe, we want to reject all unexpected forms.
+
+// We split the second stage into 4 regexp operations in order to work around
+// crippling inefficiencies in IE's and Safari's regexp engines. First we
+// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
+// replace all simple value tokens with ']' characters. Third, we delete all
+// open brackets that follow a colon or comma or that begin the text. Finally,
+// we look to see that the remaining characters are only whitespace or ']' or
+// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
+
+            if (/^[\],:{}\s]*$/
+                    .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
+                        .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
+                        .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
+
+// In the third stage we use the eval function to compile the text into a
+// JavaScript structure. The '{' operator is subject to a syntactic ambiguity
+// in JavaScript: it can begin a block or an object literal. We wrap the text
+// in parens to eliminate the ambiguity.
+
+                j = eval('(' + text + ')');
+
+// In the optional fourth stage, we recursively walk the new structure, passing
+// each name/value pair to a reviver function for possible transformation.
+
+                return typeof reviver === 'function'
+                    ? walk({'': j}, '')
+                    : j;
+            }
+
+// If the text is not JSON parseable, then a SyntaxError is thrown.
+
+            throw new SyntaxError('JSON.parse');
+        };
+    }
+}());

webapp/web/js/menupage/browseByVClass.js

@@ -48,6 +48,15 @@ var browseByVClass = {
             return false;
         });
         
+        // save the selected vclass in location hash so we can reset the selection
+        // if the user navigates with the back button
+        this.browseVClasses.children('li').each( function() {
+           $(this).find('a').click(function () {
+                // the extra space is needed to prevent odd scrolling behavior
+                location.hash = $(this).attr('data-uri') + ' ';
+           }); 
+        });
+
         // Call the pagination listener
         this.paginationListener();
     },
@@ -66,7 +75,14 @@ var browseByVClass = {
     // Load individuals for default class as specified by menupage template
     defaultVClass: function() {
         if ( this.defaultBrowseVClassURI != "false" ) {
-            this.getIndividuals(this.defaultBrowseVClassUri, "all", 1, false);
+            if ( location.hash ) {
+                // remove the trailing white space
+                location.hash = location.hash.replace(/\s+/g, '');                
+                this.getIndividuals(location.hash.substring(1,location.hash.length), "all", 1, false);
+            }
+            else {
+                this.getIndividuals(this.defaultBrowseVClassUri, "all", 1, false);
+            }
         }
     },
     
@@ -105,36 +121,8 @@ var browseByVClass = {
             } else {
                 var vclassName = results.vclass.name;
                 $.each(results.individuals, function(i, item) {
-                    var individual, 
-                        label, 
-                        mostSpecificTypes, 
-                        uri, 
-                        profileUrl, 
-                        image, 
-                        listItem;
-                        
-                    individual = results.individuals[i];
-                    label = individual.label;
-                    mostSpecificTypes = individual.mostSpecificTypes;
-                    moreInfo = browseByVClass.getMoreInfo(mostSpecificTypes, vclassName);
-                    uri = individual.URI;
-                    profileUrl = individual.profileUrl;
-                    if ( individual.thumbUrl ) {
-                        image = browseByVClass.baseUrl + individual.thumbUrl;
-                    }
-                    // Build the content of each list item, piecing together each component
-                    listItem = '<li class="individual" role="listitem" role="navigation">';
-                    if ( typeof individual.thumbUrl !== "undefined" ) {
-                        listItem += '<img src="'+ image +'" width="90" alt="'+ label +'" /><h1 class="thumb">';
-                    } else {
-                        listItem += '<h1>';
-                    }
-                    listItem += '<a href="'+ profileUrl +'" title="View the profile page for '+ label +'">'+ label +'</a></h1>';
-                    if ( moreInfo != '' ) {
-                        listItem += '<span class="title">'+ moreInfo +'</span>';
-                    }
-                    listItem += '</li>';
-                    individualList += listItem;
+                    var individual = results.individuals[i];
+                    individualList += individual.shortViewHtml;
                 })
                 
                 // Remove existing content
@@ -158,32 +146,6 @@ var browseByVClass = {
         });
     },
     
-    // Handle mostSpecificType as array
-    // * remove requested class for redundancy
-    // * allow override by another property (passed as argument)
-    getMoreInfo: function(mostSpecificTypes, requestedClass, override) {
-        var requestedClassIndex = $.inArray(requestedClass, mostSpecificTypes);
-        if ( requestedClassIndex > -1 ) {
-            mostSpecificTypes.splice(requestedClassIndex, 1);
-        }
-        var mostSpecificTypeCount = mostSpecificTypes.length;
-        
-        if ( typeof override !== "undefined" ) {
-            return override;
-        } else {
-            if ( mostSpecificTypeCount > 1 ) {
-                var assembledList = '<ul class="mostSpecificTypes">';
-                $.each(mostSpecificTypes, function(i, item) {
-                    assembledList += '<li>'+ item +'</li>';
-                })
-                assembledList += '</ul>';
-                return assembledList;
-            } else {
-                return mostSpecificTypes;
-            }
-        }
-    },
-    
     // getPageScroll() by quirksmode.org
     getPageScroll: function() {
         var xScroll, yScroll;

webapp/web/js/menupage/pageManagementUtils.js

@@ -0,0 +1,516 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+  
+var pageManagementUtils = {
+		
+	// on initial page setup
+	onLoad:function(){
+		if (this.disableFormInUnsupportedBrowsers()) {
+            return;
+        }   
+		this.mixIn();
+	    this.initObjects();
+	    this.bindEventListeners();
+	    this.initDisplay();
+	    
+	},   
+    disableFormInUnsupportedBrowsers: function() {       
+        var disableWrapper = $('#ie67DisableWrapper');
+        
+        // Check for unsupported browsers only if the element exists on the page
+        if (disableWrapper.length) {
+            if (vitro.browserUtils.isIELessThan8()) {
+                disableWrapper.show();
+                $('.noIE67').hide();
+                return true;
+            }
+        }            
+        return false;      
+    },
+
+    mixIn: function() {
+        // Mix in the custom form utility methods
+        $.extend(this, vitro.customFormUtils);
+        // Get the custom form data from the page
+        $.extend(this, customFormData);
+    },
+	initObjects:function(){
+		this.counter = 0;
+		this.contentTypeSelect =  $("#typeSelect");
+		//list of options
+		this.contentTypeSelectOptions =  $('select#typeSelect option');
+		this.classGroupSection = $("section#classGroup");
+		this.nonClassGroupSection = $("section#nonClassGroup");
+		//From original menu management edit
+		this.defaultTemplateRadio = $('input.default-template');
+        this.customTemplateRadio = $('input.custom-template');
+        this.customTemplate = $('#custom-template');
+        //In this version, these don't exist but we can consider this later
+       // this.changeContentType = $('#changeContentType');
+        this.selectContentType = $('#selectContentType');
+       // this.existingContentType = $('#existingContentType');
+        this.selectClassGroupDropdown = $('#selectClassGroup');
+        this.classesForClassGroup = $('#classesInSelectedGroup');
+        this.selectedGroupForPage = $('#selectedContentTypeValue');
+        this.allClassesSelectedCheckbox = $('#allSelected');
+        this.displayInternalMessage = $('#internal-class label em');
+        this.pageContentSubmissionInputs = $("#pageContentSubmissionInputs");
+	},
+	initDisplay: function(){
+		//right side components
+	    this.contentTypeSelectOptions.eq(0).attr('selected', 'selected');
+	    $('select#selectClassGroup option').eq(0).attr('selected', 'selected');
+	    
+	    //Why would you want to hide this? This hides everything
+	   // $("section#pageDetails").hide();
+	    $("section#headerBar").hide();
+	    this.classGroupSection.hide();
+	    this.nonClassGroupSection.hide();
+	    $("section#classesInSelectedGroup").addClass('hidden');
+	    $("input#moreContent").hide();
+	    //left side components
+	    $("input.default-template").attr('checked',true);
+	    $("input#menuCheckbox").attr('checked',false);
+	    $("section#menu").hide();
+	
+	},
+	bindEventListeners:function(){
+	    $("input.default-template").click( function() {
+	            $("section#custom-template").addClass('hidden');
+	            
+	    });
+
+	    $("input.custom-template").click( function() {
+	            $("section#custom-template").removeClass('hidden');            
+	    });
+	
+	    $("input#menuCheckbox").click( function() {
+	        if ( $("section#menu").is(':hidden') ) {
+	            $("section#menu").show();
+	        }
+	        else {
+	            $("section#menu").hide();
+	        }            
+	    });
+	
+	    $("input#submit").click( function() {
+	        $("section#pageDetails").show();
+	    });
+	
+	    //Collapses the current content and creates a new section of content
+	    //Resets the content to be cloned to default settings
+	    $("input#moreContent").click( function() {
+	        var selectedType = pageManagementUtils.contentTypeSelect.val();
+	        var selectedTypeText = $("#typeSelect option:selected").text();
+	        //Not sure why selected group here? This won't always be true for more content
+	        //var selectedGroup = $('select#selectClassGroup').val();
+	        
+	        //Aren't these already hidden? 
+	        //Hide both sections
+	        $("section#classGroup").hide();
+	        $("section#nonClassGroup").hide();
+	        
+	        //Reset class group
+	        pageManagementUtils.resetClassGroupSection();
+	        pageManagementUtils.contentTypeSelectOptions.eq(0).attr('selected', 'selected');
+	        $("input#moreContent").hide();
+	        if ( $("div#leftSide").css("height") != undefined ) {
+	            $("div#leftSide").css("height","");
+	            if ( $("div#leftSide").height() < $("div#rightSide").height() ) {
+	                $("div#leftSide").css("height",$("div#rightSide").height() + "px");
+	            }
+	        }
+	        $("section#headerBar").hide();
+	        $("section#headerBar").text("");
+	        //pageManagementUtils.cloneContentArea(selectedType,selectedGroup);
+	        pageManagementUtils.cloneContentArea(selectedType, selectedTypeText);
+	        pageManagementUtils.contentTypeSelect.focus();
+	    });
+	
+	    //replacing with menu management edit version which is extended with some of the logic below
+	    this.selectClassGroupDropdown.change(function() {
+            pageManagementUtils.chooseClassGroup();
+        });
+	    /*
+	    $("select#selectClassGroup").change( function() {
+	        if ( $("select#selectClassGroup").val() == "" ) {
+	            $("section#classesInSelectedGroup").addClass('hidden');
+	            $("div#leftSide").css("height","");
+	            $("input#moreContent").hide();
+	            
+	        }
+	        else {
+	            $("section#classesInSelectedGroup").removeClass('hidden');
+	            $("input#moreContent").show();
+	            if ( $("div#leftSide").height() < $("div#rightSide").height() ) {
+	                $("div#leftSide").css("height",$("div#rightSide").height() + "px");
+	            }          
+	        }
+	    });*/
+	  
+	    $("select#typeSelect").change( function() {
+	        $('input#variable').val("");
+	        $('textarea#textArea').val("");
+	        if ( $("#typeSelect").val() == "browseClassGroup" ) {
+	            $("section#classGroup").show();
+	            $("section#nonClassGroup").hide();
+	            $("input#moreContent").hide();
+	            $("section#headerBar").text("Browse Class Group - ");
+	            $("section#headerBar").show();
+	        }
+	        if ( $("#typeSelect").val() == "fixedHtml" || $("#typeSelect").val() == "sparqlQuery" ) {
+	            $("section#classGroup").hide();
+	            if ( $("#typeSelect").val() == "fixedHtml" ) {
+	                $('span#taSpan').text("Enter fixed HTML here");
+	                $("section#headerBar").text("Fixed HTML - ");
+	            }
+	            else {
+	                $('span#taSpan').text("Enter SPARQL query here");
+	                $("section#headerBar").text("SPARQL Query Results - ");
+	            }
+	            $("section#nonClassGroup").show();
+	            $("section#headerBar").show();
+	            $('select#selectClassGroup option').eq(0).attr('selected', 'selected');
+	            $("section#classesInSelectedGroup").addClass('hidden');
+	            $("input#moreContent").show();
+	        }
+	        if ( $("#typeSelect").val() == "" ) {
+	            $("section#classGroup").hide();
+	            $("section#nonClassGroup").hide();
+	            $("input#moreContent").hide();
+	            $('select#selectClassGroup option').eq(0).attr('selected', 'selected');
+	            $("section#classesInSelectedGroup").addClass('hidden');
+	            $("section#headerBar").hide();
+	            $("section#headerBar").text("");
+	        }
+	        pageManagementUtils.adjustSaveButtonHeight();
+	    });
+	    
+	    /*
+	    // Listeners for vClass switching
+        this.changeContentType.click(function() {
+           pageManagementUtils.showClassGroups();
+         
+           return false;
+        });*/
+	    
+	    //Submission: validate as well as create appropriate hidden json inputs
+	    $("form").submit(function () { 
+            var validationError = pageManagementUtils.validateMenuItemForm();
+            if (validationError == "") {
+            		//Create the appropriate json objects
+            		pageManagementUtils.createPageContentForSubmission();
+            		return true;
+               } else{
+                   $('#error-alert').removeClass('hidden');
+                   $('#error-alert p').html(validationError);
+                   //TODO: Check why scrolling appears to be a problem
+                   $.scrollTo({ top:0, left:0}, 500)
+                   return false;
+               } 
+         });
+    
+	},
+	//Clone content area
+	cloneContentArea: function(contentType, contentTypeLabel) {
+        var ctr = pageManagementUtils.counter;
+        var counter = pageManagementUtils.counter;
+        var varOrClas;
+        
+        
+        if ( contentType == "fixedHTML" || contentType == "sparqlQuery" ) {
+            var taValue = $('textarea#textArea').val();
+            alert("original text area value is " + taValue);
+            var $newContentObj = $('section#nonClassGroup').clone();
+            $newContentObj.addClass("pageContent");
+            varOrClass = $newContentObj.find('input').val();
+            $newContentObj.show();
+            //Save content type
+            $newContentObj.attr("contentType", contentType);
+            $newContentObj.attr("id", contentType + counter);
+            $newContentObj.find('input#variable').attr("id","variable" + counter);
+            $newContentObj.find('textarea#textArea').attr("id","textArea" + counter);
+            $newContentObj.find('label#variableLabel').attr("id","variableLabel" + counter);
+            $newContentObj.find('label#taLabel').attr("id","taLabel" + counter);
+
+            //Keep the name of the inputs the same
+         //   $newContentObj.find('input#variable').attr("name","variable" + counter);
+         //   $newContentObj.find('textarea#textArea').attr("name","textArea" + counter);
+            // There's a jquery bug when cloning textareas: the value doesn't
+			// get cloned. So
+            // copy the value "manually."
+            $newContentObj.find("textarea[name='textArea']").val(taValue);
+        }
+        else if ( contentType == "browseClassGroup" ) {
+            
+            var $newContentObj = $('section#classGroup').clone();
+
+            $newContentObj.addClass("pageContent");
+            $newContentObj.show();   
+            $newContentObj.attr("contentType", contentType);
+            $newContentObj.attr("id", "classGroup" + counter);
+            $newContentObj.find('section#selectContentType').attr("id", "selectContentType" + counter);
+            $newContentObj.find('select#selectClassGroup').val(groupValue);
+            $newContentObj.find('select#selectClassGroup').attr("id","selectClassGroup" + counter);
+            $newContentObj.find('select#selectClassGroup' + counter).attr("name","selectClassGroup" + counter);
+            $newContentObj.find('section#classesInSelectedGroup').attr("id","classesInSelectedGroup" + counter);
+            $newContentObj.find('section#classesInSelectedGroup' + counter).removeClass('hidden');
+            $newContentObj.find('p#selectClassesMessage').attr("id","selectClassesMessage" + counter);
+            // Will need to uncomment this and find a way to apply the css style
+// $newContentObj.find('section#internal-class').attr("id","internal-class" +
+// counter);
+            $newContentObj.find("input[name='display-internalClass']").attr("name","display-internalClass" + counter);
+            $newContentObj.find('ul#selectedClasses').attr("id","selectedClasses" + counter);
+            $newContentObj.find('ul#selectedClasses' + counter).attr("name","selectedClasses" + counter);
+
+            $newContentObj.find('ul#selectedClasses' + counter).children("li").each( function(i,abc) {
+                var $theCheckbox =  $(this).find('input');
+                $theCheckbox.attr("name", $theCheckbox.attr("name") + counter);
+            });
+            
+            varOrClass = $newContentObj.find('select#selectClassGroup' + counter + ' option:selected').text();
+        }
+        
+        //Create the container for the new content
+        
+        $newDivContainer = $("<div></div>", {
+            id: "divContainer" + counter,
+            "class": "pageContentContainer",
+            html: "<span class='pageContentTypeLabel'>" + contentTypeLabel + " - " + varOrClass 
+                        + "</span><span id='clickable" + counter 
+                        + "' class='pageContentExpand'><div class='arrow expandArrow'></div></span><div id='innerContainer" + counter 
+                        + "' class='pageContentWrapper'><input id='remove" + counter 
+                        + "' type='button' class='delete' value='Delete' class='deleteButton' /></div>"
+        });
+        var $clickableSpan = $newDivContainer.children('span#clickable' + counter);
+        var $innerDiv = $newDivContainer.children('div#innerContainer' + counter);
+        $innerDiv.hide();
+        //Expand/collapse toggle
+        $clickableSpan.click(function() {
+            if ( $innerDiv.is(':visible') ) {
+               $innerDiv.slideUp(222);
+               //$clickableSpan.find('img').attr("src","arrow-down.gif");
+               var arrowDiv = $clickableSpan.find('div.arrow');
+               arrowDiv.removeClass("collapseArrow");
+               arrowDiv.addClass("expandArrow");
+            }
+            else {
+                $innerDiv.slideDown(222);
+                //$clickableSpan.find('img').attr("src","arrow-up.gif");
+                var arrowDiv = $clickableSpan.find('div.arrow');
+                arrowDiv.removeClass("expandArrow");
+                arrowDiv.addClass("collapseArrow");
+            }
+            window.setTimeout('pageManagementUtils.adjustSaveButtonHeight()', 223);             
+        });
+        $newRemoveButton = $innerDiv.find('input#remove' + counter);
+        // this will have to disable submitted fields as well as hide them.
+        $newRemoveButton.click(function() {
+            $innerDiv.parent("div").css("display","none");
+            pageManagementUtils.adjustSaveButtonHeight();
+        });
+
+        $newDivContainer.appendTo($('section#contentDivs'));
+        $newContentObj.prependTo($innerDiv);
+        counter = counter + 10;  
+    },
+    resetClassGroupSection:function() {
+    	 $('select#selectClassGroup option').eq(0).attr('selected', 'selected');
+	     $("section#classesInSelectedGroup").addClass('hidden');
+    },
+    //finalize later, but basically use same attribute across page content and use attribute instead of id
+    //Attribute would be what keeps track of content, so contentCounter or something like that
+    toggleArrow:function() {
+    	
+       
+    },
+    //Adjust save button height
+    adjustSaveButtonHeight:function() {
+        if ( $("div#leftSide").css("height") != undefined ) {
+             $("div#leftSide").css("height","");
+             if ( $("div#leftSide").height() < $("div#rightSide").height() ) {
+                 $("div#leftSide").css("height",$("div#rightSide").height() + "px");
+             }
+        }
+    },
+    /************************************/
+    //Copied from menu management edit javascript
+    chooseClassGroup: function() {        
+        var url = "dataservice?getVClassesForVClassGroup=1&classgroupUri=";
+        var vclassUri = this.selectClassGroupDropdown.val();
+        url += encodeURIComponent(vclassUri);
+        //Make ajax call to retrieve vclasses
+        $.getJSON(url, function(results) {
+  
+          if ( results.classes.length == 0 ) {
+     
+          } else {
+              //update existing content type with correct class group name and hide class group select again
+              var _this = pageManagementUtils;
+          //   pageManagementUtils.hideClassGroups();
+      
+              pageManagementUtils.selectedGroupForPage.html(results.classGroupName);
+              //update content type in message to "display x within my institution"
+              pageManagementUtils.updateInternalClassMessage(results.classGroupName);
+              //retrieve classes for class group and display with all selected
+              var selectedClassesList = pageManagementUtils.classesForClassGroup.children('ul#selectedClasses');
+              
+              selectedClassesList.empty();
+              selectedClassesList.append('<li class="ui-state-default"> <input type="checkbox" name="allSelected" id="allSelected" value="all" checked="checked" /> <label class="inline" for="All"> All</label> </li>');
+              
+              $.each(results.classes, function(i, item) {
+                  var thisClass = results.classes[i];
+                  var thisClassName = thisClass.name;
+                  //When first selecting new content type, all classes should be selected
+                  appendHtml = ' <li class="ui-state-default">' + 
+                          '<input type="checkbox" checked="checked" name="classInClassGroup" value="' + thisClass.URI + '" />' +  
+                         '<label class="inline" for="' + thisClassName + '"> ' + thisClassName + '</label>' + 
+                          '</li>';
+                  selectedClassesList.append(appendHtml);
+              });
+              pageManagementUtils.toggleClassSelection();
+              
+              
+              //From NEW code
+              if (pageManagementUtils.selectClassGroupDropdown.val() == "" ) {
+  	            $("section#classesInSelectedGroup").addClass('hidden');
+  	            $("div#leftSide").css("height","");
+  	            $("input#moreContent").hide();
+  	            
+	  	        }
+	  	     else {
+	  	            $("section#classesInSelectedGroup").removeClass('hidden');
+	  	            $("input#moreContent").show();
+	  	            if ( $("div#leftSide").height() < $("div#rightSide").height() ) {
+	  	                $("div#leftSide").css("height",$("div#rightSide").height() + "px");
+	  	            }          
+	  	     }
+              
+              
+          }
+ 
+        });
+    },
+    /*
+    showClassGroups: function() { //User has clicked change content type
+        //Show the section with the class group dropdown
+        this.selectContentType.removeClass("hidden");
+        //Hide the "change content type" section which shows the selected class group
+       this.existingContentType.addClass("hidden");
+        //Hide the checkboxes for classes within the class group
+        this.classesForClassGroup.addClass("hidden");
+    },
+    hideClassGroups: function() { //User has selected class group/content type, page should show classes for class group and 'existing' type with change link
+        //Hide the class group dropdown
+        this.selectContentType.addClass("hidden");
+        //Show the "change content type" section which shows the selected class group
+        this.existingContentType.removeClass("hidden");
+        //Show the classes in the class group
+        this.classesForClassGroup.removeClass("hidden");
+        
+    },*/
+    toggleClassSelection: function() {
+        // Check/unckeck all classes for selection
+        $('input:checkbox[name=allSelected]').click(function(){
+             if ( this.checked ) {
+             // if checked, select all the checkboxes
+             $('input:checkbox[name=classInClassGroup]').attr('checked','checked');
+
+             } else {
+             // if not checked, deselect all the checkboxes
+               $('input:checkbox[name=classInClassGroup]').removeAttr('checked');
+             }
+        });
+
+        $('input:checkbox[name=classInClassGroup]').click(function(){
+            $('input:checkbox[name=allSelected]').removeAttr('checked');
+        });
+    }, //This is SPECIFIC to VIVO so should be moved there
+    updateInternalClassMessage:function(classGroupName) { //User has changed content type 
+        //Set content type within internal class message
+        this.displayInternalMessage.filter(":first").html(classGroupName);
+    },
+    validateMenuItemForm: function() {
+        var validationError = "";
+        
+        // Check menu name
+        if ($('input[type=text][name=pageName]').val() == "") {
+            validationError += "You must supply a name<br />";
+            }
+        // Check pretty url     
+        if ($('input[type=text][name=prettyUrl]').val() == "") {
+            validationError += "You must supply a pretty URL<br />";
+        }
+        if ($('input[type=text][name=prettyUrl]').val().charAt(0) != "/") {
+            validationError += "The pretty URL must begin with a leading forward slash<br />";
+        }
+        
+        // Check custom template
+        if ($('input:radio[name=selectedTemplate]:checked').val() == "custom") {
+            if ($('input[name=customTemplate]').val() == "") {
+                validationError += "You must supply a template<br />"; 
+            }
+        }
+        
+        //the different types of error will depend on the specific type of data getter/page content
+        /*
+        
+        // if no class group selected, this is an error
+        if ($('#selectClassGroup').val() =='-1') {
+            validationError += "You must supply a content type<br />"; 
+        } else {
+            //class group has been selected, make sure there is at least one class selected
+            var allSelected = $('input[name="allSelected"]:checked').length;
+            var noClassesSelected = $('input[name="classInClassGroup"]:checked').length;
+            if (allSelected == 0 && noClassesSelected == 0) {
+                //at least one class should be selected
+                validationError += "You must select the type of content to display<br />";
+            }
+        }
+      */
+       
+        //check select class group
+       
+        return validationError;
+    },
+    createPageContentForSubmission: function() {
+    	//Iterate through the page content and create the appropriate json object and save
+    	var pageContentSections = $("section[class='pageContent']");
+    	$.each(pageContentSections, function(i) {
+    		var id = $(this).attr("id");
+    		var jo = pageManagementUtils.processPageContentSection($(this));
+    		var jsonObjectString = JSON.stringify(jo);
+    		//Create a new hidden input with a specific name and assign value per page content
+        	pageManagementUtils.createPageContentInputForSubmission(jsonObjectString);
+    	});
+    	//in this case it's a sparql data getter, but what about the others
+    	/*
+    	var len = pageContentSections.length;
+    	var i;
+    	for(i = 0; i < len; i++) {
+    		var pageContentSection = $(pageContentSections[i]);
+    		var pageContentSectionId = pageContentSection.attr("id");
+    		var jsonObject = pageManagementUtils.processPageContentSection(pageContentSection);
+    		var jsonObjectString = JSON.stringify(jsonObject);
+    		//Create a new hidden input with a specific name and assign value per page content
+        	pageManagementUtils.createPageContentInputForSubmission(jsonObjectString);
+    	}*/
+    	
+    },
+    createPageContentInputForSubmission: function(inputValue) {
+    	$("<input type='hidden' name='pageContentUnit' value='" + inputValue + "'>").appendTo(pageManagementUtils.pageContentSubmissionInputs);
+    },
+    processPageContentSection:function(pageContentSection) {
+    	
+    	var variableValue = pageContentSection.find("input[name='variable']").val();
+    	var queryValue = pageContentSection.find("textarea[name='textArea']").val();
+    	var returnObject = {saveToVar:variableValue, query:queryValue, dataGetterClass:pageManagementUtils.dataGetterLabelToURI["sparqlDataGetter"], queryModel:"vitro:contextDisplayModel"};
+    	return returnObject;
+    }
+    
+};
+
+$(document).ready(function() {
+   pageManagementUtils.onLoad();
+});
+
+

webapp/web/js/siteAdmin/classHierarchyUtils.js

@@ -0,0 +1,269 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+  
+    var classHierarchyUtils = {
+    onLoad: function(urlBase,displayOption) {
+        this.imagePath = urlBase + "/images/";
+        this.initObjects();
+        this.expandAll.hide();
+
+        if ( displayOption == "all" ) {
+            this.buildAllClassesHtml();
+        }
+        else if ( displayOption == "group" ) {
+            this.buildClassGroupHtml();
+        }
+        else {
+            this.buildClassHierarchyHtml();
+            this.wireExpandLink();
+        }
+        
+        if ( displayOption == "asserted" || displayOption == "inferred" ) {
+            this.expandAll.show();
+        }
+        this.bindEventListeners();
+    },
+
+    initObjects: function() { 
+        this.expandAll = $('span#expandAll').find('a');   
+        this.classCounter = 1;
+        this.expandCounter = 1;
+        this.classHtml = "";
+        this.clickableSpans = [] ;
+        this.form = $('form#classHierarchyForm');
+        this.select = $('select#displayOption');
+        this.addClass = $('input#addClass');
+    },
+
+    bindEventListeners: function() {
+        this.select.change(function() {
+            if ( classHierarchyUtils.select.val() == "all") {
+                classHierarchyUtils.form.attr("action", "listVClassWebapps");
+            }
+            else if ( classHierarchyUtils.select.val() == "group") {
+                classHierarchyUtils.form.attr("action", "listGroups");
+            }
+            
+            classHierarchyUtils.form.submit();
+        });
+        this.addClass.click(function() {
+            classHierarchyUtils.form.attr("action", "vclass_retry");
+            classHierarchyUtils.form.submit();
+        });
+    },
+     
+    buildClassHierarchyHtml: function() {
+
+        $.each(json, function() {
+            $newClassSection = jQuery("<section></section>", {
+                id: "classContainer" + classHierarchyUtils.classCounter
+            });
+            var descendants = "";
+            var headerSpan = "";
+            
+            if ( this.children.length ) {
+                descendants = classHierarchyUtils.getTheChildren(this);
+                headerSpan = "<span class='headerSpanPlus' id='headerSpan" + classHierarchyUtils.classCounter 
+                              + "' view='less'>&nbsp;</span>";
+            }
+
+            classHierarchyUtils.classHtml += "<div>" + this.name + headerSpan + "</div>" + "<table class='classHierarchy' id='classHierarchy" 
+                                      + classHierarchyUtils.classCounter + "'>" ;
+
+            if ( this.data.shortDef.length > 0 ) {
+                classHierarchyUtils.classHtml += "<tr><td colspan='2'>" + this.data.shortDef + "</td></tr>";
+            }
+
+            if ( this.data.classGroup.length > 0 ) {
+                classHierarchyUtils.classHtml += "<tr><td class='classDetail'>Class Group:</td><td>" + this.data.classGroup + "</td></tr>";
+            }
+
+            classHierarchyUtils.classHtml += "<tr><td class='classDetail'>Ontology:</td><td>" + this.data.ontology + "</td></tr>";
+
+ 
+            classHierarchyUtils.classHtml += descendants;
+
+            classHierarchyUtils.classHtml += "</table>";
+       //     alert(classHierarchyUtils.classHtml);
+            $newClassSection.html(classHierarchyUtils.classHtml);
+            $newClassSection.appendTo($('section#container'));
+            classHierarchyUtils.makeHeaderSpansClickable(classHierarchyUtils.classCounter);
+            classHierarchyUtils.makeSubclassSpansClickable();
+            classHierarchyUtils.clickableSpans = [] ;
+            classHierarchyUtils.classHtml = "";
+            classHierarchyUtils.classCounter += 1;
+        });
+    },
+
+    getTheChildren: function(node) {
+        var childDetails = "";
+        var ctr = 0
+        $.each(node.children, function() {
+            if ( ctr == 0 ) {
+                childDetails += "<tr><td class='classDetail'>Subclasses:</td>";
+                ctr = ctr + 1;
+            }
+            else {
+                childDetails += "<tr><td></td>" ;
+            }
+
+            childDetails += "<td class='subclassCell'><span class='subclassExpandPlus' id='subclassExpand" 
+                            + classHierarchyUtils.expandCounter + "'>&nbsp;</span>" 
+                            + this.name + "</td></tr><tr><td></td><td><table id='subclassTable" 
+                            + classHierarchyUtils.expandCounter + "' class='subclassTable'>";
+
+            classHierarchyUtils.clickableSpans.push('subclassExpand' + classHierarchyUtils.expandCounter);
+            
+            classHierarchyUtils.expandCounter += 1;
+            
+            if ( this.data.shortDef.length > 0 ) {
+                childDetails += "<tr><td colspan='2'>" + this.data.shortDef + "</td></tr>";
+            }
+
+            if ( this.data.classGroup.length > 0 ) {
+                childDetails += "<tr><td class='classDetail'>Class Group:</td><td>" + this.data.classGroup + "</td></tr>";
+            }
+
+            childDetails += "<tr><td class='classDetail'>Ontology:</td><td>" + this.data.ontology + "</td></tr>";
+
+            if ( this.children ) {
+                var grandChildren = classHierarchyUtils.getTheChildren(this);
+                childDetails += grandChildren;
+            }
+        });
+        childDetails += "</table></td></tr>";
+        return childDetails;
+    },
+    
+    makeHeaderSpansClickable: function(ctr) {
+
+        var $clickableHeader = $('section#classContainer' + ctr).find('span.headerSpanPlus');
+
+        $clickableHeader.click(function() {
+            if ( $clickableHeader.attr('view') == "less" ) {
+                $clickableHeader.addClass("headerSpanMinus");
+                $('table#classHierarchy' + ctr).find('span').addClass("subclassExpandMinus");
+                $('table#classHierarchy' + ctr).find('table.subclassTable').show();
+                $clickableHeader.attr('view', 'more' );
+            }
+            else {
+                $clickableHeader.removeClass("headerSpanMinus");
+                $('table#classHierarchy' + ctr).find('span').removeClass("subclassExpandMinus");
+                $('table#classHierarchy' + ctr).find('table.subclassTable').hide();
+                $clickableHeader.attr('view', 'less' );
+            }
+        });
+    },//    $('myOjbect').css('background-image', 'url(' + imageUrl + ')');
+    
+    makeSubclassSpansClickable: function() {
+        $.each(classHierarchyUtils.clickableSpans, function() {
+            var currentSpan = this;
+            var $clickableSpan = $('section#container').find('span#' + currentSpan);
+            var $subclassTable = $('section#container').find('table#subclassTable' + currentSpan.replace("subclassExpand",""));
+
+            $clickableSpan.click(function() {
+                if ( $subclassTable.is(':visible') ) {
+                    $subclassTable.hide();
+                    $subclassTable.find('table.subclassTable').hide();
+                    $subclassTable.find('span').removeClass("subclassExpandMinus");
+                    $clickableSpan.removeClass("subclassExpandMinus");
+                }
+                else {
+                    $subclassTable.show();
+                    $clickableSpan.addClass("subclassExpandMinus");
+                }
+            });
+        });
+    },
+    
+    wireExpandLink: function() {
+        this.expandAll.click(function() {
+            if ( classHierarchyUtils.expandAll.text() == "expand all" ) {
+                classHierarchyUtils.expandAll.text("collapse all");
+                $('span.headerSpanPlus').addClass("headerSpanMinus");
+                $('table.classHierarchy').find('span').addClass("subclassExpandMinus");
+                $('table.classHierarchy').find('table.subclassTable').show();
+                $('section#container').find('span.headerSpanPlus').attr('view','more');
+            }
+            else {
+                classHierarchyUtils.expandAll.text("expand all");
+                $('span.headerSpanPlus').removeClass("headerSpanMinus");
+                $('table.classHierarchy').find('span').removeClass("subclassExpandMinus");
+                $('table.classHierarchy').find('table.subclassTable').hide();
+                $('section#container').find('span.headerSpanPlus').attr('view','less');
+            }
+        });
+    },
+     
+    buildAllClassesHtml: function() {
+
+        $.each(json, function() {
+            $newClassSection = jQuery("<section></section>", {
+                id: "classContainer" + classHierarchyUtils.classCounter
+            });
+            
+            classHierarchyUtils.classHtml += "<div>" + this.name + "</div>" + "<table class='classHierarchy' id='classHierarchy" 
+                                      + classHierarchyUtils.classCounter + "'>" ;
+
+            if ( this.data.shortDef.length > 0 ) {
+                classHierarchyUtils.classHtml += "<tr><td colspan='2'>" + this.data.shortDef + "</td></tr>";
+            }
+
+            if ( this.data.classGroup.length > 0 ) {
+                classHierarchyUtils.classHtml += "<tr><td class='classDetail'>Class Group:</td><td>" + this.data.classGroup + "</td></tr>";
+            }
+
+            classHierarchyUtils.classHtml += "<tr><td class='classDetail'>Ontology:</td><td>" + this.data.ontology + "</td></tr>";
+
+            classHierarchyUtils.classHtml += "</table>";
+
+            $newClassSection.html(classHierarchyUtils.classHtml);
+            $newClassSection.appendTo($('section#container'));
+            classHierarchyUtils.classHtml = "";
+            classHierarchyUtils.classCounter += 1;
+        });
+    },
+
+    buildClassGroupHtml: function() {
+
+        $.each(json, function() {
+            $newClassSection = jQuery("<section></section>", {
+                id: "classContainer" + classHierarchyUtils.classCounter
+            });
+            var descendants = "";
+            
+            if ( this.children.length ) {
+                var ctr = 0;
+                $.each(this.children, function() {
+                    if ( ctr == 0 ) {
+                        descendants += "<tr><td class='classDetail'>Classes:</td>";
+                        ctr = ctr + 1;
+                    }
+                    else {
+                        descendants += "<tr><td></td>" ;
+                    }
+
+                    descendants += "<td class='subclassCell'>" + this.name + "</td></tr>";
+                    descendants += "<tr><td></td><td><table class='innerDefinition'><tr><td>" + this.data.shortDef + "</td></tr></table></td></tr>";
+                    
+                });
+                descendants += "</table></td></tr>";
+            }
+
+            classHierarchyUtils.classHtml += "<div>" + this.name + "</div>" + "<table class='classHierarchy' id='classHierarchy" 
+                                      + classHierarchyUtils.classCounter + "'>" ;
+
+            if ( this.data.displayRank.length > 0 ) {
+                classHierarchyUtils.classHtml += "<tr><td class='classDetail'>Display Rank:</td><td>" + this.data.displayRank + "</td></tr>"
+            }
+ 
+            classHierarchyUtils.classHtml += descendants;
+
+            classHierarchyUtils.classHtml += "</table>";
+       //     alert(classHierarchyUtils.classHtml);
+            $newClassSection.html(classHierarchyUtils.classHtml);
+            $newClassSection.appendTo($('section#container'));
+            classHierarchyUtils.classHtml = "";
+            classHierarchyUtils.classCounter += 1;
+        });
+    }
+}