action panel to top tabs

replacing the action panel with the Design for 2.1
Significantly cleaned up implementation of intra-entity navigation
requires additional CSS work
still need to integrate the search controls onto each page
cleaning up interface between entity and facet
simplified nested tabs logic

Fixed role navigation
select default tab from the search widget
fixed unit tests and jsl
keep tabs area allocated

set default tab selected whenever the pkey changes.

Removing styling that is changing positions of buttons.  The logic for that was for action-panel, but does not translate to entity-header.

change from metadata name to label for I18N

set selected tab in entity_init.

Default title for entities without search and pkeys

associations in table now link.

remove colon from title when not showing pkey

added Managed by facet group.

Removed entities that are, for some reason, invalid.

14 files changed, 605 insertions, 624 deletions

diff --git a/install/ui/associate.js b/install/ui/associate.js
index ca912e3f..77738bba 100644
--- a/install/ui/associate.js
+++ b/install/ui/associate.js
@@ -279,23 +279,24 @@ IPA.association_config = function (spec) {
 
 
 IPA.association_pkey_setup = function  (container, record) {
-        container.empty();
-        var value = record[this.name];
-        value = value ? value.toString() : '';
-        $('<a/>', {
-            'href': '#'+value,
-            'html': value,
-            'click': function (value) {
-                return function() {
-                    var state = IPA.tab_state(this.other_entity);
-                    state[this.other_entity + '-facet'] = 'details';
-                    state[this.other_entity + '-pkey'] = value;
-                    $.bbq.pushState(state);
-                    return false;
-                };
-            }(value)
-        }).appendTo(container);
-    };
+    var other_entity = this.entity_name;
+    container.empty();
+    var value = record[this.name];
+    value = value ? value.toString() : '';
+    $('<a/>', {
+        'href': '#'+value,
+        'html': value,
+        'click': function (value) {
+            return function() {
+                var state = IPA.tab_state(other_entity);
+                state[other_entity + '-facet'] = 'default';
+                state[other_entity + '-pkey'] = value;
+                $.bbq.pushState(state);
+                return false;
+            };
+        }(value)
+    }).appendTo(container);
+};
 
 
 IPA.association_table_widget = function (spec) {
@@ -670,7 +671,9 @@ IPA.association_facet = function (spec) {
     that.attribute_member = spec.attribute_member || that.name.substring(0, index);
     that.other_entity = spec.other_entity || that.name.substring(index+1);
 
-    that.facet_group = spec.facet_group;
+    that.facet_group = spec.facet_group ||
+        IPA.fetch_facet_group(that.entity_name,that.attribute_member);
+
     that.label = that.label ? that.label : (IPA.metadata.objects[that.other_entity] ? IPA.metadata.objects[that.other_entity].label : that.other_entity);
 
     that.associator = spec.associator || IPA.bulk_associator;
@@ -737,6 +740,9 @@ IPA.association_facet = function (spec) {
         var column;
         var i;
 
+
+
+
         var label = IPA.metadata.objects[that.other_entity] ? IPA.metadata.objects[that.other_entity].label : that.other_entity;
         var pkey_name = IPA.metadata.objects[that.other_entity].primary_key;
 
@@ -771,7 +777,7 @@ IPA.association_facet = function (spec) {
                     'click': function (value) {
                         return function() {
                             var state = IPA.tab_state(that.other_entity);
-                            state[that.other_entity + '-facet'] = 'details';
+                            state[that.other_entity + '-facet'] = 'default';
                             state[that.other_entity + '-pkey'] = value;
                             $.bbq.pushState(state);
                             return false;
@@ -834,7 +840,7 @@ IPA.association_facet = function (spec) {
         var header_message = '';
         if (relationship[0] == 'Member') {
             header_message = IPA.messages.association.member;
-
+            
         } else if (relationship[0] == 'Parent') {
             header_message = IPA.messages.association.parent;
         }
@@ -851,6 +857,21 @@ IPA.association_facet = function (spec) {
         var span = $('<span/>', { 'name': 'association' }).appendTo(container);
 
         that.table.create(span);
+
+        var li = that.entity_header.buttons;
+
+        // creating generic buttons for layout
+        $('<input/>', {
+            'type': 'button',
+            'name': 'remove',
+            'value': IPA.messages.buttons.remove
+        }).appendTo(li);
+
+        $('<input/>', {
+            'type': 'button',
+            'name': 'add',
+            'value': IPA.messages.buttons.enroll
+        }).appendTo(li);
     };
 
     that.setup = function(container) {
@@ -862,16 +883,15 @@ IPA.association_facet = function (spec) {
         that.table.setup(span);
 
         // replacing generic buttons with IPA.button and setting click handler
-        var action_panel = that.get_action_panel();
 
-        var button = $('input[name=remove]', action_panel);
+        var button = $('input[name=remove]', that.entity_header.buttons);
         button.replaceWith(IPA.action_button({
             'label': button.val(),
             'icon': 'ui-icon-trash',
             'click': function() { that.show_remove_dialog(); }
         }));
 
-        button = $('input[name=add]', action_panel);
+        button = $('input[name=add]', that.entity_header.buttons);
         button.replaceWith(IPA.action_button({
             'label': button.val(),
             'icon': 'ui-icon-plus',
@@ -1015,7 +1035,9 @@ IPA.association_facet = function (spec) {
     that.refresh = function() {
 
         function on_success(data, text_status, xhr) {
-
+            if (that.pkey){
+                that.entity_header.set_pkey(that.pkey);
+            }
             that.table.empty();
 
             var pkeys = data.result.result[that.name];
diff --git a/install/ui/automount.js b/install/ui/automount.js
index ca13b72d..527fed2d 100644
--- a/install/ui/automount.js
+++ b/install/ui/automount.js
@@ -34,7 +34,7 @@ IPA.entity_factories.automountlocation = function() {
         }).
         details_facet({sections:[{
             name:'identity',
-            label: IPA.messages.objects.automountlocation.identity,
+            label: IPA.messages.details.identity,
             fields:['cn']
         }]}).
         standard_association_facets().
diff --git a/install/ui/details.js b/install/ui/details.js
index 590d775a..1d653c23 100644
--- a/install/ui/details.js
+++ b/install/ui/details.js
@@ -405,7 +405,6 @@ IPA.details_facet = function(spec) {
 
         that.facet_setup(container);
 
-        var button = $('input[name=reset]', that.container);
         that.reset_button = IPA.action_button({
             'label': 'Reset',
             'icon': 'ui-icon-refresh',
@@ -414,10 +413,8 @@ IPA.details_facet = function(spec) {
                 that.reset();
                 return false;
             }
-        });
-        button.replaceWith(that.reset_button);
+        }).appendTo(that.entity_header.buttons);
 
-        button = $('input[name=update]', that.container);
         that.update_button = IPA.action_button({
             'label': 'Update',
             'icon': 'ui-icon-check',
@@ -426,8 +423,7 @@ IPA.details_facet = function(spec) {
                 that.update();
                 return false;
             }
-        });
-        button.replaceWith(that.update_button);
+        }).appendTo(that.entity_header.buttons);
 
         var details = $('div[name=details]', that.container);
 
@@ -514,7 +510,7 @@ IPA.details_facet = function(spec) {
             section.load(record);
         }
         if (that.pkey){
-            $('h1 #headerpkey',that.container).html(that.pkey+": ");
+            that.entity_header.set_pkey(that.pkey);
         }
     }
 
diff --git a/install/ui/dns.js b/install/ui/dns.js
index 637b7344..f52a0642 100644
--- a/install/ui/dns.js
+++ b/install/ui/dns.js
@@ -26,6 +26,10 @@
 /* DNS */
 IPA.entity_factories.dnszone = function() {
 
+    if (!IPA.dns_enabled){
+        throw "DNS not enabled on server";
+    }
+
     return  IPA.entity_builder().
         entity('dnszone').
         search_facet({
@@ -50,6 +54,7 @@ IPA.entity_factories.dnszone = function() {
         facet({
             factory: IPA.records_facet,
             'name': 'records',
+            'facet_group':'Member',
             'label': IPA.metadata.objects.dnsrecord.label
         }).
         standard_association_facets().
@@ -356,23 +361,21 @@ IPA.records_facet = function (spec){
             'click': function(){refresh();}
         }).appendTo(control_span);
 
-        var action_panel = that.get_action_panel();
 
-        var button = $('input[name=remove]', action_panel);
+        var buttons =  that.entity_header.buttons;
+
+        var button = $('input[name=remove]', buttons);
         that.remove_button = IPA.action_button({
             label: IPA.messages.buttons.remove,
             icon: 'ui-icon-trash',
             click: function(){ delete_records(records_table); }
-        });
-        button.replaceWith(that.remove_button);
+        }).appendTo(buttons);
 
-        button = $('input[name=add]', action_panel);
         that.add_button = IPA.action_button({
             label: IPA.messages.buttons.add,
             icon: 'ui-icon-plus',
             click: add_click
-        });
-        button.replaceWith(that.add_button);
+        }).appendTo(buttons);
 
         div.append('<span class="records-buttons"></span>');
 
diff --git a/install/ui/entitle.js b/install/ui/entitle.js
index 4ef90afe..1b434d3f 100644
--- a/install/ui/entitle.js
+++ b/install/ui/entitle.js
@@ -259,11 +259,14 @@ IPA.entitle.search_facet = function(spec) {
 
     var that = IPA.search_facet(spec);
 
-    that.create_action_panel = function(container) {
+    that.setup = function(container) {
+
 
-        that.facet_create_action_panel(container);
+        that.search_facet_setup(container);
 
-        var buttons = $('.action-controls', container);
+        var buttons = that.entity_header.buttons;
+
+        $('a', buttons).remove();
 
         that.register_buttons = $('<span/>', {
             style: 'display: none;'
@@ -296,15 +299,8 @@ IPA.entitle.search_facet = function(spec) {
             name: 'import',
             value: 'Import'
         }).appendTo(that.consume_buttons);
-    };
-
-    that.setup = function(container) {
-
-        that.search_facet_setup(container);
-
-        var action_panel = that.get_action_panel();
 
-        var button = $('input[name=register_online]', action_panel);
+        var button = $('input[name=register_online]', that.entity_header.buttons);
         that.register_online_button = IPA.action_button({
             label: 'Register',
             icon: 'ui-icon-plus',
@@ -315,7 +311,7 @@ IPA.entitle.search_facet = function(spec) {
         });
         button.replaceWith(that.register_online_button);
 
-        button = $('input[name=register_offline]', action_panel);
+        button = $('input[name=register_offline]', that.entity_header.buttons);
         that.register_offline_button = IPA.action_button({
             label: 'Import',
             icon: 'ui-icon-plus',
@@ -326,7 +322,7 @@ IPA.entitle.search_facet = function(spec) {
         });
         button.replaceWith(that.register_offline_button);
 
-        button = $('input[name=consume]', action_panel);
+        button = $('input[name=consume]', that.entity_header.buttons);
         that.consume_button = IPA.action_button({
             label: 'Consume',
             icon: 'ui-icon-plus',
@@ -338,7 +334,7 @@ IPA.entitle.search_facet = function(spec) {
         });
         button.replaceWith(that.consume_button);
 
-        button = $('input[name=import]', action_panel);
+        button = $('input[name=import]', that.entity_header.buttons);
         that.import_button = IPA.action_button({
             label: 'Import',
             icon: 'ui-icon-plus',
diff --git a/install/ui/entity.js b/install/ui/entity.js
index 39ce5735..9a9f05f2 100644
--- a/install/ui/entity.js
+++ b/install/ui/entity.js
@@ -6,7 +6,7 @@
  *    Endi S. Dewata <edewata@redhat.com>
  *    Adam Young <ayoung@redhat.com>
  *
- * Copyright (C) 2010 Red Hat
+ * Copyright (C) 2010-2011 Red Hat
  * see file 'COPYING' for use and warranty information
  *
  * This program is free software; you can redistribute it and/or modify
@@ -43,6 +43,8 @@ IPA.facet = function (spec) {
     that.dialogs = [];
     that.dialogs_by_name = {};
 
+    that.facet_group = spec.facet_group;
+
     that.__defineGetter__('entity_name', function() {
         return that._entity_name;
     });
@@ -51,8 +53,6 @@ IPA.facet = function (spec) {
         that._entity_name = entity_name;
     });
 
-    that.create_action_panel = IPA.facet_create_action_panel;
-
     that.get_dialog = function(name) {
         return that.dialogs_by_name[name];
     };
@@ -79,6 +79,9 @@ IPA.facet = function (spec) {
 
     function setup(container) {
         that.container = container;
+        that.entity_header.facet_tabs.css('visibility','visible');
+        $('#back_to_search', that.entity_header.search_bar).
+            css('display','inline');
     }
 
     function load() {
@@ -92,13 +95,8 @@ IPA.facet = function (spec) {
         return $('.content', that.container);
     };
 
-    that.get_action_panel = function() {
-        return $('.action-panel', that.container);
-    };
-
     // methods that should be invoked by subclasses
     that.facet_init = that.init;
-    that.facet_create_action_panel = that.create_action_panel;
     that.facet_create_content = that.create_content;
     that.facet_setup = that.setup;
 
@@ -106,13 +104,25 @@ IPA.facet = function (spec) {
 };
 
 
+IPA.fetch_facet_group = function (name,attribute_member){
+    var relationships = IPA.metadata.objects[name].relationships;
+    var relationship = relationships[attribute_member];
+    if (!relationship){
+        relationship = ['Member', '', 'no_'];
+    }
+    var facet_group = relationship[0];
+    return facet_group;
+};
+
+
 IPA.entity = function (spec) {
 
     spec = spec || {};
 
     var that = {};
+    that.metadata = spec.metadata;
     that.name = spec.name;
-    that.label = spec.label;
+    that.label = spec.label || spec.metadata.label || spec.name;
 
     that.setup = spec.setup || IPA.entity_setup;
 
@@ -123,6 +133,10 @@ IPA.entity = function (spec) {
     that.facets_by_name = {};
 
     that.facet_name = null;
+    /*TODO:  Facet_groups are currently unordered.  If we need to
+     * maintain order, we will introduce a class that keeps the order
+     in an array, while maintaining the dictionary for direct access.*/
+    that.facet_groups = {};
 
     that.autogenerate_associations = false;
 
@@ -150,6 +164,24 @@ IPA.entity = function (spec) {
     }
 
     that.get_facet = function(name) {
+        if (name === 'default'){
+            var facet_group;
+            var facet;
+            if (that.facet_groups["Member"]){
+                facet_group = that.facet_groups["Member"];
+                facet =  facet_group[0];
+            } else if (that.facets_by_name.details){
+                facet= that.facets_by_name.details;
+            }else  if (that.facet_groups["Member Of"]){
+                facet_group = that.facet_groups["Member Of"];
+                facet =  facet_group[0];
+            }
+            if (facet){
+                name = facet.name;
+                return facet;
+            }
+        }
+
         return that.facets_by_name[name];
     };
 
@@ -157,14 +189,18 @@ IPA.entity = function (spec) {
         facet.entity_name = that.name;
         that.facets.push(facet);
         that.facets_by_name[facet.name] = facet;
+        
+        if (facet.facet_group){
+            if (!that.facet_groups[facet.facet_group]){
+                that.facet_groups[facet.facet_group] = [];
+            }
+            that.facet_groups[facet.facet_group].push(facet);
+        }
         return that;
     };
 
     that.facet = function(facet) {
-        facet.entity_name = that.name;
-        that.facets.push(facet);
-        that.facets_by_name[facet.name] = facet;
-        return that;
+        return that.add_facet(facet);
     };
 
     that.create_association_facet = function(attribute_member, other_entity, label, facet_group) {
@@ -192,7 +228,7 @@ IPA.entity = function (spec) {
 
     that.create_association_facets = function() {
 
-        var attribute_members = IPA.metadata.objects[that.name].attribute_members;
+        var attribute_members = that.metadata.attribute_members;
 
         for (var attribute_member in attribute_members) {
 
@@ -204,16 +240,12 @@ IPA.entity = function (spec) {
             var other_entities = attribute_members[attribute_member];
 
             for (var j = 0; j < other_entities.length; j++) {
+
                 var other_entity = other_entities[j];
                 var label = IPA.metadata.objects[other_entity].label;
 
-                var relationships = IPA.metadata.objects[that.name].relationships;
-
-                var relationship = relationships[attribute_member];
-                if (!relationship)
-                    relationship = ['Member', '', 'no_'];
-                var facet_group = relationship[0];
-
+                var facet_group =
+                    IPA.fetch_facet_group(that.name,attribute_member);
                 that.create_association_facet(
                     attribute_member, other_entity, label, facet_group);
             }
@@ -225,10 +257,6 @@ IPA.entity = function (spec) {
 
     that.init = function() {
 
-        if (!that.label) {
-            that.label = IPA.metadata.objects[that.name] ? IPA.metadata.objects[that.name].label : that.name;
-        }
-
         if (that.autogenerate_associations) {
             that.create_association_facets();
         }
@@ -262,37 +290,29 @@ IPA.entity_setup = function (container) {
     IPA.current_entity = this;
     var facet_name = IPA.current_facet(entity);
 
-
     var facet = entity.get_facet(facet_name);
     if (!facet) return;
 
     if (IPA.entity_name == entity.name) {
-        if (entity.facet_name == facet_name) {
+        if (entity.facet_name == facet.name) {
             if (facet.new_key   && (!facet.new_key())) return;
         } else {
-            entity.facet_name = facet_name;
+            entity.facet_name = facet.name;
         }
     } else {
         IPA.entity_name = entity.name;
     }
 
-    container.empty();
-
     container.attr('title', entity.name);
+    if (!entity.header){
+        entity.header = IPA.entity_header({entity:entity,container:container});
+    }
+    facet.entity_header = entity.header;
 
-    var action_panel = $('<div/>', {
-        'class': 'action-panel'
-    }).appendTo(container);
-
-    facet.create_action_panel(action_panel);
-
-    var content = $('<div/>', {
-        'class': 'content'
-    }).appendTo(container);
-
-    facet.create_content(content);
-
-    facet.setup(container);
+    entity.header.reset();
+    facet.create_content(facet.entity_header.content);
+    facet.setup(facet.entity_header.content);
+    entity.header.select_tab();
     facet.refresh();
 };
 
@@ -309,9 +329,6 @@ IPA.get_nested_tab_label = function(entity_name){
 
 };
 
-
-
-
 /*Returns the entity requested, as well as:
   any nested tabs underneath it or
   its parent tab and the others nested at the same level*/
@@ -319,57 +336,42 @@ IPA.get_nested_tab_label = function(entity_name){
 IPA.nested_tabs = function(entity_name){
 
     var siblings = [];
-    var nested_index;
+    var i;
+    var i2;
     var nested_entities;
-    var label;
+    var sub_i;
+    var sub_tab;
+
+    var key = entity_name;
+    function push_sibling(sibling){
+        siblings.push (sibling);
+        IPA.nested_tab_labels[key] = sub_tab;
+    }
+
+
     if (!IPA.tab_set) {
         siblings.push(entity_name);
         return siblings;
     }
 
-    for (var top_tab_index = 0;
-         top_tab_index < IPA.tab_set.length;
-         top_tab_index += 1){
-        var top_tab =  IPA.tab_set[top_tab_index];
-        for (var subtab_index = 0;
-             subtab_index < top_tab.children.length;
-             subtab_index += 1){
-            if(top_tab.children[subtab_index].name){
-                if (top_tab.children[subtab_index].name === entity_name){
-                    siblings.push(entity_name);
-                    IPA.nested_tab_labels[entity_name] =
-                        top_tab.children[subtab_index].label;
-                    if (top_tab.children[subtab_index].children){
-                        label = top_tab.children[subtab_index].label;
-                        nested_entities = top_tab.children[subtab_index].children;
-                        for ( nested_index = 0;
-                              nested_index < nested_entities.length;
-                              nested_index += 1){
-                            siblings.push (nested_entities[nested_index].name);
-                            IPA.nested_tab_labels[entity_name] =
-                                top_tab.children[subtab_index].label;
-                        }
-
-                    }
-                }else{
-                    if (top_tab.children[subtab_index].children){
-                        nested_entities = top_tab.children[subtab_index].children;
-                        for (nested_index = 0;
-                             nested_index < nested_entities.length;
-                             nested_index += 1){
-                            if (nested_entities[nested_index].name === entity_name){
-                                siblings.push(top_tab.children[subtab_index].name);
-                                IPA.nested_tab_labels[entity_name] =
-                                    top_tab.children[subtab_index].label;
-
-                                for (var nested_index2 = 0;
-                                     nested_index2 < nested_entities.length;
-                                     nested_index2 += 1){
-                                    siblings.push(nested_entities[nested_index2].name);
-                                IPA.nested_tab_labels[nested_entities[nested_index2].name] =
-                                    top_tab.children[subtab_index].label;
-
-                                }
+    for (var top_i = 0; top_i < IPA.tab_set.length; top_i += 1){
+        var top_tab =  IPA.tab_set[top_i];
+        for (sub_i = 0; sub_i < top_tab.children.length; sub_i += 1){
+            sub_tab = top_tab.children[sub_i];
+            nested_entities = sub_tab.children;
+            if (sub_tab.name === entity_name){
+                push_sibling(entity_name);
+            }
+            if (sub_tab.children){
+                for (i = 0; i < nested_entities.length; i += 1){
+                    if (sub_tab.name === entity_name){
+                        push_sibling(nested_entities[i].name);
+                    }else{
+                        if (nested_entities[i].name === entity_name){
+                            push_sibling(sub_tab.name);
+                            for (i2 = 0; i2 < nested_entities.length; i2 += 1){
+                                key = nested_entities[i].name;
+                                push_sibling(nested_entities[i2].name);
                             }
                         }
                     }
@@ -383,22 +385,109 @@ IPA.nested_tabs = function(entity_name){
 IPA.selected_icon = '<span class="ipa-icon">&#x25B6;</span>';
 IPA.back_icon = '<span class="ipa-icon">&#x25C0;</span>';
 
-IPA. facet_create_action_panel = function(container) {
 
-    function build_link(other_facet,label){
+IPA.entity_header = function(spec){
+    var entity = spec.entity;
+    var container = spec.container;
+
+    var that = {};
+    that.entity = entity;
+
+    function pkey(){
+        that.pkey_field = $("<input type='hidden' id='pkey' />");
+        return that.pkey_field;
+    }
+
+    function select_tab(){
+        $(that.facet_tabs).find('a').removeClass('selected');
+        var facet_name = $.bbq.getState(entity.name + '-facet', true);
+
+        if (!facet_name) return;
+
+        if (facet_name === 'default'){
+            that.facet_tabs.find('a:first').addClass('selected');
+        }else{
+            that.facet_tabs.find('a#' + facet_name ).addClass('selected');
+        }
+
+    }
+    that.select_tab = select_tab;
+
+    function set_pkey(val){
+        that.pkey_field.val(val);
+        that.title.empty();
+        var title = $('<h3/>',{ text: entity.metadata.label+": "});
+        title.append ($('<span/>',{text:val}));
+        that.title.append(title);
+    }
+    that.set_pkey = set_pkey;
+
+    function title(){
+        that.title =
+            $("<div/>",
+              {
+                  'class':'entity-title'
+              });
+
+        var title = $('<h3/>',{ text: entity.metadata.label});
+        that.title.append(title);
+
+        return that.title;
+    }
+
+    function buttons(){
+        that.buttons = $("<span class='action-controls' />");
+        return that.buttons;
+
+    }
+    function search_bar(){
+        that.search_bar =
+            $("<span class='entity-search'/>");
+
+        if (entity.facets_by_name.search){
+            that.search_bar.prepend(
+                $('<span />',{
+                    id:'back_to_search',
+                    "class":"input_link",
+                    click: function(){
+                        if($(this).hasClass('entity-facet-disabled')){
+                            return false;
+                        }
+
+                        IPA.switch_and_show_page(entity.name, 'search');
+                        $(that.facet_tabs).find('a').removeClass('selected');
+                        return false;
+
+                    }
+                }).
+                    append(IPA.back_icon + '  ' +
+                           IPA.messages.buttons.back_to_list+' '));
+        }
+
+        return that.search_bar;
+    }
+
+    function facet_link(other_facet){
+        var entity_name = that.entity.name;
+        var other_facet_name = other_facet.name;
         var li = $('<li/>', {
-            "class" : other_facet.display_class,
             title: other_facet.name,
-            text: label,
+            html: $('<a />',{
+                text: other_facet.label,
+                id: other_facet_name
+            }),
             click: function(entity_name, other_facet_name) {
                 return function() {
                     if($(this).hasClass('entity-facet-disabled')){
                         return false;
                     }
-                    var this_pkey = $('input[id=pkey]', container).val();
+                    var this_pkey = that.pkey_field.val();
                     IPA.switch_and_show_page(
                         entity_name, other_facet_name,
                         this_pkey);
+                    $(that.facet_tabs).find('a').removeClass('selected');
+                    $(this).find('a').addClass('selected');
+
                     return false;
                 };
             }(entity_name, other_facet_name)
@@ -406,135 +495,72 @@ IPA. facet_create_action_panel = function(container) {
         return li;
     }
 
-    var that = this;
-    var entity_name = that.entity_name;
-    var panel_title = IPA.metadata.objects[entity_name].label;
-    var nested_tabs = IPA.nested_tabs(entity_name);
 
-    if (nested_tabs.length > 1){
-        panel_title = IPA.get_nested_tab_label(entity_name);
+    function facet_group(label){
+        var facets= entity.facet_groups[label];
+        if (facets){
+            that.facet_tabs.append(tab_section(label,  facets));
+        }
     }
 
-    $('<h3>', {
-        text: panel_title
-    }).appendTo(container);
-
-    /*Note, for debugging purposes, it is useful to set var pkey_type = 'text';*/
-    var pkey_type = 'hidden';
-    $('<input/>', {
-        'type': pkey_type,
-        id:'pkey',
-        name:'pkey'
-    }).appendTo(container);
-
-    var ul = $('<ul/>', {'class': 'action'}).appendTo(container);
-    var entity = IPA.get_entity(entity_name);
-    var facet_name =  IPA.current_facet(entity);
-    var other_facet = entity.facets[0];
-    var other_facet_name = other_facet.name;
-    var main_facet = build_link(other_facet,other_facet.label);
-
-    for (var nested_index = 0 ;
-         nested_index < nested_tabs.length;
-         nested_index += 1){
-        if (nested_tabs[nested_index] === entity_name){
-            /*assume for now that entities with only a single facet
-              do not have search*/
-            if (entity.facets.length > 0 ){
-                if ( entity.facets[0].name === IPA.current_facet( entity)){
-                    if (nested_tabs.length > 1 ){
-                        main_facet.html(IPA.selected_icon +
-                                IPA.metadata.objects[nested_tabs[nested_index]].label);
-
-                        main_facet.addClass('entity-facet-selected');
-                        main_facet.appendTo(ul);
-                    }
-                    ul.append($('<li><span class="action-controls"/></li>'));
-                } else {
-                        main_facet.html(
-                            $('<span />',{
-                                "class":"input_link"
-                            }).
-                                append(IPA.back_icon + '  '+IPA.messages.buttons.back_to_list+' '));
-                    main_facet.addClass('back-to-search');
-                    main_facet.appendTo(ul);
-                }
-                ul.append($('<li><hr/></li>'));
-            }
-            var facet_groups = {};
-            var li;
-            for (var i=1; i<entity.facets.length; i++) {
-                other_facet = entity.facets[i];
-                other_facet_name = other_facet.name;
-
-                if (other_facet.facet_group) {
-                    var facet_group = other_facet.facet_group;
-                    if (!facet_groups[facet_group]) {
-                        li = $('<li/>', {
-                            'class': 'entity-facet entity-facet-relation-label',
-                            'text': other_facet.facet_group,
-                            'title': other_facet.facet_group
-                        });
-                        ul.append(li);
-                        facet_groups[facet_group] = li;
-                    }
-                    li = facet_groups[facet_group];
-                    var link =  build_link(other_facet, other_facet.label);
-                    link.addClass('facet-group-member');
-                    li.after(link );
-                    /*
-                      If we are on the current facet, we make the text black, non-clickable,
-                      add an icon and make sure the action controls are positioned underneath it.
-                     */
-                    if ( other_facet.name === IPA.current_facet( entity)){
-                        var text = link.text();
-                        link.text('');
-                        link.append($('<ul>').
-                                    append($('<li />',{
-                                        'class': 'association-facet-selected',
-                                        html:  IPA.selected_icon +  text
-                                        })).
-                                    append($('<li/>',{
-                                        html:$('<span />',{
-                                            'class':"action-controls"
-                                        })
-                                    })));
-                    }
-                    facet_groups[facet_group] = li.next();
-                } else {
-                    var innerlist = $('<ul/>').appendTo(ul);
-                    var facet_link = build_link(other_facet, other_facet.label);
-                    innerlist.append(facet_link);
-                    if ( other_facet.name === IPA.current_facet( entity)){
-
-                        text = facet_link.text();
-                        facet_link.html(IPA.selected_icon +  text);
-                        facet_link.addClass('entity-facet-selected');
-                        innerlist.append($('<li class="entity-facet"><span class="action-controls"  /></li>'));
-                    }
-                }
-            }
-        }else{
-            $('<li/>', {
-                title: nested_tabs[nested_index],
-                text: IPA.metadata.objects[nested_tabs[nested_index]].label,
-                "class": "search-facet",
-                click: function() {
-                    var state = {};
-                    state[nested_tabs[0]+'-entity'] =
-                        this.title;
-                    IPA.nav.push_state(state);
-                    return false;
-                }
-            }).appendTo(ul);
+    function tab_section(label, facets){
+        var tab_section = $("<span class='entity-tabs-section'/>").
+            append("<label>"+label+"</label>");
+
+        var ul = $("<ul class='entity-tabs'/>").appendTo(tab_section);
+
+        var i;
+        for (i = 0; i < facets.length; i += 1){
+            var other_facet = facets[i];
+            ul.append(facet_link(other_facet));
         }
+        return tab_section;
     }
-    /*When we land on the search page, disable all facets
-          that require a pkey until one is selected*/
-    if (facet_name === 'search'){
-        $('.entity-facet', container).addClass('entity-facet-disabled');
+
+    function facet_tabs(){
+        that.facet_tabs =   $("<div class='entity-tabs'/>");
+
+        facet_group("Member");
+
+        if (entity.facets_by_name.details){
+            that.facet_tabs.append(
+                tab_section('Settings',[entity.facets_by_name.details]));
+        }
+        facet_group("Member Of");
+        facet_group("Managed by");
+
+        return that.facet_tabs;
+    }
+    function content(){
+        that.content = $("<div class='content'/>");        return that.content;
+    }
+
+    function entity_container() {
+        that.entity_container =
+            $("<div/>",{
+                "class":'entity-container',
+                id: 'entity-container-' + entity.name
+            }).
+            append(facet_tabs()).
+            append(content());
+        return that.entity_container;
+    }
+
+    function reset(){
+        that.buttons.empty();
+        that.content.empty();
     }
-    return container;
+    that.reset = reset;
+
+    that.header = $("<div class='entity-header'/>").
+        append(title(entity)).
+        append(buttons()).
+        append(pkey()).
+        append(search_bar()).
+        append(entity_container());
+    container.append(that.header);
+
+    return that;
 };
 
 IPA.entity_builder = function(){
@@ -579,13 +605,21 @@ IPA.entity_builder = function(){
         }
     }
 
-    that.entity = function(spec) {
-        if (spec instanceof Object) {
-            var factory = spec.factory || IPA.entity;
-            entity = factory(spec);
+    that.entity = function(param) {
+        var spec;
+        var factory = IPA.entity;
+        if (param instanceof Object) {
+            factory = param.factory || IPA.entity;
+            spec = param;
         } else {
-            entity = IPA.entity({ name: spec });
+            spec = { name: param  };
+        }
+        spec.metadata = spec.metadata || IPA.metadata.objects[spec.name];
+        if (!spec.metadata){
+            throw "Entity not supported by server.";
         }
+
+        entity = factory(spec);
         return that;
     };
 
@@ -624,6 +658,7 @@ IPA.entity_builder = function(){
     };
 
     that.facet = function(spec) {
+        spec.entity_name  = entity.name;
         facet = spec.factory(spec);
         entity.facet(facet);
         return that;
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 2b205e92..f7e3d224 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -50,7 +50,7 @@ body{
 
 .input_link span.ui-icon {
     -moz-border-radius: 0.3em;
-	-webkit-border-radius: 0.3em;
+        -webkit-border-radius: 0.3em;
     border: 1px solid #B8B8B8;
     margin: -0.9em 0.4em 0em -0.3em;
     position: absolute;
@@ -60,7 +60,7 @@ body{
 
 .input_link_disabled span.ui-icon {
     -moz-border-radius: 0.3em;
-	-webkit-border-radius: 0.3em;
+        -webkit-border-radius: 0.3em;
     border: 1px solid #B8B8B8;
     margin: -0.9em 0.4em 0em -0.3em;
     position: absolute;
@@ -71,8 +71,8 @@ body{
 
 
 .ipa-icon {
-	font-size: 0.7em;
-	padding-right: 0.3em;
+        font-size: 0.7em;
+        padding-right: 0.3em;
 }
 
 /*  ----  Header  ----  */
@@ -124,6 +124,8 @@ div.tabs {
         background: url("centered-bg.png") no-repeat scroll 0 8.4em transparent;
 }
 
+
+
 ul#viewtype {
     padding-left: 2em;
 }
@@ -145,14 +147,6 @@ ul#viewtype li a {
     font-weight: normal;
 }
 
-div.content div.content-buttons {
-    float: right;
-    margin-right: 1.5em;
-}
-
-div.content div.content-buttons img {
-    border: 0;
-}
 
 h1 {
     font-family: "FreeWayBold","Liberation Sans", Arial, sans-serif;
@@ -160,18 +154,9 @@ h1 {
     font-weight: normal;
     color: #555555;
     text-transform: uppercase;
-	text-shadow: 1px 1px 0 #FFFFFF;
+        text-shadow: 1px 1px 0 #FFFFFF;
 }
 
-.entity-container h1{
-    -moz-border-radius: 0.5em 0.5em 0 0;
-	-webkit-border-radius: 0.5em 0.5em 0 0;
-    background: -moz-linear-gradient(center top , #EEEEEE, #DFDFDF) repeat scroll 0 0 transparent;
-    background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#DFDFDF));
-    padding: 0.5em 0.9em;
-    position: relative;
-    margin-right: 0em;
-}
 
 h2 {
     font-family: "FreeWayBold","Liberation Sans", Arial, sans-serif;
@@ -187,9 +172,9 @@ h2 {
 .section-expand{
     float:left;
     -moz-border-radius: 0.3em;
-	-webkit-border-radius: 0.3em;
+        -webkit-border-radius: 0.3em;
     background-color: -moz-linear-gradient(top,  #959595,  #5e5e5e);
-	background: -webkit-gradient(linear, left top, left bottom, from(#959595), to(#5e5e5e));
+        background: -webkit-gradient(linear, left top, left bottom, from(#959595), to(#5e5e5e));
     border: 1px solid #b8b8b8;
     color: #fff;
     margin-right: 0.5em;
@@ -239,7 +224,7 @@ dl.entryattrs dt {
 dl.entryattrs dd {
     float: left;
     padding-bottom: 0.8em;
-	margin-left: 0;
+        margin-left: 0;
 }
 
 dl.entryattrs dd.first {
@@ -283,18 +268,18 @@ dl.aci-target dd {
 }
 
 dl.aci-target dd.other {
-	margin-left: -1em;
+        margin-left: -1em;
 }
 
 dl.aci-target dd.first {
-	margin-left: 8.5em;
-	margin-top: -3.7em;
-	padding-bottom: 2em;
+        margin-left: 8.5em;
+        margin-top: -3.7em;
+        padding-bottom: 2em;
 
 }
 
 dl.aci-target dd.other {
-	padding-left: 0.7em;
+        padding-left: 0.7em;
 }
 
 
@@ -307,37 +292,37 @@ dl.aci-target input {
 }
 
 #group_filter {
-	margin-right: 2em;
+        margin-right: 2em;
 }
 
 #aci_by_filter {
-	margin-right: 1em;
+        margin-right: 1em;
 }
 
 #aci_by_query {
-	margin-right: 1em;
+        margin-right: 1em;
 }
 
 #aci_by_group {
-	margin-right: 1em;
+        margin-right: 1em;
 }
 
 #aci_by_type {
-	margin-right: 1em;
-	margin-top: 2.2em;
+        margin-right: 1em;
+        margin-top: 2.2em;
 }
 
 #aci_attributes_table {
-	overflow-x: hidden;
-	width: 46em;
+        overflow-x: hidden;
+        width: 46em;
 }
 
 #memberof-entity-select {
-	margin-right: 1em;
+        margin-right: 1em;
 }
 
 #group-entity-select {
-	margin-right: 1em;
+        margin-right: 1em;
 }
 
 span.attrhint {
@@ -357,7 +342,7 @@ span.attrhint {
     border: none;
     background-image: url("Mainnav-background.png");
     -moz-border-radius: 0;
-	-webkit-border-radius: 0;
+        -webkit-border-radius: 0;
     height: 3.5em;
 }
 
@@ -394,21 +379,21 @@ span.attrhint {
 }
 
 .ui-dialog .ui-dialog-titlebar {
-	padding: 0.5em 1em;
-	position: relative;
+        padding: 0.5em 1em;
+        position: relative;
 }
 
 .ui-widget-content a {
     text-decoration: none;
     color: #1d85d5;
     font-weight: normal;
-	text-transform: none;
+    text-transform: none;
 }
 
 .ui-widget-header {
     background: -moz-linear-gradient(center top , #225314, #1c400a) repeat scroll 0 0 transparent;
     background: -webkit-gradient(linear, left top, left bottom, from(#225314), to(#1c400a));
-	border: 1px solid #319016;
+        border: 1px solid #319016;
     font-weight: bold;
 }
 
@@ -438,9 +423,9 @@ span.attrhint {
 
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
     -moz-border-radius: .3em;
-	-webkit-border-radius: .3em;
+        -webkit-border-radius: .3em;
      background: -moz-linear-gradient(top,  #959595,  #5e5e5e);
-	 background: -webkit-gradient(linear, left top, left bottom, from(#959595), to(#5e5e5e));
+         background: -webkit-gradient(linear, left top, left bottom, from(#959595), to(#5e5e5e));
      border: 1px solid #777777;
      color: #fff;
      font-weight: normal;
@@ -463,45 +448,22 @@ span.ui-icon-search {
         margin-top: -.7em !important;
 }
 
-[title="Delete"] {
-        margin-left: 1em !important;
-}
-
-[title="Add"] {
-        margin-left: 1em !important;
-}
-
-[title="Register"] {
-        margin-left: 1em !important;
-}
-
-[title="Consume"] {
-        margin-left: 1em !important;
-}
-
-[title="Import"] {
-        margin-left: 1em !important;
-}
-
-[title="mail"] {
-        margin-top: 0em !important;
-}
 
 [title=">>"] {
         display: block;
-		margin-top: 1em !important;
+                margin-top: 1em !important;
 }
 
 
 .tabs1 .ui-tabs-nav li {
     -moz-border-radius: 0 !important;
-	-webkit-border-radius: 0 !important;
+        -webkit-border-radius: 0 !important;
     background-image: url("Mainnav-offtab.png");
     margin: 0 0.2em;
     border-width: 0;
     text-align: center;
     vertical-align:baseline;
-	border: 1px solid #A0A0A0;
+        border: 1px solid #A0A0A0;
  }
 
 .tabs1 .ui-tabs-nav li.ui-tabs-selected {
@@ -513,7 +475,7 @@ span.ui-icon-search {
 
 .tabs1 .ui-tabs-nav li a {
     -moz-border-radius: 0 !important;
-	-webkit-border-radius: 0 !important;
+        -webkit-border-radius: 0 !important;
     font-family: "FreeWayBold", "Liberation Sans", Arial, Sans;
     width: 5em;
     padding: none;
@@ -521,7 +483,7 @@ span.ui-icon-search {
     margin: 0 auto;
     text-align:center;
     font-size:1.5em;
-	text-shadow: 1px 1px 0 #FFFFFF;
+        text-shadow: 1px 1px 0 #FFFFFF;
 }
 
 
@@ -538,7 +500,6 @@ span.ui-icon-search {
     border-width: 0;
     padding: 0 0 0 0;
     background-color: transparent;
-    overflow-x: hidden;
 }
 
 .tabs2 .ui-tabs-nav {
@@ -553,14 +514,14 @@ span.ui-icon-search {
     margin: 0;
     background: none repeat scroll 0 0 transparent !important;
     color: white;
-	border: none;
+        border: none;
 }
 
 .tabs2 .ui-tabs-nav li.ui-tabs-selected  {
     background: url("nav-arrow.png") no-repeat scroll center 2.2em transparent !important;
     height: 3.1em;
-	border: none;
-	margin: 0;
+        border: none;
+        margin: 0;
 }
 
 
@@ -568,12 +529,12 @@ span.ui-icon-search {
     width:auto;
     padding: 0.3em 0.8em ;
     -moz-border-radius: 2em !important;
-	-webkit-border-radius: 2em !important;
+        -webkit-border-radius: 2em !important;
     border-radius: 2em !important;
     color: #333333;
     font-size: 1em;
     font-family: "Liberation Sans", Arial, Sans;
-	margin: 0 0.3em;
+        margin: 0 0.3em;
 }
 
 .tabs2 .ui-tabs-nav li > a:link, span.main-nav-off >  a:visited {
@@ -584,7 +545,7 @@ span.ui-icon-search {
 .tabs2 .ui-tabs-nav li a:hover {
     background-color:#EEEEEE;
     color: #164304;
-	text-shadow: 1px 1px 0 #FFFFFF;
+        text-shadow: 1px 1px 0 #FFFFFF;
 
 }
 
@@ -601,134 +562,18 @@ span.main-separator{
     padding:0.1em;
 }
 
-
-
 /* Entity */
 
-.entity-container{
-    position: relative;
-    width: 80%;
-    margin: 0.06em 0.06em 0.06em 18.5em;
-    padding: 0.06em;
-    background: #e8e8e8;
-}
-
-.action-panel {
-    position: fixed;
-    height: 33em;
-    left: auto;
-    border: none;
-    float: none;
-    margin-top: 1.6em;
-    margin-left: -16.5em;
-    margin-right: 0;
-    padding-left: 0;
-    width: 18em;
-    background-image:url("panel-background.png");
-    background-repeat:no-repeat;
-    background-position:right;
-}
-
-.action-panel h3 {
-    font-family: "FreeWayBold", "Liberation Sans", Arial, sans-serif;
-    color: #333333;
-    margin-bottom: .8em;
-    padding: 1em 0 0.5em 0em;
-    border-bottom: 1px solid #c9c9c9;
-    text-transform: uppercase;
-    font-size: 1.6em;
-        font-weight: normal;
-}
-
-.action-panel ul {
-    list-style-type:none;
-    padding-left: .5em;
-        padding-top: 0.5em;
-}
-
-.action-panel li {
-    font-family: "FreeWayBold", "Liberation Sans", Arial, sans-serif;
-    font-size: 1.1em;
-    color: #1d85d5;
-    list-style-type: none;
-    min-height: 2.1em;
-    padding: none;
-}
-
-.action-panel li.search-facet {
-    font-family: "FreeWayBold", "Liberation Sans", Arial, Sans;
-    color: #1D85D5;
-    cursor: pointer;
-    text-transform: uppercase;
-    font-size: 1.2em;
-}
-
-.action-panel li.back-to-search {
-    margin-left: -1.3em;
-    margin-top: 1.2em;
-}
-
-.action-panel li.entity-facet {
-    font-family: "Freewaybold","Liberation Sans",Arial,sans-serif;
-    color: #1d85d5;
-    cursor: pointer;
-    margin-left: 0.4em;
-    text-transform: uppercase;
-}
-
-.action-panel li.entity-facet-selected {
-    font-family: "FreeWayBold", "Liberation Sans", Arial, Sans;
-    color: #565656;
-    text-transform: uppercase;
-    cursor: pointer;
-	margin-left: -0.5em;
-}
-
-.action-panel li.entity-facet-selected .ipa-icon {
-	color: #8a8a8a;
-}
-
-.action-panel li.association-facet-selected {
-	font-family: "Liberaton Sans",Arial,sans-serif;
-	color: #565656;
-	font-size: 1em;
-	margin-left: -1.4em;
-}
-
 
-.action-panel li.association-facet-selected .ipa-icon {
-	color: #8a8a8a;
-}
-
-.action-panel li.entity-facet-selected .action-controls {
-
-}
-
-.action-panel li.entity-facet-disabled {
-    display:none;
-}
-
-.action-panel li.entity-facet-relation-label {
-    font-family: "FreeWayBold", "Liberation Sans", Arial, Sans;
-    color: #8a8a8a;
-    cursor: default;
-    text-transform: uppercase;
-    margin-left:0.8em;
-}
-
-.action-panel li.facet-group-member {
-    font-family: "Liberaton Sans",Arial,sans-serif;
-	margin-left: 2em;
-	text-transform: none;
+.entity-container h1{
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    -moz-border-radius: 0.5em 0.5em 0 0;
+        -webkit-border-radius: 0.5em 0.5em 0 0;
+    background: -moz-linear-gradient(center top , #EEEEEE, #DFDFDF) repeat scroll 0 0 transparent;
+    background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#DFDFDF));
 }
 
-.action-panel li hr {
-        margin-top: 0.3em;
-        margin-left: 1em;
-        background-color: #FFFFFF !important;
-    border-left: medium none !important;
-    border-top: 1px solid #C9C9C9 !important;
-}
 
 .action-button {
     background: none;
@@ -741,17 +586,12 @@ a.action-button-disabled {
     color: gray;
     cursor: default;
 }
-.action-controls {
-    position: relative;
-    display:inline;
-}
 
 .content {
     font-size: 10px;
-    margin-top: 0.4em;
+    margin-top: 1.4em;
     float: left;
     min-width: 70em;
-	margin-left: 3em;
 }
 
 
@@ -759,10 +599,10 @@ a.action-button-disabled {
 
 .search-controls {
     -moz-border-radius: .7em .7em 0 0;
-	-webkit-border-radius: .7em .7em 0 0;
+        -webkit-border-radius: .7em .7em 0 0;
     height:2.5em;
     background: -moz-linear-gradient(top,  #eeeeee,  #dfdfdf);
-	background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dfdfdf));
+        background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dfdfdf));
     position: relative;
     padding: 1em 1.5em;
     margin-top: .8em;
@@ -801,13 +641,13 @@ a.action-button-disabled {
 .aci-attribute-table tbody{
     height:30em;
     overflow-x:hidden;
-	border-bottom: 1px solid #8a8a8a;
+        border-bottom: 1px solid #8a8a8a;
 }
 
 .aci-attribute-table th.aci-attribute-column{
     float: left;
-	width: 46.5em;
-	padding: 0.8em 0.5em;
+        width: 46.5em;
+        padding: 0.8em 0.5em;
 }
 
 .entity-views{
@@ -832,10 +672,6 @@ table.kerberos-key-status {
 
 .status-icon {
     vertical-align: bottom;
-#    width: auto;
-#    height: 1em;
-#    -webkit-border-radius: 0.5em;
-#    -moz-border-radius: 0.5em;
 }
 
 .status-valid {
@@ -895,7 +731,7 @@ dl.modal dd {
 }
 
 .ui-widget-content {
-	border:0;
+        border:0;
 }
 
 table.scrollable thead {
@@ -973,3 +809,80 @@ table.scrollable tbody {
     float: right;
     padding-right: 1.5em;
 }
+
+div.entity-header {
+    width:100%px;
+    padding:10px;
+    margin:10px;
+}
+
+
+.entity-header h3{
+    text-transform: uppercase;
+    color:gray;
+    padding-right:5em;
+}
+
+.entity-header h3 span{
+    color:black;
+}
+
+.entity-search{
+    float:right;
+}
+
+.entity-tabs {
+    list-style-type: none;
+    #margin: 30px 0 0 0;
+    padding: 1em 0 0.3em 0;
+    height:  3em;
+}
+.entity-tabs li {
+    display: inline;
+}
+.entity-tabs li a {
+    color: #42454a;
+    background-color: #dedbde;
+    border: 1px solid #c9c3ba;
+    border-bottom: none;
+    padding: 0.3em;
+    text-decoration: none;
+}
+
+.entity-tabs li a:hover {
+    background-color: #f1f0ee;
+}
+.entity-tabs li a.selected {
+    color: #000;
+    background-color: #f1f0ee;
+    font-weight: bold;
+    padding: 0.7em 0.3em 0.38em 0.3em;
+}
+
+.entity-tabs-section {
+    float: left;
+    height: 3em;
+    display:inline;
+    margin-right:1em;
+}
+
+
+ul.entity-tabs li.settings {
+    margin-left:1em;  margin-right:1em;
+}
+
+div.content {
+    padding-top: 1em;
+    margin-top: 1em;
+    width: 100%;
+}
+
+div.content div.content-buttons {
+    float: right;
+    margin-right: 1.5em;
+
+}
+
+div.content div.content-buttons img {
+    border: 0;
+}
diff --git a/install/ui/ipa.js b/install/ui/ipa.js
index a4fbec40..60b27633 100644
--- a/install/ui/ipa.js
+++ b/install/ui/ipa.js
@@ -144,16 +144,21 @@ var IPA = ( function () {
         var name ;
         for (name in that.entity_factories){
             factory = that.entity_factories[name];
-            var entity = factory();
-            add_entity(entity);
-            entity.init();
+            try{
+                var entity = factory();
+                add_entity(entity);
+                entity.init();
+            }catch(e){
+                /*exceptions  thrown by builder just mean that entities
+                  are not to be registered. */
+            }
         }
     };
 
     that.test_dirty = function(){
         if (IPA.current_entity){
             var facet_name =   IPA.current_facet(IPA.current_entity);
-            var facet = IPA.current_entity.facets_by_name[facet_name];
+            var facet = IPA.current_entity.get_facet(facet_name);
 
             if (facet.is_dirty()){
 
diff --git a/install/ui/navigation.js b/install/ui/navigation.js
index 365bde66..786a5a97 100644
--- a/install/ui/navigation.js
+++ b/install/ui/navigation.js
@@ -41,11 +41,12 @@ IPA.nav = {
     },
 
     create : function (nls, container, tabclass) {
-        if (!container)
+        if (!container){
             container = $('#navigation');
-        if (!tabclass)
+        }
+        if (!tabclass){
             tabclass = 'tabs';
-
+        }
         IPA.nav.tabs_lists = nls;
         IPA.nav.nav_container = container;
 
@@ -71,13 +72,22 @@ IPA.nav = {
         var ul = $('<ul/>');
         container.append(ul);
 
-        for (var i = 0; i < nls.length; ++i) {
+        for (var i = 0; i < nls.length; i += 1) {
             var tab = nls[i];
+            if (tab.entity){
+                tab.name = tab.entity;
+            }
 
             var label = tab.name;
             if (tab.entity) {
                 var entity = IPA.get_entity(tab.entity);
+                if (!entity){
+                    nls.splice(i,1);
+                    i -= 1;
+                    continue;
+                }
                 label = entity.label;
+                tab.entity = entity;
             }
             if (tab.label){
                 label = tab.label;
@@ -93,7 +103,7 @@ IPA.nav = {
                 div.addClass('entity-container');
             }
 
-            if (tab.children && depth === 1) {
+            if (tab.children) {
                 IPA.nav.generate_tabs(tab.children, div, tabclass, depth +1 );
             }
         }
@@ -127,20 +137,42 @@ IPA.nav = {
         var tab = nls[index];
         var container2 = $('#' + tab.name);
 
-        if (tab.children   && depth === 1 ) {
+        if (tab.children) {
             IPA.nav._update_tabs(tab.children, container2,depth+1);
-
         } else if (tab.entity) {
-            var entity_name = tab.entity;
+            tab.entity.setup(container2);
+        }
+    }
+};
 
-            var nested_entity = IPA.nav.get_state(entity_name+'-entity');
 
-            if (nested_entity){
-                entity_name = nested_entity;
-            }
 
-            var entity = IPA.get_entity(entity_name);
-            entity.setup(container2);
+IPA.tab_state = function(entity_name,tab){
+    var state;
+    var i;
+    var children;
+    var tab_name;
+
+    if (!tab){
+        children = IPA.tab_set;
+        tab_name = 'navigation';
+    }else if (tab.children){
+        children = tab.children;
+        tab_name = tab.name;
+    }else if (tab.entity){
+        if (tab.entity.name === entity_name){
+            state = {};
+            state[entity_name] =  0;
+        }
+        return state;
+    }
+
+    for (i = 0; i < children.length; i +=1){
+        state = IPA.tab_state(entity_name,children[i]);
+        if (state){
+            state[tab_name] = i;
+            return state;
         }
     }
+    return null;
 };
diff --git a/install/ui/search.js b/install/ui/search.js
index 9a458bfc..95847bf5 100644
--- a/install/ui/search.js
+++ b/install/ui/search.js
@@ -167,7 +167,7 @@ IPA.search_facet = function(spec) {
                 'click': function (value) {
                     return function() {
                         var state = IPA.tab_state(that.entity_name);
-                        state[that.entity_name + '-facet'] = 'details';
+                        state[that.entity_name + '-facet'] = 'default';
                         state[that.entity_name + '-pkey'] = value;
                         $.bbq.pushState(state);
                         return false;
@@ -183,7 +183,7 @@ IPA.search_facet = function(spec) {
 
         that.table = IPA.search_widget({
             id: that.entity_name+'-search',
-            name: 'search', 
+            name: 'search',
             label: IPA.metadata.objects[that.entity_name].label,
             entity_name: that.entity_name,
             search_all: that.search_all
@@ -211,13 +211,32 @@ IPA.search_facet = function(spec) {
         };
 
         that.table.init();
+
     };
 
-    that.create_action_panel = function(container) {
+    that.create_content = function(container) {
+
+        var span = $('<span/>', { 'name': 'search' }).appendTo(container);
+
+        that.table.create(span);
+    };
+
+    that.setup = function(container) {
+
+        that.facet_setup(container);
+
+        that.entity_header.title.empty();
+        that.entity_header.title.append(
+            $('<h3/>',{
+                text:that.entity.metadata.label
+            }));
+
+        that.entity_header.facet_tabs.css('visibility','hidden');
+        $('#back_to_search', that.entity_header.search_bar).
+            css('display','none');
 
-        that.facet_create_action_panel(container);
 
-        var buttons = $('.action-controls', container);
+        var buttons =  that.entity_header.buttons;
 
         $('<input/>', {
             'type': 'button',
@@ -230,25 +249,14 @@ IPA.search_facet = function(spec) {
             'name': 'add',
             'value': IPA.messages.buttons.add
         }).appendTo(buttons);
-    };
-
-    that.create_content = function(container) {
-
-        var span = $('<span/>', { 'name': 'search' }).appendTo(container);
-
-        that.table.create(span);
-    };
-
-    that.setup = function(container) {
 
-        that.facet_setup(container);
 
         var span = $('span[name=search]', that.container);
         that.table.setup(span);
 
-        var action_panel = that.get_action_panel();
+        var search_buttons =   that.entity_header.buttons;
 
-        var button = $('input[name=remove]', action_panel);
+        var button = $('input[name=remove]', search_buttons);
         that.remove_button = IPA.action_button({
             'label': IPA.messages.buttons.remove,
             'icon': 'ui-icon-trash',
@@ -260,7 +268,7 @@ IPA.search_facet = function(spec) {
         button.replaceWith(that.remove_button);
         that.remove_button.addClass('input_link_disabled');
 
-        button = $('input[name=add]', action_panel);
+        button = $('input[name=add]', search_buttons);
         that.add_button = IPA.action_button({
             'label': IPA.messages.buttons.add,
             'icon': 'ui-icon-plus',
@@ -273,9 +281,8 @@ IPA.search_facet = function(spec) {
 
         var values = that.table.get_selected_values();
 
-        var action_panel = that.get_action_panel();
-        var links = $('li.entity-facet', action_panel);
-        var input = $('input[id=pkey]', action_panel);
+        var links = $('li', that.entity_header.tabs);
+        var input = $('input[id=pkey]', that.entity_header.buttons);
 
         if (values.length == 1) {
             links.removeClass('entity-facet-disabled');
@@ -354,10 +361,7 @@ IPA.search_facet = function(spec) {
 
         function on_success(data, text_status, xhr) {
 
-            var action_panel = that.get_action_panel();
-            $('li.entity-facet', action_panel).
-                addClass('entity-facet-disabled');
-            $('input', action_panel).val(null);
+            $("input id=[pkey]", that.entity_header.buttons).val(null);
 
             that.table.empty();
 
@@ -423,4 +427,3 @@ IPA.search_facet = function(spec) {
 
     return that;
 };
-
diff --git a/install/ui/test/details_tests.js b/install/ui/test/details_tests.js
index c63a0af8..a79a194e 100644
--- a/install/ui/test/details_tests.js
+++ b/install/ui/test/details_tests.js
@@ -40,7 +40,8 @@ module('details', {
         var obj_name = 'user';
         IPA.entity_factories.user=
             function(){
-                return IPA.entity({name:obj_name});
+                return IPA.entity({name:obj_name,
+                                   metadata:IPA.metadata.objects.user});
             };
         IPA.start_entities();
     },
@@ -160,12 +161,12 @@ test("Testing details lifecycle: create, setup, load.", function(){
             setup_called = true;
             widget.widget_setup(container);
         };
-        
+
         widget.load = function(record) {
             load_called = true;
             widget.widget_load(record);
         };
-        
+
         widget.save = function() {
             save_called = true;
             widget.widget_save();
@@ -201,13 +202,18 @@ test("Testing details lifecycle: create, setup, load.", function(){
     var facet = entity.get_facet('details');
     facet.init();
 
-    var content = $('<div/>', {
+    var container = $('<div/>', {
         'class': 'content'
     }).appendTo(container);
 
-    facet.create_content(content);
 
-    facet.setup(container);
+    entity.header = IPA.entity_header({entity:entity,container:container});
+    facet.entity_header = entity.header;
+    entity.header.reset();
+    facet.create_content(facet.entity_header.content);
+    facet.setup(facet.entity_header.content);
+
+
     facet.load(result);
 
     var contact = container.find('dl#contact.entryattrs');
diff --git a/install/ui/test/entity_tests.js b/install/ui/test/entity_tests.js
index bf071f87..47165823 100644
--- a/install/ui/test/entity_tests.js
+++ b/install/ui/test/entity_tests.js
@@ -73,13 +73,12 @@ test('Testing IPA.entity_set_search_definition().', function() {
     var facet = entity.get_facet('search');
     facet.init();
 
-    var content = $('<div/>', {
-        'class': 'content'
-    }).appendTo(entities_container);
+    var container = $("<div/>");
 
-    facet.create_content(content);
-
-    facet.setup(entities_container);
+    entity.header = IPA.entity_header({entity:entity,container:container});
+    facet.entity_header = entity.header;
+    facet.create_content(facet.entity_header.content);
+    facet.setup(facet.entity_header.content);
 
 
     var column = facet.get_columns()[0];
diff --git a/install/ui/test/navigation_tests.js b/install/ui/test/navigation_tests.js
index 7eb14ce4..d87edc64 100644
--- a/install/ui/test/navigation_tests.js
+++ b/install/ui/test/navigation_tests.js
@@ -45,7 +45,8 @@ test("Testing IPA.nav.create().", function() {
     var entity;
 
     IPA.entity_factories.user =  function() {
-        var that = IPA.entity({name: 'user'});
+        var that = IPA.entity({name: 'user',
+                               metadata:IPA.metadata.objects.user});
         that.setup = function(container){
             user_mock_called = true;
             same(container[0].id,'user','user id');
@@ -54,7 +55,8 @@ test("Testing IPA.nav.create().", function() {
         return that;
     };
     IPA.entity_factories.group = function(){
-        var that  = IPA.entity({name: 'group'});
+        var that  = IPA.entity({name: 'group',
+                               metadata:IPA.metadata.objects.group});
         that.setup = function(container){
             group_mock_called = true;
             same(container[0].id,'group','group id');
diff --git a/install/ui/webui.js b/install/ui/webui.js
index bf60fa19..02fe918a 100644
--- a/install/ui/webui.js
+++ b/install/ui/webui.js
@@ -29,90 +29,59 @@
 IPA.admin_tab_set = function () {
     var tabset = [
         {name:'identity', label: IPA.messages.tabs.identity,  children:[
-            {name:'user', entity:'user'},
-            {name:'group', entity:'group'},
-            {name:'host', entity:'host'},
-            {name:'hostgroup', entity:'hostgroup'},
-            {name:'netgroup', entity:'netgroup'},
-            {name:'service', entity:'service'}
+            {entity:'user'},
+            {entity:'group'},
+            {entity:'host'},
+            {entity:'hostgroup'},
+            {entity:'netgroup'},
+            {entity:'service'}
         ]},
         {name:'policy', label: IPA.messages.tabs.policy, children:[
-            {name:'hbacrule', label: IPA.messages.tabs.hbac ,
-             entity:'hbacrule', children:[
-                {name:'hbacsvc', entity:'hbacsvc'},
-                {name:'hbacsvcgroup', entity:'hbacsvcgroup'}
+            {entity:'dnszone'},
+            {name:'hbac', label: IPA.messages.tabs.hbac ,
+             children:[
+                 {entity:'hbacrule'},
+                 {entity:'hbacsvc'},
+                 {entity:'hbacsvcgroup'}
             ]},
-            {name:'sudorule', label: IPA.messages.tabs.sudo,
-             entity:'sudorule',children:[
-                {name:'sudocmd', entity:'sudocmd'},
-                {name:'sudocmdgroup', entity:'sudocmdgroup'}
+            {name:'sudo', label: IPA.messages.tabs.sudo,
+             children:[
+                 {entity:'sudorule'},
+                 {entity:'sudocmd'},
+                 {entity:'sudocmdgroup'}
             ]},
-//            {name:'automount', entity:'automountlocation'},
-            {name:'pwpolicy', entity:'pwpolicy'},
-            {name:'krbtpolicy', entity:'krbtpolicy'}
+//            {entity:'automountlocation'},
+            {entity:'pwpolicy'},
+            {entity:'krbtpolicy'}
         ]},
         {name:'ipaserver', label: IPA.messages.tabs.ipaserver, children: [
-            {name:'role',entity:'role', label: IPA.messages.tabs.role,
+            {name:'rolebased', label: IPA.messages.tabs.role,
              children:[
-                {name:'privilege',entity:'privilege' },
-                {name:'permission', entity:'permission'}
-            ]},
-            {name:'selfservice'  ,entity:'selfservice'},
-            {name:'delegation'  ,entity:'delegation'},
-            {name:'entitle', entity:'entitle'},
-            {name:'config', entity:'config'}
+                 {entity:'role'},
+                 {entity:'privilege'},
+                 {entity:'permission'}
+             ]},
+            {entity:'selfservice'},
+            {entity:'delegation'},
+            {entity:'entitle'},
+            {entity:'config'}
         ]}];
 
-    if (IPA.dns_enabled){
-        tabset[1].children.unshift(
-            {name:'dnszone', entity:'dnszone'}
-        );
-    }
-
     return tabset;
 };
 
 IPA.self_serv_tab_set = function(){
     return [ { name:'identity',
-               children: [ {name:'user', entity:'user'}]}];
+               children:
+               [
+                   {entity:'user'},
+                   {entity:'group'}
+               ]
+             }
+           ];
 };
 
 
-IPA.tab_state = function(entity_name){
-
-    var state = {};
-
-    for (var top_tab_index = 0;
-         top_tab_index < IPA.tab_set.length;
-         top_tab_index += 1){
-        var top_tab =  IPA.tab_set[top_tab_index];
-        for (var subtab_index = 0;
-             subtab_index < top_tab.children.length;
-             subtab_index += 1){
-            if(top_tab.children[subtab_index].name){
-                if (top_tab.children[subtab_index].name === entity_name){
-                    state.navigation =  top_tab_index;
-                    state[top_tab.name] =  subtab_index;
-                    return state;
-                }else if (top_tab.children[subtab_index].children){
-                    var  nested_entities = top_tab.children[subtab_index].children;
-                    for (var nested_index = 0;
-                         nested_index < nested_entities.length;
-                         nested_index += 1){
-                        if (nested_entities[nested_index].name === entity_name){
-                            state.navigation =  top_tab_index;
-                             state[top_tab.name] =  subtab_index;
-                             state[ top_tab.children[subtab_index].name+'-entity'] =  entity_name;
-                             return state;
-                        }
-                    }
-                }
-            }
-        }
-    }
-    /*should never reach here*/
-    return null;
-};
 
 
 /* main (document onready event handler) */