diff --git a/ui/experiment-ribbon-navigation-n-zoom.html b/ui/experiment-ribbon-navigation-n-zoom.html
index 43d95bc0..da15520b 100755
--- a/ui/experiment-ribbon-navigation-n-zoom.html
+++ b/ui/experiment-ribbon-navigation-n-zoom.html
@@ -13,6 +13,8 @@ XXX zoom animation is odd...
 -->
 
 <script src="jquery.js"></script>
+<script src="ui.js"></script>
+
 <script>
 
 $(document).ready(function(){
@@ -44,214 +46,6 @@ function squareClick(){
 	centerSquare()
 }
 
-/*********************************************************************/
-
-/*
- * The folowing two functions will get the vertical and horizontal 
- * distance components between the pints a and A, centers of the small
- * and large squares respectively.
- * One of the squares is .field and the other is .container, 
- * which is small or big is not important.
- *
- *      +---------------+-------+
- *      |               |       |
- *      |               |       |
- *      |       + a . . | . . . | . +
- *      |       .       |       |   +- getCurrentVerticalOffset(...)
- *      |       .   + A | . . . | . +
- *      +---------------+       |
- *      |       .   .           |
- *      |       .   .           |
- *      |       .   .           |
- *      +-----------------------+
- *              .   .
- *              +-+-+
- *                +------------------- getCurrentHorizontalOffset(...)
- *
- *
- * Adding this distance to margins of one of the sqares will effectively 
- * allign the two points.
- *
- * NOTE: neither function accunts for field margins.
- *
- */
-
-// get the vertical offset of the center of square from center of container
-// NOTE: this does not account for field margins
-function getCurrentVerticalOffset(square){
-	if(square == null){
-		square = $('.square.current')
-	}
-
-	var zoom = $('.field').css('zoom')
-
-	var ribbons = $('.ribbon')
-	var ribbon = square.parents('.ribbon')
-	var squares = ribbon.children('.square')
-
-	// vertical...
-	var H = $('.container').height()
-	var h = ribbons.outerHeight(true)
-	// margin...
-	var mh = h - ribbons.outerHeight()
-	// current ribbon position (1-based)
-	var rn = ribbons.index(ribbon) + 1
-	// XXX compensating for margin error buildup... really odd!
-	//	...why is this still different for the first three ribbons?!
-	//		....sub-pixel error?
-	// relative position to field... 
-	// XXX is there a better way to get this?
-	var t = rn * (h - mh/2)
-	
-	return -t + H/2 + h/2
-}
-
-// get the horizontal offset of the center of square from center of container
-// NOTE: this does not account for field margins
-function getCurrentHorizontalOffset(square){
-	if(square == null){
-		square = $('.square.current')
-	}
-
-	var zoom = $('.field').css('zoom')
-
-	var ribbon = square.parents('.ribbon')
-	var squares = ribbon.children('.square')
-
-	var W = $('.container').width()
-	var w = squares.outerWidth(true)
-	// margin...
-	// XXX do we need this?
-	var mw = w - squares.outerWidth()
-	// current square position (1-based)
-	var sn = squares.index(square) + 1
-	var l = sn * (w - mw/2)
-
-	return -l + W/2 + w/2
-}
-
-function centerSquare(){
-
-	$('.field').css({
-		'margin-top': getCurrentVerticalOffset()
-	})
-
-	// horizontal...
-	alignRibbon()
-}
-
-function alignRibbon(square, position){
-	// default values...
-	if(square == null){
-		square = $('.square.current')
-	}
-	if(position == null){
-		position = 'center'
-	}
-
-	var ribbon = square.parents('.ribbon')
-
-	// account for margined field...
-	// NOTE: this enables us to cheat and shift all the ribbons just
-	//       by changing field margin-left...
-	var cml = parseFloat($('.field').css('margin-left'))
-	if(!cml){
-		cml = 0
-	}
-	var h_offset = getCurrentHorizontalOffset(square) - cml
-	var w = $('.square').outerWidth(true)
-
-	switch(position){
-		case 'before':
-			ribbon.css({'margin-left': h_offset + w/2})
-			return true
-		case 'center':
-			ribbon.css({'margin-left': h_offset})
-			return true
-		case 'after':
-			ribbon.css({'margin-left': h_offset - w/2})
-			return true
-	}
-	return false
-}
-
-
-
-/*********************************************************************/
-
-// XXX need to make this work for % values...
-// XXX make this usable as an event handler for .resize(...) event...
-function fieldSize(W, H){
-	var oW = $('.container').width()
-	var oH = $('.container').height()
-
-	var zoom = $('.field').css('zoom')
-
-	$('.container').css({
-		'width': W,
-		'height': H
-	})
-
-	// shift the field...
-	$('.field').css({
-		// compensate top/left that get changed while zooming....
-		'top': H/2 * 1/zoom - H/2, 
-		'left': W/2 * 1/zoom - W/2, 
-
-		'margin-top': (parseFloat($('.field').css('margin-top')) + (H-oH)/2), 
-		'margin-left': (parseFloat($('.field').css('margin-left')) + (W-oW)/2)
-	})
-}
-
-
-/*********************************************************************/
-
-// XXX need to fix animation jumping around... 
-// XXX try transition-origin instead of compensating by moving...
-function zoomContainerBy(factor){
-	var zoom = $('.field').css('zoom')*factor 
-
-	setContainerZoom(zoom)
-}
-
-function setContainerZoom(zoom){
-	var H = $('.container').height()
-	var W = $('.container').width()
-
-	$('.field').css({
-		'zoom': zoom,
-		// this only shifts to account for zoom/scale change...
-		// ...we need to factor in the position of .current within the field
-		'top': H/2 * 1/zoom - H/2, 
-		'left': W/2 * 1/zoom - W/2 
-	})
-}
-
-function fitImage(){
-	var H = $('.container').height()
-	var W = $('.container').width()
-
-	var h = $('.square.current').height()
-	var w = $('.square.current').width()
-
-	var f = Math.min(H/h, W/w)
-
-	setContainerZoom(f)
-}
-
-function fitThreeImages(){
-	var H = $('.container').height()
-	var W = $('.container').width()
-
-	var h = $('.square.current').height()
-	// XXX cheating, need to get three widths...
-	var w = $('.square.current').width()*3
-
-	var f = Math.min(H/h, W/w)
-
-	setContainerZoom(f)
-}
-
 </script>
 
 <style>
diff --git a/ui/ui.js b/ui/ui.js
new file mode 100755
index 00000000..3a5a6a50
--- /dev/null
+++ b/ui/ui.js
@@ -0,0 +1,208 @@
+/*********************************************************************/
+
+/*
+ * The folowing two functions will get the vertical and horizontal 
+ * distance components between the pints a and A, centers of the small
+ * and large squares respectively.
+ * One of the squares is .field and the other is .container, 
+ * which is small or big is not important.
+ *
+ *      +---------------+-------+
+ *      |               |       |
+ *      |               |       |
+ *      |       + a . . | . . . | . +
+ *      |       .       |       |   +- getCurrentVerticalOffset(...)
+ *      |       .   + A | . . . | . +
+ *      +---------------+       |
+ *      |       .   .           |
+ *      |       .   .           |
+ *      |       .   .           |
+ *      +-----------------------+
+ *              .   .
+ *              +-+-+
+ *                +------------------- getCurrentHorizontalOffset(...)
+ *
+ *
+ * Adding this distance to margins of one of the sqares will effectively 
+ * allign the two points.
+ *
+ * NOTE: neither function accunts for field margins.
+ *
+ */
+
+// get the vertical offset of the center of square from center of container
+// NOTE: this does not account for field margins
+function getCurrentVerticalOffset(square){
+	if(square == null){
+		square = $('.square.current')
+	}
+
+	var zoom = $('.field').css('zoom')
+
+	var ribbons = $('.ribbon')
+	var ribbon = square.parents('.ribbon')
+	var squares = ribbon.children('.square')
+
+	// vertical...
+	var H = $('.container').height()
+	var h = ribbons.outerHeight(true)
+	// margin...
+	var mh = h - ribbons.outerHeight()
+	// current ribbon position (1-based)
+	var rn = ribbons.index(ribbon) + 1
+	// XXX compensating for margin error buildup... really odd!
+	//	...why is this still different for the first three ribbons?!
+	//		....sub-pixel error?
+	// relative position to field... 
+	// XXX is there a better way to get this?
+	var t = rn * (h - mh/2)
+	
+	return -t + H/2 + h/2
+}
+
+// get the horizontal offset of the center of square from center of container
+// NOTE: this does not account for field margins
+function getCurrentHorizontalOffset(square){
+	if(square == null){
+		square = $('.square.current')
+	}
+
+	var zoom = $('.field').css('zoom')
+
+	var ribbon = square.parents('.ribbon')
+	var squares = ribbon.children('.square')
+
+	var W = $('.container').width()
+	var w = squares.outerWidth(true)
+	// margin...
+	// XXX do we need this?
+	var mw = w - squares.outerWidth()
+	// current square position (1-based)
+	var sn = squares.index(square) + 1
+	var l = sn * (w - mw/2)
+
+	return -l + W/2 + w/2
+}
+
+function centerSquare(){
+
+	$('.field').css({
+		'margin-top': getCurrentVerticalOffset()
+	})
+
+	// horizontal...
+	alignRibbon()
+}
+
+function alignRibbon(square, position){
+	// default values...
+	if(square == null){
+		square = $('.square.current')
+	}
+	if(position == null){
+		position = 'center'
+	}
+
+	var ribbon = square.parents('.ribbon')
+
+	// account for margined field...
+	// NOTE: this enables us to cheat and shift all the ribbons just
+	//       by changing field margin-left...
+	var cml = parseFloat($('.field').css('margin-left'))
+	if(!cml){
+		cml = 0
+	}
+	var h_offset = getCurrentHorizontalOffset(square) - cml
+	var w = $('.square').outerWidth(true)
+
+	switch(position){
+		case 'before':
+			ribbon.css({'margin-left': h_offset + w/2})
+			return true
+		case 'center':
+			ribbon.css({'margin-left': h_offset})
+			return true
+		case 'after':
+			ribbon.css({'margin-left': h_offset - w/2})
+			return true
+	}
+	return false
+}
+
+
+
+/*********************************************************************/
+
+// XXX need to make this work for % values...
+// XXX make this usable as an event handler for .resize(...) event...
+function fieldSize(W, H){
+	var oW = $('.container').width()
+	var oH = $('.container').height()
+
+	var zoom = $('.field').css('zoom')
+
+	$('.container').css({
+		'width': W,
+		'height': H
+	})
+
+	// shift the field...
+	$('.field').css({
+		// compensate top/left that get changed while zooming....
+		'top': H/2 * 1/zoom - H/2, 
+		'left': W/2 * 1/zoom - W/2, 
+
+		'margin-top': (parseFloat($('.field').css('margin-top')) + (H-oH)/2), 
+		'margin-left': (parseFloat($('.field').css('margin-left')) + (W-oW)/2)
+	})
+}
+
+
+/*********************************************************************/
+
+// XXX need to fix animation jumping around... 
+// XXX try transition-origin instead of compensating by moving...
+function zoomContainerBy(factor){
+	var zoom = $('.field').css('zoom')*factor 
+
+	setContainerZoom(zoom)
+}
+
+function setContainerZoom(zoom){
+	var H = $('.container').height()
+	var W = $('.container').width()
+
+	$('.field').css({
+		'zoom': zoom,
+		// this only shifts to account for zoom/scale change...
+		// ...we need to factor in the position of .current within the field
+		'top': H/2 * 1/zoom - H/2, 
+		'left': W/2 * 1/zoom - W/2 
+	})
+}
+
+function fitImage(){
+	var H = $('.container').height()
+	var W = $('.container').width()
+
+	var h = $('.square.current').height()
+	var w = $('.square.current').width()
+
+	var f = Math.min(H/h, W/w)
+
+	setContainerZoom(f)
+}
+
+function fitThreeImages(){
+	var H = $('.container').height()
+	var W = $('.container').width()
+
+	var h = $('.square.current').height()
+	// XXX cheating, need to get three widths...
+	var w = $('.square.current').width()*3
+
+	var f = Math.min(H/h, W/w)
+
+	setContainerZoom(f)
+}
+