Index: /main/trunk/greenstone3/web/interfaces/oran/js/gui_div.js
===================================================================
--- /main/trunk/greenstone3/web/interfaces/oran/js/gui_div.js	(revision 23045)
+++ /main/trunk/greenstone3/web/interfaces/oran/js/gui_div.js	(revision 23046)
@@ -11,4 +11,5 @@
 
     $(".element_type_gsf_template").draggable({
+            cursor: 'crosshair',
             connectToSortable: '#formatStatement',
             helper: 'clone',
@@ -17,4 +18,5 @@
 
     $(".element_type_table").draggable({
+            cursor: 'crosshair',
             connectToSortable: '.gsf_template',
             helper: 'clone',
@@ -23,4 +25,5 @@
 
     $(".element_type_tr").draggable({
+            cursor: 'crosshair',
             connectToSortable: '.gsf_table',
             helper: 'clone',
@@ -29,4 +32,5 @@
 
     $(".element_type_td").draggable({
+            cursor: 'crosshair',
             //connectToSortable: '.td',
             helper: 'clone',
@@ -35,4 +39,5 @@
 
     $(".element_type_text").draggable({
+            cursor: 'crosshair',
             connectToSortable: '.gsf_otherwise, .gsf_link',
             helper: 'clone',
@@ -41,4 +46,5 @@
     
     $(".element_type_gsf_choose_metadata").draggable({
+            cursor: 'crosshair',
             connectToSortable: '.td-div',
             helper: 'clone',
@@ -46,5 +52,7 @@
     });
 
-    $(".element_type_gsf_metadata").draggable({
+    //$(".element_type_gsf_metadata").draggable({
+    $(".gsf_metadata").draggable({
+            cursor: 'crosshair',
             connectToSortable: '.gsf_choose_metadata, .gsf_when, .gsf_otherwise, .td-div',
             helper: 'clone',
@@ -53,4 +61,5 @@
 
     $(".element_type_gsf_link").draggable({
+            cursor: 'crosshair',
             connectToSortable: '.td-div',
             helper: 'clone',
@@ -60,4 +69,5 @@
     // switch, when, otherwise, icon
     $(".element_type_gsf_switch").draggable({
+            cursor: 'crosshair',
             connectToSortable: '.td-div',
             helper: 'clone',
@@ -66,4 +76,5 @@
 
     $(".element_type_gsf_when").draggable({
+            cursor: 'crosshair',
             connectToSortable: '.gsf_switch',
             helper: 'clone',
@@ -72,4 +83,5 @@
 
     $(".element_type_gsf_otherwise").draggable({
+            cursor: 'crosshair',
             connectToSortable: '.gsf_switch',
             helper: 'clone',
@@ -78,4 +90,5 @@
 
     $(".element_type_gsf_icon").draggable({
+            cursor: 'crosshair',
             connectToSortable: '.gsf_link',
             helper: 'clone',
@@ -147,4 +160,11 @@
                 }, });
 
+    //$(".droppable").sortable({
+    //        'cursor':'pointer',
+    //        'tolerance': 'pointer',
+    //        'items':'.column, .td-div',
+    //        'placeholder':'placeholder'
+    //});
+
     $(".droppable").droppable({
             accept: '.element_type_td',
@@ -153,4 +173,7 @@
             deactivate: function(event, ui) { $(this).removeClass("droppable_hl"); }, // console.log("droppable deactivated")},
             drop: function(event, ui) {
+                //if ($(this).hasClass("ui-draggable"))
+                //if (ui.helper.hasClass("ui-draggable"))
+                //{
                  var neverempty = document.createElement("div");
                  neverempty.setAttribute("class","neverempty block");
@@ -177,4 +200,12 @@
                  bind_block_mouseover();
                  //bind_all_sortables();
+                //}
+                //else
+                //{
+                //    console.log("Attempting to add");
+                    //$(this).appendTo(ui.draggable[0]);
+                //    $(this).prepend(ui.draggable[0]);
+                    //$(ui.draggable[0]).appendTo($(this));
+                //}
             }
         });
@@ -240,4 +271,32 @@
 function bind_td_sortable()
 {
+
+    $('tr').sortable({
+            'cursor':'pointer',
+            'tolerance': 'intersect',
+            'items':'.column',
+            'placeholder':'placeholder_td',
+            'connectWith':'column'});
+
+    //$('.column').sortable({
+    //    connectWith:['.column'],
+    //    placeholder: 'placeholder',
+    //    items:'td-div'
+    //});
+
+
+    //$('.column').sortable({
+    //        'cursor':'pointer',
+    //        'tolerance': 'pointer',
+    //        'items':'.td-div',
+    //        'placeholder':'placeholder',
+    //        'connectWith':'.column'
+            //'nested':'.gsf:metadata'
+            //receive: function(event, ui) { alert("Attempted to receive"); },
+            //stop: function(event, ui) {
+            //    if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
+
+    //});
+
     //console.log('function bind_td_sortable()');
     $('.td-div').sortable({
@@ -246,5 +305,5 @@
             'items':'.gsf_metadata, .gsf_choose_metadata, .gsf_link, .gsf_switch',
             'placeholder':'placeholder',
-            'connectWith':'.td-div',
+            //'connectWith':'.td-div',
             //'nested':'.gsf:metadata'
             receive: function(event, ui) { alert("Attempted to receive"); },
@@ -278,5 +337,6 @@
             stop: function(event, ui) {
                 //alert("STOP");
-                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
+                //if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); }
+                bind_all_sortables();
             }
     });
@@ -354,5 +414,5 @@
     {
         $(this).parents().css("border", "");
-        $(this).css("border", "1px solid blue");
+        $(this).css("border", "2px solid blue");
         return false;
     }).mouseout(function(){
@@ -372,5 +432,6 @@
     //console.log('var removeContent = (function ()');
         // this -> a -> td -> tr -> tbody -> table -> div
-        $(this).parent().parent().parent().parent().parent().remove();
+        //$(this).parent().parent().parent().parent().parent().remove();
+        $(this).closest(".block").remove();
     });
 
@@ -381,10 +442,17 @@
     console.log('parent: ' + $(this).html());
     if ($(this).html() == '[+]'){ //targetContent.css('display') == 'none') {
-        $(this).parent().parent().parent().parent().parent().children(".block,.table").slideDown(300);
+        //$(this).parent().parent().parent().parent().parent().children(".block,.table").slideDown(300);
+        //$(this).parents().children(".block,.table").stopPropagation().slideDown(300);
+        //var x = $(this).parent().parent().parent().parent().parent();
+        //var y = $(this).parent().parent().parent().parent().parent().children(".block,.table");
+        //var z = $(this).closest(".block").children(".table, .block");
+        $(this).closest(".block").children(".table, .block").slideDown(300);
         $(this).html('[-]');
         $(this).removeClass("ui-icon-plusthick");
         $(this).addClass("ui-icon-minusthick");
     } else {
-        $(this).parent().parent().parent().parent().parent().children(".block,.table").slideUp(300);
+        //$(this).parent().parent().parent().parent().parent().children(".block,.table").slideUp(300);
+        //$(this).parents().children(".block,.table").slideUp(300);
+        $(this).closest(".block").children(".table, .block").slideUp(300);
         $(this).html('[+]');
         $(this).removeClass("ui-icon-minusthick");
Index: /main/trunk/greenstone3/web/interfaces/oran/transform/layouts/main.xsl
===================================================================
--- /main/trunk/greenstone3/web/interfaces/oran/transform/layouts/main.xsl	(revision 23045)
+++ /main/trunk/greenstone3/web/interfaces/oran/transform/layouts/main.xsl	(revision 23046)
@@ -144,16 +144,13 @@
 
     <style type="text/css">
-        .placeholder{
-            margin-left: 10px;
-            border: dashed 1px #ccc;
-            background-color:#FFFFCC;
-            height:20px;
-        }
-
-        .header { background-color: #AFCCAF; border: solid 1px #117711; padding: 5px;}
+        .placeholder{margin-left: 10px; border: dashed 1px #ccc; background-color:#FFFFCC; height:20px; }
+
+        .placeholder_td{margin-left: 10px; border: dashed 1px #ccc; background-color:#FFFFCC; width:20px; }
+
+        .header { background-color: #AFCCAF; border: solid 1px #117711; padding: 5px; padding-left: 10px;}
 
         .resizable { width: 150px; height: 150px; padding: 0.5em; } 
         
-        .block { margin-left: 10px; border-left: dashed 1px black;}
+        .block { margin-left: 15px; border-left: dashed 1px black;}
 
         .droppable { background-color: #99dd99;}
@@ -184,12 +181,25 @@
     <td width="25%" valign="top">
         <h2> Elements to add </h2>
-        <div class="element_type_gsf_template css_gsf_template" title="gsf:template">NEW GSF:TEMPLATE MATCH</div>
-        <div class="element_type_gsf_choose_metadata css_gsf_choose_metadata" title="gsf:choose-metadata">NEW GSF:CHOOSE-METADATA</div>
-        <div class="element_type_gsf_metadata css_gsf_metadata" title="gsf:metadata">NEW GSF:METADATA</div>
-        <div class="element_type_gsf_link css_gsf_link" title="gsf:link">NEW GSF:LINK</div>
-        <div class="element_type_gsf_switch css_gsf_switch" title="gsf:switch">NEW GSF:SWITCH</div>
-        <div class="element_type_gsf_when css_gsf_when" title="gsf:when">NEW GSF:WHEN</div>
-        <div class="element_type_gsf_otherwise css_gsf_otherwise" title="gsf:otherwise">NEW GSF:OTHERWISE</div>
-        <div class="element_type_gsf_icon css_gsf_icon" title="gsf:icon">NEW GSF:ICON</div>
+        <div class="header element_type_gsf_template css_gsf_template" title="gsf:template">TEMPLATE</div>
+        <!-- <script type="text/javascript">
+        <xsl:text disable-output-escaping="yes">
+        var index = gsf_template_element.indexOf("<div class=\"");
+        var a = gsf_template_element.slice(0, index + "<div class=\"".length);
+        var b = gsf_template_element.slice(index + "<div class=\"".length + 1);
+        var c = a.concat(".element_type_gsf_template", b);
+        document.write(c);
+        </xsl:text>
+        </script> -->
+        <div class="header element_type_gsf_choose_metadata css_gsf_choose_metadata" title="gsf:choose-metadata">CHOOSE-METADATA</div>
+        <div class="gsf_metadata css_gsf_metadata block leaf" title="gsf:metadata"><table class="header"><tbody><tr><td class="header"><xsl:call-template name="meta-to-combo">
+                        <xsl:with-param name="metadataSets" select="//metadataSetList"/>
+                        <xsl:with-param name="current" select="ex.Title"/>
+                     </xsl:call-template></td><td class="header"><a href="#" class="remove ui-icon ui-icon-closethick" title="Click me to remove"/></td></tr></tbody></table></div>
+        <!-- <div class="header element_type_gsf_metadata css_gsf_metadata" title="gsf:metadata">METADATA</div> -->
+        <div class="header element_type_gsf_link css_gsf_link" title="gsf:link">LINK</div>
+        <div class="header element_type_gsf_switch css_gsf_switch" title="gsf:switch">SWITCH</div>
+        <div class="header element_type_gsf_when css_gsf_when" title="gsf:when">WHEN</div>
+        <div class="header element_type_gsf_otherwise css_gsf_otherwise" title="gsf:otherwise">OTHERWISE</div>
+        <div class="header element_type_gsf_icon css_gsf_icon" title="gsf:icon">ICON</div>
         <br/>
         <div class="element_type_text css_text" title="text">TEXT</div>
@@ -203,5 +213,5 @@
     <!-- <xsl:variable name="tok" select="fn:tokenize($fmt,'/s+')"/> -->
 
-      <div id="format">
+    <!--  <div id="format">
         <p>
           <b>Format string here</b>
@@ -215,5 +225,5 @@
           </i>
         </p>
-      </div>
+      </div> -->
 
 <!-- *************************************************************************************** -->
Index: /main/trunk/greenstone3/web/interfaces/oran/transform/layouts/xml-to-gui-templates.xsl
===================================================================
--- /main/trunk/greenstone3/web/interfaces/oran/transform/layouts/xml-to-gui-templates.xsl	(revision 23045)
+++ /main/trunk/greenstone3/web/interfaces/oran/transform/layouts/xml-to-gui-templates.xsl	(revision 23046)
@@ -77,5 +77,5 @@
 
         <xsl:variable name="template">
-        <div class="gsf_template block" title="gsf:template"><table class="header"><tbody><tr><td class="header">MATCH=<input type="text" name="rawtextinput" size="10"/></td><td><a href="#" class="minmax ui-icon ui-icon-minusthick">[-]</a></td><td><a href="#" class="remove ui-icon ui-icon-closethick">[x]</a></td></tr></tbody></table><table border="1"><tr class="tr"></tr></table></div><br/>
+        <div class="gsf_template css_gsf_template block" title="gsf:template"><table class="header"><tbody><tr><td class="header">MATCH=<input type="text" name="rawtextinput" size="10"/></td><td><a href="#" class="minmax ui-icon ui-icon-minusthick">[-]</a></td><td><a href="#" class="remove ui-icon ui-icon-closethick">[x]</a></td></tr></tbody></table><table border="1"><tr class="tr"><td class="droppable" width="10px"></td></tr></table></div><br/>
         </xsl:variable>
 
Index: /main/trunk/greenstone3/web/interfaces/oran/transform/layouts/xml-to-gui.xsl
===================================================================
--- /main/trunk/greenstone3/web/interfaces/oran/transform/layouts/xml-to-gui.xsl	(revision 23045)
+++ /main/trunk/greenstone3/web/interfaces/oran/transform/layouts/xml-to-gui.xsl	(revision 23046)
@@ -64,5 +64,5 @@
 
         <select>
-            <option value ="{$current_mod}" disabled="disabled" selected="{$current_mod}"><xsl:value-of select="$current_mod"/></option>
+            <!-- <option value ="{$current_mod}" disabled="disabled" selected="{$current_mod}"><xsl:value-of select="$current_mod"/></option> -->
 
             <xsl:apply-templates select="$metadataSets" mode="meta-to-combo">
@@ -338,5 +338,5 @@
 
         <!-- <td class="td block resizable" title="td" valign="{@valign}" style='overflow: hidden;'> -->
-        <td valign="{@valign}" title="td">
+        <td class="column" valign="{@valign}" title="td">
             <div class="td-div block" title="td-div">
             <div class="neverempty block" style="height:50px">NEVER EMPTY</div>
