ImageGrid/ui/experiments/infinite-ribbon-timeout-method.html

<script src="jquery.js"></script>
<script>

function handle_click(e){
	$('.current.image').removeClass('current')
	$(this).addClass('current')
}

function make_image(){
	return $('<div class="image"/>')
			.click(handle_click)
}

function load_images_before(){
	$('.ribbon').prepend( 
		make_image(), 
		make_image(), 
		make_image(), 
		make_image(), 
		make_image() )
}
function load_images_after(){
	$('.ribbon').append( 
		make_image(), 
		make_image(), 
		make_image(), 
		make_image(), 
		make_image() )
}

function trim_images_at_end(){
	$('.image:nth-last-child(6) ~ .image').remove()
}
function trim_images_at_start(){
	$('.image:nth-child(1),'+
		'.image:nth-child(2), '+
		'.image:nth-child(3), '+
		'.image:nth-child(4), '+
		'.image:nth-child(5)'
		).remove()
}

function shift_ribbon_left(){
	$('.field').addClass('unanimated')

	load_images_after()
	trim_images_at_start()

	// correct for growth...
	var w = 80
	var l = parseFloat($('.field').css('left'))
	$('.field').css({left: l + w*5})
	console.log($('.field').css('left'), l, l+w*5)

	// XXX this is really hackish! ...find a better way to solve this...
	// XXX this is bad because it might depend on the speed of the device...
	setTimeout(function(){$('.field').removeClass('unanimated')}, 10)
}
function shift_ribbon_right(){
	$('.field').addClass('unanimated')

	load_images_before()
	trim_images_at_end()

	// correct for growth...
	var w = 80
	var l = parseFloat($('.field').css('left'))
	$('.field').css({left: l - w*5})
	console.log($('.field').css('left'), l, l-w*5)

	// XXX this is really hackish! ...find a better way to solve this...
	// XXX this is bad because it might depend on the speed of the device...
	setTimeout(function(){$('.field').removeClass('unanimated')}, 10)
}


function center_current_image(){
}


$(document).ready(function(){
	$('.ribbon').append( make_image().click() )
	load_images_before()
	load_images_after()
})

</script>


<style>

body {
	overflow: hidden;
}

.field {
	position: relative;
	top: 0px;
	left: 0px;
	width: auto;
	overflow: visible;

	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;	
	transition: all 0.5s ease;
}

.unanimated {
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: all 0 ease;
	-ms-transition: none;	
	transition: none;
}

.ribbon {
	padding: 10px;
	height: 100px;

	width: auto;
	overflow: visible;
	white-space: nowrap;
	font-size: 0px;
}

.image {
	display: inline-block;
	height: 80px;
	width: 80px;
	background: silver;
}

.current.image {
	background: red;
}

</style>


<button onclick="shift_ribbon_left()">&lt;</button>
<button onclick="shift_ribbon_right()">&gt;</button>

<div class="viewer">
	<div class="field">
		<div class="ribbon">
		</div>
	</div>
</div>