hashchange

We now catch the hashchange event and use that to drive most of the site.
To trigger page transitions, modify location.hash.
Params start with # not ?.
Removed user-group.inc.
converted tabs to spaces
trivial imlementation of add and details for netgroup and hostgroup
lots of bug fixes based on routing problems and the refactorings.

16 files changed, 716 insertions, 523 deletions

diff --git a/install/static/Makefile.am b/install/static/Makefile.am
index 8e1dc1bcf..366975ebf 100644
--- a/install/static/Makefile.am
+++ b/install/static/Makefile.am
@@ -2,6 +2,7 @@ NULL =
 
 appdir = $(IPA_DATA_DIR)/static
 app_DATA =                              \
+	add.js				\
 	but-reset.png			\
 	but-update.png			\
 	but-selected.png		\
diff --git a/install/static/add.js b/install/static/add.js
new file mode 100644
index 000000000..4af6a8e72
--- /dev/null
+++ b/install/static/add.js
@@ -0,0 +1,110 @@
+/*  Authors:
+ *    Adam Young <ayoung@redhat.com>
+ *
+ * Copyright (C) 2010 Red Hat
+ * see file 'COPYING' for use and warranty information
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License as
+ * published by the Free Software Foundation; version 2 only
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
+ */
+
+/* IPA Object Add  - creating new instances of entities */
+
+/* REQUIRES: ipa.js */
+
+/*
+ * An associatev array between entity names and their builders
+ */
+var builders = {} ;
+
+
+function add_fail(desc){
+    alert(desc);
+}
+
+
+//Process for managing the 'add' functionality
+function EntityBuilder(obj,addProperties,addOptionsFunction ){
+    this.obj = obj;
+    this.addProperties = addProperties;
+    if (addOptionsFunction){
+        this.addOptionsFunction = addOptionsFunction;
+    }else{
+        this.addOptionsFunction = function(){
+            var options = { };
+            return options;
+        }
+    }
+
+    this.add = function(on_success){
+        var options = this.addOptionsFunction();
+        var params = [$("#pkey").val()];
+        ipa_cmd( 'add', params, options, on_success, add_fail, this.obj );
+    }
+
+    this.setup = function(){
+        showContent();
+        $("<h1/>" ,{ html : "Add new " + this.obj } ).appendTo("#content");
+        $("<div id='addForm'> </div>")
+            .appendTo("#content");
+        var label =$("<span>Add and </span>").appendTo("#addForm")
+        $("<input \>",
+          {id:'addEdit',
+           type:'button',
+           value:'Edit',
+           click: function(){
+               var params = ipa_parse_qs();
+               builders[params["tab"]].add (addEdit)
+           }
+          }).appendTo(label);
+        $("<input\>", {
+            id:'addAnother',
+            type:'button',
+            value:'Add Another',
+            click: function(){
+               var params = ipa_parse_qs();
+                builders[params["tab"]].add (addAnother)
+            }
+        }).appendTo(label);
+        $("<dl id='addProperties' />").appendTo("#addForm");
+
+        for (index = 0; index < this.addProperties.length; index++){
+            var prop = this.addProperties[index];
+            var title = $("<dt/>",{html:prop.title});
+            var definition =    $("<dd></dd>");
+            $("<input/>",{
+                id:prop.id,
+                type:prop.type
+            }).appendTo(definition);
+            definition.appendTo(title);
+            title.appendTo("#addProperties");
+        }
+    }
+    //register the new object with the associatev array of builders.
+    builders[obj] = this;
+}
+
+
+function addAnother(response){
+    var params = ipa_parse_qs();
+    builders[params["tab"]].setup();
+}
+
+function addEdit(response){
+    var params = ipa_parse_qs();
+    var hash= "tab="
+        + params["tab"]
+        +"&facet=details&pkey="
+        +$("#pkey").val();
+    window.location.hash = hash;
+}
\ No newline at end of file
diff --git a/install/static/details.js b/install/static/details.js
index 03362d833..40d36b6b6 100644
--- a/install/static/details.js
+++ b/install/static/details.js
@@ -1,5 +1,6 @@
 /*  Authors:
  *    Pavel Zuna <pzuna@redhat.com>
+ *    Adam Young <ayoung@redhat.com>
  *
  * Copyright (C) 2010 Red Hat
  * see file 'COPYING' for use and warranty information
@@ -16,7 +17,7 @@
  * You should have received a copy of the GNU General Public License
  * along with this program; if not, write to the Free Software
  * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
-*/
+ */
 
 /* IPA Object Details - populating definiton lists from entry data */
 
@@ -134,6 +135,7 @@ function ipa_details_update(pkey, on_win, on_fail)
         modlist['setattr'].push(attr + '=' + values[0]);
         for (var i = 1; i < values.length; ++i)
             modlist['addattr'].push(attr + '=' + values[i]);
+
     }
 
     _ipa_update_on_win_callback = on_win;
@@ -162,6 +164,7 @@ function _ipa_update_on_fail(xhr, text_status, error_thrown)
 {
     if (_ipa_update_on_fail_callback)
         _ipa_update_on_fail_callback(xhr, text_status, error_thrown);
+
 }
 
 function ipa_details_create(dls, container)
@@ -173,7 +176,7 @@ function ipa_details_create(dls, container)
         var d = dls[i];
 
         ipa_generate_dl($('#detail-lists hr').last(), d[0], d[1], d[2]);
-//        ipa_generate_dl($("#detail-lists"), d[0], d[1], d[2]);
+        //        ipa_generate_dl($("#detail-lists"), d[0], d[1], d[2]);
     }
 }
 
@@ -332,7 +335,7 @@ function ipa_create_input(attr, value)
         if (param_info['multivalue'] || param_info['class'] == 'List') {
             return (
                 handler(attr, value, param_info) +
-                _ipa_create_remove_link(attr, param_info)
+                    _ipa_create_remove_link(attr, param_info)
             );
         }
         return (handler(attr, value, param_info));
@@ -378,6 +381,7 @@ function ipa_details_reset()
 {
     if (ipa_details_cache)
         ipa_details_display(ipa_details_cache);
+
 }
 
 /* Event handlers */
@@ -435,3 +439,22 @@ function _h2_on_click(obj)
     }
 }
 
+function DetailsForm(obj, details_list, pkeyCol, sampleData   ){
+
+    this.obj = obj;
+    this.details_list = details_list;
+    this.sampleData = sampleData;
+    this.pkeyCol = pkeyCol;
+
+    this.setup= function(key){
+        //re initialize global parse of parameters
+        qs = ipa_parse_qs();
+
+        showDetails();
+        $('h1').text("Managing " + this.obj +": " +qs['pkey'] );
+
+        ipa_details_init(this.obj);
+        ipa_details_create(this.details_list, $('#details'));
+        ipa_details_load(qs.pkey, on_win, null, this.sampleData);
+    }
+}
diff --git a/install/static/group.js b/install/static/group.js
index beb10879c..981e048b0 100644
--- a/install/static/group.js
+++ b/install/static/group.js
@@ -1,10 +1,10 @@
 function setupGroup(facet){
     if (facet == "details"){
-	setupGroupDetails();
+    setupGroupDetails();
     }else  if (facet == "add"){
-        setupAddGroup();
+    setupAddGroup();
     }else{
-	setupGroupSearch();
+    groupSearchForm.setup();
     }
 }
 
@@ -14,15 +14,15 @@ function addGroupFail(desc){
 }
 
 function addGroup(on_success){
-    
-    var options = {  
-	posix: $('#isposix').is(':checked') ? 1 : 0  ,
-	description:  $("#groupdescription").val()};
 
+    var options = {
+    posix: $('#isposix').is(':checked') ? 1 : 0  ,
+    description:  $("#groupdescription").val()};
 
-    var gid = 	 $("#groupidnumber").val();
+
+    var gid =      $("#groupidnumber").val();
     if (gid.length > 0){
-	options.gidnumber = gid;
+    options.gidnumber = gid;
     }
 
     var params = [$("#groupname").val()];
@@ -33,7 +33,7 @@ function addGroup(on_success){
 
 function addEditGroup(){
     addGroup(function (response){
-	location.href="index.xhtml?tab=group&facet=details&pkey="+$("#groupname").val();
+    location.hash="tab=group&facet=details&pkey="+$("#groupname").val();
     });
 }
 
@@ -47,20 +47,20 @@ function setupAddGroup(){
     $("<h1>Add new Group</h1>").appendTo("#content");
 
     $("<form id='addGroupForm'> </form>")
-	.appendTo("#content");
-    
+    .appendTo("#content");
+
     $("<label>Add and </label><input id='addEdit' type='button' value='Edit'/><input id='addAnother' type='button' value='Add Another'/>").appendTo("#addGroupForm");
     $("<dl id='groupProperties' />").appendTo("#addGroupForm");
-      
+
     $("<dt>Name</dt><dd><input id='groupname' type='text'/></dd>")
-	.appendTo("#groupProperties");
+    .appendTo("#groupProperties");
     $("<dt>Description</dt><dd><input id='groupdescription' type='text'/></dd>")
-	.appendTo("#groupProperties");
+    .appendTo("#groupProperties");
 
     $("<dt>Is this a posix Group</dt><dd><input id='isposix' type='checkbox'/></dd>")
-	.appendTo("#groupProperties");
+    .appendTo("#groupProperties");
     $("<dt>GID</dt><dd><input id='groupidnumber' type='text'/></dd>")
-	.appendTo("#groupProperties");
+    .appendTo("#groupProperties");
 
 
     $("#addEdit").click(addEditGroup);
@@ -70,20 +70,15 @@ function setupAddGroup(){
 
 var group_details_list =
     [['identity', 'Group Details', [
-        ['cn', 'Group Name'],
-        ['description', 'Description'],
-	['gidnumber', 'Group ID']]]];
+    ['cn', 'Group Name'],
+    ['description', 'Description'],
+    ['gidnumber', 'Group ID']]]];
 
 function setupGroupDetails(group){
 
-    window.location.hash="#tab=user&facet=details&pkey="+group;
-
     //re initialize global parse of parameters
     qs = ipa_parse_qs();
 
-    //TODO make this work for more than just user details
-    user_details_lists;
-
     showDetails();
 
     ipa_details_init('group');
@@ -103,29 +98,21 @@ function renderGroupDetails(group)
 function renderGroupDetailColumn(current,cell){
 
     $("<a/>",{
-	href:"#tab=group&facet=details&pkey="+current.cn,
-	html:  ""+ current[this.column],
-	click: function(){ setupGroupDetails(current.cn)},
+    href:"#tab=group&facet=details&pkey="+current.cn,
+    html:  ""+ current[this.column],
+    //click: function(){ setupGroupDetails(current.cn)},
     }).appendTo(cell);
 }
 
 
-function setupGroupSearch(){
 
-    var columns = [
-	{title:"Group Name",  column:"cn",render: renderGroupDetailColumn},
-	{title:"GID",  column:"gidnumber",render: renderSimpleColumn},
-	{title:"Description",  column:"description",render: renderSimpleColumn}
-    ];
+var groupSearchColumns = [
+    {title:"Group Name",  column:"cn",render: renderGroupDetailColumn},
+    {title:"GID",  column:"gidnumber",render: renderSimpleColumn},
+    {title:"Description",  column:"description",render: renderSimpleColumn}
+];
 
-    var groupSearchForm = new SearchForm("group", "find", columns,"sampledata/grouplist.json");
+var groupSearchForm = new SearchForm("group", "find", groupSearchColumns ,"sampledata/grouplist.json");
 
-    $("#query").unbind();
-    $("#query").click(function(){
-	executeSearch(groupSearchForm);
-    });
-    $("#new").unbind();
-    $("#new").click( setupAddGroup );
 
 
-}
diff --git a/install/static/host.js b/install/static/host.js
index b6881d836..b249c9b5e 100644
--- a/install/static/host.js
+++ b/install/static/host.js
@@ -1,38 +1,32 @@
 function setupHost(facet){
     if (facet == "details"){
-	setupHostDetails();
+    hostDetailsForm.setup();
+    }else if (facet == "add"){
+    hostBuilder.setup();
     }else{
-	setupHostSearch();
+    hostSearchForm.setup();
     }
 }
 
-function setupHostDetails(){
-    var detailsForm = new DetailsForm();
-}
-
-function setupHostSearch(){
+var hostAddProperties = [{title: 'Domain Name', id: 'pkey', type: 'text'}];
+var hostBuilder = new EntityBuilder("host",hostAddProperties);
 
-    sampleData = "sampledata/hostlist.json";
-    var columns = [
-	{title:"Host",column:"fqdn",render: function(current,cell){
-	    renderDetailColumn(current,cell,current[this.column],"group");
-	}},
-	{title:"Comment",   column: "description", render: renderSimpleColumn},
-	{title:"Enrolled?",  render: renderUnknownColumn},
-	{title:"Manages?",   render: renderUnknownColumn}
-    ];
 
-    var hostSearchForm = new SearchForm("host", "find", columns);
+var host_details_list =  [['host', 'Host Details', [
+    ['fqdn', 'Fully Qualified Domain Name'],
+    ['krbprincipalname', 'Kerberos Principal'],
+    ['serverhostname', 'Server Host Name']
+]]];
+ 
+var hostDetailsForm = new DetailsForm("host",host_details_list,"fqdn","sampledata/hostshow.json") ;
 
-    $("#query").unbind();
-    $("#query").click(function(){
-	sampleData = "sampledata/hostlist.json";
-	executeSearch(hostSearchForm);
-    });
 
-    $("#new").unbind();
-    $("#new").click( function() {
-	alert("New Host...");
-    });
-
-}
+var hostDetailsColumns = [
+    {title:"Host",column:"fqdn",render: function(current,cell){
+    renderPkeyColumn(hostDetailsForm,current,cell);
+    }},
+    {title:"Comment",   column: "description", render: renderSimpleColumn},
+    {title:"Enrolled?",  render: renderUnknownColumn},
+    {title:"Manages?",   render: renderUnknownColumn}
+];
+var hostSearchForm = new SearchForm("host", "find", hostDetailsColumns,"sampledata/hostlist.json");
diff --git a/install/static/hostgroup.js b/install/static/hostgroup.js
index 64eeb3afc..290460d81 100644
--- a/install/static/hostgroup.js
+++ b/install/static/hostgroup.js
@@ -1,35 +1,48 @@
 function setupHostgroup(facet){
     if (facet == "details"){
-	setupHostgroupDetails();
+        hostgroupDetailsForm.setup();
+    }else if (facet == "add"){
+        hostgroupBuilder.setup();
     }else{
-	setupHostgroupSearch();
+        hostgroupSearchForm.setup();
     }
 }
 
-function setupHostgroupDetails(){
-    var detailsForm = new DetailsForm();
-}
+var hostgroup_details_list =
+    [['identity', 'Hostgroup Details', [
+        ['cn', 'Hostgroup Name'],
+        ['description', 'Description']]]];
 
 
-function setupHostgroupSearch(){
+var hostgroupDetailsForm = new DetailsForm("hostgroup",hostgroup_details_list,"cn","sampledata/hostgroupshow.json") ;
 
-    var columns = [
-	{title:"Hostgroup",column:"cn",render:  function(current,cell){
-	     renderDetailColumn(current,cell,current[this.column],"hostgroup");
-	 }},
-	{title:"Description", column:"description",render: renderSimpleColumn}];
 
-    var hostgroupSearchForm = new SearchForm("hostgroup", "find", columns);
 
-    $("#query").unbind();
+function hostgroupAddOptionsFunction (){
+    var options = {
+        name: $('#pkey').val(),
+        description: $('#description').val()
+    };
+    return options;
+}
 
-    $("#query").click(function(){
-	sampleData = "sampledata/hostgrouplist.json";
-	executeSearch(hostgroupSearchForm);
-    });
-    $("#new").unbind();
-    $("#new").click( function() {
-	alert("New Hostgroup...");
-    });
+var hostgroupAddProperties =
+    [{title: 'Hostgroup Name', id: 'pkey', type: 'text'},
+     {title: 'Description', id: 'description', type: 'text'}];
 
-}
+var hostgroupBuilder = new EntityBuilder("hostgroup",hostgroupAddProperties,hostgroupAddOptionsFunction);
+
+
+var hostgroupSearchColumns = [
+    {
+        title:"Hostgroup", 
+        column:"cn", 
+        render:  function(current,cell){
+            renderPkeyColumn(hostgroupDetailsForm, current,cell);
+        }
+    },
+    {title:"Description", column:"description",render: renderSimpleColumn}];
+
+var hostgroupSearchForm = 
+    new SearchForm("hostgroup", "find", hostgroupSearchColumns,
+                   "sampledata/hostgrouplist.json");
diff --git a/install/static/index.xhtml b/install/static/index.xhtml
index 422538c9a..489f192b6 100644
--- a/install/static/index.xhtml
+++ b/install/static/index.xhtml
@@ -20,6 +20,7 @@
     <script type="text/javascript" src="sampledata/develop.js"></script>
     <script type="text/javascript" src="search.js"></script>
     <script type="text/javascript" src="details.js"></script>
+    <script type="text/javascript" src="add.js"></script>
     <script type="text/javascript" src="user.js"></script>
     <script type="text/javascript" src="usermeta.js"></script>
     <script type="text/javascript" src="group.js"></script>
@@ -70,14 +71,6 @@
 
       <ul id="viewtype">
 	<li id="viewcaption">View:</li>
-	<li>
-          <img src="but-selected.png" alt="" />
-          Identity Details
-	</li>
-	<li>
-          <img src="but-unselected.png" alt="" />
-          <a href="memberof?pkey=${pkey}">Memberships</a>
-	</li>
       </ul>
       <div id="detail-lists">
 	<hr />
@@ -89,7 +82,7 @@
 
     <div id="search"  style="display:none">
       <div class="searchControls" >
-	<span class="filter"  >
+	<span id="filter" class="filter"  >
 	  <input id="queryFilter" type="text"/>
 	  <input id="query" type="submit" value="find" />
 	  <input id="new" type="submit" value="new" />
@@ -104,5 +97,49 @@
       </table>
     </div>
 
+    <div id="associations" style="display:none">
+      <h1>Enroll in Groups</h1>
+      <ul id="viewtype">
+	<li id="viewcaption">View:</li>
+      </ul>
+      <form>
+	<div style="border-width:1px">
+	  <div >
+	    <input type="text"/>
+	    <input id="find" type="button" value="Find Groups"/>
+	    <span style="float:right">
+	      <input id="cancelEnrollGroups" type="button" value="Cancel"/>
+	      <input id="enrollGroups" type="button" value="Enroll"/>
+	    </span>
+	  </div>
+	  <div  id="results"  style="border: 2px solid rgb(0, 0, 0); position:relative;  height:200px;" >
+	    <div style="float:left;">
+	      <div>Groups</div>
+	      <select id="grouplist" width="150px" size="10" multiple="true" >
+	      </select>
+	    </div>
+	    <div style="float:left;">
+	      <p><input id="removeFromList" type="button" value="&lt;&lt;"/> </p>
+	      <p><input id="addToList" type="button" value="&gt;&gt;"/></p>
+	    </div>
+	    <div style="float:left;">
+	      <div>Prospective Enrollments</div>
+	      <select id="enrollments" width="150px"  size="10" multiple="true" >
+	      </select>
+	    </div>
+	  </div>
+	  <hr/>
+	  <div>Message Area</div>
+	  <hr/>
+	  <div>
+	    <span style="float:left">
+	      <p>*Enter Group Names and Press Groups</p>
+	      <p>*More stuff</p>
+	      <p>*More stuff</p>
+	    </span>
+	  </div>
+	</div>
+      </form>
+    </div>
   </body>
 </html>
diff --git a/install/static/ipa.css b/install/static/ipa.css
index c5f1b1ef9..6a3135b2d 100644
--- a/install/static/ipa.css
+++ b/install/static/ipa.css
@@ -89,11 +89,11 @@ div#details {
 }
 
 
-div#details ul#viewtype {
+ul#viewtype {
     padding-left: 20px;
 }
 
-div#details ul#viewtype li {
+ul#viewtype li {
     color: #656565;
     display: inline;
     font-weight: bold;
@@ -101,16 +101,12 @@ div#details ul#viewtype li {
     padding-right: 20px;
 }
 
-div#content ul#viewtype li#viewcaption {
-    color: #000;
-    padding-right: 10px;
-}
 
-div#details ul#viewtype li img {
+ul#viewtype li img {
     vertical-align: middle;
 }
 
-div#details ul#viewtype li a {
+ul#viewtype li a {
     font-weight: normal;
 }
 
diff --git a/install/static/ipa.js b/install/static/ipa.js
index 1e3238364..fd93c1a30 100644
--- a/install/static/ipa.js
+++ b/install/static/ipa.js
@@ -39,16 +39,16 @@ var qs;
 function ipa_init(url, on_win)
 {
     if (!url)
-        url = '/ipa/json';
+	url = '/ipa/json';
 
     _ipa_init_on_win_callback = on_win;
 
     var options = {
-        url: url,
-        type: 'POST',
-        contentType: 'application/json',
-        dataType: 'json',
-        processData: false,
+	url: url,
+	type: 'POST',
+	contentType: 'application/json',
+	dataType: 'json',
+	processData: false,
     };
 
     $.ajaxSetup(options);
@@ -60,7 +60,7 @@ function _ipa_load_objs(data, textStatus, xhr)
 {
     ipa_objs = data.result.result;
     if (_ipa_init_on_win_callback)
-        _ipa_init_on_win_callback(data, textStatus, xhr);
+	_ipa_init_on_win_callback(data, textStatus, xhr);
 }
 
 /* call an IPA command over JSON-RPC
@@ -95,9 +95,9 @@ function ipa_cmd(name, args, options, win_callback, fail_callback, objname,sampl
     };
 
     var request = {
-        data: JSON.stringify(data),
-        success: win_callback,
-        error: fail_callback,
+	data: JSON.stringify(data),
+	success: win_callback,
+	error: fail_callback,
     };
 
     $.ajax(request);
@@ -143,4 +143,3 @@ function ipa_get_param_info(attr)
 
     return (null);
 }
-
diff --git a/install/static/navigation.js b/install/static/navigation.js
index 93ee4215d..ff21fdf52 100644
--- a/install/static/navigation.js
+++ b/install/static/navigation.js
@@ -15,144 +15,165 @@ function unimplemented(facet){
 
 }
 
+var parentTabs;
+function getParentTabs(){
+    if (!parentTabs){
+    parentTabs  = {
+        user     : "identity",
+        group    : "identity",
+        host     : "identity",
+        hostgroup: "identity",
+        netgroup : "identity",
+        policy   : "policy",
+        config   : "config"
+    };
+    }
+    return parentTabs;
+}
+
 function buildNavigation(){
     params= ipa_parse_qs();
     var tab = params["tab"];
 
     if (!tab){
-	tab=$.cookie("lastpage");
+    tab=$.cookie("lastpage");
     }
     if  ( !tab ) {
-	tab="user";
+    tab="user";
     }
 
     var facet = params["facet"];
 
 
     var siteMap = [{name:"IDENTITY",
-		    tab:"user",
-		    children : [
-			{name:"Users",tab:"user",  setup: setupUser},
-			{name:"Groups",tab:"group",setup: setupGroup},
-			{name:"Hosts",tab:"host",  setup:  setupHost},
-			{name:"Hostgroups",
-			 tab:"hostgroup",
-			 setup:  setupHostgroup},
-			{name:"Netgroups",tab:"netgroup", setup:setupNetgroup}
-		    ]},
-		   {name:"POLICY",  tab:"policy", setup: unimplemented},
-		   {name:"CONFIG",  tab:"config", setup: unimplemented }];
-
+            tab:"identity", //Default subtab
+            children : [
+            {name:"Users",tab:"user",  setup: setupUser},
+            {name:"Groups",tab:"group",setup: setupGroup},
+            {name:"Hosts",tab:"host",  setup:  setupHost},
+            {name:"Hostgroups",
+             tab:"hostgroup",
+             setup:  setupHostgroup},
+            {name:"Netgroups",tab:"netgroup", setup:setupNetgroup}
+            ]},
+           {name:"POLICY",  tab:"policy", setup: unimplemented},
+           {name:"CONFIG",  tab:"config", setup: unimplemented }];
+
+    //TODO autogen this from the site map
 
     var separator = $("<span class='main-separator' />");
 
     var currentMain =  siteMap[0];
     for (var i = 0 ; i < siteMap.length; i++){
-	current = siteMap[i];
-	if (i > 0){
-	    $('#main-nav').append(separator.clone());
-	}
-	var tabClass =  "main-nav-off";
-	if  (tab == current.tab){
-	    currentMain =  current;
-	    tabClass = "main-nav-on";
-	}
-
-	var span = $("<span/>", {
-	    "class": tabClass,
-	    id: "span-tab-"+current.tab,
-	});
-
-	$("<a/>",{
-	    "id": "tab-"+current.tab,
-	    href:  "#?tab="+current.tab,
-	    text: current.name,
-	    click: setActiveTab
-	}).appendTo(span);
-
-	span.appendTo("#main-nav")
+    current = siteMap[i];
+    if (i > 0){
+        $('#main-nav').append(separator.clone());
+    }
+    var tabClass =  "main-nav-off";
+    if  (tab == current.tab){
+        currentMain =  current;
+        tabClass = "main-nav-on";
     }
 
+    var span = $("<span/>", {
+        "class": tabClass,
+        id: "span-tab-"+current.tab,
+    });
+
+    $("<a/>",{
+        "id": "tab-"+current.tab,
+        href:  "#tab="+current.tab,
+        text: current.name,
+    }).appendTo(span);
+
+    span.appendTo("#main-nav")
+    }
 
     if (currentMain.children){
     var selectedSub;
-	for (var i =0; i < currentMain.children.length; i++){
-	    var currentSub = currentMain.children[i];
-
-	    var tabClass =  "sub-nav-off";
-	    if  (tab == currentSub.tab){
-		tabClass = "sub-nav-on";
-		selectedSub = currentSub;
-	    }
-
-	    var span =  $("<span/>", {
-		"class": tabClass,
-		id: "span-subtab-"+currentSub.tab
-	    });
-
-	    $("<a/>",{
-		"id": "subtab-"+currentSub.tab,
-		href:  "#?tab="+currentSub.tab,
-		text: currentSub.name,
-		click: setActiveSubtab,
-	    }).appendTo(span);
-
-	    span.appendTo("#sub-nav");
-	}
-
-	if (selectedSub  && selectedSub.setup){
-	    selectedSub.setup(facet);
-	}
+    for (var i =0; i < currentMain.children.length; i++){
+        var currentSub = currentMain.children[i];
+
+        var tabClass =  "sub-nav-off";
+        if  (tab == currentSub.tab){
+        tabClass = "sub-nav-on";
+        selectedSub = currentSub;
+        }
+
+        var span =  $("<span/>", {
+        "class": tabClass,
+        id: "span-subtab-"+currentSub.tab
+        });
+
+        $("<a/>",{
+        "id": "subtab-"+currentSub.tab,
+        href:  "#tab="+currentSub.tab,
+        text: currentSub.name,
+        //click: setActiveSubtab,
+        }).appendTo(span);
+
+        span.appendTo("#sub-nav");
+    }
+
+    if (selectedSub  && selectedSub.setup){
+        selectedSub.setup(facet);
+    }
     }else if (currentMain && currentMain.setup){
-	currentMain.setup(facet);
+    currentMain.setup(facet);
     }
 
     var whoami = $.cookie("whoami");
     if (whoami == null){
-	ipa_cmd( 'whoami', [], {}, whoamiSuccess, null,null, "sampledata/whoami.json");
+    ipa_cmd( 'whoami', [], {}, whoamiSuccess, null,null, "sampledata/whoami.json");
     }else{
-	setLoggedInText(whoami);
+    setLoggedInText(whoami);
     }
 }
 
+var setupFunctions;
+function getSetupFunctions(){
+    if (!setupFunctions){
+    setupFunctions = {
+        user:     setupUser,
+        group:    setupGroup,
+        host:     setupHost,
+        hostgroup:setupHostgroup,
+        netgroup:setupNetgroup,
+    };
+    }
+    return setupFunctions;
+}
+$(window).bind( 'hashchange', function(e) {
 
-function setActiveTab(){
+    var queryParams = ipa_parse_qs();
+    var tab=queryParams.tab;
+    if (!tab){
+        tab = 'user';
+    }
+    $(".sub-nav-on").removeClass('sub-nav-on').addClass("sub-nav-off")
+    var active = "#span-subtab-"+tab;
+    $(active).removeClass('sub-nav-off').addClass("sub-nav-on")
 
-    var setupFunctions = {
-	user:     setupUser,
-	policy:   unimplemented,
-	config:   unimplemented};
+    setActiveTab(getParentTabs()[tab]);
 
+    getSetupFunctions()[tab](queryParams.facet );
+});
 
 
-   var tabName = this.id.substring("tab-".length);
+
+function setActiveTab(tabName){
+
     $(".main-nav-on").removeClass('main-nav-on').addClass("main-nav-off")
     var activeTab = "#span-tab-"+tabName;
     $(activeTab).removeClass('main-nav-off').addClass("main-nav-on")
-
-    setupFunctions[tabName]();
-
-}
-
-function setActiveSubtab(){
-
-    var setupFunctions = {
-	user:     setupUser,
-	group:    setupGroup,
-	host:     setupHost,
-	hostgroup:setupHostgroup,
-	netgroup:setupNetgroup,
-};
-
-    var subtabName = this.id.substring("subtab-".length);
-    $(".sub-nav-on").removeClass('sub-nav-on').addClass("sub-nav-off")
-    var active = "#span-subtab-"+subtabName;
-    $(active).removeClass('sub-nav-off').addClass("sub-nav-on")
-
-    setupFunctions[subtabName]();
 }
 
 function clearOld(){
+    $('#search').css("display","none");
+    $('#details').css("display","none");
+    $('#content').css("display","none");
+    $('#associations').css("display","none");
+
     $('#searchResultsTable thead').html("");
     $('#searchResultsTable tfoot').html("");
     $('#searchResultsTable tbody').find("tr").remove();
@@ -163,30 +184,25 @@ function clearOld(){
     //remove old details
     $('.entryattrs dd').remove();
     $('#detail-lists').html("<hr/>");
-
 }
 
-
-
 function showSearch(){
-    $('#content').css("display","none");
-    $('#details').css("display","none");
     clearOld();
     $('#search').css("display","block");
     $("#filter").css("display","block");
 }
 
 function showContent(){
-    $('#search').css("display","none");
-    $('#details').css("display","none");
     clearOld();
     $('#content').css("display","block");
 }
 
-
 function showDetails(){
-    $('#search').css("display","none");
-    $('#content').css("display","none");
     clearOld();
     $('#details').css("display","block");
 }
+
+function showAssociations(){
+    clearOld();
+    $('#associations').css("display","block");
+}
\ No newline at end of file
diff --git a/install/static/netgroup.js b/install/static/netgroup.js
index 0ff5eabf8..5659fbd21 100644
--- a/install/static/netgroup.js
+++ b/install/static/netgroup.js
@@ -1,39 +1,46 @@
 function setupNetgroup(facet){
     if (facet == "details"){
-	setupNetgroupDetails();
+        netgroupDetailsForm.setup();
+    }else  if(facet == "add"){
+        netgroupBuilder.setup();
     }else{
-	setupNetgroupSearch();
+        netgroupSearchForm.setup();
     }
 }
 
 
+var netgroup_details_list =
+    [['identity', 'Netgroup Details', [
+        ['cn', 'Netgroup Name'],
+        ['description', 'Description'],
+        ['nisdomainname', 'NIS Domain']]]];
 
 
-function setupNetgroupDetails(){
-    var detailsForm = new DetailsForm();
-}
+var netgroupDetailsForm = new DetailsForm("netgroup",netgroup_details_list,"cn","sampledata/netgroupshow.json") ;
+
 
+var netgroupAddProperties =
+    [{title: 'Netgroup Name', id: 'pkey', type: 'text'},
+     {title: 'Description', id: 'description', type: 'text'}];
 
-function setupNetgroupSearch(){
 
+function netgroupAddOptionsFunction (){
+    var options = {
+        name: $('#pkey').val(),
+        description: $('#description').val()
+    };
+    return options;
+}
 
-    var columns = [
-	{title:"Netgroup",column:"cn",render:  function(current,cell){
-	    renderDetailColumn(current,cell,current[this.column],"netgroup");
-	}},
-	{title:"Description", column:"description",render: renderSimpleColumn}];
 
-    var netgroupSearchForm = new SearchForm("netgroup", "find", columns);
+var netgroupBuilder = new EntityBuilder("netgroup",netgroupAddProperties,netgroupAddOptionsFunction);
 
-    $("#query").unbind();
-    $("#query").click(function(){
-	sampleData = "sampledata/netgrouplist.json";
-	executeSearch(netgroupSearchForm);
-    });
-    $("#new").unbind();
-    $("#new").click( function() {
-	alert("New Netgroup...");
-    });
 
+var netgroupSearchColumns = [
+    {title:"Netgroup",column:"cn",render:  function(current,cell){
+        renderPkeyColumn(netgroupDetailsForm, current,cell);
+    }},
+    {title:"Description", column:"description",render: renderSimpleColumn}];
 
-}
+var netgroupSearchForm =
+    new SearchForm("netgroup", "find", netgroupSearchColumns,"sampledata/netgrouplist.json");
diff --git a/install/static/sampledata/hostgroupshow.json b/install/static/sampledata/hostgroupshow.json
new file mode 100644
index 000000000..cddc41ff6
--- /dev/null
+++ b/install/static/sampledata/hostgroupshow.json
@@ -0,0 +1,17 @@
+{
+    "error": null,
+    "id": 0,
+    "result": {
+        "result": {
+            "cn": [
+                "host-live"
+            ],
+            "description": [
+                "Live servers"
+            ],
+            "dn": "cn=host-live,cn=hostgroups,cn=accounts,dc=ayoung,dc=boston,dc=devel,dc=redhat,dc=com"
+        },
+        "summary": null,
+        "value": "host-live"
+    }
+}
\ No newline at end of file
diff --git a/install/static/sampledata/netgroupshow.json b/install/static/sampledata/netgroupshow.json
new file mode 100644
index 000000000..05334480d
--- /dev/null
+++ b/install/static/sampledata/netgroupshow.json
@@ -0,0 +1,26 @@
+{
+    "error": null, 
+    "id": 0, 
+    "result": {
+        "result": {
+            "cn": [
+                "net-live"
+            ], 
+            "description": [
+                "live servers"
+            ], 
+            "dn": "ipauniqueid=51451097-abef-11df-ad3a-525400674dcd,cn=ng,cn=alt,dc=ayoung,dc=boston,dc=devel,dc=redhat,dc=com", 
+            "memberhost_hostgroup": [
+                "host-live"
+            ], 
+            "memberuser_group": [
+                "muppets"
+            ], 
+            "nisdomainname": [
+                "ayoung.boston.devel.redhat.com"
+            ]
+        }, 
+        "summary": null, 
+        "value": "net-live"
+    }
+}
\ No newline at end of file
diff --git a/install/static/search.js b/install/static/search.js
index fbcec7867..95ac482de 100644
--- a/install/static/search.js
+++ b/install/static/search.js
@@ -16,7 +16,7 @@ var sampleData;
 //These are helper functions, either assigned to the rneder method
 //Or called from a thin wrapper render method
 function  renderSimpleColumn(current,cell){
-	cell.innerHTML = current[this.column];
+    cell.innerHTML = current[this.column];
 }
 
 
@@ -24,11 +24,19 @@ function  renderUnknownColumn(current,cell){
     cell.innerHTML = "Unknown";
 }
 
+
+function renderPkeyColumn(form,current,cell){
+    $("<a/>",{
+    href:"#tab="+form.obj+"&facet=details&pkey="+current[form.pkeyCol],
+    html:  "" + current[form.pkeyCol],
+    }).appendTo(cell);
+}
+
+
 function renderDetailColumn(current,cell,pkey,obj){
     $("<a/>",{
-	href:"#tab=user&facet=details&pkey="+pkey,
-	html:  ""+ current[this.column],
-	click: function(){ setupUserDetails(current.uid)},
+    href:"#tab="+obj+"&facet=details&pkey="+pkey,
+    html:  ""+ current[this.column],
     }).appendTo(cell);
 }
 
@@ -37,67 +45,59 @@ function renderDetailColumn(current,cell,pkey,obj){
 function SearchForm(obj, method, cols, searchSampleData){
 
     this.buildColumnHeaders =  function (){
-	var columnHeaders  = document.createElement("tr");
-	for (var i =0 ; i != this.columns.length ;i++){
-	    var th = document.createElement("th");
-	    th.innerHTML = this.columns[i].title;
-	    columnHeaders.appendChild(th);
-	}
-	$('#searchResultsTable thead:last').append(columnHeaders);
+    var columnHeaders  = document.createElement("tr");
+    for (var i =0 ; i != this.columns.length ;i++){
+        var th = document.createElement("th");
+        th.innerHTML = this.columns[i].title;
+        columnHeaders.appendChild(th);
+    }
+    $('#searchResultsTable thead:last').append(columnHeaders);
     }
 
 
     this.renderResultRow = function(current){
-	var row = document.createElement("tr");
-	var cell;
-	var link;
-	for(var index = 0 ; index < this.columns.length; index++){
-	    this.columns[index].render(current, row.insertCell(-1));
-	}
-	return row;
+    var row = document.createElement("tr");
+    var cell;
+    var link;
+    for(var index = 0 ; index < this.columns.length; index++){
+        this.columns[index].render(current, row.insertCell(-1));
+    }
+    return row;
     }
 
     this.searchSuccess = function (json){
-	if (json.result.truncated){
-	    $("#searchResultsTable tfoot").html("More than "+sizelimit+" results returned.  First "+ sizelimit+" results shown." );
-	}else{
-	    $("#searchResultsTable tfoot").html(json.result.summary);
-	}
-	$("#searchResultsTable tbody").find("tr").remove();
-	for (var index = 0; index !=  json.result.result.length; index++){
-	var current = json.result.result[index];
-	    $('#searchResultsTable tbody:last').append(this.renderResultRow(current));
-	}
+    if (json.result.truncated){
+        $("#searchResultsTable tfoot").html("More than "+sizelimit+" results returned.  First "+ sizelimit+" results shown." );
+    }else{
+        $("#searchResultsTable tfoot").html(json.result.summary);
+    }
+    $("#searchResultsTable tbody").find("tr").remove();
+    for (var index = 0; index !=  json.result.result.length; index++){
+    var current = json.result.result[index];
+        $('#searchResultsTable tbody:last').append(this.renderResultRow(current));
+    }
     }
 
     this.searchWithFilter = function(queryFilter){
-	var form = this;
-	window.location.hash="#tab="
-	+this.obj
-	    +"&facet=search&criteria="
-	    +queryFilter;
-
-	$('#searchResultsTable tbody').html("");
-	$('#searchResultsTable tbody').html("");
-	$('#searchResultsTable tfoot').html("");
-
-	ipa_cmd(this.method,
-		[queryFilter],
-		{"all":"true"},
-		function(json){
-		    form.searchSuccess(json);
-		},
-		function(json){
-		    alert("Search Failed");
-		},form.obj, form.searchSampleData);
+    var form = this;
 
-    }
+    $('#searchResultsTable tbody').html("");
+    $('#searchResultsTable tbody').html("");
+    $('#searchResultsTable tfoot').html("");
 
-    this.obj = obj;
-    this.method = method;
-    this.columns = cols;
-    this.searchSampleData = searchSampleData;
+    ipa_cmd(this.method,
+        [queryFilter],
+        {"all":"true"},
+        function(json){
+            form.searchSuccess(json);
+        },
+        function(json){
+            alert("Search Failed");
+        },form.obj, form.searchSampleData);
+
+    }
 
+    this.setup = function(){
     showSearch();
 
     $('#searchResultsTable thead').html("");
@@ -105,20 +105,39 @@ function SearchForm(obj, method, cols, searchSampleData){
     $('#searchResultsTable tfoot').html("");
 
     $("#new").click(function(){
-	location.href="#tab="+obj+"&facet=add";
+        location.hash="tab="+obj+"&facet=add";
     });
+
+    $("#query").click(executeSearch);
+
     this.buildColumnHeaders();
 
     var params = ipa_parse_qs();
 
-    if (params["criteria"]){
-	this.searchWithFilter(params["criteria"]);
+    qs = location.hash.substring(1);
+    //TODO fix this hack.  since parse returns an object, I don't know how to see if that object has a"critia" property if criteria is null.
+    if (qs.indexOf("criteria") > 0)
+    {
+        this.searchWithFilter(params["criteria"]);
+    }
     }
-}
 
+    this.obj = obj;
+    this.method = method;
+    this.columns = cols;
+    this.searchSampleData = searchSampleData;
 
-executeSearch = function(searchForm){
+    this.setup();
+}
+executeSearch = function(){
     var queryFilter = $("#queryFilter").val();
-    searchForm.searchWithFilter(queryFilter);
+    var qp = ipa_parse_qs();
+    var tab = qp.tab;
+    if (!tab){
+        tab = 'user';
+    }
+    window.location.hash="#tab="
+      +tab
+    +"&facet=search&criteria="
+    +queryFilter;
 }
-
diff --git a/install/static/user-groups.inc b/install/static/user-groups.inc
deleted file mode 100644
index d292672f4..000000000
--- a/install/static/user-groups.inc
+++ /dev/null
@@ -1,49 +0,0 @@
-<script type="text/javascript">
-
-$(document).ready( initializeUserGroupEnrollments);
-    
-</script>
-
-
-<h1>Enroll in Groups</h1>
-
-<form> 
-  <div style="border-width:1px">
-    <div >
-      <input type="text"/>
-      <input id="query" type="button" value="Find Groups"/>
-
-      <span style="float:right"> 
-	<input id="cancelEnrollGroups" type="button" value="Cancel"/>
-	<input id="enrollGroups" type="button" value="Enroll"/>
-      </span>
-
-    </div>
-    <div  id="results"  style="border: 2px solid rgb(0, 0, 0); position:relative;  height:200px;" >
-      <div style="float:left;">
-	<div>Groups</div>
-	<select id="grouplist" width="150px" size="10" multiple="true" >
-	</select>
-      </div>
-      <div style="float:left;">
-	<p><input id="removeFromList" type="button" value="&lt;&lt;"/> </p>
-	<p><input id="addToList" type="button" value="&gt;&gt;"/></p>
-      </div>
-      <div style="float:left;">
-	<div>Prospective Enrollments</div>
-	<select id="enrollments" width="150px"  size="10" multiple="true" >
-	</select>
-      </div>
-    </div>
-    <hr/>
-    <div>Message Area</div>
-    <hr/>
-    <div>
-      <span style="float:left">
-	<p>*Enter Group Names and Press Groups</p>
-	<p>*More stuff</p>
-	<p>*More stuff</p>
-      </span>
-    </div>
-  </div>
-</form>
diff --git a/install/static/user.js b/install/static/user.js
index 2e87e6239..826ac1d1f 100644
--- a/install/static/user.js
+++ b/install/static/user.js
@@ -1,102 +1,121 @@
-
-
 var user_details_lists = [
     ['identity', 'Identity Details', [
-            ['title', 'Title'],
-            ['givenname', 'First Name'],
-            ['sn', 'Last Name'],
-            ['cn', 'Full Name'],
-            ['displayname', 'Dispaly Name'],
-            ['initials', 'Initials']
-        ]
+        ['title', 'Title'],
+        ['givenname', 'First Name'],
+        ['sn', 'Last Name'],
+        ['cn', 'Full Name'],
+        ['displayname', 'Dispaly Name'],
+        ['initials', 'Initials']
+    ]
     ],
     ['account', 'Account Details', [
-            ['call_a_status', 'Account Status'],
-            ['uid', 'Login'],
-            ['call_a_password', 'Password'],
-            ['uidnumber', 'UID'],
-            ['gidnumber', 'GID'],
-            ['homedirectory', 'homedirectory']
-        ]
+        ['call_a_status', 'Account Status'],
+        ['uid', 'Login'],
+        ['call_a_password', 'Password'],
+        ['uidnumber', 'UID'],
+        ['gidnumber', 'GID'],
+        ['homedirectory', 'homedirectory']
+    ]
     ],
     ['contact', 'Contact Details', [
-            ['mail', 'E-mail Address'],
-            ['call_a_numbers', 'Numbers']
-        ]
+        ['mail', 'E-mail Address'],
+        ['call_a_numbers', 'Numbers']
+    ]
     ],
     ['address', 'Mailing Address', [
-            ['street', 'Address'],
-            ['location', 'City'],
-            ['call_a_st', 'State'],
-            ['postalcode', 'ZIP']
-        ]
+        ['street', 'Address'],
+        ['location', 'City'],
+        ['call_a_st', 'State'],
+        ['postalcode', 'ZIP']
+    ]
     ],
     ['employee', 'Employee Information', [
-            ['ou', 'Org. Unit'],
-            ['call_a_manager', 'Manager']
-        ]
+        ['ou', 'Org. Unit'],
+        ['call_a_manager', 'Manager']
+    ]
     ],
     ['misc', 'Misc. Information', [
-            ['carlicense', 'Car License']
-        ]
+        ['carlicense', 'Car License']
+    ]
     ]
 ];
 
 
 function setupUser(facet){
     if (facet == "details"){
-	setupUserDetails()
+        setupUserDetails();
     }else  if (facet == "add"){
-	setupAddUser();
+        userBuilder.setup();
     }else  if (facet == "group"){
-	setupUserGroupEnrollmentSearch();
+        setupUserGroupList();
     }else  if (facet == "groupmembership"){
-	setupUserGroupMembership();
+        setupUserGroupMembership();
     }else{
-
-	setupUserSearch();
+        userSearchForm.setup();
     }
 }
 
 function add_user_fail(reason){
-     alert("Add User Failed:"+JSON.stringify(reason));
+    alert("Add User Failed:"+JSON.stringify(reason));
 }
 
 function addUser(on_success){
 
     var options = {  givenname:  $("#firstname").val(),
-		     sn:  $("#lastname").val(),
-		    uid :        $("#login").val()};
+                     sn:  $("#lastname").val(),
+                     uid :        $("#login").val()};
 
     ipa_cmd( 'add', [], options, on_success, add_user_fail, 'user' );
 }
 
 function addAnotherUser(){
-
     addUser(setupAddUser);
 }
 
 function addEditUser(){
     addUser(function (response){
-	setupUserDetails($("#login").val());
+        setupUserDetails($("#login").val());
     });
 }
 
-function setupAddUser(){
-    showContent();
-    $('#content').load("user-add.inc");
+var userAddProperties = [
+    {title: 'login',      id: 'pkey',      type: 'text'},
+    {title: 'First Name', id: 'firstname', type:'text'},
+    {title: 'Last Name', id: 'lastname', type:'text'}
+];
+var userBuilder =
+    new EntityBuilder(
+        "user",
+        userAddProperties,
+        function(){
+            var options = {  givenname:  $("#firstname").val(),
+                             sn:  $("#lastname").val()};
+            return options;
+        });
+
+
+function setupFacetNavigation(pkey,facet){
+    $("#viewtype").html("");
+    var facets = ["details","group", "groupmembership"];
+
+    for (var i =0; i < facets.length; i++){
+        var li = $('<li>').appendTo($("#viewtype"));
+        if (facets[i] == facet){
+            $('<img src="but-selected.png" alt="" />');
+            li.html(facets[i]);
+        }else{
+            $('<img src="but-unselected.png" alt="" />').appendTo(li);
+            $('<a/>',{
+                href: "#tab=user&facet="+facets[i]+"&pkey="+pkey,
+                html: facets[i]
+            }).appendTo(li);
+        }
+    }
 }
 
 function setupUserDetails(user){
-
-    window.location.hash="#tab=user&facet=details&pkey="+user;
-
-    //re initialize global parse of parameters
     qs = ipa_parse_qs();
-
-    //TODO make this work for more than just user details
-    details_lists =  user_details_lists;
-
+    setupFacetNavigation(qs.pkey,qs.facet);
     showDetails();
     renderUserDetails();
 }
@@ -122,48 +141,44 @@ function renderUserDetails()
 }
 
 function  renderSimpleColumn(current,cell){
-	cell.innerHTML = current[this.column];
+    cell.innerHTML = current[this.column];
 }
 
 function renderUserLinks(current, cell){
-	link = document.createElement("a");
-	cell.appendChild(link);
+    link = document.createElement("a");
+    cell.appendChild(link);
 
     $("<a/>",{
-	href:"#tab=user&facet=details&pkey="+current.uid,
-	html:  "[D]",
-	click: function(){ setupUserDetails(current.uid)},
+        href:"#tab=user&facet=details&pkey="+current.uid,
+        html:  "[D]",
     }).appendTo(cell);
 
     $("<a/>",{
-	href: "#tab=user&facet=group&pkey="+current.uid,
-	click:setupUserGroupMembership,
-	html: "[G]"
+        href: "#tab=user&facet=group&pkey="+current.uid,
+        html: "[G]"
     }).appendTo(cell);
 
     $("<a/>",{
-	href:"#tab=user&facet=netgroup&pkey="+current.uid,
-	html: "[N]"
+        href:"#tab=user&facet=netgroup&pkey="+current.uid,
+        html: "[N]"
     }).appendTo(cell);
 
     $("<a/>",{
-	href:"#tab=user&facet=role&pkey="+current.uid,
-	html:"[R]"
+        href:"#tab=user&facet=role&pkey="+current.uid,
+        html:"[R]"
     }).appendTo(cell);
 }
 
-
-
 function renderUserDetailColumn(current,cell){
 
     $("<a/>",{
-	href:"#tab=user&facet=details&pkey="+current.uid,
-	html:  ""+ current[this.column],
-	click: function(){ setupUserDetails(current.uid)},
+        href:"#tab=user&facet=details&pkey="+current.uid,
+        html:  ""+ current[this.column],
+        click: function(){ setupUserDetails(current.uid)},
     }).appendTo(cell);
 }
 
-var columns  = [
+var userSearchColumns  = [
     {title:"Name",     column:"cn",             render: renderSimpleColumn},
     {title:"Login",    column:"uid",            render: renderUserDetailColumn},
     {title:"UID",      column:"uidnumber",      render: renderSimpleColumn},
@@ -173,18 +188,7 @@ var columns  = [
     {title:"Actions",  column:"none",           render: renderUserLinks}
 ];
 
-function setupUserSearch(){
-    var userSearchForm = new SearchForm("user", "find", columns,  "sampledata/userlist.json");
-
-    $("#query").unbind();
-    $("#query").click(function(){
-	sampleData = "sampledata/userlist.json";
-	executeSearch(userSearchForm);
-    });
-    $("#new").unbind();
-    $("#new").click(setupAddUser);
-
-}
+var userSearchForm = new SearchForm("user", "find", userSearchColumns,  "sampledata/userlist.json");
 
 /*Usr group enrollement:
   given a user, manage the groups in which they are enrolled */
@@ -192,22 +196,53 @@ function populateUserGroupFailure(){
     alert("Can't find user");
 }
 
-function setupUserGroupEnrollmentSearch(pkey){
+function setupUserGroupMembership(pkey){
     sampleData = "sampledata/usershow.json";
-    showContent();
-    $("#content").load("user-groups.inc");
-}
+    showAssociations();
+    qs = ipa_parse_qs();
+    setupFacetNavigation(qs['pkey'],qs['facet']);
+
+    $('h1').text('Enroll user ' + qs['pkey'] + ' in groups');
 
+    $("#enrollGroups").click(function(){
+        groupsToEnroll =  [];
+        $('#enrollments').children().each(function(i, selected){
+            groupsToEnroll.push(selected.value);
+        });
+
+        currentUserToEnroll = qs['pkey'];
+        enrollUserInNextGroup();
+    });
+
+    $("#addToList").click(function(){
+        $('#grouplist :selected').each(function(i, selected){
+            $("#enrollments").append(selected);
+        });
+        $('#grouplist :selected').remove();
+    });
+
+    $("#removeFromList").click(function(){
+        $('#enrollments :selected').each(function(i, selected){
+            $("#grouplist").append(selected);
+        });
+        $('#enrollments :selected').remove();
+    });
+
+    $("#find").click(function(){
+        ipa_cmd( 'find', [], {}, populateUserGroupSearch, populateUserGroupFailure, 'group', "sampledata/grouplist.json" );
+
+    });
+}
 
 function populateUserGroupSearch(searchResults){
     results = searchResults.result;
- 	$("#grouplist").html("");
-	for (var i =0; i != searchResults.result.count; i++){
-	    var li = document.createElement("option");
-	    li.value = searchResults.result.result[i].cn;
-	    li.innerHTML = searchResults.result.result[i].cn;
-	    $("#grouplist").append(li);
-	}
+    $("#grouplist").html("");
+    for (var i =0; i != searchResults.result.count; i++){
+        var li = document.createElement("option");
+        li.value = searchResults.result.result[i].cn;
+        li.innerHTML = searchResults.result.result[i].cn;
+        $("#grouplist").append(li);
+    }
 }
 
 var currentUserToEnroll;
@@ -222,63 +257,27 @@ function enrollUserInGroupFailure(response){
 }
 
 function enrollUserInNextGroup(){
-   var  currentGroupToEnroll = 	groupsToEnroll.shift();
+    var  currentGroupToEnroll =     groupsToEnroll.shift();
 
     if (currentGroupToEnroll){
-	var options = {"user":currentUserToEnroll};
-	var args = [currentGroupToEnroll];
+        var options = {"user":currentUserToEnroll};
+        var args = [currentGroupToEnroll];
 
-	ipa_cmd( 'add_member',args, options ,
-		 enrollUserInGroupSuccess,
-		 enrollUserInGroupFailure );
+        ipa_cmd( 'add_member',args, options ,
+                 enrollUserInGroupSuccess,
+                 enrollUserInGroupFailure );
     }else{
-	setupUserGroupMembership();
+        location.hash="tab=user&facet=group&pkey="+qs.pkey;
     }
 }
 
-function initializeUserGroupEnrollments(){
-
-    $('h1').text('Enroll user ' + qs['pkey'] + ' in groups');
-
-    $("#enrollGroups").click(function(){
-	groupsToEnroll =  [];
-	$('#enrollments').children().each(function(i, selected){
-	    groupsToEnroll.push(selected.value);
-	});
-
-	currentUserToEnroll = qs['pkey'];
-	enrollUserInNextGroup();
-    });
-
-    $("#addToList").click(function(){
-	$('#grouplist :selected').each(function(i, selected){
-	    $("#enrollments").append(selected);
-	});
-	$('#grouplist :selected').remove();
-    });
-
-    $("#removeFromList").click(function(){
-	$('#enrollments :selected').each(function(i, selected){
-	    $("#grouplist").append(selected);
-	});
-	$('#enrollments :selected').remove();
-    });
-
-    $("#query").click(function(){
-	ipa_cmd( 'find', [], {}, populateUserGroupSearch, populateUserGroupFailure, 'group', "sampledata/grouplist.json" );
-
-    });
-
-}
-
-
 function renderUserGroupColumn(){
 }
 
 /*Group Membership&*/
 
 function  renderUserGroupColumn(current,cell){
-	cell.innerHTML = "Nothing to see here";
+    cell.innerHTML = "Nothing to see here";
 }
 
 var groupMembershipColumns  = [
@@ -293,52 +292,51 @@ function populateUserEnrollments(userData){
 
     var memberof_group = userData.result.result.memberof_group
     for (var j = 0; j < memberof_group.length; j++){
-	var row  = document.createElement("tr");
+        var row  = document.createElement("tr");
 
-	var td = document.createElement("td");
-	td.innerHTML = memberof_group[j];
-	row.appendChild(td);
+        var td = document.createElement("td");
+        td.innerHTML = memberof_group[j];
+        row.appendChild(td);
 
-	td = document.createElement("td");
-	td.innerHTML = "TBD";
-	row.appendChild(td);
+        td = document.createElement("td");
+        td.innerHTML = "TBD";
+        row.appendChild(td);
 
-	var td = document.createElement("td");
-	td.innerHTML = "TBD";
-	row.appendChild(td);
+        var td = document.createElement("td");
+        td.innerHTML = "TBD";
+        row.appendChild(td);
 
-	$('#searchResultsTable thead:last').append(row);
+        $('#searchResultsTable thead:last').append(row);
     }
 }
 
 
-function setupUserGroupMembership(){
+function setupUserGroupList(){
+    qs = ipa_parse_qs();
+    setupFacetNavigation(qs['pkey'],qs['facet']);
+    showSearch();
 
-    $("#searchButtons").html("");
+    $("#filter").css("display","none");
 
+    $("#searchButtons").html("");
     $("<input/>",{
-	type:  'button',
-	value: 'enroll',
-	click: setupUserGroupEnrollmentSearch
+        type:  'button',
+        value: 'enroll',
+        click: function(){
+            location.hash="tab=user&facet=groupmembership&pkey="+qs['pkey'];
+        }
     }).appendTo("#searchButtons");
-
-
-    showSearch();
     var columnHeaders  = document.createElement("tr");
     for (var i =0 ; i != groupMembershipColumns.length ;i++){
-	var th = document.createElement("th");
-	th.innerHTML = groupMembershipColumns[i].title;
-	columnHeaders.appendChild(th);
+        var th = document.createElement("th");
+        th.innerHTML = groupMembershipColumns[i].title;
+        columnHeaders.appendChild(th);
     }
     $('#searchResultsTable thead:last').append(columnHeaders);
 
-    sampleData="sampledata/usershow.json";
-    ipa_cmd( 'show', [qs['pkey']], {}, populateUserEnrollments, populateUserGroupFailure, 'user' );
-
-
+    ipa_cmd( 'show', [qs['pkey']], {}, populateUserEnrollments, populateUserGroupFailure, 'user',"sampledata/usershow.json" );
 }
 
-/* user-details.inc javascript */
 
 function on_win(data, textStatus, xhr)
 {
@@ -501,4 +499,3 @@ function a_st(jobj, result, mode)
     else
         sel.val('');
 }
-