Index: site/src/main/java/org/hippoecm/hst/demo/components/Detail.java
===================================================================
--- site/src/main/java/org/hippoecm/hst/demo/components/Detail.java	(revision 30137)
+++ site/src/main/java/org/hippoecm/hst/demo/components/Detail.java	(working copy)
@@ -70,6 +70,8 @@
 
         request.setAttribute("cmsApplicationUrl", cmsApplicationUrl);
 
+        request.setAttribute("rerenderMeUrl", response.createActionURL().toString());
+
         // we only have a goBackLink for sitemap items that have configured one. 
         String goBackLink = request.getRequestContext().getResolvedSiteMapItem().getParameter("go-back-link");
         request.setAttribute("goBackLink", goBackLink);
@@ -183,6 +185,8 @@
                 }
             }
         } else if ("remove".equals(type)) {
+        } else if ("render".equals(type)) {
+//            doBeforeRender(request, response);
         }
     }
 
Index: site/src/main/webapp/WEB-INF/ftl/components/main/detailpage.ftl
===================================================================
--- site/src/main/webapp/WEB-INF/ftl/components/main/detailpage.ftl	(revision 30137)
+++ site/src/main/webapp/WEB-INF/ftl/components/main/detailpage.ftl	(working copy)
@@ -49,10 +49,7 @@
 </#if>
 
 <div class="yui-u">
-  <@hst.surfandeditlink var="surfandedit" hippobean=document/>
-  <#if "${surfandedit!}" != "">
-  	<a href="<@hst.surfandeditlink hippobean=document/>">[surf&amp;edit]</a>
-  </#if>
+  <@hst.surfandedit hippobean=document/>
   <div id="editable_cont" class="inline-editor-editable-container">
     <h2>${document.title}</h2>
     <p>
Index: site/src/main/webapp/WEB-INF/jsp/components/main/detailpage.jsp
===================================================================
--- site/src/main/webapp/WEB-INF/jsp/components/main/detailpage.jsp	(revision 30137)
+++ site/src/main/webapp/WEB-INF/jsp/components/main/detailpage.jsp	(working copy)
@@ -16,8 +16,8 @@
 <%@ page language="java" %>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x" %>
-<%@ taglib uri="http://www.hippoecm.org/jsp/hst/core" prefix='hst'%>
-<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
+<%@ taglib uri="http://www.hippoecm.org/jsp/hst/core" prefix='hst' %>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 
 
 <hst:link var="yuiLoaderSrc" path="/javascript/yui/yuiloader/yuiloader-min.js"/>
@@ -25,89 +25,89 @@
 
 
 <hst:element var="yuiLoader" name="script">
-  <hst:attribute name="id" value="yuiloader" />
-  <hst:attribute name="type" value="text/javascript" />
-  <hst:attribute name="src" value="${yuiLoaderSrc}" />
+  <hst:attribute name="id" value="yuiloader"/>
+  <hst:attribute name="type" value="text/javascript"/>
+  <hst:attribute name="src" value="${yuiLoaderSrc}"/>
 </hst:element>
 <hst:headContribution keyHint="yuiLoader" element="${yuiLoader}" category="jsExternal"/>
 
 <hst:element var="inlineEditing" name="script">
-  <hst:attribute name="id" value="inlineEditing" />
-  <hst:attribute name="type" value="text/javascript" />
-  <hst:attribute name="src" value="${inlineEditingSrc}" />
+  <hst:attribute name="id" value="inlineEditing"/>
+  <hst:attribute name="type" value="text/javascript"/>
+  <hst:attribute name="src" value="${inlineEditingSrc}"/>
 </hst:element>
 <hst:headContribution keyHint="inlineEditing" element="${inlineEditing}" category="jsExternal"/>
 
 <hst:headContribution keyHint="title"><title>${document.title}</title></hst:headContribution>
 
 <c:if test="${not empty goBackLink}">
-<div class="right">
-  <a href="<hst:link path="${goBackLink}"/>">
-    <img src="<hst:link path="/images/goback.jpg"/>" class="noborder" alt="Go back"/>
-  </a>
-</div>
+  <div class="right">
+    <a href="<hst:link path="${goBackLink}"/>">
+      <img src="<hst:link path="/images/goback.jpg"/>" class="noborder" alt="Go back"/>
+    </a>
+  </div>
 </c:if>
 
 <div class="yui-u">
-  <a href="<hst:surfandeditlink hippobean="${document}"/>" target="_blank">[surf&amp;edit]</a>
+  <hst:surfandedit hippobean="${document}"/>
   <div id="editable_cont" class="inline-editor-editable-container">
     <h2>${document.title}</h2>
     <p>
-        <c:choose>
-            <c:when test="${isPreview}">
-                <span class="editable" id="demosite:summary">${document.summary}</span>
-            </c:when>
-            <c:otherwise>
-                ${document.summary}
-            </c:otherwise>
-        </c:choose>
+      <c:choose>
+        <c:when test="${isPreview}">
+          <span class="editable" id="demosite:summary">${document.summary}</span>
+        </c:when>
+        <c:otherwise>
+          ${document.summary}
+        </c:otherwise>
+      </c:choose>
     </p>
     <div>
-        <c:choose>
-            <c:when test="${isPreview}">
-                <span class="editable inline" id="demosite:body"><hst:html hippohtml="${document.html}"/></span>
-            </c:when>
-            <c:otherwise>
-                <hst:html hippohtml="${document.html}"/>
-            </c:otherwise>
-        </c:choose>
+      <c:choose>
+        <c:when test="${isPreview}">
+          <span class="editable inline" id="demosite:body"><hst:html hippohtml="${document.html}"/></span>
+        </c:when>
+        <c:otherwise>
+          <hst:html hippohtml="${document.html}"/>
+        </c:otherwise>
+      </c:choose>
     </div>
   </div>
-  
-  
+
+
   <c:if test="${not empty document.resource}">
-      <h2>resource link:</h2>
-      <hst:link var="resource" hippobean="${document.resource}" />
-      <a href="${resource}">${document.resource.name}</a>
-      <br/><br/>
+    <h2>resource link:</h2>
+    <hst:link var="resource" hippobean="${document.resource}"/>
+    <a href="${resource}">${document.resource.name}</a>
+    <br/><br/>
   </c:if>
-  
+
   <c:if test="${not empty document.image}">
     <img src="<hst:link hippobean="${document.image.original}"/>"/>
   </c:if>
-    
+
   <hst:actionURL var="addURL">
     <hst:param name="type" value="add"/>
   </hst:actionURL>
-  
+
   <div>
-      <c:forEach var="comment" items="${comments}">
-         <div style="border:1px solid black; padding:15px;">
-             <b>${comment.title}</b>
-             <br/>
-             <hst:html hippohtml="${comment.html}"/>
-         </div>
-        </c:forEach>
-   
+    <c:forEach var="comment" items="${comments}">
+      <div style="border:1px solid black; padding:15px;">
+        <b>${comment.title}</b>
+        <br/>
+        <hst:html hippohtml="${comment.html}"/>
+      </div>
+    </c:forEach>
+
   </div>
-  
+
   <div>
     <form method="post" action="${addURL}">
       <h4>Enter your comment here:</h4>
       <table>
         <tr>
           <th><label for="title">Title:</label></th>
-          <td><input type="text" id="title" name="title" value="" /></td>
+          <td><input type="text" id="title" name="title" value=""/></td>
         </tr>
         <tr>
           <th valign="top"><label for="comment">Comment:</label></th>
@@ -118,11 +118,16 @@
             <input type="submit" value="Submit"/>
             <input type="reset" value="Reset"/>
           </td>
-         </tr>
+        </tr>
       </table>
     </form>
   </div>
-  
+
+  <div>
+    <a href="#" onclick="rerender();">Rerender me</a>
+    <div id="replace-me"></div>
+  </div>
+
 </div>
 
 <form id="editorForm" method="post" action="<hst:resourceURL resourceId='/WEB-INF/jsp/components/main/detailpage-ajaxresult.jsp' />">
@@ -132,7 +137,7 @@
     <input type="hidden" name="field" value=""/>
     <input type="hidden" name="workflowAction" value=""/>
     <textarea id="editor" name="editor" class="inline-editor-editor" cols="50" rows="5"></textarea>
-    
+
     <hst:link var="icons" path="/images/icons"/>
     <span id="editorToolbar" class="inline-editor-toolbar">
       <img src="${icons}/document-save-16.png" id="editorToolbar_save" alt="Save" title="Save"/>
@@ -145,49 +150,216 @@
 
 <hst:headContribution category="jsInline">
 <script type="text/javascript" language="javascript">
-<![CDATA[<!--]]>
+<![CDATA[
+
+Wicket = {};
+
+Wicket.Log = {
+  info: console.log,
+  error: console.log,
+  warn: console.log
+}
+
+if (typeof(Wicket.Browser) == "undefined") {
+  Wicket.Browser = {
+
+    isSafari: function() {
+      return /KHTML/.test(navigator.userAgent) && /Apple/.test(navigator.userAgent);
+    },
+
+    isOpera: function() {
+      return !Wicket.Browser.isSafari() && typeof(window.opera) != "undefined";
+    },
+
+    isIE: function() {
+      return !Wicket.Browser.isSafari() && typeof(document.all) != "undefined" && typeof(window.opera) == "undefined";
+    }
+  };
+}
+
+Wicket.replaceOuterHtmlIE = function(element, text) {
+
+  var parent = element.parentNode;
+  var tn = element.tagName;
+
+
+  var tempDiv = document.createElement("div");
+  var tempParent;
+
+  if (window.parent == window || window.parent == null) {
+    document.body.appendChild(tempDiv);
+  }
+
+  if (tn != 'TBODY' && tn != 'TR' && tn != "TD" && tn != "THEAD" && tn != "TFOOT" && tn != "TH") {
+
+    // now use regular div so that we won't mess the DOM
+    tempDiv.innerHTML = '<div style="display:none">' + text + '</div>';
+
+    // set the outer &lt;div&gt; as parent
+    tempParent = tempDiv.childNodes[0];
+
+    tempParent.parentNode.removeChild(tempParent);
+
+  } else {
+
+    // hack to get around the fact that IE doesn't allow to replace table elements
+    tempDiv.innerHTML = '<table style="display: none">' + text + '</table>';
+
+    // get the parent element of new elements
+    tempParent = tempDiv.getElementsByTagName(tn).item(0).parentNode;
+  }
+
+  // place all newly created elements before the old element
+  while (tempParent.childNodes.length > 0) {
+    var tempElement = tempParent.childNodes[0];
+    parent.insertBefore(tempElement, element);
+    tempElement = null;
+  }
+
+  // remove the original element
+  if (element.style.backgroundImage) {
+    element.style.backgroundImage = "";
+  }
+  parent.removeChild(element);
+  element.outerHTML = "";
+  element = "";
+
+  if (window.parent == window || window.parent == null) {
+    if (tempDiv.style.backgroundImage)
+      tempDiv.style.backgroundImage = "";
+    document.body.removeChild(tempDiv);
+  }
+
+  tempDiv.outerHTML = "";
+
+  parent = null;
+  tempDiv = null;
+  tempParent = null;
+}
+
+Wicket.replaceOuterHtmlSafari = function(element, text) {
+
+  var parent = element.parentNode;
+  var next = element.nextSibling;
+
+  var index = 0;
+  while (parent.childNodes[index] != element) {
+    ++index;
+  }
+
+  element.outerHTML = text;
+
+  element = parent.childNodes[index];
+}
+
+Wicket.replaceOuterHtml = function(element, text) {
+
+  if (Wicket.Browser.isIE() || Wicket.Browser.isOpera()) {
+    Wicket.replaceOuterHtmlIE(element, text);
+  } else if (Wicket.Browser.isSafari()) {
+    Wicket.replaceOuterHtmlSafari(element, text);
+  } else /* GECKO */ {
+    // create range and fragment
+    var range = element.ownerDocument.createRange();
+    range.selectNode(element);
+    var fragment = range.createContextualFragment(text);
+
+    element.parentNode.replaceChild(fragment, element);
+  }
+}
+
+// Creates a new instance of a XmlHttpRequest
+function createTransport() {
+  var transport = null;
+  if (window.ActiveXObject) {
+    transport = new ActiveXObject("Microsoft.XMLHTTP");
+    console.log("Using ActiveX transport");
+  } else {
+    transport = new XMLHttpRequest();
+    console.log("Using XMLHttpRequest transport");
+  }
+
+  return transport;
+}
+
+function rerender(id) {
+
+  var t = createTransport();
+
+  var url = '<hst:partialRenderURL />';
+  t.open("GET", url, true);
+  t.onreadystatechange = function() {
+    var status;
+
+    if (t.readyState == 4) {
+      try {
+        status = t.status;
+      } catch (e) {
+        status = "unavailable";
+      }
+      if (status == 200 || status == "") { // as stupid as it seems, IE7 sets status to "" on ok
+        // response came without error
+        var text = t.responseText;
+
+        // get existing component
+        var element = document.getElementById('replace-me');
+        if (element == null || typeof(element) == "undefined") {
+          console.log("Component was not found while trying to perform markup update.");
+        } else {
+          // replace the component
+          Wicket.replaceOuterHtml(element, text);
+        }
+
+      }
+    }
+  };
+  // set a special flag to allow server distinguish between ajax and non-ajax requests
+  t.send(null);
+  return false;
+
+}
+
 //Instantiate and configure Loader:
 var loader = new YAHOO.util.YUILoader({
 
-    // Identify the components you want to load.  Loader will automatically identify
-    // any additional dependencies required for the specified components.
-    require: ["container", "menu", "button", "editor", "json", "resize"],
+  // Identify the components you want to load.  Loader will automatically identify
+  // any additional dependencies required for the specified components.
+  require: ["container", "menu", "button", "editor", "json", "resize"],
 
-    // Configure loader to retrieve the libraries locally
-    base: '/site/javascript/yui/',
+  // Configure loader to retrieve the libraries locally
+  base: '/site/javascript/yui/',
 
-    // Configure loader to pull in optional dependencies.  For example, animation
-    // is an optional dependency for slider.
-    loadOptional: true,
+  // Configure loader to pull in optional dependencies.  For example, animation
+  // is an optional dependency for slider.
+  loadOptional: true,
 
-    // The function to call when all script/css resources have been loaded
-    onSuccess: function() {
-        //this is your callback function; you can use
-        //this space to call all of your instantiation
-        //logic for the components you just loaded.
-        
-        // Load the edited css for the inline editor.
-        // This must be done after the loader has been fully instantiated, so the css loads
-        // after the default css (skin.css). That way, the element classes can be overwritten
-        // by our own css file.
-        var addcss=document.createElement("link")
-        addcss.setAttribute("rel", "stylesheet")
-        addcss.setAttribute("type", "text/css")
-        addcss.setAttribute("href", "/site/css/inline-editing.css")
-        document.getElementsByTagName("head")[0].appendChild(addcss);
+  // The function to call when all script/css resources have been loaded
+  onSuccess: function() {
+    //this is your callback function; you can use
+    //this space to call all of your instantiation
+    //logic for the components you just loaded.
 
-        // Initialize editor
-        initEditor("editable_cont", "editorForm", "editor", "editor2", "editorToolbar", "${cmsApplicationUrl}");
-    },
+    // Load the edited css for the inline editor.
+    // This must be done after the loader has been fully instantiated, so the css loads
+    // after the default css (skin.css). That way, the element classes can be overwritten
+    // by our own css file.
+    var addcss = document.createElement("link")
+    addcss.setAttribute("rel", "stylesheet")
+    addcss.setAttribute("type", "text/css")
+    addcss.setAttribute("href", "/site/css/inline-editing.css")
+    document.getElementsByTagName("head")[0].appendChild(addcss);
 
-    // Configure the Get utility to timeout after 10 seconds for any given node insert
-    timeout: 10000
+    // Initialize editor
+    initEditor("editable_cont", "editorForm", "editor", "editor2", "editorToolbar", "${cmsApplicationUrl}");
+  },
+
+  // Configure the Get utility to timeout after 10 seconds for any given node insert
+  timeout: 10000
 });
 
-// Load the files using the insert() method. The insert method takes an optional
-// configuration object, and in this case we have configured everything in
-// the constructor, so we don't need to pass anything to insert().
+// Load the files using the insert() method. The insert method takes an optional// configuration object, and in this case we have configured everything in// the constructor, so we don't need to pass anything to insert().
 loader.insert();
-<![CDATA[//-->]]>
+
+]]>
 </script>
 </hst:headContribution>
Index: content/src/main/resources/hstconfiguration/democommon/templates.xml
===================================================================
--- content/src/main/resources/hstconfiguration/democommon/templates.xml	(revision 30137)
+++ content/src/main/resources/hstconfiguration/democommon/templates.xml	(working copy)
@@ -143,10 +143,8 @@
 			<sv:value>hst:template</sv:value>
 		</sv:property>
 		<sv:property sv:name="hst:renderpath" sv:type="String">
-            <!--
 			<sv:value>jsp/components/main/detailpage.jsp</sv:value>
-            -->
-            <sv:value>ftl/components/main/detailpage.ftl</sv:value>
+            <!--<sv:value>ftl/components/main/detailpage.ftl</sv:value>-->
 		</sv:property>
 	</sv:node>
 	<sv:node sv:name="rss">
