//document.write('<center><h1>Subtraction facts from 18</h1></center>' );

document.write('<div style="display: none"> ' );
document.write("<table id='theTable'>");

document.write('<tr>' );
                document.write("<td>Problem</td>" ); document.write("<td>Answer</td>" ); 
document.write('</tr>' );


             
document.write( "<TR><TD>9-7 &nbsp;</TD><TD>2 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>4-1 &nbsp;</TD><TD>3 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>11-8 &nbsp;</TD><TD>3 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>10-6 &nbsp;</TD><TD>4 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>9-8 &nbsp;</TD><TD>1 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>6-3 &nbsp;</TD><TD>3 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>5-4 &nbsp;</TD><TD>1 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>8-3 &nbsp;</TD><TD>5 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>4-1 &nbsp;</TD><TD>3 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>2-1 &nbsp;</TD><TD>1 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>9-7 &nbsp;</TD><TD>2 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>6-5 &nbsp;</TD><TD>1 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>10-7 &nbsp;</TD><TD>3 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>7-6 &nbsp;</TD><TD>1 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>11-7 &nbsp;</TD><TD>4 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>7-3 &nbsp;</TD><TD>4 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>10-2 &nbsp;</TD><TD>8 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>11-9 &nbsp;</TD><TD>2 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>9-3 &nbsp;</TD><TD>6 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>13-6 &nbsp;</TD><TD>7 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>15-6 &nbsp;</TD><TD>9 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>13-5 &nbsp;</TD><TD>8 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>13-6 &nbsp;</TD><TD>7 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>10-4 &nbsp;</TD><TD>6 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>11-3 &nbsp;</TD><TD>8 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>8-4 &nbsp;</TD><TD>4 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>9-3 &nbsp;</TD><TD>6 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>4-0 &nbsp;</TD><TD>4 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>7-6 &nbsp;</TD><TD>1 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>8-7 &nbsp;</TD><TD>1 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>14-9 &nbsp;</TD><TD>5 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>9-7 &nbsp;</TD><TD>2 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>8-6 &nbsp;</TD><TD>2 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>12-3 &nbsp;</TD><TD>9 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>13-9 &nbsp;</TD><TD>4 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>12-9 &nbsp;</TD><TD>3 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>13-5 &nbsp;</TD><TD>8 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>8-2 &nbsp;</TD><TD>6 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>5-2 &nbsp;</TD><TD>3 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>11-2 &nbsp;</TD><TD>9 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>4-1 &nbsp;</TD><TD>3 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>9-5 &nbsp;</TD><TD>4 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>10-3 &nbsp;</TD><TD>7 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>11-3 &nbsp;</TD><TD>8 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>10-8 &nbsp;</TD><TD>2 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>5-2 &nbsp;</TD><TD>3 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>6-4 &nbsp;</TD><TD>2 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>8-5 &nbsp;</TD><TD>3 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>6-4 &nbsp;</TD><TD>2 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>3-0 &nbsp;</TD><TD>3 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>7-2 &nbsp;</TD><TD>5 &nbsp;</TD></tr> " ); 
document.write( "<TR><TD>14-6 &nbsp;</TD><TD>8 &nbsp;</TD></tr> " ); 

document.write("</table>   ");
document.write('</div>' );

txtReverseOrder='Reverse Order';
txtStartOver='Start Over';
txtDiscard='Discard';
txtBack='Back';
txtShuffle='Shuffle';
txtContinue='Continue';
txtNextCard='Next Card';
txtHelp='Help';
txtFlip='Flip';

//======================================================
// Copyright 2005  John Weidner   All rights reserved
// http://www.studystack.com
//======================================================
   var numCards ;
   var card;
   var curCard = 1;
   var curSide = 0;
   var startSide = 0;
   var numSides = 2;
   var endSide = numSides-1;
   var startTime = new Date();
   var sequence;
   var continueButton;
   var direction = 1;




   var sideColor = Array(10);
   sideColor[0] = "#ffffff";
   sideColor[1] = "#eeeeee";
   sideColor[2] = "#ffdddd";
   sideColor[3] = "#ddffdd";
   sideColor[4] = "#ddddff";
   sideColor[5] = "#cc9999";
   sideColor[6] = "#99ee99";
   sideColor[7] = "#9999ee";
   sideColor[8] = "#6666cc";
   sideColor[9] = "#cc6666";

   var theTable;
   var now = new Date();
   var prevAdTime = now.getTime();
   var cardsArray ;
   var cardSelectObject ;
   var cardsLeftObject ;

   var cardsConstructed = 0;
  
   function Card()
   {
      cardsConstructed ++ ;
      this.cardNumber = cardsConstructed ;
      this.sequence = -1 ; 
      this.timeDisplayed = 4000 ;
   }

  
   function init()
   { 
      cardsConstructed = 0;
      curCard = 1;
      curSide = startSide ;
      sequence = 0;
    
      theTable = document.getElementById( 'theTable' )
      numSides = theTable.rows[0].cells.length;
      endSide = numSides-1;
      continueButton = document.getElementById( 'continueButton' );
      cardsLeftObject = document.getElementById( 'cardsLeft' );
      cardSelectObject = document.getElementById( 'cardSelect' );
      cardSelectObject.length = 0;
 
      numCards = theTable.rows.length-1;
      updateCardsLeft();

      cardsArray = Array( numCards );      
      //shuffle();

      var i;
      for ( i=1; i<=numCards; i++ ) {
        cardsArray[i] = new Card();
        cardSelectObject.options[i-1] = new Option( i );
      }
      displayCard(1);
      continueButton.focus();

   }


 

   function getTableCell( rowNum, columnNum )
   {
      var aRow = theTable.rows[ rowNum];
      var cell = aRow.cells.item( columnNum );
      return cell.innerHTML ;
   }
   
   function getFlapName( sideNum )
   {
	return getTableCell( 0, sideNum );
   }

   function getText( cardNum, sideNum )
   {
        var row = cardsArray[ cardNum ].cardNumber ;
 	    return getTableCell( row, sideNum );
   }

   function displayCard( cardNum )
   {
        curCard = cardNum ;
	    displayInfo( "", "", "" );

	    var text = getText( cardNum, curSide );

        displayInfo( getFlapName( curSide ), text, cardsArray[ cardNum ].cardNumber );

	    var cardFrame = document.getElementById( 'cardFrame' )
        cardFrame.bgColor = sideColor[ curSide ];

	if ( curSide == endSide )
	{
		continueButton.childNodes[0].nodeValue = txtNextCard ;
	}
	else
	{
		continueButton.childNodes[0].nodeValue = txtFlip ;
	}
   }

   function displayInfo( cardTitle, cardText, cardNumber )
   {
	var sideNameField = document.getElementById( 'sideName' );
	sideNameField.innerHTML = cardTitle;

	var cardTextField = document.getElementById( 'cardText' );
	cardTextField.innerHTML  = cardText ;

	var cardNumberField = document.getElementById( 'cardNumber' );
        cardNumberField.innerHTML = cardNumber ;


	if ( adjustFont ) {	
  	    if ( cardText.length < 8 ) {
	        cardTextField.style.fontSize = 80;
	    } else if ( cardText.length < 14 ) {
		cardTextField.style.fontSize = 60;
  	    } else if ( cardText.length < 20 ) {
	        cardTextField.style.fontSize = 40;
	    } else if ( cardText.length < 80 ) {
	        cardTextField.style.fontSize = 30;
	    } else {
	        cardTextField.style.fontSize = 20;
	    }
        }


	var i;
        for ( i=0; i<cardSelectObject.options.length; i++ ) {
            var optionObj = cardSelectObject.options[i];
	    optionObj.selected = optionObj.text == cardNumber ;
        }
   }

   function gotoCard()
   {
      var selectedCardNumber = cardSelectObject.options[ cardSelectObject.selectedIndex ].text ;
      var i;
      for ( i=1; i<=numCards; i++ )
      {
           if ( cardsArray[i].cardNumber == selectedCardNumber ) {
                curCard = i;
	        curSide = startSide ;
		displayCard( i );
		return ;
           }
      }

      
   }

   function nextCard( doFade )
   {
	var now = new Date();
	elapsed_time = now-startTime ;

    if ( doFade ) {
	    fadeIn(0);
	}

        cardsArray[ curCard ].sequence = sequence ;
        sequence = sequence + 1;

	startTime = new Date();

	var timeDisplayed = parseInt( cardsArray[ curCard ].timeDisplayed  );

	timeDisplayed = (timeDisplayed * 0.5) + (elapsed_time * 0.5);
        cardsArray[ curCard ].timeDisplayed = timeDisplayed ;

	curCard = curCard + 1;
	if ( curCard > numCards ) {
		curCard = 1;
	}

	var minAge = (numCards < 7 ) ? numCards - 1 : 7;
	var highScore = 0;
	var i;
		
	for (i=1; i<=numCards; i++ )
	{
		var age = sequence - cardsArray[ i ].sequence;

	//	alert( "age = " + age );
		if ( age >= minAge )
		{
			var timeDisplayed = cardsArray[ i ].timeDisplayed ;
			score =  age * 20 + timeDisplayed ;
		    //  alert( "card=" + i + " age=" + age + " time=" + timeDisplayed + " score = " + score + " high=" + highScore );
			if ( score > highScore )
			{
				curCard = i;
				highScore = score ;
			}
		}
	}
   }

   function next( doFade )
   {
	curSide = curSide + direction;
	if ( curSide >= numSides ) 
	{
		curSide = 0;
	}
	if ( curSide < 0 ) {
		curSide = numSides - 1;
	}
	if ( curSide == startSide )
	{
		nextCard( doFade );
	}
	displayCard( curCard );
    continueButton.focus();
   }

   function prev()
   {
	curSide = curSide - direction;
	if ( curSide >= numSides ) 
	{
		curSide = 0;
	}
	if ( curSide < 0 ) {
		curSide = numSides - 1;
	}
	if ( curSide == endSide )
	{
		if ( !prevCard() ) {
			curSide = startSide ;
		}
	}
	displayCard( curCard );
        continueButton.focus();
   }
   
   function prevCard()
   {
	fadeIn(0);

	if ( sequence != 0 )  {
		sequence = sequence - 1;
		var i;
		for ( i=1; i<=numCards; i++ )
		{
			var cardSeq = cardsArray[i].sequence ;

			if ( cardSeq == sequence ) {
				cardsArray[i].sequence = -1 ;
				curCard = i;
				return true;
			}
		}
	}
        return false ;
   }


   function reverseOrder()
   {
	direction = direction * -1 ;
	curSide = endSide ;
	endSide = startSide ;
	startSide = curSide ;
	displayCard( curCard );
	continueButton.focus() ;
   }


   function updateCardsLeft()
   {
	cardsLeftObject.innerHTML = (numCards) + " left" ;
   }

   function discard()
   {
	displayInfo( "", "", "" );
	numCards--;
	if ( numCards == 0 ) {
		alert( "No more cards.   Restoring all discarded cards." );
		restoreAll();
	}
	else {
        cardSelectObject.options[ cardSelectObject.selectedIndex ] = null ;
		swapRows( curCard, numCards+1);
		if ( curCard > numCards ) {
			curCard = 1;
		}
		curSide = startSide ;
		displayCard( curCard );
	}
	continueButton.focus() ;
        updateCardsLeft();
   }

   function restoreAll()
   {
      init();
      continueButton.focus() ;
   }



   function fadeIn( digit )
   {
	var cardFrame = document.getElementById( 'cardFrame' )
	var digits = "0123456789abcdef" ;
        var ch = digits.substring( digit, digit+1 );
	color = "#" + ch + ch + ch + ch + ch + ch;
	cardFrame.bgColor = color ;
	if ( digit < 15 ) {	
	        setTimeout( 'fadeIn(' + ( digit + 1) + ')', 5 );
	}
	else {
        	cardFrame.bgColor = sideColor[ curSide ];
	}
   }
 
   function swapRows( a, b )
   {
      var tmp = cardsArray[ a ];
      cardsArray[a] = cardsArray[ b ];
      cardsArray[b] = tmp ;
   }

   function shuffle()
   {
      var i;

      for ( i=1; i<=numCards; i++ ) 
      {
	      cardsArray[i].timeDisplayed = 4000;
      }

      for ( i=1; i<=numCards; i++ )
      { 
         var randomNumber=Math.floor( Math.random() * (numCards-1)) + 1;
         swapRows( i, randomNumber );
      }
      displayCard( 1 );
   }

   
document.write( '   <center>' );
document.write( '    <table id="cardFrame" width="' + cardWidth + '" height="' + cardHeight + '" BORDER="1"  cellspacing="0" cellPadding="2" bordercolor="#000000" > ' );
document.write( '	<tr valign="top">   ' );
document.write( '	   <td align="center">  ' );
document.write( '		<table width="100%"> ' );
document.write( '		  <tr valign="top"><td><table width="100%"><tr><td width="7" align="left">&nbsp;</td><td valign="top" align="center"><div id="sideName"> </div></td><td width="7" align="right"><div id="cardNumber"> </div></td></tr></table></td></tr> ' );
document.write( '		  <tr valign="center"> ' );
document.write( '  	            <td align="center" height=280 onClick="next(true);"> ' );
document.write( '                       <table><tr><td>' );
document.write( '			  <div id="cardText"> ' );
document.write( '			       &nbsp; ' );
document.write( '			  </div> ' );
document.write( '                       </td></tr></table>' );
document.write( '	           </td> ' );
document.write( '	          </tr> ' );
document.write( '	 	</table> ' );
document.write( '	   </td> ' );
document.write( '	</tr> ' );
document.write( '    </table> ' );
document.write( '    <br> ' );
document.write( '    <table width="400"> ' );
document.write( '       <tr> ' );
document.write( '         <td><table width="100%"><tr>' );
document.write( '           <td width="33%">' );
document.write( '	    </td> ' );
document.write( '           <td width="33%" align="center"> ' );
document.write( '             <button style="Width: 100px" id="continueButton" onkeypress="return processKey(event)" onClick="next(false);">' + txtContinue + '</button> ' );
document.write( '           </td>' );
document.write( '           <td width="33%" align="right" >' );
document.write( '             <select id="cardSelect" onChange="gotoCard()"><option>1</option></select>' );
document.write( '           </td>' );
document.write( '         </tr></table></td>' );
document.write( '         </td>' );
document.write( '       </tr> ' );
document.write( '       <tr> ' );
document.write( '          <td> ' );
document.write( '           <table>' );
document.write( '	      <tr>' );
txtBack = '<u>B</u>ack';
document.write( '	         <td>&nbsp;<button accesskey="B" onclick="prev();">' + txtBack + '</button>&nbsp;</td>' );
txtDiscard = '<u>D</u>iscard';
document.write( '	         <td>&nbsp;<button accesskey="I" onclick="discard();">' + txtDiscard + '</button>&nbsp;</td>' );
document.write( '	         <td>&nbsp;<button onclick="restoreAll();">' + txtStartOver + '</button>&nbsp;</td>' );
document.write( '	         <td>&nbsp;<button onclick="reverseOrder();">' + txtReverseOrder + '</button>&nbsp;</td>' );
document.write( '	         <td>&nbsp;<button onclick="shuffle();continueButton.focus();">' + txtShuffle + '</button>&nbsp;</td>' );
document.write( '              </tr>' );
document.write( '              <tr>' );
document.write( '                 <td></td>' );
document.write( '                 <td id="cardsLeft" align="center">xx left</td>' );
document.write( '                 <td></td>' );
document.write( '                 <td></td>' );
document.write( '                 <td align="right"><br />' );
document.write( '<a href="#" onClick="window.open(\'http://www.studystack.com/helpFlashCards.jsp\',\'studyTableHelp\',\'width=350,height=480,top=20,left=20,scrollbars=1,resizable=1\')">' + txtHelp + '</a></td>' );
document.write( '              </tr>' );
document.write( '            </table>' );
document.write( '	   </td>' );
document.write( '       </tr>' );
document.write( '     </table>' );
document.write( '   </center>' );
   
init();