From 97db146f2bbd6be275bc8ad6344f6f3c1c16683a Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Fri, 12 Apr 2013 17:24:06 +0400
Subject: [PATCH] added an infinite ribbon experiment...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui/experiments/infinite-ribbon.html | 120 ++++++++++++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100755 ui/experiments/infinite-ribbon.html
diff --git a/ui/experiments/infinite-ribbon.html b/ui/experiments/infinite-ribbon.html
new file mode 100755
index 00000000..8a5f2afb
--- /dev/null
+++ b/ui/experiments/infinite-ribbon.html
@@ -0,0 +1,120 @@
+<html>
+
+<script src="jquery.js"></script>
+<script>
+
+function focus(elem){
+	$('.current.square').removeClass('current')
+	return $(elem).closest('.square').addClass('current')
+}
+function clickHandler(){
+	focus(this)
+}
+
+function shiftSquare(direction){
+	var cur = $('.current.square')
+	// trigger the event...
+	cur.closest('.container')
+		.trigger('shift'+direction)
+	// see if we are the last...
+	if(cur[direction]('.square').length < 1){
+		// do not move past the edge...
+		//return cur
+		// rotate...
+		return focus(cur
+			.closest('.container')
+				.children('.square')[ direction == 'next' ? 'first' : 'last' ]())
+	}
+	// shift the current element...
+	return cur
+		.removeClass('current')[direction]('.square')
+			.addClass('current')
+}
+// shift focus left/right...
+function next(){
+	return shiftSquare('next') 
+}
+function prev(){
+	return shiftSquare('prev') 
+}
+
+// these will roll the container...
+// XXX this needs a means to update the element content...
+function rollRight(){
+	$('.square').first().appendTo($('.container'))
+}
+function rollLeft(){
+	$('.square').last().prependTo($('.container'))
+}
+
+
+$(function(){
+	$('.container')
+		.on('shiftnext', rollRight)
+		.on('shiftprev', rollLeft)
+
+	$('.square')
+		.click(clickHandler)
+	
+})
+
+
+</script>
+
+<style>
+
+.container {
+	position: relative;
+	display: inline-block;
+	height: auto;
+	min-width: 0px;
+	overflow: visible;
+	white-space: nowrap;
+	font-size: 0;
+
+	background: gray;
+	padding: 10px;
+}
+
+.square {
+	position: relative;
+	display: inline-block;
+	vertical-align: middle;
+	text-align;left;
+	width: 100px;
+	height: 100px;
+	background: silver;
+	font-size: 12pt;
+}
+
+.current.square {
+	background: red;
+}
+
+</style>
+
+<body>
+
+
+<button onclick="prev()">prev</button>
+<button onclick="next()">next</button>
+
+<div class="meta-container">
+	<div class="container">
+		<!-- BUG: when current is first hell breaks lose... -->
+		<div class="square">1</div>
+		<div class="square">2</div>
+		<div class="square current">3</div>
+		<div class="square">4</div>
+		<div class="square">5</div>
+		<div class="square">6</div>
+		<div class="square">7</div>
+	</div>
+</div>
+
+
+
+
+</body>
+<!-- vim:set ts=4 sw=4 : -->
+</html>
