//flips a 418x418 square from current image to specified image
function flip(picid,newimage,steps,count,margin)
{
	var original_margin=margin;
	var pic = document.getElementById(picid);
	pic.style.visibility="visible";
	var inc = 418/steps;
	var newwidth=418-(count*inc);
	pic.width = newwidth;
	pic.height= 418;
	count++;
	if (count==steps) 
	{
		pic.src=newimage;
		pic.width=0;
		count=1;
		setTimeout(function(){ flip2(picid,steps,count,original_margin); },5 );
	}
	else 
	{
		setTimeout(function(){ flip(picid,newimage,steps,count,original_margin); },5 );
	}
}
//flip helper function to flip the card the rest of the way
function flip2(picid,steps,count,original_margin)
{
  var pic = document.getElementById(picid);
  var inc = 418/steps;
  newwidth=(count*inc);
  pic.width = newwidth;
  pic.height= 418;
  count++;
  if (count==steps) 
  {
	  pic.width=418;
	  pic.height=418;
	  count=1;
  }
  else
  {
	  setTimeout(function(){ flip2(picid,steps,count,original_margin); },10 );
  }
}
//flips a 418x418 square from current image to specified image and back again
function doubleflip(picid,newimage,oldimage,steps,count)
{
	var pic = document.getElementById(picid);
	pic.style.visibility="visible";
	var inc = 418/steps;
	var newwidth=418-(count*inc);
	pic.width = newwidth;
	pic.height= 418;
	count++;
	if (count==steps) 
	{
		pic.src=newimage;
		pic.width=0;
		count=1;
		setTimeout(function(){ doubleflip2(picid,newimage,oldimage,steps,count); },5 );
	}
	else 
	{
		setTimeout(function(){ doubleflip(picid,newimage,oldimage,steps,count); },5 );
	}
}
//flip helper function to flip the card the rest of the way
function doubleflip2(picid,newimage,oldimage,steps,count)
{
  var pic = document.getElementById(picid);
  var inc = 418/steps;
  newwidth=(count*inc);
  pic.width = newwidth;
  pic.height= 418;
  count++;
  if (count==steps) 
  {
	  pic.width=418;
	  pic.height=418;
	  count=1;
	  setTimeout(function(){ doubleflip3(picid,oldimage,newimage,steps,count); },500 );	  
  }
  else 
  {
	  setTimeout(function(){ doubleflip2(picid,newimage,oldimage,steps,count); },5 );
  }
}
function doubleflip3(picid,newimage,oldimage,steps,count)
{
	var pic = document.getElementById(picid);
	pic.style.visibility="visible";
	var inc = 418/steps;
	var newwidth=418-(count*inc);
	pic.width = newwidth;
	pic.height= 418;
	count++;
	if (count==steps) 
	{
		pic.src=newimage;
		pic.width=0;
		count=1;
		setTimeout(function(){ doubleflip4(picid,newimage,oldimage,steps,count); },5 );
	}
	else 
	{
		setTimeout(function(){ doubleflip3(picid,newimage,oldimage,steps,count); },5 );
	}
}
//flip helper function to flip the card the rest of the way
function doubleflip4(picid,newimage,oldimage,steps,count)
{
  var pic = document.getElementById(picid);
  var inc = 418/steps;
  newwidth=(count*inc);
  pic.width = newwidth;
  pic.height= 418;
  count++;
  if (count==steps)
  {
	  pic.width=418;
	  pic.height=418;
	  count=1;	  
  }
  else 
  {
	  setTimeout(function(){ doubleflip4(picid,newimage,oldimage,steps,count); },10 );
  }
}

