Index: /main/trunk/greenstone3/web/interfaces/oran/js/gui_div.js
===================================================================
--- /main/trunk/greenstone3/web/interfaces/oran/js/gui_div.js	(revision 22515)
+++ /main/trunk/greenstone3/web/interfaces/oran/js/gui_div.js	(revision 22516)
@@ -1,46 +1,148 @@
+//jQuery( function($) {
+//$('div.blockWrapper').iNestedSortable(
+//  {
+//    accept: 'block',
+//  }
+//);
+//});
+
+console.log("Loading gui_div.js\n");
+
 $(document).ready(function(){
 
-    //function () {
-        $('a.minmax').bind('click', toggleContent);
-        $('a.remove').bind('click', removeContent);
-        $('div.blockWrapper').sortable(
+    console.log("Document ready function\n");
+
+    $('a.minmax').bind('click', toggleContent);
+    $('a.remove').bind('click', removeContent);
+
+    /*    
+    $('div.blockWrapper').NestedSortable(
+    {
+        accept: 'block',
+        helperclass: 'sortHelper',
+        activeclass :   'sortableactive',
+        hoverclass :    'sortablehover',
+
+        // Restricts sort start click to the specified element.
+        handle: 'div.header',
+        onStart : function()
             {
-                accept: 'block',
-                helperclass: 'sortHelper',
-                activeclass :   'sortableactive',
-                hoverclass :    'sortablehover',
-                handle: 'div.header',
-                tolerance: 'pointer',
-                onChange : function(ser)
-                {
-                },
-                onStart : function()
-                {
-                    $.iAutoscroller.start(this, document.getElementsByTagName('body'));
-                },
-                onStop : function()
-                {
-                    $.iAutoscroller.stop();
-                }
+                $.iAutoscroller.start(this, document.getElementsByTagName('body'));
+            },
+            onStop : function()
+            {
+                $.iAutoscroller.stop();
             }
-        );
-    //}
-//};
+    }
+    );
+    */
+ 
+     
+    $('#formatStatement').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.gsf\\:template',
+            'placeholder':'placeholder',
+            //'nested':'div'
+    });
+    
+    $('.gsf\\:template').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.table, .gsf\\:choose-metadata, .gsf\\:metadata',
+            'placeholder':'placeholder'
+            //'nested':'.gsf:metadata'
+    });
 
-     $(".block").mouseover(function() {
-        //$(this).parents().animate({ backgroundColor: "white" }, 500);
-        //$(this).animate({ backgroundColor: "yellow" }, 50);
+    $('.table').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.leaf .gsf\\:choose-metadata, .gsf\\:link, .gsf\\:switch',
+            'placeholder':'placeholder'
+            //'nested':'.gsf:metadata'
+    });
+ 
+    $('.gsf\\:choose-metadata').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.gsf\\:metadata',
+            'placeholder':'placeholder',
+            'connectWith':'.gsf\\:choose-metadata'
+            //'nested':'.gsf:metadata'
+    });
+    
+    $('.gsf\\:link').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.gsf\\:icon',
+            'placeholder':'placeholder'
+            //'nested':'.gsf:metadata'
+    });
+
+    $('.gsf\\:switch').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.gsf\\:metadata, .gsf\\:when, .gsf\\otherwise',
+            'placeholder':'placeholder'
+            //'nested':'.gsf:metadata'
+    });
+
+    $('.gsf\\:when').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.leaf',
+            'placeholder':'placeholder'
+            //'nested':'.gsf:metadata'
+    });
+
+    $('.gsf\\:otherwise').sortable({
+            'cursor':'pointer',
+            'tolerance': 'pointer',
+            'items':'.leaf',
+            'placeholder':'placeholder'
+            //'nested':'.gsf:metadata'
+    });
+
+    /* 
+    $('div.blockWrapper').sortable(
+        {
+            accept: 'block',
+            helperclass: 'sortHelper',
+            activeclass :   'sortableactive',
+            hoverclass :    'sortablehover',
+
+            // Restricts sort start click to the specified element.
+            handle: 'div.header',
+
+            // This is the way the reordering behaves during drag. Possible values: 'intersect', 'pointer'. In some setups, 'pointer' is more natural.
+            // * intersect: draggable overlaps the droppable at least 50%
+            // * pointer: mouse pointer overlaps the droppable
+            tolerance: 'pointer',
+            //containment: 'parent',
+            nested: 'div',
+            onChange : function(ser)
+            {
+            },
+            onStart : function()
+            {
+                $.iAutoscroller.start(this, document.getElementsByTagName('body'));
+            },
+            onStop : function()
+            {
+                $.iAutoscroller.stop();
+            }
+        }
+    );
+    */
+
+    $(".block").mouseover(function() 
+    {
+        //alert("Mouse over event");
         $(this).parents().css("border", "");
         $(this).css("border", "1px solid blue");
+        return false;
     }).mouseout(function(){
-        //$(this).animate({ backgroundColor: "white" }, 500);
         $(this).css("border", "");
-    });
-
-
-    $("button").click(function () {
-        //var parentTag = $(this).parent().get(0).titleName;
-        //alert("Removing div " + parentTag);
-        $(this).parent().parent().remove(); 
+        return false;
     });
 
@@ -50,5 +152,5 @@
         //var parentTag = $(this).parent().get(0).titleName;
         //alert("Removing div " + parentTag);
-        $(this).parent().parent().remove();
+        $(this).parent().remove();
     });
 
@@ -56,5 +158,5 @@
 var toggleContent = function(e)
 {
-    var targetContent = $('div.content', this.parentNode.parentNode);
+    var targetContent = $('div.block', this.parentNode);
     if (targetContent.css('display') == 'none') {
         targetContent.slideDown(300);
Index: /main/trunk/greenstone3/web/interfaces/oran/js/ui.nestedSortable.js
===================================================================
--- /main/trunk/greenstone3/web/interfaces/oran/js/ui.nestedSortable.js	(revision 22516)
+++ /main/trunk/greenstone3/web/interfaces/oran/js/ui.nestedSortable.js	(revision 22516)
@@ -0,0 +1,1210 @@
+/*
+ * based on jQuery UI Sortable 1.7.2
+ *
+ * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about) and Steven Lots (Lotsofdots bvba) 
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * http://docs.jquery.com/UI/Sortables
+ * http://www.b-hind.eu/jquery/
+ * Depends:
+ *	ui.core.js
+ */
+(function($) {
+
+$.widget("ui.sortable", $.extend({}, $.ui.mouse, {
+	_init: function() {
+
+		var o = this.options;
+		this.containerCache = {};
+		this.element.addClass("ui-sortable");
+
+		//Get the items
+		this.refresh();
+
+		//Let's determine if the items are floating
+		this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css('float')) : false;
+
+		//Let's determine the parent's offset
+		this.offset = this.element.offset();
+
+		//Initialize mouse events for interaction
+		this._mouseInit();
+
+	},
+
+	destroy: function() {
+		this.element
+			.removeClass("ui-sortable ui-sortable-disabled")
+			.removeData("sortable")
+			.unbind(".sortable");
+		this._mouseDestroy();
+
+		for ( var i = this.items.length - 1; i >= 0; i-- )
+			this.items[i].item.removeData("sortable-item");
+	},
+
+	_mouseCapture: function(event, overrideHandle) {
+
+		if (this.reverting) {
+			return false;
+		}
+
+		if(this.options.disabled || this.options.type == 'static') return false;
+
+		//We have to refresh the items data once first
+		this._refreshItems(event);
+
+		//Find out if the clicked node (or one of its parents) is a actual item in this.items
+		var currentItem = null, self = this, nodes = $(event.target).parents().each(function() {
+			if($.data(this, 'sortable-item') == self) {
+				currentItem = $(this);
+				return false;
+			}
+		});
+		if($.data(event.target, 'sortable-item') == self) currentItem = $(event.target);
+
+		if(!currentItem) return false;
+		if(this.options.handle && !overrideHandle) {
+			var validHandle = false;
+
+			$(this.options.handle, currentItem).find("*").andSelf().each(function() { if(this == event.target) validHandle = true; });
+			if(!validHandle) return false;
+		}
+
+		this.currentItem = currentItem;
+		this._removeCurrentsFromItems();
+		return true;
+
+	},
+
+	_mouseStart: function(event, overrideHandle, noActivation) {
+
+		var o = this.options, self = this;
+		this.currentContainer = this;
+
+		//We only need to call refreshPositions, because the refreshItems call has been moved to mouseCapture
+		this.refreshPositions();
+
+		//Create and append the visible helper
+		this.helper = this._createHelper(event);
+
+		//Cache the helper size
+		this._cacheHelperProportions();
+
+		/*
+		 * - Position generation -
+		 * This block generates everything position related - it's the core of draggables.
+		 */
+
+		//Cache the margins of the original element
+		this._cacheMargins();
+
+		//Get the next scrolling parent
+		this.scrollParent = this.helper.scrollParent();
+
+		//The element's absolute position on the page minus margins
+		this.offset = this.currentItem.offset();
+		this.offset = {
+			top: this.offset.top - this.margins.top,
+			left: this.offset.left - this.margins.left
+		};
+
+		// Only after we got the offset, we can change the helper's position to absolute
+		// TODO: Still need to figure out a way to make relative sorting possible
+		this.helper.css("position", "absolute");
+		this.cssPosition = this.helper.css("position");
+
+		$.extend(this.offset, {
+			click: { //Where the click happened, relative to the element
+				left: event.pageX - this.offset.left,
+				top: event.pageY - this.offset.top
+			},
+			parent: this._getParentOffset(),
+			relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper
+		});
+
+		//Generate the original position
+		this.originalPosition = this._generatePosition(event);
+		this.originalPageX = event.pageX;
+		this.originalPageY = event.pageY;
+
+		//Adjust the mouse offset relative to the helper if 'cursorAt' is supplied
+		if(o.cursorAt)
+			this._adjustOffsetFromHelper(o.cursorAt);
+
+		//Cache the former DOM position
+		this.domPosition = { prev: this.currentItem.prev()[0], parent: this.currentItem.parent()[0] };
+
+		//If the helper is not the original, hide the original so it's not playing any role during the drag, won't cause anything bad this way
+		if(this.helper[0] != this.currentItem[0]) {
+			this.currentItem.hide();
+		}
+
+		//Create the placeholder
+		this._createPlaceholder();
+
+		//Set a containment if given in the options
+		if(o.containment)
+			this._setContainment();
+
+		if(o.cursor) { // cursor option
+			if ($('body').css("cursor")) this._storedCursor = $('body').css("cursor");
+			$('body').css("cursor", o.cursor);
+		}
+
+		if(o.opacity) { // opacity option
+			if (this.helper.css("opacity")) this._storedOpacity = this.helper.css("opacity");
+			this.helper.css("opacity", o.opacity);
+		}
+
+		if(o.zIndex) { // zIndex option
+			if (this.helper.css("zIndex")) this._storedZIndex = this.helper.css("zIndex");
+			this.helper.css("zIndex", o.zIndex);
+		}
+
+		//Prepare scrolling
+		if(this.scrollParent[0] != document && this.scrollParent[0].tagName != 'HTML')
+			this.overflowOffset = this.scrollParent.offset();
+
+		//Call callbacks
+		this._trigger("start", event, this._uiHash());
+
+		//Recache the helper size
+		if(!this._preserveHelperProportions)
+			this._cacheHelperProportions();
+
+
+		//Post 'activate' events to possible containers
+		if(!noActivation) {
+			 for (var i = this.containers.length - 1; i >= 0; i--) { this.containers[i]._trigger("activate", event, self._uiHash(this)); }
+		}
+
+		//Prepare possible droppables
+		if($.ui.ddmanager)
+			$.ui.ddmanager.current = this;
+
+		if ($.ui.ddmanager && !o.dropBehaviour)
+			$.ui.ddmanager.prepareOffsets(this, event);
+
+		this.dragging = true;
+
+		this.helper.addClass("ui-sortable-helper");
+		this._mouseDrag(event); //Execute the drag once - this causes the helper not to be visible before getting its correct position
+		return true;
+
+	},
+
+	_mouseDrag: function(event) {
+
+		//Compute the helpers position
+		this.position = this._generatePosition(event);
+		//console.log(this.position); //b-hind
+		this.positionAbs = this._convertPositionTo("absolute");
+
+		if (!this.lastPositionAbs) {
+			this.lastPositionAbs = this.positionAbs;
+		}
+
+		//Do scrolling
+		if(this.options.scroll) {
+			var o = this.options, scrolled = false;
+			if(this.scrollParent[0] != document && this.scrollParent[0].tagName != 'HTML') {
+
+				if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity)
+					this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed;
+				else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity)
+					this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;
+
+				if((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity)
+					this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft + o.scrollSpeed;
+				else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity)
+					this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed;
+
+			} else {
+
+				if(event.pageY - $(document).scrollTop() < o.scrollSensitivity)
+					scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
+				else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity)
+					scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
+
+				if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity)
+					scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
+				else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity)
+					scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
+
+			}
+			
+			if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour)
+				$.ui.ddmanager.prepareOffsets(this, event);
+		}
+
+		//Regenerate the absolute position used for position checks
+		this.positionAbs = this._convertPositionTo("absolute");
+		
+		//Set the helper position
+		if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left+'px';
+		if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top+'px';
+
+		//Rearrange
+		
+		for (var i = this.items.length - 1; i >= 0; i--) {
+			
+			//Cache variables and intersection, continue if no intersection
+			var item = this.items[i], itemElement = item.item[0], intersection = this._intersectsWithPointer(item);
+			if (!intersection) continue;
+			if(itemElement != this.currentItem[0] //cannot intersect with itself
+				&&	this.placeholder[intersection == 1 ? "next" : "prev"]()[0] != itemElement //no useless actions that have been done before
+				&&	!$.ui.contains(this.placeholder[0], itemElement) //no action if the item moved is the parent of the item checked
+				&& (this.options.type == 'semi-dynamic' ? !$.ui.contains(this.element[0], itemElement) : true)
+			) {
+				
+				this.direction = intersection == 1 ? "down" : "up";
+				//b-hind : here we must also check 
+				
+				//var level = this._getLevel(item.item);
+				//console.log($.ui.isOverAxis(this.positionAbs.left, item.left, item.width));
+				//var haschildNode = this._hasChildNodes(item.item);
+				//console.log("haschildNode : "+haschildNode);
+				//moved to _rearrange
+				
+				
+				if (this.options.tolerance == "pointer" || this._intersectsWithSides(item)) {
+					this._rearrange(event, item);
+				} else {
+					break;
+				}
+
+				this._trigger("change", event, this._uiHash());
+				break;
+			}
+		}
+
+		//Post events to containers
+		this._contactContainers(event);
+
+		//Interconnect with droppables
+		if($.ui.ddmanager) $.ui.ddmanager.drag(this, event);
+
+		//Call callbacks
+		this._trigger('sort', event, this._uiHash());
+
+		this.lastPositionAbs = this.positionAbs;
+		return false;
+
+	},
+
+	_mouseStop: function(event, noPropagation) {
+
+		if(!event) return;
+
+		//If we are using droppables, inform the manager about the drop
+		if ($.ui.ddmanager && !this.options.dropBehaviour)
+			$.ui.ddmanager.drop(this, event);
+
+		if(this.options.revert) {
+			var self = this;
+			var cur = self.placeholder.offset();
+
+			self.reverting = true;
+
+			$(this.helper).animate({
+				left: cur.left - this.offset.parent.left - self.margins.left + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollLeft),
+				top: cur.top - this.offset.parent.top - self.margins.top + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollTop)
+			}, parseInt(this.options.revert, 10) || 500, function() {
+				self._clear(event);
+			});
+		} else {
+			this._clear(event, noPropagation);
+		}
+
+		return false;
+
+	},
+
+	cancel: function() {
+
+		var self = this;
+
+		if(this.dragging) {
+
+			this._mouseUp();
+
+			if(this.options.helper == "original")
+				this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper");
+			else
+				this.currentItem.show();
+
+			//Post deactivating events to containers
+			for (var i = this.containers.length - 1; i >= 0; i--){
+				this.containers[i]._trigger("deactivate", null, self._uiHash(this));
+				if(this.containers[i].containerCache.over) {
+					this.containers[i]._trigger("out", null, self._uiHash(this));
+					this.containers[i].containerCache.over = 0;
+				}
+			}
+
+		}
+
+		//$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node!
+		if(this.placeholder[0].parentNode) this.placeholder[0].parentNode.removeChild(this.placeholder[0]);
+		if(this.options.helper != "original" && this.helper && this.helper[0].parentNode) this.helper.remove();
+
+		$.extend(this, {
+			helper: null,
+			dragging: false,
+			reverting: false,
+			_noFinalSort: null
+		});
+
+		if(this.domPosition.prev) {
+			$(this.domPosition.prev).after(this.currentItem);
+		} else {
+			$(this.domPosition.parent).prepend(this.currentItem);
+		}
+
+		return true;
+
+	},
+
+	serialize: function(o) {
+
+		var items = this._getItemsAsjQuery(o && o.connected);
+		var str = []; o = o || {};
+		if(this.options.nested){
+			var level = 0;
+			var levels = [];
+			var key = 0;
+			for(var i=0;i<items.length;i++){
+				var itemlevel = this._getLevel($(items[i]));
+				if(level== itemlevel){
+					var res = ($(o.item || items[i]).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/));
+					if(res) str.push((o.key || res[1]+(itemlevel==1?"":"_"+levels[levels.length-1])+'[]')+'='+(o.key && o.expression ? res[1] : res[2]));
+					if(res) key = res[2];
+				}else if(itemlevel > level){
+					level = itemlevel;
+					var res = ($(o.item || items[i]).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/));
+					if(res) levels[levels.length] =  key;
+					if(res) str.push((o.key || res[1]+(itemlevel==1?"":"_"+levels[levels.length-1])+'[]')+'='+(o.key && o.expression ? res[1] : res[2]));
+					if(res) key = res[2];
+				}else{
+					
+					do{
+						levels.pop();
+						key = levels[levels.length-1];
+						level--;
+					
+					}while(level > itemlevel);
+					var res = ($(o.item || items[i]).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/));
+					if(res) str.push((o.key || res[1]+(itemlevel==1?"":"_"+key)+'[]')+'='+(o.key && o.expression ? res[1] : res[2]));
+					if(res) key = res[2];
+				}
+				
+			}
+		}else{
+			$(items).each(function() {
+				var res = ($(o.item || this).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/));
+				if(res) str.push((o.key || res[1]+'[]')+'='+(o.key && o.expression ? res[1] : res[2]));
+			});
+		}
+		
+		return str.join('&');
+
+	},
+
+	toArray: function(o) {
+
+		var items = this._getItemsAsjQuery(o && o.connected);
+		var ret = []; o = o || {};
+		var self = this;
+		//add first item is always level 1
+		
+		
+		if(this.options.nested){
+	
+			var level = 1;
+			var currentAr = ret;
+			var levels = [];
+			
+			for(var i=0;i<items.length;i++){
+				var item = items[i];
+				var itemlevel = this._getLevel($(item));
+				
+				if(itemlevel == level){
+					currentAr.push([$(o.item || item).attr(o.attribute || 'id') || '',[]]);
+					
+				}else if(itemlevel > level){
+					
+					level = itemlevel;
+					levels[levels.length] = currentAr;
+					// get last element
+					currentAr = currentAr[currentAr.length-1][1];
+					currentAr.push([$(o.item || item).attr(o.attribute || 'id') || '',[]]);
+				}else{
+					
+					do{
+						currentAr = levels[levels.length-1];
+						levels.pop();
+						level--;
+					}while(level > itemlevel);
+					
+					currentAr.push([$(o.item || item).attr(o.attribute || 'id') || '',[]]);
+				}
+			}
+		
+
+		}else{
+				items.each(function() { ret.push($(o.item || this).attr(o.attribute || 'id') || ''); });
+		}
+
+	
+		return ret;
+
+	},
+
+	/* Be careful with the following core functions */
+	_intersectsWith: function(item) {
+
+		var x1 = this.positionAbs.left,
+			x2 = x1 + this.helperProportions.width,
+			y1 = this.positionAbs.top,
+			y2 = y1 + this.helperProportions.height;
+
+		var l = item.left,
+			r = l + item.width,
+			t = item.top,
+			b = t + item.height;
+
+		var dyClick = this.offset.click.top,
+			dxClick = this.offset.click.left;
+
+		var isOverElement = (y1 + dyClick) > t && (y1 + dyClick) < b && (x1 + dxClick) > l && (x1 + dxClick) < r;
+
+		if(	   this.options.tolerance == "pointer"
+			|| this.options.forcePointerForContainers
+			|| (this.options.tolerance != "pointer" && this.helperProportions[this.floating ? 'width' : 'height'] > item[this.floating ? 'width' : 'height'])
+		) {
+			return isOverElement;
+		} else {
+
+			return (l < x1 + (this.helperProportions.width / 2) // Right Half
+				&& x2 - (this.helperProportions.width / 2) < r // Left Half
+				&& t < y1 + (this.helperProportions.height / 2) // Bottom Half
+				&& y2 - (this.helperProportions.height / 2) < b ); // Top Half
+
+		}
+	},
+	/* check of the pointer  is over an other element  (while dragging) */
+	_intersectsWithPointer: function(item) {
+
+		var isOverElementHeight = $.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height),
+			isOverElementWidth = $.ui.isOverAxis(this.positionAbs.left + this.offset.click.left, item.left, item.width),
+			isOverElement = isOverElementHeight && isOverElementWidth,
+			verticalDirection = this._getDragVerticalDirection(),
+			horizontalDirection = this._getDragHorizontalDirection();
+
+		if (!isOverElement)
+			return false;
+
+		return this.floating ?
+			( ((horizontalDirection && horizontalDirection == "right") || verticalDirection == "down") ? 2 : 1 )
+			: ( verticalDirection && (verticalDirection == "down" ? 2 : 1) );
+
+	},
+	/* check of the dragged element is over an other element */
+	_intersectsWithSides: function(item) {
+
+		var isOverBottomHalf = $.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, item.top + (item.height/2), item.height),
+			isOverRightHalf = $.ui.isOverAxis(this.positionAbs.left + this.offset.click.left, item.left + (item.width/2), item.width),
+			verticalDirection = this._getDragVerticalDirection(),
+			horizontalDirection = this._getDragHorizontalDirection();
+
+		if (this.floating && horizontalDirection) {
+			return ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf));
+		} else {
+			return verticalDirection && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf));
+		}
+
+	},
+
+	_getDragVerticalDirection: function() {
+		var delta = this.positionAbs.top - this.lastPositionAbs.top;
+		return delta != 0 && (delta > 0 ? "down" : "up");
+	},
+
+	_getDragHorizontalDirection: function() {
+		var delta = this.positionAbs.left - this.lastPositionAbs.left;
+		return delta != 0 && (delta > 0 ? "right" : "left");
+	},
+
+	refresh: function(event) {
+		this._refreshItems(event);
+		this.refreshPositions();
+	},
+
+	_connectWith: function() {
+		var options = this.options;
+		return options.connectWith.constructor == String
+			? [options.connectWith]
+			: options.connectWith;
+	},
+	
+	_getItemsAsjQuery: function(connected) {
+
+		var self = this;
+		var items = [];
+		var queries = [];
+		var connectWith = this._connectWith();
+
+		if(connectWith && connected) {
+			for (var i = connectWith.length - 1; i >= 0; i--){
+				var cur = $(connectWith[i]);
+				for (var j = cur.length - 1; j >= 0; j--){
+					var inst = $.data(cur[j], 'sortable');
+					if(inst && inst != this && !inst.options.disabled) {
+						queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element) : $(inst.options.items, inst.element).not(".ui-sortable-helper"), inst]);
+					}
+				};
+			};
+		}
+
+		queries.push([$.isFunction(this.options.items) ? this.options.items.call(this.element, null, { options: this.options, item: this.currentItem }) : $(this.options.items, this.element).not(".ui-sortable-helper"), this]);
+
+		for (var i = queries.length - 1; i >= 0; i--){
+			queries[i][0].each(function() {
+				items.push(this);
+			});
+		};
+		
+
+		return $(items);
+
+	},
+
+	_removeCurrentsFromItems: function() {
+
+		var list = this.currentItem.find(":data(sortable-item)");
+
+		for (var i=0; i < this.items.length; i++) {
+
+			for (var j=0; j < list.length; j++) {
+				if(list[j] == this.items[i].item[0])
+					this.items.splice(i,1);
+			};
+
+		};
+
+	},
+
+	_refreshItems: function(event) {
+
+		this.items = [];
+		this.containers = [this];
+		var items = this.items;
+		var self = this;
+		var queries = [[$.isFunction(this.options.items) ? this.options.items.call(this.element[0], event, { item: this.currentItem }) : $(this.options.items, this.element), this]];
+		var connectWith = this._connectWith();
+
+		if(connectWith) {
+			for (var i = connectWith.length - 1; i >= 0; i--){
+				var cur = $(connectWith[i]);
+				for (var j = cur.length - 1; j >= 0; j--){
+					var inst = $.data(cur[j], 'sortable');
+					if(inst && inst != this && !inst.options.disabled) {
+						queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element[0], event, { item: this.currentItem }) : $(inst.options.items, inst.element), inst]);
+						this.containers.push(inst);
+					}
+				};
+			};
+		}
+
+		for (var i = queries.length - 1; i >= 0; i--) {
+			var targetData = queries[i][1];
+			var _queries = queries[i][0];
+
+			for (var j=0, queriesLength = _queries.length; j < queriesLength; j++) {
+				var item = $(_queries[j]);
+
+				item.data('sortable-item', targetData); // Data for target checking (mouse manager)
+
+				items.push({
+					item: item,
+					instance: targetData,
+					width: 0, height: 0,
+					left: 0, top: 0
+				});
+			};
+		};
+
+	},
+
+	refreshPositions: function(fast) {
+
+		//This has to be redone because due to the item being moved out/into the offsetParent, the offsetParent's position will change
+		if(this.offsetParent && this.helper) {
+			this.offset.parent = this._getParentOffset();
+		}
+
+		for (var i = this.items.length - 1; i >= 0; i--){
+			var item = this.items[i];
+
+			//We ignore calculating positions of all connected containers when we're not over them
+			if(item.instance != this.currentContainer && this.currentContainer && item.item[0] != this.currentItem[0])
+				continue;
+
+			var t = this.options.toleranceElement ? $(this.options.toleranceElement, item.item) : item.item;
+
+			if (!fast) {
+				item.width = t.outerWidth();
+				item.height = t.outerHeight();
+			}
+
+			var p = t.offset();
+			item.left = p.left;
+			item.top = p.top;
+		};
+
+		if(this.options.custom && this.options.custom.refreshContainers) {
+			this.options.custom.refreshContainers.call(this);
+		} else {
+			for (var i = this.containers.length - 1; i >= 0; i--){
+				var p = this.containers[i].element.offset();
+				this.containers[i].containerCache.left = p.left;
+				this.containers[i].containerCache.top = p.top;
+				this.containers[i].containerCache.width	= this.containers[i].element.outerWidth();
+				this.containers[i].containerCache.height = this.containers[i].element.outerHeight();
+			};
+		}
+
+	},
+
+	_createPlaceholder: function(that) {
+
+		var self = that || this, o = self.options;
+
+		if(!o.placeholder || o.placeholder.constructor == String) {
+			var className = o.placeholder;
+			o.placeholder = {
+				element: function() {
+
+					var el = $(document.createElement(self.currentItem[0].nodeName))
+						.addClass(className || self.currentItem[0].className+" ui-sortable-placeholder")
+						.removeClass("ui-sortable-helper")[0];
+
+					if(!className)
+						el.style.visibility = "hidden";
+
+					return el;
+				},
+				update: function(container, p) {
+
+					// 1. If a className is set as 'placeholder option, we don't force sizes - the class is responsible for that
+					// 2. The option 'forcePlaceholderSize can be enabled to force it even if a class name is specified
+					if(className && !o.forcePlaceholderSize) return;
+
+					//If the element doesn't have a actual height by itself (without styles coming from a stylesheet), it receives the inline height from the dragged item
+					if(!p.height()) { p.height(self.currentItem.innerHeight() - parseInt(self.currentItem.css('paddingTop')||0, 10) - parseInt(self.currentItem.css('paddingBottom')||0, 10)); };
+					if(!p.width()) { p.width(self.currentItem.innerWidth() - parseInt(self.currentItem.css('paddingLeft')||0, 10) - parseInt(self.currentItem.css('paddingRight')||0, 10)); };
+				}
+			};
+		}
+
+		//Create the placeholder
+		self.placeholder = $(o.placeholder.element.call(self.element, self.currentItem));
+
+		//Append it after the actual current item
+		/**********************************************
+		b-hind patch : append it after or as a child if nested is true
+		check position of element
+		
+		problem : on deep nested items what is te depth of the required item to place
+		first solution: create a visible location after each depth -> requires a fyical height and chacges the layout of the nested tree:(
+		second solution : check the indent from the helper, but what if the nesteditems dont have an indent
+		
+		We go for the second solution  !!!
+		
+		so what tot do: check the indent of each read left -padding or left -margin
+		if the helper (left side is between th left side of the parent en itself put it as an extra element of the parent if it is larger than itself put it as a child/
+		
+		**********************************************/
+		
+		self.currentItem.after(self.placeholder);
+
+		//Update the size of the placeholder (TODO: Logic to fuzzy, see line 316/317)
+		o.placeholder.update(self, self.placeholder);
+
+	},
+
+	_contactContainers: function(event) {
+		for (var i = this.containers.length - 1; i >= 0; i--){
+
+			if(this._intersectsWith(this.containers[i].containerCache)) {
+				if(!this.containers[i].containerCache.over) {
+
+					if(this.currentContainer != this.containers[i]) {
+
+						//When entering a new container, we will find the item with the least distance and append our item near it
+						var dist = 10000; var itemWithLeastDistance = null; var base = this.positionAbs[this.containers[i].floating ? 'left' : 'top'];
+						for (var j = this.items.length - 1; j >= 0; j--) {
+							if(!$.ui.contains(this.containers[i].element[0], this.items[j].item[0])) continue;
+							var cur = this.items[j][this.containers[i].floating ? 'left' : 'top'];
+							if(Math.abs(cur - base) < dist) {
+								dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j];
+							}
+						}
+
+						if(!itemWithLeastDistance && !this.options.dropOnEmpty) //Check if dropOnEmpty is enabled
+							continue;
+
+						this.currentContainer = this.containers[i];
+						itemWithLeastDistance ? this._rearrange(event, itemWithLeastDistance, null, true) : this._rearrange(event, null, this.containers[i].element, true);
+						this._trigger("change", event, this._uiHash());
+						this.containers[i]._trigger("change", event, this._uiHash(this));
+
+						//Update the placeholder
+						this.options.placeholder.update(this.currentContainer, this.placeholder);
+
+					}
+
+					this.containers[i]._trigger("over", event, this._uiHash(this));
+					this.containers[i].containerCache.over = 1;
+				}
+			} else {
+				if(this.containers[i].containerCache.over) {
+					this.containers[i]._trigger("out", event, this._uiHash(this));
+					this.containers[i].containerCache.over = 0;
+				}
+			}
+
+		};
+	},
+
+	_createHelper: function(event) {
+
+		var o = this.options;
+		var helper = $.isFunction(o.helper) ? $(o.helper.apply(this.element[0], [event, this.currentItem])) : (o.helper == 'clone' ? this.currentItem.clone() : this.currentItem);
+
+		if(!helper.parents('body').length) //Add the helper to the DOM if that didn't happen already
+			$(o.appendTo != 'parent' ? o.appendTo : this.currentItem[0].parentNode)[0].appendChild(helper[0]);
+
+		if(helper[0] == this.currentItem[0])
+			this._storedCSS = { width: this.currentItem[0].style.width, height: this.currentItem[0].style.height, position: this.currentItem.css("position"), top: this.currentItem.css("top"), left: this.currentItem.css("left") };
+
+		if(helper[0].style.width == '' || o.forceHelperSize) helper.width(this.currentItem.width());
+		if(helper[0].style.height == '' || o.forceHelperSize) helper.height(this.currentItem.height());
+
+		return helper;
+
+	},
+
+	_adjustOffsetFromHelper: function(obj) {
+		if(obj.left != undefined) this.offset.click.left = obj.left + this.margins.left;
+		if(obj.right != undefined) this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;
+		if(obj.top != undefined) this.offset.click.top = obj.top + this.margins.top;
+		if(obj.bottom != undefined) this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;
+	},
+
+	_getParentOffset: function() {
+
+
+		//Get the offsetParent and cache its position
+		this.offsetParent = this.helper.offsetParent();
+		var po = this.offsetParent.offset();
+
+		// This is a special case where we need to modify a offset calculated on start, since the following happened:
+		// 1. The position of the helper is absolute, so it's position is calculated based on the next positioned parent
+		// 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't the document, which means that
+		//    the scroll is included in the initial calculation of the offset of the parent, and never recalculated upon drag
+		if(this.cssPosition == 'absolute' && this.scrollParent[0] != document && $.ui.contains(this.scrollParent[0], this.offsetParent[0])) {
+			po.left += this.scrollParent.scrollLeft();
+			po.top += this.scrollParent.scrollTop();
+		}
+
+		if((this.offsetParent[0] == document.body) //This needs to be actually done for all browsers, since pageX/pageY includes this information
+		|| (this.offsetParent[0].tagName && this.offsetParent[0].tagName.toLowerCase() == 'html' && $.browser.msie)) //Ugly IE fix
+			po = { top: 0, left: 0 };
+
+		return {
+			top: po.top + (parseInt(this.offsetParent.css("borderTopWidth"),10) || 0),
+			left: po.left + (parseInt(this.offsetParent.css("borderLeftWidth"),10) || 0)
+		};
+
+	},
+
+	_getRelativeOffset: function() {
+
+		if(this.cssPosition == "relative") {
+			var p = this.currentItem.position();
+			return {
+				top: p.top - (parseInt(this.helper.css("top"),10) || 0) + this.scrollParent.scrollTop(),
+				left: p.left - (parseInt(this.helper.css("left"),10) || 0) + this.scrollParent.scrollLeft()
+			};
+		} else {
+			return { top: 0, left: 0 };
+		}
+
+	},
+
+	_cacheMargins: function() {
+		this.margins = {
+			left: (parseInt(this.currentItem.css("marginLeft"),10) || 0),
+			top: (parseInt(this.currentItem.css("marginTop"),10) || 0)
+		};
+	},
+
+	_cacheHelperProportions: function() {
+		this.helperProportions = {
+			width: this.helper.outerWidth(),
+			height: this.helper.outerHeight()
+		};
+	},
+
+	_setContainment: function() {
+
+		var o = this.options;
+		if(o.containment == 'parent') o.containment = this.helper[0].parentNode;
+		if(o.containment == 'document' || o.containment == 'window') this.containment = [
+			0 - this.offset.relative.left - this.offset.parent.left,
+			0 - this.offset.relative.top - this.offset.parent.top,
+			$(o.containment == 'document' ? document : window).width() - this.helperProportions.width - this.margins.left,
+			($(o.containment == 'document' ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top
+		];
+
+		if(!(/^(document|window|parent)$/).test(o.containment)) {
+			var ce = $(o.containment)[0];
+			var co = $(o.containment).offset();
+			var over = ($(ce).css("overflow") != 'hidden');
+
+			this.containment = [
+				co.left + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0) - this.margins.left,
+				co.top + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0) - this.margins.top,
+				co.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left,
+				co.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top
+			];
+		}
+
+	},
+
+	_convertPositionTo: function(d, pos) {
+
+		if(!pos) pos = this.position;
+		var mod = d == "absolute" ? 1 : -1;
+		var o = this.options, scroll = this.cssPosition == 'absolute' && !(this.scrollParent[0] != document && $.ui.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
+
+		return {
+			top: (
+				pos.top																	// The absolute mouse position
+				+ this.offset.relative.top * mod										// Only for relative positioned nodes: Relative offset from element to offset parent
+				+ this.offset.parent.top * mod											// The offsetParent's offset without borders (offset + border)
+				- ($.browser.safari && this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) * mod)
+			),
+			left: (
+				pos.left																// The absolute mouse position
+				+ this.offset.relative.left * mod										// Only for relative positioned nodes: Relative offset from element to offset parent
+				+ this.offset.parent.left * mod											// The offsetParent's offset without borders (offset + border)
+				- ($.browser.safari && this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ) * mod)
+			)
+		};
+
+	},
+
+	_generatePosition: function(event) {
+
+		var o = this.options, scroll = this.cssPosition == 'absolute' && !(this.scrollParent[0] != document && $.ui.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
+
+		// This is another very weird special case that only happens for relative elements:
+		// 1. If the css position is relative
+		// 2. and the scroll parent is the document or similar to the offset parent
+		// we have to refresh the relative offset during the scroll so there are no jumps
+		if(this.cssPosition == 'relative' && !(this.scrollParent[0] != document && this.scrollParent[0] != this.offsetParent[0])) {
+			this.offset.relative = this._getRelativeOffset();
+		}
+
+		var pageX = event.pageX;
+		var pageY = event.pageY;
+
+		/*
+		 * - Position constraining -
+		 * Constrain the position to a mix of grid, containment.
+		 */
+
+		if(this.originalPosition) { //If we are not dragging yet, we won't check for options
+
+			if(this.containment) {
+				if(event.pageX - this.offset.click.left < this.containment[0]) pageX = this.containment[0] + this.offset.click.left;
+				if(event.pageY - this.offset.click.top < this.containment[1]) pageY = this.containment[1] + this.offset.click.top;
+				if(event.pageX - this.offset.click.left > this.containment[2]) pageX = this.containment[2] + this.offset.click.left;
+				if(event.pageY - this.offset.click.top > this.containment[3]) pageY = this.containment[3] + this.offset.click.top;
+			}
+
+			if(o.grid) {
+				var top = this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1];
+				pageY = this.containment ? (!(top - this.offset.click.top < this.containment[1] || top - this.offset.click.top > this.containment[3]) ? top : (!(top - this.offset.click.top < this.containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top;
+
+				var left = this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0];
+				pageX = this.containment ? (!(left - this.offset.click.left < this.containment[0] || left - this.offset.click.left > this.containment[2]) ? left : (!(left - this.offset.click.left < this.containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left;
+			}
+
+		}
+
+		return {
+			top: (
+				pageY																// The absolute mouse position
+				- this.offset.click.top													// Click offset (relative to the element)
+				- this.offset.relative.top												// Only for relative positioned nodes: Relative offset from element to offset parent
+				- this.offset.parent.top												// The offsetParent's offset without borders (offset + border)
+				+ ($.browser.safari && this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ))
+			),
+			left: (
+				pageX																// The absolute mouse position
+				- this.offset.click.left												// Click offset (relative to the element)
+				- this.offset.relative.left												// Only for relative positioned nodes: Relative offset from element to offset parent
+				- this.offset.parent.left												// The offsetParent's offset without borders (offset + border)
+				+ ($.browser.safari && this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ))
+			)
+		};
+
+	},
+
+	_rearrange: function(event, i, a, hardRefresh) {
+		
+		var haschildNode = this._hasChildNodes(i.item);
+		// do this if is
+		if(this.options.nested && this.error){
+			if(this._storedCursor) $('body').css("cursor", this._storedCursor);
+			this.error = false;
+		}
+		if(!this.options.nested){
+			a ? a[0].appendChild(this.placeholder[0]) : i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction == 'down' ? i.item[0] : i.item[0].nextSibling));
+		}else{
+			var level = this._getLevel(i.item);
+			var childlevels = this._getChildLevels(this.helper);
+			// aantal items op deze level
+			
+			
+			if(this.options.maxLevels <= level+childlevels){
+				if(this.error != true){
+					this._storedCursor = $('body').css("cursor");
+					$('body').css("cursor", "not-allowed"); //Reset cursor
+					this.error = true;
+				}
+			}else{
+				if(!$.ui.isOverAxis(this.positionAbs.left, i.left, i.width)){
+					
+					if(this.options.maxItems.length <= level-1 || (i.item.closest(this.options.nested).children(this.options.items).not(".ui-sortable-helper,.ui-sortable-placeholder").length < this.options.maxItems[level-1])){ // als maxitems niet berijkt voor level 
+						a ? a[0].appendChild(this.placeholder[0]) : i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction == 'down' ? i.item[0] : i.item[0].nextSibling));
+					}else{
+						this._storedCursor = $('body').css("cursor");
+						$('body').css("cursor", "not-allowed"); //Reset cursor
+						this.error = true;
+					}
+				}else{
+					
+					if(i.item.find(this.options.nested).siblings().length<=0){
+						var element = document.createElement(this.options.nested);
+						
+						i.item.append($(element));
+						
+					}
+					
+					
+					if(this.options.maxItems.length <= level || (i.item.children(this.options.nested).children(this.options.items).not(".ui-sortable-helper,.ui-sortable-placeholder").length < this.options.maxItems[level])){
+						//i.item.find(this.options.nested)[0].appendChild(this.placeholder[0],i.item.find(this.options.nested)[0].firstChild);
+						i.item.find(this.options.nested)[0].insertBefore(this.placeholder[0],i.item.find(this.options.nested)[0].firstChild);
+					}else{
+						this._storedCursor = $('body').css("cursor");
+						$('body').css("cursor", "not-allowed"); //Reset cursor
+						this.error = true;
+					}
+					
+				}
+			}
+			
+			
+			//a ?  a[0].appendChild(this.placeholder[0])
+		}
+		//Various things done here to improve the performance:
+		// 1. we create a setTimeout, that calls refreshPositions
+		// 2. on the instance, we have a counter variable, that get's higher after every append
+		// 3. on the local scope, we copy the counter variable, and check in the timeout, if it's still the same
+		// 4. this lets only the last addition to the timeout stack through
+		this.counter = this.counter ? ++this.counter : 1;
+		var self = this, counter = this.counter;
+
+		window.setTimeout(function() {
+			if(counter == self.counter) self.refreshPositions(!hardRefresh); //Precompute after each DOM insertion, NOT on mousemove
+		},0);
+
+	},
+	/*b-hind function : get level from element */
+	_getLevel:function(item){
+		
+		var level =1;
+		if(this.options.nested){
+			var list = item.closest(this.options.nested);
+			//.ui-sortable
+			while(!list.is(".ui-sortable") && level < this.options.maxLevels){
+					level++;
+					list = list.parent().closest(this.options.nested);
+			}
+		}
+		return level;
+	},
+	_getChildLevels:function(item){
+		
+			levels = item.find(this.options.items).filter(this.options.items+":first-child").length;
+
+			return levels;
+	},
+	_getItemsOnLevel:function(item){
+		//console.log(item.closest(this.options.nested).html())
+		return item.closest(this.options.nested).children(this.options.items).not('.ui-sortable-placeholder').length;
+	},
+	_hasChildNodes:function(item){
+		if(this.options.nested){
+			if(item.find(this.options.nested) && item.find(this.options.nested).children(this.options.items).length>0){
+				return true;	
+			}else{
+				return false;	
+			}
+		}
+	},
+
+	_clear: function(event, noPropagation) {
+
+		this.reverting = false;
+		// We delay all events that have to be triggered to after the point where the placeholder has been removed and
+		// everything else normalized again
+		var delayedTriggers = [], self = this;
+
+		// We first have to update the dom position of the actual currentItem
+		// Note: don't do it if the current item is already removed (by a user), or it gets reappended (see #4088)
+		if(!this._noFinalSort && this.currentItem[0].parentNode) this.placeholder.before(this.currentItem);
+		this._noFinalSort = null;
+
+		if(this.helper[0] == this.currentItem[0]) {
+			for(var i in this._storedCSS) {
+				if(this._storedCSS[i] == 'auto' || this._storedCSS[i] == 'static') this._storedCSS[i] = '';
+			}
+			this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper");
+		} else {
+			this.currentItem.show();
+		}
+
+		if(this.fromOutside && !noPropagation) delayedTriggers.push(function(event) { this._trigger("receive", event, this._uiHash(this.fromOutside)); });
+		if((this.fromOutside || this.domPosition.prev != this.currentItem.prev().not(".ui-sortable-helper")[0] || this.domPosition.parent != this.currentItem.parent()[0]) && !noPropagation) delayedTriggers.push(function(event) { this._trigger("update", event, this._uiHash()); }); //Trigger update callback if the DOM position has changed
+		if(!$.ui.contains(this.element[0], this.currentItem[0])) { //Node was moved out of the current element
+			if(!noPropagation) delayedTriggers.push(function(event) { this._trigger("remove", event, this._uiHash()); });
+			for (var i = this.containers.length - 1; i >= 0; i--){
+				if($.ui.contains(this.containers[i].element[0], this.currentItem[0]) && !noPropagation) {
+					delayedTriggers.push((function(c) { return function(event) { c._trigger("receive", event, this._uiHash(this)); };  }).call(this, this.containers[i]));
+					delayedTriggers.push((function(c) { return function(event) { c._trigger("update", event, this._uiHash(this));  }; }).call(this, this.containers[i]));
+				}
+			};
+		};
+
+		//Post events to containers
+		for (var i = this.containers.length - 1; i >= 0; i--){
+			if(!noPropagation) delayedTriggers.push((function(c) { return function(event) { c._trigger("deactivate", event, this._uiHash(this)); };  }).call(this, this.containers[i]));
+			if(this.containers[i].containerCache.over) {
+				delayedTriggers.push((function(c) { return function(event) { c._trigger("out", event, this._uiHash(this)); };  }).call(this, this.containers[i]));
+				this.containers[i].containerCache.over = 0;
+			}
+		}
+
+		//Do what was originally in plugins
+		if(this._storedCursor) $('body').css("cursor", this._storedCursor); //Reset cursor
+		if(this._storedOpacity) this.helper.css("opacity", this._storedOpacity); //Reset cursor
+		if(this._storedZIndex) this.helper.css("zIndex", this._storedZIndex == 'auto' ? '' : this._storedZIndex); //Reset z-index
+
+		this.dragging = false;
+		if(this.cancelHelperRemoval) {
+			if(!noPropagation) {
+				this._trigger("beforeStop", event, this._uiHash());
+				for (var i=0; i < delayedTriggers.length; i++) { delayedTriggers[i].call(this, event); }; //Trigger all delayed events
+				this._trigger("stop", event, this._uiHash());
+			}
+			return false;
+		}
+
+		if(!noPropagation) this._trigger("beforeStop", event, this._uiHash());
+
+		//$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node!
+		this.placeholder[0].parentNode.removeChild(this.placeholder[0]);
+
+		if(this.helper[0] != this.currentItem[0]) this.helper.remove(); this.helper = null;
+
+		if(!noPropagation) {
+			for (var i=0; i < delayedTriggers.length; i++) { delayedTriggers[i].call(this, event); }; //Trigger all delayed events
+			this._trigger("stop", event, this._uiHash());
+		}
+		//b-hind clear empty nested elements
+		if(this.options.nested){
+			
+			this.element.find(this.options.nested+":empty").remove();
+			
+		}
+		this.fromOutside = false;
+		return true;
+
+	},
+
+	_trigger: function() {
+		if ($.widget.prototype._trigger.apply(this, arguments) === false) {
+			this.cancel();
+		}
+	},
+
+	_uiHash: function(inst) {
+		var self = inst || this;
+		return {
+			helper: self.helper,
+			placeholder: self.placeholder || $([]),
+			position: self.position,
+			absolutePosition: self.positionAbs, //deprecated
+			offset: self.positionAbs,
+			item: self.currentItem,
+			sender: inst ? inst.element : null
+		};
+	}
+
+}));
+
+$.extend($.ui.sortable, {
+	getter: "serialize toArray",
+	version: "1.7.2",
+	eventPrefix: "sort",
+	defaults: {
+		appendTo: "parent",
+		axis: false,
+		cancel: ":input,option",
+		connectWith: false,
+		containment: false,
+		cursor: 'auto',
+		cursorAt: false,
+		delay: 0,
+		distance: 1,
+		
+		dropOnEmpty: true,
+		forcePlaceholderSize: false,
+		forceHelperSize: false,
+		grid: false,
+		handle: false,
+		helper: "original",
+		items: '> *',
+		opacity: false,
+		placeholder: false,
+		revert: false,
+		scroll: true,
+		scrollSensitivity: 20,
+		scrollSpeed: 20,
+		scope: "default",
+		tolerance: "intersect",
+		zIndex: 1000,
+		nested:false,
+		maxLevels: 100,
+		maxItems : []
+		}
+});
+
+})(jQuery);
Index: /main/trunk/greenstone3/web/interfaces/oran/transform/layouts/main.xsl
===================================================================
--- /main/trunk/greenstone3/web/interfaces/oran/transform/layouts/main.xsl	(revision 22515)
+++ /main/trunk/greenstone3/web/interfaces/oran/transform/layouts/main.xsl	(revision 22516)
@@ -5,6 +5,10 @@
 	xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
 	xmlns:gslib="http://www.greenstone.org/skinning"
-        xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"
-	extension-element-prefixes="java util"
+    xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"
+    
+    xmlns:lxslt="http://xml.apache.org/xslt"
+    xmlns:result="http://www.example.com/results"
+
+	extension-element-prefixes="java util result"
 	exclude-result-prefixes="util java util">
 
@@ -27,5 +31,8 @@
 				<title><xsl:call-template name="pageTitle"/> :: <xsl:call-template name="siteName"/></title>
 				<link rel="stylesheet" href="interfaces/{$interface_name}/style/core.css" type="text/css"/>
-				<script type="text/javascript" src="interfaces/oran/js/jquery.js"><xsl:text> </xsl:text></script>
+				<script type="text/javascript" src="interfaces/oran/js/jquery.js"><xsl:text> </xsl:text></script> 
+                <!-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"><xsl:text> </xsl:text></script> -->
+                <!-- <script type="text/javascript" src="interfaces/oran/js/jquery-ui-1.8rc1/jquery-1.4.1.js"><xsl:text> </xsl:text></script> -->
+
 				<xsl:call-template name="berryBasketHeadTags"/>
 			</head>
@@ -112,11 +119,15 @@
 
     <!-- <style>div { background:yellow; margin:6px 0; }</style> -->
-    <!-- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"><xsl:text> </xsl:text></script> -->
+    <!-- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"><xsl:text> </xsl:text></script> --> 
     <!-- <script type="text/javascript" src="/interface/interface.js"><xsl:text> </xsl:text></script> -->
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"><xsl:text> </xsl:text></script>
-    <script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"><xsl:text> </xsl:text></script>
-
+    <!-- <script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"><xsl:text> </xsl:text></script> -->
+
+    <!-- <script type="text/javascript" src="interfaces/oran/js/interface/interface.js"><xsl:text> </xsl:text></script> -->
+    <script type="text/javascript" src="interfaces/oran/js/ui.nestedSortable.js"><xsl:text> </xsl:text></script>
+    <!-- <script type="text/javascript" src="interfaces/oran/js/inestedsortable.js"> <xsl:text> </xsl:text></script> -->
     <script type="text/javascript" src="interfaces/oran/js/gui_div.js"><xsl:text> </xsl:text></script>
-    
+   
+ 
     <xsl:variable name="fmt1">
         <xsl:call-template name="xml-to-string">
@@ -131,5 +142,17 @@
     </xsl:variable>
 
-    <div class="blockWrapper">
+    <style type="text/css">
+        .placeholder{
+            border: dashed 1px #ccc;
+            background-color:#FFFFCC;
+            height:20px;
+        }
+    </style>
+
+    <table width="80%"> 
+
+    <td width="60%">
+
+    <div id="formatStatement">
 
     <xsl:call-template name="xml-to-gui">
@@ -139,4 +162,21 @@
 
     </div>
+    </td>    
+
+    <td width="40%" valign="top">
+    <div class="gsf:metadata block leaf" title="gsf:metadata" id="gsf:metadata-{generate-id()}">
+            <!--<div class="header">-->
+                METADATA
+            <!--</div>-->
+            <!--<div class="content">-->
+                <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>
+                <!-- <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> -->
+            <!--</div>-->
+        </div>
+    </td>
+    </table>
 
     <!-- <xsl:variable name="tok" select="fn:tokenize($fmt,'/s+')"/> -->
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 22515)
+++ /main/trunk/greenstone3/web/interfaces/oran/transform/layouts/xml-to-gui.xsl	(revision 22516)
@@ -45,42 +45,8 @@
     </xsl:template>
 
-    <xsl:template match="gsf:choose-metadata" mode="xml-to-gui">
-        <xsl:param name="depth"/>
-        <xsl:param name="metadataSets"/>
-        
-        <div class="block" title="gsf:link">
-            <div class="header">
-                CHOOSE <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
-            </div>
-            <div class="content">
-                <xsl:apply-templates mode="xml-to-gui">
-                    <xsl:with-param name="depth" select="$depth"/>
-                    <xsl:with-param name="metadataSets" select="$metadataSets"/> 
-                </xsl:apply-templates>
-            </div>
-            <div class="footer">
-                END CHOOSE
-            </div>
-        </div>    
-    </xsl:template>
-
-    <xsl:template match="gsf:metadata" mode="xml-to-gui">
-        <xsl:param name="depth"/>
-        <xsl:param name="metadataSets"/>
-
-        <div class="block" title="gsf:link">
-            <div class="header">
-                METADATA <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
-            </div>
-            <div class="content">
-                <xsl:call-template name="meta-to-combo">
-                    <xsl:with-param name="metadataSets" select="$metadataSets"/>
-                    <xsl:with-param name="current" select="@name"/>
-                </xsl:call-template>
-            </div>
-        </div>
-    </xsl:template>
-
-<!-- **************************************************************** -->
+    
+    <!-- **************************************************************************** -->
+    <!-- COMBO BOX CREATION                                                           -->
+    <!-- **************************************************************************** -->
 
     <xsl:template name="meta-to-combo">
@@ -95,5 +61,5 @@
         </xsl:variable>
 
-        <select> 
+        <select>
             <option value ="{$current_mod}" disabled="disabled" selected="{$current_mod}"><xsl:value-of select="$current_mod"/></option>
 
@@ -116,5 +82,5 @@
         <xsl:param name="set"/>
         <xsl:param name="current"/>
-    
+
         <xsl:variable name="meta"><xsl:value-of select="$set"/>.<xsl:value-of select="@name"/></xsl:variable>
 
@@ -122,8 +88,8 @@
         <xsl:choose>
             <xsl:when test="$current = $meta">
-                <option value ="{$meta}" selected="{$meta}"><xsl:value-of select="$meta"/></option> 
+                <option value ="{$meta}" selected="{$meta}"><xsl:value-of select="$meta"/></option>
             </xsl:when>
             <xsl:otherwise>
-                <option value ="{$meta}"><xsl:value-of select="$meta"/></option> 
+                <option value ="{$meta}"><xsl:value-of select="$meta"/></option>
             </xsl:otherwise>
         </xsl:choose>
@@ -137,12 +103,61 @@
     </xsl:template>
 
-<!-- **************************************************************** -->
-
+
+    <!-- **************************************************************************** -->
+
+
+    <!-- **************************************************************************** -->
+    <!-- GSF STATEMENTS                                                               -->
+    <!-- **************************************************************************** -->
+
+    
+    <!-- ********** GSF:CHOOSE-METADATA ********** -->
+    <xsl:template match="gsf:choose-metadata" mode="xml-to-gui">
+        <xsl:param name="depth"/>
+        <xsl:param name="metadataSets"/>
+        
+        <div class="gsf:choose-metadata block" title="gsf:choose-metadata" id="gsf:choose-metadata-{generate-id()}">
+            <!-- <div class="header"> -->
+                CHOOSE <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
+            <!--</div>-->
+            <!--<div class="content">-->
+                <xsl:apply-templates mode="xml-to-gui">
+                    <xsl:with-param name="depth" select="$depth"/>
+                    <xsl:with-param name="metadataSets" select="$metadataSets"/> 
+                </xsl:apply-templates>
+            <!--</div>-->
+            <!--<div class="footer">-->
+                END CHOOSE
+            <!--</div>-->
+        </div>    
+    </xsl:template>
+
+
+    <!-- ********** GSF:METADATA ********** -->
+    <xsl:template match="gsf:metadata" mode="xml-to-gui">
+        <xsl:param name="depth"/>
+        <xsl:param name="metadataSets"/>
+
+        <div class="gsf:metadata block leaf" title="gsf:metadata" id="gsf:metadata-{generate-id()}">
+            <!--<div class="header">-->
+                METADATA 
+            <!--</div>-->
+            <!--<div class="content">-->
+                <xsl:call-template name="meta-to-combo">
+                    <xsl:with-param name="metadataSets" select="$metadataSets"/>
+                    <xsl:with-param name="current" select="@name"/>
+                </xsl:call-template>
+                <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
+            <!--</div>-->
+        </div>
+    </xsl:template>
+
+
+    <!-- ********** GSF:LINK ********** -->
     <xsl:template match="gsf:link" mode="xml-to-gui">
         <xsl:param name="depth"/>
         <xsl:param name="metadataSets"/>
         
-        <div class="block" title="gsf:link">
-            <div class="header">
+        <div class="gsf:link block" title="gsf:link" id="gsf:link-{generate-id()}">
                 LINK[type=
     	        <select>
@@ -171,116 +186,112 @@
                   </xsl:choose>
 	            </select>]<a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
-            </div>
-            <div class="content">
                 <xsl:apply-templates mode="xml-to-gui">
                     <xsl:with-param name="depth" select="$depth"/>
                     <xsl:with-param name="metadataSets" select="$metadataSets"/> 
                 </xsl:apply-templates>
-            </div>
-            <div class="footer">
                 END LINK <br/>
-            </div>
         </div> 
     </xsl:template>
 
+
+    <!-- ********** GSF:TEMPLATE ********** -->
     <xsl:template match="gsf:template" mode="xml-to-gui">
         <xsl:param name="depth"/>
         <xsl:param name="metadataSets"/>
 
-        <div class="block" title="gsf:template">
-            <div class="header">
+        <div class="gsf:template block" title="gsf:template" id="gsf:template-{generate-id()}">
                 TEMPLATE[match=<xsl:value-of select="@match"/>]<a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
-            </div>
-            <div class="content">
                 <xsl:apply-templates mode="xml-to-gui">
                     <xsl:with-param name="depth" select="$depth"/>
                     <xsl:with-param name="metadataSets" select="$metadataSets"/> 
                 </xsl:apply-templates>
-            </div>
-            <div class="footer">
                 END TEMPLATE <br/>
-            </div>
-        </div>
-    </xsl:template>
-
+        </div>
+    </xsl:template>
+
+    <!-- ********** GSF:SWITCH ********** -->
+    <xsl:template match="gsf:switch" mode="xml-to-gui">
+        <xsl:param name="depth"/>
+        <xsl:param name="metadataSets"/>
+
+        <div class="gsf:switch block" title="gsf:switch" id="gsf:switch-{generate-id()}">
+                SWITCH <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
+                <xsl:apply-templates mode="xml-to-gui">
+                    <xsl:with-param name="depth" select="$depth"/>
+                    <xsl:with-param name="metadataSets" select="$metadataSets"/>
+                </xsl:apply-templates>
+                END SWITCH
+        </div>
+    </xsl:template>
+
+
+    <!-- ********** GSF:WHEN ********** -->
     <xsl:template match="gsf:when" mode="xml-to-gui">
         <xsl:param name="depth"/>
         <xsl:param name="metadataSets"/>
 
-        <div class="block" title="gsf:when"> 
-            <div class="header">
-                WHEN[test=<xsl:value-of select="@test"/>]<button>x</button> <br/><a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
-            </div>
-            <div class="content">
+        <div class="gsf:when block" title="gsf:when" id="gsf:when-{generate-id()}"> 
+                WHEN[test=<xsl:value-of select="@test"/>] <br/><a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
                 <xsl:apply-templates mode="xml-to-gui">
                   <xsl:with-param name="depth" select="$depth"/>
                   <xsl:with-param name="metadataSets" select="$metadataSets"/>
                 </xsl:apply-templates>
-            </div>
-            <div class="footer">
                 END WHEN
-            </div>
-        </div>
-    </xsl:template>
-
+        </div>
+    </xsl:template>
+
+
+    <!-- ********** GSF:OTHERWISE ********** -->
     <xsl:template match="gsf:otherwise" mode="xml-to-gui">
         <xsl:param name="depth"/>
         <xsl:param name="metadataSets"/>
 
-        <div class="block" title="gsf:otherwise">
-            <div class="header">
-                OTHERWISE <button>x</button><br/><a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
-            </div>
-            <div class="content">
+        <div class="gsf:otherwise block" title="gsf:otherwise" id="gsf:otherwise-{generate-id()}">
+                OTHERWISE <br/><a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
                 <xsl:apply-templates mode="xml-to-gui">
                     <xsl:with-param name="depth" select="$depth"/>
                     <xsl:with-param name="metadataSets" select="$metadataSets"/>
                 </xsl:apply-templates>
-            </div>
-            <div class="footer">
                 END OTHERWISE
-            </div>       
-        </div>
-    </xsl:template>
-
+        </div>
+    </xsl:template>
+
+
+    <!-- ********** GSF:ICON ********** -->
     <xsl:template match="gsf:icon" mode="xml-to-gui">
         <xsl:param name="depth"/>
         <xsl:param name="metadataSets"/>
 
-        <div class="block" title="gsf:link">
-            <div class="header">
-                ICON
-            </div>
-            <div class="content">
-              ICON[type=<xsl:value-of select="@type"/>]<a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
-            </div>
-        </div>
-    </xsl:template>
-
-    <xsl:template match="gsf:switch" mode="xml-to-gui">
-        <xsl:param name="depth"/>
-        <xsl:param name="metadataSets"/>
-        
-        <div class="block" title="gsf:switch">
-            <div class="content">
-                SWITCH <button>x</button><br/><a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
-            </div>
-            <div class="content">
-                <xsl:apply-templates mode="xml-to-gui">
-                    <xsl:with-param name="depth" select="$depth"/>
-                    <xsl:with-param name="metadataSets" select="$metadataSets"/> 
-                </xsl:apply-templates>
-            </div>
-            <div class="footer">
-                END SWITCH
-            </div>
-        </div>
-    </xsl:template>
-
+        <div class="gsf:icon block leaf" title="gsf:icon" id="gsf:icon-{generate-id()}">
+                ICON[type=
+                <select>
+                    <xsl:choose>
+                        <xsl:when test="@type='document'">
+                            <option value = "document" selected = "document">Document</option>
+                            <option value = "classifier">Classifier</option>
+                            <option value = "source">Source</option>
+                        </xsl:when>
+                        <xsl:when test="@type='classifier'">
+                            <option value = "classifier" selected = "classifier">Classifier</option>
+                            <option value = "document">Document</option>
+                            <option value = "source">Source</option>
+                        </xsl:when>
+                        <xsl:when test="@type='source'">
+                            <option value = "source" selected = "source">Source</option>
+                            <option value ="document">Document</option>
+                            <option value ="classifier">Classifier</option>
+                        </xsl:when>
+                  </xsl:choose>
+                </select>]<a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
+        </div>
+    </xsl:template>
+
+
+    <!-- ********** GSF:DEFAULT ********** -->
     <xsl:template match="gsf:default" mode="xml-to-gui">
         <xsl:param name="depth"/>
         <xsl:param name="metadataSets"/>
 
-        <div class="block" title="gsf:link">
+        <div class="block" title="gsf:default" id="gsf:default-{generate-id()}">
             <div class="header">
                 DEFAULT <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
@@ -298,33 +309,35 @@
     </xsl:template>
 
+
+    <!-- ********** TEXT ********** -->
     <xsl:template match="text()" mode="xml-to-gui">
         <xsl:param name="depth"/>
         <xsl:param name="metadataSets"/>
         
-        <div class="block" title="gsf:link">
-            <div class="header">
+        <div class="block leaf" title="gsf:text" id="gsf:text-{generate-id()}">
                 TEXT <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
-            </div>
-            <div class="content">
                 <xsl:variable name="rawtext"><xsl:value-of select="."/></xsl:variable>
                 TEXT = <input type="text" name="rawtextinput" size="10" value="{$rawtext}"/><br/>
-            </div>
-        </div>
-    </xsl:template>
-
+        </div>
+    </xsl:template>
+
+
+    <!-- ********** TABLE ********** -->
     <xsl:template match="td" mode="xml-to-gui">
         <xsl:param name="depth"/>
         <xsl:param name="metadataSets"/>
 
-        <xsl:text>&lt;td</xsl:text>valign=<xsl:value-of select="@valign"/><xsl:text>&gt;</xsl:text><br/>
-
-        <xsl:apply-templates mode="xml-to-gui">
-            <xsl:with-param name="depth" select="$depth"/>
-            <xsl:with-param name="metadataSets" select="$metadataSets"/> 
-        </xsl:apply-templates>
-        
-        <xsl:text>&lt;/td&gt;</xsl:text><br/><br/>
-    </xsl:template>
-
+        <div class="table block" title="gsf:table" id="gsf:table-{generate-id()}">
+                <xsl:text>&lt;td</xsl:text>valign=<xsl:value-of select="@valign"/><xsl:text>&gt;</xsl:text><a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a>
+                <xsl:apply-templates mode="xml-to-gui">
+                    <xsl:with-param name="depth" select="$depth"/>
+                    <xsl:with-param name="metadataSets" select="$metadataSets"/> 
+                </xsl:apply-templates>
+                <xsl:text>&lt;/td&gt;</xsl:text><br/><br/>
+        </div>
+    </xsl:template>
+
+
+    <!-- ********** BREAK ********** -->
     <xsl:template match="br" mode="xml-to-gui">
         <xsl:param name="depth"/>
@@ -339,4 +352,6 @@
     </xsl:template>
 
+
+    <!-- ********** MATCH ALL ********** -->
     <xsl:template match="*" mode="xml-to-gui">
         <xsl:param name="depth"/>
