<!doctype html>
<html>
<head>
<title>Flip Test</title>
<script>
var steps = 16;
var inc = 418/steps;
var count = 1;
var currentimage = 'cardbacks/salesforce1/red.png';
var nextimage = 'cardbacks/salesforce1/blue.png';
function flip1()
{
  var mypic = document.getElementById('mypic');
  mywidth=418-(count*inc);
  mypic.width = mywidth;
  count++;
  if (count==steps) 
  {
	  mypic.src=nextimage;
	  tempimage = nextimage;
	  nextimage = currentimage;
	  currentimage = tempimage;
	  mypic.width=0;
	  count=1;
	  setTimeout(function(){ flip2(); },10 );
  }
  else 
  {
	  setTimeout(function(){ flip1(); },10 );
  }
}
function flip2()
{
  var mypic = document.getElementById('mypic');
  mywidth=(count*inc);
  mypic.width = mywidth;
  count++;
  if (count<steps) 
  {
	  setTimeout(function(){ flip2(); },10 );
  }
  else
  {
	  mypic.width=418;
	  count=1;
  }
}
</script>
</head>
<body bgcolor="#000000">
<center><img id="mypic" src="cardbacks/salesforce1/red.png" height="418" width="418" onclick="flip1()"></center>
</body>
