ribbon merge not works correctly -- puts images in correct positions...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui/gallery-prototype.js

@@ -498,14 +498,39 @@ function createRibbon(direction){
 
 
 
+// merge current and direction ribbon...
+// NOTE: this will take all the elements from direction ribbon and add
+//       them to current
 // XXX sort elements correctly...
 // XXX this uses jquery animation...
 function mergeRibbons(direction){
+	/*
 	// XXX do these one by one...
 	$('.current.ribbon')[direction]('.ribbon')
 			.children()
 				.detach()
 				.insertAfter('.current.image')
+	*/
+
+	var current_ribbon = $('.current.ribbon')
+	var images = $('.current.ribbon')[direction]('.ribbon').children()
+	// XXX one way to optimise this is to add the lesser ribbon to the 
+	//     greater...
+	for(var i=0; i < images.length; i++){
+		// get previous element after which we need to put the current...
+		var image = $(images[i])
+		var prev_elem = getImageBefore(image.attr('id'), current_ribbon)
+		if(prev_elem == null){
+			image
+				.detach()
+				.insertBefore(current_ribbon.children('.image').first())
+		} else {
+			image
+				.detach()
+				.insertAfter(prev_elem)
+		}
+	}
+
 	// animate...
 	$('.current.ribbon')[direction]('.ribbon')
 			.slideUp(function(){

ui/gallery.html

@@ -138,8 +138,8 @@ $(document).ready(setup);
 
 	<br><br>
 
-	<button onclick="mergeRibbonsUp()">merge ribbons up</button><br>
-	<button onclick="mergeRibbonsDown()">merge ribbons down</button>
+	<button onclick="mergeRibbons('prev')">merge ribbons up</button><br>
+	<button onclick="mergeRibbons('next')">merge ribbons down</button>
 
 	<br><br>