<div id="container">
  <div id="tenner" class="diget">
    <div>0</div>
    <div>9</div>
    <div>8</div>
    <div>7</div>
    <div>6</div>
    <div>5</div>
    <div>4</div>
    <div>3</div>
    <div>2</div>
    <div>1</div>
  </div>
  <div id="single" class="diget">
    <div>0</div>
    <div>9</div>
    <div>8</div>
    <div>7</div>
    <div>6</div>
    <div>5</div>
    <div>4</div>
    <div>3</div>
    <div>2</div>
    <div>1</div>
  </div>
</div>

@import "compass/css3";


@import "compass";

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
	text-align: center;
	width: 100%;
	height: 100%;
  
  @include background( radial-gradient( #fff, #ccc 100% ) );
}

.diget {
	font-family: "courier new", sans-serif;
	font-weight: bold;
	font-size: 120px;
	position: relative;
	display: inline-block;
	margin-top: 100px;
	width: 60px;

  
  @include perspective( 300px );
  @include perspective-origin( 50% 50% );

}

.diget div {
	position: absolute;
	top: 0;
  
  @include transform-origin( 50%, 50%, -150px );
}

if ( !window.requestAnimationFrame ) {

	window.requestAnimationFrame = ( function() {

		return window.webkitRequestAnimationFrame ||
			window.mozRequestAnimationFrame ||
			window.oRequestAnimationFrame ||
			window.msRequestAnimationFrame ||
			function( callback ) {

			window.setTimeout( callback, 1000 / 60 );

		};

	} )();
}



var tenner = document.getElementById( "tenner" );
var single = document.getElementById( "single" );

var tenners = tenner.children;
var singles = single.children;

var target = 99;
var current = 0;
var currentBig = 0;

var STEP = 0.1;



/*
UNCOMMENT THIS TO CONTROLL THE TARGET OF THE ANIMTION. Weirdly if I leave it in it screws up the preview. 

var gui = new dat.GUI();
gui.add( window, "target", 0, 99 ).onFinishChange( function( value ) {
  target = ~~value;
} );

*/


setBig( 0 );
setSmall( 0 );

function update() {

	if ( current + STEP < target ) current += STEP;
  else if ( current - STEP > target ) current -= STEP;
	else current = target;

	setDigets( current );

	requestAnimationFrame( update );
}

function setDigets( number ) {

	var smallDiget = number;
	while ( smallDiget > 10 ) smallDiget -= 10;

	setSmall( ( smallDiget / 10 ) * 360 );

	var bigDiget = ~~( number / 10 );
	if ( currentBig  + STEP < bigDiget ) currentBig += STEP;
  else if ( currentBig - STEP > bigDiget) currentBig -= STEP;
  else currentBig = bigDiget;

	setBig( ( currentBig / 10 ) * 360  );
}

function setBig( degree ) {
	setDiget( tenners, degree );
}

function setSmall( degree ) {
	setDiget( singles, degree );
}

function setDiget( array, degree ) {
	var diget;

	for ( var i = 0; i < 10; i++ ) {
		diget = array[ i ];
		setTransform( diget, "rotateX(" + degree + "deg)" );
		diget.style.opacity = calculateOpacity( degree );
		degree += 36;
	}
}

function calculateOpacity( degree ) {
	degree = degree % 360;
	var percent = 0;

	if ( degree < 180 ) percent = 1 - ( degree / 180 );
	else percent = ( degree - 180 ) / 180;

	return ( percent - 0.5 ) * 2;
}

function setTransform( node, transform ) {
	var style = node.style;
	style.webkitTransform = transform;
	style.mozTransform = transform;
	style.msTransform = transform;
	style.oTransform = transform;
	style.transform = transform;
}

update();