function update_item_uis_for_id(item_id) {
   if (typeof g_item_ids_uis[item_id] != 'undefined') {
      for (var j = 0 ; j < g_item_ids_uis[item_id].length; j++) {
         g_item_ids_uis[item_id][j].draw();
      }
   }
}

function _icon(s)
{  
   return '<IMG BORDER="0" ALIGN=ABSMIDDLE SRC="' +
         K.ICON_URL + s + '">';
} 

function _add_tab_item(func, str, icon)
{  var s = '';
   if (icon)
   {  s += '<A HREF="javascript:' + func + '">' + _icon(icon) +
      "</A>&nbsp;&nbsp;";
   }
   if (str)
   {
      s += '<A HREF="javascript:' + func + '">';
      s += str + '</A>&nbsp;&nbsp;';
   }
   return s;
}

function _mk_div(thing) {
   thing = thing || "DIV";
   var div = document.createElement(thing);
   div.style.cssFloat   = "left";
   div.style.styleFloat = "left"; // IE sucks
   return div;
}

var item_ui_el_id_now = 0;
var g_upload_el_now = 0;


var item_ui = function (spec, my) {
   var that = {};
   my    = my   || {};
   spec  = spec || {};

   var picked    = false;
   var editing   = false;
   var root_el   = spec.root_el || null;
   var parent_ui = spec.parent_ui;
   var el_id     = item_ui_el_id_now++;
   var item      = spec.item      || null;  
   var item_list = spec.item_list || null;
   var is_root   = spec.is_root   || false;
   var depth     = spec.depth     || 0;
   var same_line = spec.same_line || false;
   var expanded = false;

   // stores the item_uis by item so we can keep track
   //  of what we've got and move / delete things
   var children_item_uis = [];
 
   var drawn_version = null;

   // maybe a cleaner way to unify with other Ajax-y stuff?
   function upload_new_image_item(form_el, parent_id, insert_before) {

      var xml = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>";
      xml += _tag(K.TAG_REQUEST);
      xml += _tag_(K.TAG_CMD, K.TAG_CMD_UPLOAD_FILE);
      xml += _tag_(K.TAG_TYPE_ID, K.ITEM_TYPE_IMAGE);
      xml += _tag_(K.TAG_PARENT_ID, parent_id);
      xml += _tag_(K.TAG_INSERT_BEFORE, insert_before);
      xml +=  tag_(K.TAG_REQUEST);

      form_el.action = "/upload_backend.php?xml=" + urlencode(xml);
      form_el.submit();
   }

   var post_image_upload_cleanup = function() {

   }

   var make_image_upload = function(save_func, cancel_func, 
      parent_id, insert_before, my_anidiv) {

      var upload_el = _mk_div('FORM');
      upload_el.style.clear = "left";
      // kind of awkward to put this here, but...
      upload_el.style.marginLeft = (15*(1+depth)) + "px";

      upload_el.encoding = "multipart/form-data";
      upload_el.method = "POST";

      upload_el.appendChild(document.createTextNode("put image here"));

      var file_size = document.createElement("INPUT");
      file_size.type = "hidden";
      file_size.name = "MAX_FILE_SIZE";
      file_size.value = K.MAX_UPLOAD_FILE_SIZE;
      upload_el.appendChild(file_size);
     
      var file_input = document.createElement("INPUT");
      file_input.type = "file";
      file_input.name = "uploaded_file";
      file_input.onchange = function(e) { 
         if (file_input.value != null) {
            save_func(upload_el, parent_id, insert_before);
            my_anidiv.close(true);
            my_anidiv.set_nuke();
         }
      } 

      upload_el.appendChild(file_input);

      var my_iframe = document.createElement("IFRAME");
      upload_el.appendChild(my_iframe);
      upload_el.target = my_iframe.name = "upload_frame" + g_upload_el_now;
      my_iframe.style.display = "none"; 

      var save_link = document.createElement('A');
      save_link.setAttribute('href', "javascript:void(0)");
      save_link.appendChild(document.createTextNode("Upload"));

      // remove me?
      save_link.onclick = function() {
         save_func(upload_el, parent_id, insert_before);
            my_anidiv.close(true);
            my_anidiv.set_nuke();
      }
      upload_el.appendChild(save_link);
      g_upload_el_now++;

      return upload_el;
   }

   var outer_el     = _mk_div();

   var handle_add_bar_opened = function(the_anidiv) {
      if (the_anidiv.is_nuke()) {
         the_anidiv.nuke();
      }
      if (!the_anidiv.el().hasChildNodes()) {
         // child add
         var add_as_child_div = document.createElement('DIV');

         var table = document.createElement('TABLE');
         add_as_child_div.appendChild(table);

         table.style.margin = "0px";
         table.style.border = "0px"
         table.style.float = "left";
//         table.border = "1";
         table.borderCollapse = "collapse";
         
         var row = table.insertRow(0);
         var cell = row.insertCell(0);
         if (!the_anidiv.baggage.is_first) {
            cell.rowSpan = 2;
         }
         cell.style.width = "10px";
         cell.style.borderRight = "1px dotted black";
         cell.appendChild(document.createTextNode("\u00a0"));
         cell = row.insertCell(1);
         cell.style.width = "10px";
         cell.style.borderBottom = "1px dotted black";
         cell.appendChild(document.createTextNode("\u00a0"));

         cell = row.insertCell(2);
         cell.rowSpan = 2;

         var button_div = document.createElement('DIV');
//         button_div.style.float = "left";
         cell.appendChild(button_div);
         button_div.className = "pick_content_add_bar";
//         add_as_child_div.style.marginTop = "5px";
//         add_as_child_div.style.marginLeft = (15*depth) + "px";

         var add_child_txt = document.createElement('INPUT');
         add_child_txt.style.float = "left";
         add_child_txt.type = "button";
         add_child_txt.value = "Add Text";
         button_div.appendChild(add_child_txt);
         add_child_txt.onclick = function() {
            the_anidiv.hold_open();
            remove_all_children(the_anidiv.el());

            var spec = {
            'oneditstart': null,
            'oneditend'  : function() {
               the_anidiv.close(true);
               the_anidiv.set_nuke();
            },
            'onsave'     : function(the_textbox) {
               var xml = _tag_(K.TAG_PAYLOAD, the_textbox.get_value());
               xml += _tag_(K.TAG_TYPE_ID, K.ITEM_TYPE_TEXT);
               xml += _tag_(K.TAG_ITEM_ID, item.id());
               if (the_anidiv.baggage.is_first) {
                  xml += _tag_(K.TAG_INSERT_BEFORE, 0);
               }
               the_textbox.clear();
               the_anidiv.close();
               
               do_ajax("/item_backend.php", process_add_item, 
                  K.TAG_CMD_ADD, xml);
            }};

            var content_text_edit = textbox(spec);
            if (!the_anidiv.baggage.is_first) {
               content_text_edit.el().style.marginLeft = (15*depth) + "px";
            }  
            the_anidiv.el().appendChild(content_text_edit.el());
            content_text_edit.select();
         }

         button_div.appendChild(document.createTextNode("\u00a0\u00a0"));

         var add_child_txt = document.createElement('INPUT');
         add_child_txt.style.float = "left";
         add_child_txt.type = "button";
         add_child_txt.value = "Add Page";
         button_div.appendChild(add_child_txt);
         add_child_txt.onclick = function() {
            the_anidiv.hold_open();
            remove_all_children(the_anidiv.el());

            var spec = {
            'oneditstart': null,
            'oneditend'  : function() {
               remove_all_children(the_anidiv.el());
               the_anidiv.release_open()
            },
            'onsave'     : function(the_textbox) {
               var xml = _tag_(K.TAG_PAYLOAD, the_textbox.get_value());
               xml += _tag_(K.TAG_TYPE_ID, K.ITEM_TYPE_PAGE);
               xml += _tag_(K.TAG_ITEM_ID, item.id());
               if (the_anidiv.baggage.is_first) {
                  xml += _tag_(K.TAG_INSERT_BEFORE, 0);
               }
               the_textbox.clear();
               the_anidiv.close();
               
               do_ajax("/item_backend.php", process_add_item, 
                  K.TAG_CMD_ADD, xml);
            }};

            var content_text_edit = textbox(spec);
            if (!the_anidiv.baggage.is_first) {
               content_text_edit.el().style.marginLeft = (15*depth) + "px";
            }  
            the_anidiv.el().appendChild(content_text_edit.el());
            content_text_edit.select();
         }

         button_div.appendChild(document.createTextNode("\u00a0\u00a0"));

         var add_child_img = document.createElement('INPUT');
         add_child_img.type = "button";
         add_child_img.value = "Add Image";
         button_div.appendChild(add_child_img);
         the_anidiv.el().appendChild(add_as_child_div);
         add_child_img.onclick = function() {
            the_anidiv.hold_open();
            remove_all_children(the_anidiv.el());
            the_anidiv.el().appendChild(
               make_image_upload(upload_new_image_item, 
               function() {   
               the_anidiv.close(true);
               the_anidiv.set_nuke();
               }, 
               item.id(), 0, the_anidiv));
         }
         row = table.insertRow(1);
         cell = row.insertCell(0);
         cell.appendChild(document.createTextNode("\u00a0"));

         if (the_anidiv.baggage.is_first) {
            cell = row.insertCell(1);
            cell.appendChild(document.createTextNode("\u00a0"));
         } 

         if (!the_anidiv.baggage.is_first) {
         // peer add
         var add_as_peer_div = document.createElement('DIV');
         add_as_peer_div.style.clear = "left";
         add_as_peer_div.style.float = "left";
         add_as_peer_div.className = "pick_content_add_bar";
//         add_as_peer_div.style.marginTop = "5px";
         add_as_peer_div.style.marginBottom = "5px";

         var add_peer_txt= document.createElement('INPUT');
         add_peer_txt.type = "button";
         add_peer_txt.value = "Add Text";
         add_as_peer_div.appendChild(add_peer_txt);
         add_peer_txt.onclick = function() {
            the_anidiv.hold_open();
            remove_all_children(the_anidiv.el());

            var spec = {
            'oneditstart': null,
            'oneditend'  : function() {
               the_anidiv.close(true);
               the_anidiv.set_nuke();
            },
            'onsave'     : function(the_textbox) {
               var xml = _tag_(K.TAG_PAYLOAD, the_textbox.get_value());
               xml += _tag_(K.TAG_TYPE_ID, K.ITEM_TYPE_TEXT);
               xml += _tag_(K.TAG_ITEM_ID, item.parent_id());
               xml += _tag_(K.TAG_INSERT_BEFORE, item.item_order()+1);
               the_textbox.clear();
               do_ajax("/item_backend.php", process_add_item, 
                  K.TAG_CMD_ADD, xml);
            }};

            var content_text_edit = textbox(spec);
            the_anidiv.el().appendChild(content_text_edit.el());
            content_text_edit.select();
         }

         add_as_peer_div.appendChild(document.createTextNode("\u00a0\u00a0"));

         var add_peer_img = document.createElement('INPUT');
         add_peer_img.type = "button";
         add_peer_img.value = "Add Image";
         add_as_peer_div.appendChild(add_peer_img);
         the_anidiv.el().appendChild(add_as_peer_div);
         add_peer_img.onclick = function() {
            the_anidiv.hold_open();
            remove_all_children(the_anidiv.el());
            the_anidiv.el().appendChild(
               make_image_upload(upload_new_image_item, 
               function() {   
               the_anidiv.close(true);
               the_anidiv.set_nuke()
               }, 
               item.parent_id(), item.item_order()+1), the_anidiv);
         }
         }
      } 
   }

   that.save_it = function(the_textbox) {
      var xml = _tag_(K.TAG_PAYLOAD, the_textbox.get_value());
      xml += _tag_(K.TAG_TYPE_ID, K.ITEM_TYPE_TEXT);
      xml += _tag_(K.TAG_ITEM_ID, item.parent_id());
      xml += _tag_(K.TAG_INSERT_BEFORE, item.item_order());

      the_textbox.clear();
      

      do_ajax("/item_backend.php", process_add_item, K.TAG_CMD_ADD, xml);
   }

   // rollover for the 'add bar'.  This always has a display of 'inline'

   // control is broke into 2 halves - the top 'tools' half, 
   //  and the content half.  
//   var tools_el       = document.createElement('DIV');
//   outer_el.appendChild(tools_el);
   outer_el.style.clear = "left";
   outer_el.style.width = "100%";
//   outer_el.style.marginTop = "4px";

   if (parent_ui == undefined) {
      root_el.appendChild(outer_el);
   } else {
      parent_ui.children_el().appendChild(outer_el);
   }

   // bottom half is everything but the tools
   var bottom_half_el = _mk_div();
//   bottom_half_el.style.clear = "left";
   bottom_half_el.style.marginRight= 20;
//bottom_half_el.style.border = "solid red 4px";
//   bottom_half_el.style.width = "500px";
   outer_el.appendChild(bottom_half_el);

   that.content_wrapper_el = _mk_div();
   bottom_half_el.appendChild(that.content_wrapper_el);

  // checkbox here
   that.checkbox = _mk_div('INPUT');
   that.checkbox.type = "checkbox"; 
   that.content_wrapper_el.appendChild(that.checkbox);
   that.checkbox.onclick = function() { 
      picked = (that.checkbox.value == "" ? false : true);
      if (parent_ui) { // if 'root' item, I don't have a parent
         parent_ui.update_image_children();
      }
      that.draw(true);
      item_list.handle_pick_item(that.item().id(), picked);
   }

   that.expand_link = _mk_div('A');
   that.expand_link.className = "icon";
   that.expand_link.setAttribute('href', "javascript:void(0)");

   that.expand_link.onclick = function(event) { 
      var mods = get_modifiers(event)
      item.hide(mods.shift); 
   }

   that.expand_icon = _mk_div('IMG');
   that.expand_icon.style.border = "none";
   that.expand_link.appendChild(that.expand_icon);
   that.content_wrapper_el.appendChild(that.expand_link);

   // link icon
   var link_link = _mk_div('A');
//   link_link.className = "icon";
   link_link.setAttribute('href', "/mw.php?id=" + item.id());

   var link_icon = _mk_div('IMG');
   link_icon.style.border = "none";
   link_icon.src = K.ICON_URL + "/link.png";
   link_icon.width = 30;
   link_link.appendChild(link_icon);
   that.content_wrapper_el.appendChild(link_link);

   // when we actually draw stuff, we draw it here.
   //  Note, we may not know the type of the item yet.
   that.content_render_el = _mk_div();
   that.content_wrapper_el.appendChild(that.content_render_el);

   that.content_edit_el = _mk_div();
   that.content_wrapper_el.appendChild(that.content_edit_el);

   that.content_edit_el.appendChild(document.createTextNode("\u00a0\u00a0"));

   var spec = {
   'oneditstart': null,  // should update value
   'oneditend'  : function() {
      that.edit(false);
      that.draw();
   },
   'onsave'     : function(the_textbox) {
      var xml  = _tag_(K.TAG_ITEM_ID, that.item().id());
      xml += _tag_(K.TAG_PAYLOAD, the_textbox.get_value());
      send_ajax_request(ajax_item_r, K.TAG_CMD_EDIT_TEXT, xml);
      that.edit(false);
   }};
   that.content_text_edit = textbox(spec);
   that.content_edit_el.appendChild(that.content_text_edit.el());


   // basically everthing that shows if the item is not hidden
   var children_zone = _mk_div();
//   children_zone.style.border = "2px solid red";
   children_zone.style.clear = "left";
   bottom_half_el.appendChild(children_zone);
   // Links that go above the children (e.g. Add Text, Add Image)

   that.add_bar_first = anidiv({'max_height': 45, 'min_height':5, 
      'onopened':handle_add_bar_opened}, {'is_first':true});
//   that.add_bar_first.container_el().style.marginLeft = (15*depth) + "px";
   that.add_bar_first.container_el().style.clear = "left";
   children_zone.appendChild(that.add_bar_first.container_el());

   var above_children_el = _mk_div();
   above_children_el.style.clear = "left";
   children_zone.appendChild(above_children_el);

   var upload_above = _mk_div();
   upload_above.style.clear = "left";
   above_children_el.appendChild(upload_above);

   // the children
   var children_el = document.createElement('DIV');
   children_zone.appendChild(children_el);

   // Links that go below the children (e.g. Add Text, Add Image)
   var below_children_el = _mk_div();
   below_children_el.style.clear = "left";
   children_zone.appendChild(below_children_el);

   that.add_bar = anidiv({'max_height': 45, 'min_height':5, 
      'onopened':handle_add_bar_opened}, {'is_first':false});
   that.add_bar.container_el().style.marginLeft = (15*depth) + "px";

   that.add_bar.container_el().style.clear = "left";
   outer_el.appendChild(that.add_bar.container_el());

   // put myself in the global item_ui / item table
   if (typeof g_item_ids_uis[item.id()] == 'undefined') {
      g_item_ids_uis[item.id()] = [];
   } 
   g_item_ids_uis[item.id()].push(that);

   that.remove = function() {
      that.outer_el().parentNode.removeChild(that.outer_el()); 
   }

   that.dump = function() {
      dBug("ui_id: " + el_id + " hidden: " +that.is_hidden() + " picked: " + (picked ? "true" : "false") + 
         " item_id: " + item.id());
   }

   that.add_child_ui   = function(item_id) {

      if (children_item_uis[item_id] != undefined) {
         return;
      }
   
      var child_item = find_item(item_id);

      var new_item_ui =
         item_ui({parent_ui:that, item_list:item_list,
            item: child_item, 
            depth: depth + 1, is_root:false});

      children_item_uis[item_id] = new_item_ui;

      return new_item_ui; 
   }

   // getters
   that.children_el   = function() { return children_el; }
   that.children_zone = function() { return children_zone; }
   that.outer_el      = function() { return outer_el; }
   that.el_id         = function() { return el_id; }
   that.item          = function() { return item; }
   that.picked        = function() { return picked; }
   that.is_root       = function() { return is_root; }
   that.is_hidden     = function() { return item.is_hidden(); }
   that.editing       = function() { return editing; }
   that.do_expand     = function(exp) { expanded = exp; that.draw(); }

   that.drawn_version =  null;
//   that.depth          = function() { return depth; }
   // setters
   that.toggle_pick   = function()   { 
      picked = !picked; 
      if (parent_ui) { // if 'root' item, I don't have a parent
         parent_ui.update_image_children();
      }
      that.draw(true);
   }

   that.set_root = function() { is_root = true;}
   that.edit = function(mode) { 
      if (mode === undefined) {
         editing = true;
      } else {
         editing = mode;
      }
      that.draw(true);
   }

   that.save = function() {
      that.edit(false);
      that.draw();
      var xml  = _tag_(K.TAG_ITEM_ID, that.item().id());
      xml += _tag_(K.TAG_PAYLOAD, that.content_text_edit.get_value());
      send_ajax_request(ajax_item_r, K.TAG_CMD_EDIT_TEXT, xml);
   }

   // this needs to be fixed to work with deleting too!
   // I hit the 'WHA' business below
   that.check_order = function() {


      var idx_now = 0;
      var ok = true;
      var sorter = [];

   // compare the order in the object with the order the objects are drawn
   //  if there is a difference, flag it as not ok.  Meanwhile keep the items
   //  in an array that we can then sort and use as a drawing basis
      for (var k in children_item_uis) {
         sorter.push(children_item_uis[k]);
         if (children_item_uis[k].item().item_order() != idx_now) {
            ok = false;
         }
         idx_now++;
      }

      if (!ok) {
         sorter.sort(function(a,b) { 
            return a.item().item_order() - b.item().item_order();
         });

         var idx = 0;

         for (var k in sorter) {
            var this_ui = sorter[k];
            var outer_el = this_ui.outer_el();
   
            if (outer_el.parentNode) {
               outer_el.parentNode.insertBefore(outer_el, 
                  outer_el.parentNode.childNodes[idx]);
               idx++;
            }
         }
      }
   }

   that.update_image_children = function() {
return;
      var next_clear = true;
      var sorter = [];

   // I must sort, because the children_item_uis are certainly not in order
      for (var k in children_item_uis) {
         sorter[g_all_items[k].item_order()] = children_item_uis[k];
      }

      //sorter.sort();

      for (var k in sorter) {
         var this_ui = sorter[k];
         var this_item = this_ui.item();
   
         if (this_item.type() != K.ITEM_TYPE_IMAGE) {
            next_clear = true;
         } else {
            if (this_ui.picked()) {
               next_clear = true;
               this_ui.outer_el().style.clear = "left";
            } else {
               if (next_clear) {
                  this_ui.outer_el().style.clear = "left";
//                  this_ui.outer_el().style.width = null;
//                  this_ui.outer_el().style.height = null;
               } else {
                  this_ui.outer_el().style.clear = "none";
//                  this_ui.outer_el().style.width = K.IMAGE_SIZE_THUMB_SZ;
//                  this_ui.outer_el().style.height = K.IMAGE_SIZE_THUMB_SZ;
               }
               next_clear = false;
            }
         }
      }

   }

   that.draw = function(force) {
      that.update_image_children();
      if (!force && that.drawn_version === that.item().version()) {
//         return;
      } 
//      that.dump();

      // draw (or hide) the tools at the top of the item ui
      // this could be dispensed with, and drawn once, but
      //  not as big of a deal
      that.update_tools_tab();
      var draw_el_now = that.content_wrapper_el;

      // adjust ourselves to be over where we should be, and using the
      //  right display style class for our privacy status
      bottom_half_el.style.marginLeft = (15*depth) + "px";

      // only show the expand / hide thing if there are things to expand
      //  hide
      if (that.item().child_count() < 1)
      {  that.expand_link.style.display = "none";
         that.children_zone().style.display = "none";
      }
      else
      {  that.expand_link.style.display = "inline";
         that.expand_icon.src = K.ICON_URL + 
            (that.is_hidden() ? "right_arrow" : "down_arrow") + ".png";
         that.children_zone().style.display = (that.is_hidden() ? "none" : "inline");
      }

//      that.child_el().style.display = (that.is_hidden() ? "none" : "inline");

      // in future, hide the pick item if user doesn't have permission.
      //  also, draw differently if picked

      if (0 && user.is_guest) 
      {
         // guest style drawn here
         that.content_wrapper_el.style.marginLeft = K.ICON_SPAN; // icon width
         that.content_wrapper_el.className = "item_guest"; 
      }
      else
      {  
         // fix for cut / paste
         //   that.content_wrapper_el.className = "item_cut_copy";
         that.content_wrapper_el.className = 
            (that.item().read_privacy() == K.ITEM_PRIVACY_READ_PUBLIC ? 
            "item_picked_public" : "item_picked_private");
      }

      // things we do for ALL types
      that.content_edit_el.style.display = "none";
      that.content_render_el.style.display = "inline";

      // draw text or image as appropriate
      if (that.item().type() == K.ITEM_TYPE_TEXT) {
         var t_out = "";

//         t_out += "(" + that.item().read_privacy() + ":";
//         t_out += that.item().write_privacy() + ") ";
         if (that.item().user_string()) {
            t_out += "<SPAN class=author>from: " + that.item().user_string() + "</SPAN>";
            t_out += "<BR>";
         }

      // TODO: set a flag when a user changes the text area,
      //  and do some kind of warning if a redraw tries to happen
         if (that.editing()) {
         // this is cheap; instead have flag set on edit
            if (that.content_text_edit.get_value() == "") {
               that.content_text_edit.set_value(that.item().payload());
            }
            that.content_text_edit.select();
            that.content_render_el.style.display = "none";
            that.content_edit_el.style.display = "inline";
         } else {
//            t_out += "C: " + that.item().children().length;
            var show_more_link = !expanded;
            var t = render_text(that.item().payload());
            if (!expanded && t.needs_more_link) {
               t_out += t.short_version;
               show_more_link = true;
            } else {
               t_out += t.long_version;
               show_more_link = false;
            }
            
            if (that.item().is_code())
            {  t_out = "<PRE>" + t_out + "</PRE>";
            }

            t_out += " (" + that.item().id() + " @ " + that.item().item_order() + ")";
//            t_out += " (order: " + that.item().item_order() + ")";

//            if (t_out.length > 50) t_out = "???";
            remove_all_children(that.content_render_el);

            var nd = document.createElement("DIV");
            nd.innerHTML = t_out;
            nd.onclick = function() {that.edit(true);}
            that.content_render_el.appendChild(nd);
            if (t.needs_more_link) {
               var more = document.createElement("A");
               more.appendChild(document.createTextNode("(show " +
                  (show_more_link ? "more" : "less") + ")"));
               more.setAttribute('href', "javascript:void(0)");
               that.content_render_el.appendChild(more);
               more.onclick = function() {
                  that.do_expand(show_more_link);
               } 
            } 
         }
      } else if (that.item().type() == K.ITEM_TYPE_IMAGE) {
         that.content_render_el.innerHTML = 
"<IMAGE STYLE='display:block;margin:auto' ID='img_" + that.item().id() + "' " +
         "SRC=\"/im.php?id=" + that.item().id() + "&sz=thumb\" "+
         "onclick='window.open(\"/im.php?id=" + that.item().id() + "\");'>";
      } else if (that.item().type() == K.ITEM_TYPE_ROOT) {
         that.content_render_el.innerHTML = user.email + "'s home";
      }

      var last_was_image = false;

      if (that.item().load_state() == K.LOAD_STATE_COMPLETE) {
         that.drawn_version = that.item().version();
      }
   }


   that.update_tools_tab = function() {

      if (!picked) {
//         tools_el.style.display = "none";
//         return;
      } 
//      remove_all_children(tools_el);
//      tools_el.style.marginLeft = (15*depth) + "px";
//      tools_el.className = 
//            (item.read_privacy() == K.ITEM_PRIVACY_READ_PUBLIC ? 
//            "pick_tools_public" : "pick_tools_private");
      var t = "";

      if (item.type() != K.ITEM_TYPE_ROOT)
      {  
         if (user.cut_item_now != user.item_picked_now)
         {  t += _add_tab_item("cut_item(" + item.id() + ")", "Cut", null);
         }  
         else
         {  t += _add_tab_item("uncut_item(" + item.id() + ")", "UNCut", null);
         }  
      } 

      if (user.cut_item_now != null && 
          user.cut_item_now != user.item_picked_now)
      {
         t += _add_tab_item("paste_item(" + item.id() + ")", "Paste", null);
      }

      if (item.type() != K.ITEM_TYPE_ROOT)
      {  
         t += _add_tab_item("delete_item(" + item.id() + ")", "Delete", null);

         t += '<A HREF="/mw.php?id=' + item.id() + '">Link</A>&nbsp;';

         t += '<DIV class="tight"></DIV>';

         t += _add_tab_item("shift_item(" + item.id() + ", true, true);",
            null, '2up_arrow.png');
         t += _add_tab_item("shift_item(" + item.id() + ", true, false);",
            null, 'up_arrow.png');
         t += _add_tab_item("shift_item(" + item.id() + ", false, false);",
            null, 'down_arrow.png');
         t += _add_tab_item( "shift_item(" + item.id() + ", false, true);",
            null, '2down_arrow.png');
      }

//      var newSpan = document.createElement('SPAN');
//      newSpan.innerHTML = t + '<DIV class="tight"</DIV>';
//      tools_el.appendChild(newSpan);

      var counter = 0;
      newSpan = document.createElement('SPAN');

      var txt = document.createElement('SPAN');
      txt.innerHTML = "(owner: " + item.owner_user_id() + ") " +  
         "Shown to:&nbsp;";
      newSpan.appendChild(txt);
      
      var sel = document.createElement('SELECT');
      var option = document.createElement('OPTION');
      option.text = "Anyone";
      option.value = K.ITEM_PRIVACY_READ_PUBLIC;
      sel.options[sel.options.length] = option;
      if (item.read_privacy() == option.value)
      {  
         sel.selectedIndex = sel.options.length - 1;
      }

      option = document.createElement('OPTION');
      option.text = "Just me";
      option.value = K.ITEM_PRIVACY_READ_PRIVATE;
      sel.options[sel.options.length] = option;
      if (item.read_privacy() == option.value)
      {  
         sel.selectedIndex = sel.options.length - 1;
      }

      sel.onchange = function(e) { set_privacy(item.id(), e.target.value, true, true);}
      newSpan.appendChild(sel);

      if (item.read_privacy() == K.ITEM_PRIVACY_READ_PUBLIC) 
      {
         txt = document.createElement('SPAN');
         txt.innerHTML = "&nbsp;Others can:&nbsp;";
         newSpan.appendChild(txt);

         sel = document.createElement('SELECT');
         option = document.createElement('OPTION');
         option.text = "Just Look";
         option.value = K.ITEM_PRIVACY_WRITE_NONE;
         sel.options[sel.options.length] = option;
         if (item.write_privacy() == option.value)
         {  
            sel.selectedIndex = sel.options.length - 1;
         }

         option = document.createElement('OPTION');
         option.text = "Add Things";
         option.value = K.ITEM_PRIVACY_WRITE_ADD;
         sel.options[sel.options.length] = option;
         if (item.write_privacy() == option.value)
         {  
            sel.selectedIndex = sel.options.length - 1;
         }

         sel.onchange = function(e) { set_privacy(item.id(), e.target.value, true, false);}


         newSpan.appendChild(sel);
      }
//      tools_el.appendChild(newSpan);
//      txt = document.createElement('DIV');
//      txt.className = "tight";
//      tools_el.appendChild(txt);
//      tools_el.style.display = "inline";
   }

   that.draw();

// draw existing children.  This code gets hit for search,
//  or if logging in / out after stuff has been loaded
      var kids = that.item().children();
      for (var j = 0; j < kids.length; j++) {
         that.add_child_ui(kids[j]);
// need a reorder here?
      }
   return  that;
}