Resource panel (preview and actions) added to files/folders in MySpaces portlet - files show preview similar to MyDocs panel and folders show the child docs and folders as clickable links.

Refresh action moved as per suggestion from PHH.
Recently Modified filter added to MySpaces portlet.
Image preview makes better use of preview panel area and is centered.
MyDocs preview panel brought into line with changes to MySpaces preview panel.

git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@5782 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261

config/alfresco/templates/client/doclist_preview_panel.ftl

@@ -1,34 +1,30 @@
 <#assign isImage=node.isDocument && (node.mimetype = "image/gif" || node.mimetype = "image/jpeg" || node.mimetype = "image/png")>
-<#assign isVideo=node.isDocument && node.mimetype?starts_with("video/")>
-
 <table width="100%" cellpadding="2" cellspacing="0" border="0">
    <tr>
       <td>
-         <div class="docMetapreview">
+         <div class="docPreview">
-      	   <#if node.isDocument && !isImage && !isVideo>
+      	   <#if node.isDocument && !isImage>
       	      <#assign c=cropContent(node.properties.content, 512)>
       	      <#if c?length != 0>
                   ${c?html?replace('$', '<br>', 'rm')}<#if (c?length >= 512)>...</#if>
       	      </#if>
             <#elseif isImage>
-	            <a href="${url.context}${node.url}" target="new"><img src="${url.context}${node.url}" width=120 border=0></a>
+	            <center><a href="${url.context}${node.url}" target="new"><img src="${url.context}${node.url}" height=140 border=0></a></center>
-	         <#else>
-	            TBD - Video?
       	   </#if>
          </div>
       </td>
       <td width="24"></td>
       <td width="300">
          <table width="100%" cellpadding="0" cellspacing="0">
-            <tr class="">
+            <tr>
                <td class="docAction docActionCheckout">Checkout</td>
                <td class="docAction docActionEditDetails">Edit Details</td>
             </tr>
-            <tr class="">
+            <tr>
                <td class="docAction docActionUpdate">Update</td>
                <td class="docAction docActionViewContent">View Content</td>
             </tr>
-            <tr class="">
+            <tr>
                <td class="docAction docActionDelete">Delete</td>
                <td class="docAction docActionMoreActions">More Actions...</td>
             </tr>

config/alfresco/templates/client/myspaces_preview_panel.ftl

@@ -0,0 +1,52 @@
+<#assign isImage=node.isDocument && (node.mimetype = "image/gif" || node.mimetype = "image/jpeg" || node.mimetype = "image/png")>
+<table width="100%" cellpadding="2" cellspacing="0" border="0">
+   <tr>
+      <td>
+         <div class="spacePreview">
+      	   <#if node.isDocument && !isImage>
+      	      <#assign c=cropContent(node.properties.content, 512)>
+      	      <#if c?length != 0>
+                  ${c?html?replace('$', '<br>', 'rm')}<#if (c?length >= 512)>...</#if>
+      	      </#if>
+            <#elseif isImage>
+	            <center><a href="${url.context}${node.url}" target="new"><img src="${url.context}${node.url}" height=140 border=0></a></center>
+	         <#elseif node.isContainer>
+	            <#list node.children?sort_by('name') as c>
+	               <#--if (c_index >= 25)><div>...</div><#break></#if>-->
+	               <#if c.isDocument || c.isContainer>
+	               <div style="padding:2px"><a class="childSpaceLink" onclick="event.cancelBubble=true;" href="${url.context}${c.url}" target="new"><img class="spaceImageIcon" src="${url.context}${c.icon16}" border="0">${c.name}</a></div>
+	               </#if>
+	            </#list>
+      	   </#if>
+         </div>
+      </td>
+      <td width="24"></td>
+      <td width="300">
+         <table width="100%" cellpadding="0" cellspacing="0">
+            <#if node.isDocument>
+            <tr>
+               <td class="spaceAction docActionCheckout">Checkout</td>
+               <td class="spaceAction docActionEditDetails">Edit Details</td>
+            </tr>
+            <tr>
+               <td class="spaceAction docActionUpdate">Update</td>
+               <td class="spaceAction docActionViewContent">View Content</td>
+            </tr>
+            <tr>
+               <td class="spaceAction docActionDelete">Delete</td>
+               <td class="spaceAction docActionMoreActions">More Actions...</td>
+            </tr>
+            <#else>
+            <tr>
+               <td class="spaceAction spaceActionEditDetails">Edit Details</td>
+               <td class="spaceAction spaceActionDelete">Delete</td>
+            </tr>
+            <tr>
+               <td class="spaceAction spaceActionMoreActions">More Actions...</td>
+               <td></td>
+            </tr>
+            </#if>
+         </table>
+      </td>
+   </tr>
+</table>

config/alfresco/templates/webscripts/org/alfresco/portlets/doclist_get_html.ftl

@@ -35,7 +35,7 @@
 
 <table border=0 cellspacing=0 cellpadding=0 class="docTable">
 <tr>
-   <td align=center height=40>
+   <td height=40>
       <table border=0 cellspacing=8 cellpadding=0 width=100%>
          <tr>
             <th><a class="docfilterLink <#if filter=0>docfilterLinkSelected</#if>" href="${scripturl("?f=0&p=${path}")}">All Items</a></th>
@@ -211,7 +211,7 @@ a.docfilterLinkSelected:link, a.docfilterLinkSelected:visited
    font-size: 12px;
    background-color: #bad7e4;
    color: #000000;
-   margin: 0px 0px 0px 0px;
+   margin: 0px;
    border-top: 1px dotted #0092dd;
    visibility: hidden;
    overflow: hidden;
@@ -230,12 +230,12 @@ a.docfilterLinkSelected:link, a.docfilterLinkSelected:visited
    font-weight: bolder;
 }
 
-.docMetapreview
+.docPreview
 {
    color: #515D6B;
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    overflow: hidden;
-   height: 140px;
+   height: 144px;
    width: 410px;
    border: 1px solid #0092dd;
 }

config/alfresco/templates/webscripts/org/alfresco/portlets/myspaces_get_html.ftl

@@ -15,7 +15,7 @@
 </script>
 
 <#-- get the filter mode from the passed in args -->
-<#-- filters: 0=all, 1=spaces, 2=docs, 3=mine -->
+<#-- filters: 0=all, 1=spaces, 2=docs, 3=mine, 4=recent -->
 <#if args.f?exists && args.f?length!=0><#assign filter=args.f?number><#else><#assign filter=0></#if>
 
 <#-- get the path location from the passed in args, remove trailing slash -->
@@ -48,22 +48,20 @@
          </#if>
       </#list>
    </div>
-   <#-- Refresh action -->
-   <span style="float:right;margin:6px 6px 0 0;"><a href="${scripturl("?f=${filter}&p=${path}")}" class="refreshViewLink"><img src="${url.context}/images/icons/reset.gif" border="0" width="16" height="16" style="vertical-align:-25%;padding-right:4px">Refresh</a></span>
    <div class="spaceTitle">
-      <img src="${url.context}${home.icon16}" width="16" height="16" alt="" style="vertical-align:-25%;padding-right:4px">${home.name?html}
+      <img src="${url.context}${home.icon16}" width="16" height="16" alt="" class="spaceImageIcon">${home.name?html}
    </div>
-   <div class="spaceActions">
+   <div class="spaceToolbar">
       <#-- TODO: permission checks on the actions! -->
       <#-- Upload File action -->
-      <div class="spaceAction spaceActionUpload" title="Upload a new document" onclick="MySpaces.upload(this);">Upload</div>
+      <div class="spaceToolbarAction spaceToolbarActionUpload" title="Upload a new document" onclick="MySpaces.upload(this);">Upload</div>
       <div class="spaceUploadPanel">
          <#-- Url encode the path value, and encode any single quotes to generate valid string -->
          <input class="spaceFormItem" type="submit" value="OK" onclick='MySpaces.uploadOK(this, "${path?url?replace("'","_%_")}");'>
          <input class="spaceFormItem" type="button" value="Cancel" onclick="MySpaces.closePopupPanel();">
       </div>
       <#-- Create Space action -->
-      <div class="spaceAction spaceActionCreateSpace" title="Create a new Space" onclick="MySpaces.createSpace(this);">Create Space</div>
+      <div class="spaceToolbarAction spaceToolbarActionCreateSpace" title="Create a new Space" onclick="MySpaces.createSpace(this);">Create Space</div>
       <div class="spaceCreateSpacePanel">
          <table cellspacing="2" cellpadding="2" border="0">
             <tr><td class="spaceFormLabel">Name:</td><td><input class="spaceFormItem" type="text" size="32" maxlength="1024" id="space-name"></td></tr>
@@ -74,17 +72,19 @@
          <input class="spaceFormItem" type="button" value="Cancel" onclick="MySpaces.closePopupPanel();">
       </div>
    </div>
-   <div style="text-align: center;">
+   <div>
-      <center>
+      <table border=0 cellspacing=8 cellpadding=0 width=100%>
-      <table border=0 cellspacing=8 cellpadding=0>
          <tr>
             <th><a class="spacefilterLink <#if filter=0>spacefilterLinkSelected</#if>" href="${scripturl("?f=0&p=${path}")}">All Items</a></th>
             <th><a class="spacefilterLink <#if filter=1>spacefilterLinkSelected</#if>" href="${scripturl("?f=1&p=${path}")}">Spaces</a></th>
             <th><a class="spacefilterLink <#if filter=2>spacefilterLinkSelected</#if>" href="${scripturl("?f=2&p=${path}")}">Documents</a></th>
             <th><a class="spacefilterLink <#if filter=3>spacefilterLinkSelected</#if>" href="${scripturl("?f=3&p=${path}")}">My Items</a></th>
+            <th><a class="spacefilterLink <#if filter=4>spacefilterLinkSelected</#if>" href="${scripturl("?f=4&p=${path}")}">Recently Modified</a></th>
+            <td align=right>
+               <a href="${scripturl("?f=${filter}&p=${path}")}" class="refreshViewLink"><img src="${url.context}/images/icons/reset.gif" border="0" width="16" height="16" class="spaceImageIcon">Refresh</a>
+            </td>
          </tr>
       </table>
-      </center>
    </div>
    <div id="spacePanelOverlay"></div>
    <div id="spacePanel">
@@ -213,6 +213,28 @@ a.spacefilterLinkSelected:link, a.spacefilterLinkSelected:visited
    padding-left: 16px;
 }
 
+.spaceResource
+{
+   font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
+   font-size: 12px;
+   background-color: #bad7e4;
+   color: #000000;
+   margin: 0px;
+   border-top: 1px dotted #0092dd;
+   visibility: hidden;
+   overflow: hidden;
+}
+
+.spacesAjaxWait
+{
+   background-image: url(${url.context}/images/icons/ajax_anim.gif);
+   background-position: center;
+   background-repeat: no-repeat;
+   width: 696px;
+   height: 150px;
+   overflow: hidden;
+}
+
 .spaceItemSelected
 {
    background-color: #CCE7F3 !important;
@@ -263,14 +285,14 @@ a.spaceBreadcrumbLink:link, a.spaceBreadcrumbLink:visited, a.spaceBreadcrumbLink
    border: 1px solid #CCD4DB;
 }
 
-.spaceActions
+.spaceToolbar
 {
    background-color: #EEF7FB;
    height: 4em;
    border-bottom: 1px solid #CCD4DB;
 }
 
-.spaceAction
+.spaceToolbarAction
 {
    background-repeat: no-repeat;
    background-position: 2px;
@@ -286,16 +308,90 @@ a.spaceBreadcrumbLink:link, a.spaceBreadcrumbLink:visited, a.spaceBreadcrumbLink
    border: 1px dashed #CCD4DB;
 }
 
-.spaceActionUpload
+.spaceToolbarActionUpload
 {
    background-image: url(${url.context}/images/icons/doclist_action_upload.png);
 }
 
-.spaceActionCreateSpace
+.spaceToolbarActionCreateSpace
 {
    background-image: url(${url.context}/images/icons/doclist_action_createspace.png);
 }
 
+.spaceAction
+{
+   color: #515D6B;
+   font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
+   font-size: 9pt;
+   font-weight: bolder;
+   background-color: #c3dce7;
+   background-repeat: no-repeat;
+   background-position: left;
+   width: 87px;
+   height: 28px;
+   border: 1px solid #ffffff;
+   float: left;
+   display: block;
+   padding: 10px 0px 0px 36px;
+   cursor: pointer;
+}
+
+.docActionCheckout
+{
+   background-image: url(${url.context}/images/icons/doclist_action_checkout.png);
+   border-bottom: none;
+   border-right: none;
+}
+
+.docActionEditDetails
+{
+   background-image: url(${url.context}/images/icons/doclist_action_edit.png);
+   border-bottom: none;
+}
+
+.docActionUpdate
+{
+   background-image: url(${url.context}/images/icons/doclist_action_update.png);
+   border-bottom: none;
+   border-right: none;
+}
+
+.docActionViewContent
+{
+   background-image: url(${url.context}/images/icons/doclist_action_view.png);
+   border-bottom: none;
+}
+
+.docActionDelete
+{
+   background-image: url(${url.context}/images/icons/doclist_action_delete.png);
+   border-right: none;
+}
+
+.docActionMoreActions
+{
+   padding-left: 20px;
+   padding-right: 16px;
+}
+
+.spaceActionMoreActions
+{
+   padding-left: 20px;
+   padding-right: 16px;
+   border-top: none;
+}
+
+.spaceActionEditDetails
+{
+   background-image: url(${url.context}/images/icons/doclist_action_edit.png);
+}
+
+.spaceActionDelete
+{
+   background-image: url(${url.context}/images/icons/doclist_action_delete.png);
+   border-left: none;
+}
+
 .spaceUploadPanel
 {
    position: absolute;
@@ -332,4 +428,26 @@ a.refreshViewLink:link, a.refreshViewLink:visited, a.refreshViewLink:hover
    text-decoration: none;
 }
 
+.spacePreview
+{
+   color: #515D6B;
+   font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
+   overflow: hidden;
+   height: 144px;
+   width: 410px;
+   border: 1px solid #0092dd;
+}
+
+a.childSpaceLink:link, a.childSpaceLink:visited, a.childSpaceLink:hover
+{
+   color: #5A5741;
+   font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
+}
+
+img.spaceImageIcon
+{
+   vertical-align: -25%;
+   padding-right:4px;
+}
+
 </STYLE>

config/alfresco/templates/webscripts/org/alfresco/portlets/myspacespanel_get_html.ftl

@@ -1,11 +1,13 @@
 <#assign user=person.properties.userName>
 <#assign count=0>
+<#assign weekms=1000*60*60*24*7>
 <#list companyhome.nodeByReference[args.h].children?sort_by('name') as d>
    <#if (d.isContainer || d.isDocument) &&
         ((args.f="0") ||
          (args.f="1" && d.isContainer) ||
          (args.f="2" && d.isDocument) ||
-         (args.f="3" && (d.properties.creator == user || d.properties.modifier == user)))>
+         (args.f="3" && (d.properties.creator == user || d.properties.modifier == user)) ||
+         (args.f="4" && (dateCompare(d.properties["cm:modified"],date,weekms) == 1 || dateCompare(d.properties["cm:created"], date, weekms) == 1)))>
    <#assign count=count+1>
    <div class="spaceRow">
       <div class="spaceIcon">
@@ -39,8 +41,9 @@
             </tr>
          </table>
       </div>
+      <div class="spaceResource spacesAjaxWait" id="${d.nodeRef}"></div>
    </div>
    </#if>
 </#list>
 <#-- hidden div with the count value for the page -->
-<div id="spaceCountValue" style="display:none">${count}</div>
+<div id="spaceCountValue" style="display:none">${count}</div>

source/web/scripts/ajax/doclist.js

@@ -43,7 +43,7 @@ var MyDocs = {
                   if (resource.isLoaded)
                   {
                      resource.needsOverflow = false;
-                     var elePrev = $E('.docMetapreview', resource)
+                     var elePrev = $E('.docPreview', resource)
                      if (elePrev)
                      {
                         elePrev.setStyle('overflow', 'auto');
@@ -207,7 +207,7 @@ var MyDocs = {
                            // deferred from transition complete event
                            if (resource.needsOverflow)
                            {
-                              var elePrev = $E('.docMetapreview', resource)
+                              var elePrev = $E('.docPreview', resource)
                               if (elePrev)
                               {
                                  elePrev.setStyle('overflow', 'auto');
@@ -312,7 +312,7 @@ var MyDocs = {
                            'opacity': [otherResource.getStyle('opacity'), 0]};
                      }
                      
-                     var otherMeta = $E('.docMetapreview', otherResource)
+                     var otherMeta = $E('.docPreview', otherResource)
                      if (otherMeta)
                      {
                         otherMeta.setStyle('overflow', 'hidden');
@@ -331,7 +331,7 @@ var MyDocs = {
                   'height': [resourceHeight, resource.defHeight],
                   'opacity': [resource.getStyle('opacity'), 0]};
                
-               var elePrev = $E('.docMetapreview', resource)
+               var elePrev = $E('.docPreview', resource)
                if (elePrev)
                {
                  elePrev.setStyle('overflow', 'hidden');

source/web/scripts/ajax/myspaces.js

@@ -4,6 +4,7 @@ var MySpaces = {
    ANIM_LENGTH: 300,
    DETAIL_MARGIN: 56,
    TITLE_FONT_SIZE: 18,
+   RESOURCE_PANEL_HEIGHT: 150,
    fileInput: null,
    Path: null,
    Filter: null,
@@ -59,10 +60,40 @@ var MySpaces = {
       var icons = $$('#spacePanel .spaceIcon');
       var imgs = $$('#spacePanel .spaceIconImage');
       var imgs64 = $$('#spacePanel .spaceIconImage64');
+      var resources = $$('#spacePanel .spaceResource');
       var fxItem = new Fx.Elements(items, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
       var fxDetail = new Fx.Elements(details, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
       var fxInfo = new Fx.Elements(infos, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
       var fxIcon = new Fx.Elements(icons, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      var fxResource = new Fx.Elements(resources,
+      {
+         wait: false,
+         duration: 500,
+         transition: Fx.Transitions.linear,
+         onComplete: function()
+         {
+            this.elements.each(function(resource, i)
+            {
+               if (resource.parentNode.isOpen)
+               {
+                  if (resource.isLoaded)
+                  {
+                     resource.needsOverflow = false;
+                     var elePrev = $E('.spacePreview', resource)
+                     if (elePrev)
+                     {
+                        elePrev.setStyle('overflow', 'auto');
+                     }
+                  }
+                  else
+                  {
+                     // defer style change to ajax complete event
+                     resource.needsOverflow = true;
+                  }
+               }
+            });
+         }
+      });
       var fxImage = new Fx.Elements(imgs,
       {
          wait: false,
@@ -82,7 +113,8 @@ var MySpaces = {
          var item = items[i],
              info = infos[i],
              detail = details[i],
-             img = imgs[i];
+             img = imgs[i],
+             resource = resources[i];
 
          // animated elements defaults
          item.defMarginLeft = item.getStyle('margin-left').toInt();
@@ -100,6 +132,8 @@ var MySpaces = {
          }
          img.defSrc = img.src;
          img.bigSrc = imgs64[i].src;
+         resource.defHeight = 1;
+         resource.setStyle('height', resource.defHeight);
          
          // register 'mouseenter' (subclassed mouseover) event for each space
          space.addEvent('mouseenter', function(e)
@@ -179,6 +213,172 @@ var MySpaces = {
             fxInfo.start(animInfo);
             fxImage.start(animImage);
          });
+
+         space.addEvent('click', function(e)
+         {
+            var animItem = {},
+               animDetail = {},
+               animInfo = {};
+               animImage = {},
+               animResource = {},
+               resourceHeight = resource.getStyle('height').toInt();
+            
+            if (!space.isOpen)
+            {
+               if (!resource.isLoaded)
+               {
+                  // fire off the ajax request to get the resources for this task
+                  YAHOO.util.Connect.asyncRequest(
+                     "POST",
+                     getContextPath() + '/ajax/invoke/NodeInfoBean.sendNodeInfo',
+                     { 
+                        success: function(response)
+                        {
+                           // remove the ajax waiting animation class
+                           resource.removeClass("spacesAjaxWait");
+                           // populate the resource div with the result
+                           resource.innerHTML = response.responseText;
+                           // flag this resource as loaded
+                           resource.isLoaded = true;
+                           // deferred from transition complete event
+                           if (resource.needsOverflow)
+                           {
+                              var elePrev = $E('.spacePreview', resource)
+                              if (elePrev)
+                              {
+                                 elePrev.setStyle('overflow', 'auto');
+                              }
+                           }
+                        },
+                        failure: function(response)
+                        {
+                           resource.innerHTML = "Sorry, preview currently unavailable.";
+                        },
+                        argument: [resource]
+                     }, 
+                     "noderef=" + resource.id + "&template=myspaces_preview_panel.ftl"
+                  );
+               }
+               
+               // open up this space's resources
+               // flag this space as open
+               space.isOpen = true;
+               
+               // slide and fade in the resources panel
+               animResource[i] = {
+                  'height': [resourceHeight, resource.defHeight + MySpaces.RESOURCE_PANEL_HEIGHT],
+                  'opacity': [resource.getStyle('opacity'), 1]};
+   
+               // close other open space and toggle this one if it's already open
+               spaces.each(function(otherSpace, j)
+               {
+                  var otherResource = resources[j],
+                      otherItem = items[j],
+                      otherInfo = infos[j],
+                      otherDetail = details[j],
+                      otherImg = imgs[j];
+                  
+                  if (otherSpace == space)
+                  {
+                     // continue animations that may have been going on before the click
+                     // move the item title to the right
+                     animItem[j] = {
+                        'margin-left': [otherItem.getStyle('margin-left').toInt(), MySpaces.DETAIL_MARGIN],
+                        'font-size': [otherItem.getStyle('font-size').toInt(), MySpaces.TITLE_FONT_SIZE]
+                     };
+                     // fade in the info button
+                     animInfo[j] = {'opacity': [otherInfo.getStyle('opacity'), 1]};
+                     // slide and fade in the details panel
+                     animDetail[j] = {
+                        'height': [otherDetail.getStyle('height').toInt(), otherDetail.defHeight + MySpaces.IMG_LARGE],
+                        'opacity': [otherDetail.getStyle('opacity'), 1]
+                     };
+                     // grow the type image
+                     animImage[j] = {
+                        'height': [otherImg.getStyle('height').toInt(), MySpaces.IMG_LARGE],
+                        'width': [otherImg.getStyle('width').toInt(), MySpaces.IMG_LARGE]
+                     };
+                  }
+                  else
+                  {
+                     // close any other open space
+                     otherSpace.isOpen = false;
+
+                     // reset selected class?
+                     otherSpace.removeClass('spaceItemSelected');
+                     // move the title back to the left?
+                     var ml = otherItem.getStyle('margin-left').toInt();
+                     if (ml != otherItem.defMarginLeft)
+                     {
+                        animItem[j] = {
+                           'margin-left': [ml, otherItem.defMarginLeft],
+                           'font-size': [otherItem.getStyle('font-size').toInt(), otherItem.defFontSize]
+                        };
+                     }
+                     // does this space detail panel need resetting back to it's default height?
+                     var h = otherDetail.getStyle('height').toInt();
+                     if (h != otherDetail.defHeight)
+                     {
+                        animDetail[j] = {
+                           'height': [h, otherDetail.defHeight],
+                           'opacity': [otherDetail.getStyle('opacity'), 0]};
+                     }
+                     // does the info button need fading out
+                     var o = otherInfo.getStyle('opacity');
+                     if (o != 0)
+                     {
+                        animInfo[j] = {'opacity': [o, 0]};
+                     }
+                     // does the image need shrinking?
+                     var ih = otherImg.getStyle('height').toInt();
+                     if (ih != MySpaces.IMG_SMALL)
+                     {
+                        animImage[j] = {
+                           'height': [ih, MySpaces.IMG_SMALL],
+                           'width': [ih, MySpaces.IMG_SMALL]
+                        };
+                     }
+   
+                     // does this space resource panel need resetting back to it's default height?
+                     var otherHeight = otherResource.getStyle('height').toInt();
+                     if (otherHeight != otherResource.defHeight)
+                     {
+                        animResource[j] = {
+                           'height': [otherHeight, otherResource.defHeight],
+                           'opacity': [otherResource.getStyle('opacity'), 0]};
+                     }
+                     
+                     var otherMeta = $E('.spacePreview', otherResource)
+                     if (otherMeta)
+                     {
+                        otherMeta.setStyle('overflow', 'hidden');
+                     }
+                  }
+               });
+            }
+            else
+            {
+               // close this space panel
+               // flag this space as closed
+               space.isOpen = false;
+               
+               // reset resource panel back to it's default height
+               animResource[i] = {
+                  'height': [resourceHeight, resource.defHeight],
+                  'opacity': [resource.getStyle('opacity'), 0]};
+               
+               var elePrev = $E('.spacePreview', resource)
+               if (elePrev)
+               {
+                 elePrev.setStyle('overflow', 'hidden');
+               }
+            }
+            fxResource.start(animResource);
+            fxItem.start(animItem);
+            fxDetail.start(animDetail);
+            fxInfo.start(animInfo);
+            fxImage.start(animImage);
+         });
       });
 
       $('spacePanel').addEvent('mouseleave', function(e)