{% extends arithmetic_template %}
{% block maincode %}


{% endblock maincode %}


{% block maincell %}
<style>
.maincell {
line-height: normal;
}
</style>

<div class="maincell">
<script language=Javascript1.2><!--

var counter = 0;
var topNumber = new Array();
var bottomNumber = new Array(); 
var carryArray = new Array();
var selectedArray = new Array();



{% block addition_settings %}
var topNumberDigits = 2;
var bottomNumberDigits = (get_random(9) < 1 ? 2 : 1); // must be less than or equal to topNumberDigits
{% endblock addition_settings %}

var answer = 0; 

for (var i=0; i<topNumberDigits; i++)
{
  if (topNumberDigits-1 == i)
  {
    topNumber.push(get_random(8)+1);
  }
  else
  {   
    topNumber.push(get_random(9));
  }
  answer += topNumber[i]*Math.pow(10,i);

  carryArray.push(0);
}

for (var i=0; i<bottomNumberDigits; i++)
{
  if (bottomNumberDigits-1 == i)
  {
    bottomNumber.push(get_random(8)+1);
  }
  else
  {   
    bottomNumber.push(get_random(9));
  }
  answer += bottomNumber[i]*Math.pow(10,i);
}

for (var i=0; i < (topNumberDigits - bottomNumberDigits); i++)
{
  bottomNumber.push(0);
}

setCorrectAnswer(answer);


function next_step()
{
	
	if (Exercise.steps_given<topNumberDigits)
	{
		var hintString = getFontString('Hint: ', 'noSel');
		
		//The while loop uncolorizes the previous hints digits
		while (selectedArray.length>0)
		{
			var item = selectedArray.pop();
			document.getElementById(item[0]).innerHTML = getFontString(item[1], 'noSel');
		}
		
		var sum = carryArray[Exercise.steps_given]+topNumber[Exercise.steps_given]+bottomNumber[Exercise.steps_given];
		var ones = sum%10;
		var carry = (sum-ones)/10;
		
		if (carryArray[Exercise.steps_given]!=0)
		{
			document.getElementById("0_"+Exercise.steps_given).innerHTML = getFontString(carryArray[Exercise.steps_given], 'sel5');
			selectedArray.push(["0_"+Exercise.steps_given, carryArray[Exercise.steps_given]]);
			hintString += getFontString(carryArray[Exercise.steps_given], 'sel5')+getFontString('+','noSel');
		}
		
		document.getElementById("1_"+Exercise.steps_given).innerHTML = getFontString(topNumber[Exercise.steps_given], 'sel1');
		selectedArray.push(["1_"+Exercise.steps_given, topNumber[Exercise.steps_given]]);
		hintString += getFontString(topNumber[Exercise.steps_given], 'sel1');
		
		
		
		if (Exercise.steps_given<bottomNumberDigits)
		{
			document.getElementById("2_"+Exercise.steps_given).innerHTML = getFontString(bottomNumber[Exercise.steps_given], 'sel2');
			selectedArray.push(["2_"+Exercise.steps_given, bottomNumber[Exercise.steps_given]]);
			hintString += getFontString('+','noSel')+getFontString(bottomNumber[Exercise.steps_given], 'sel2');
		}
		
		hintString+=getFontString('=', 'noSel');
		
		document.getElementById("3_"+Exercise.steps_given).innerHTML = getFontString(ones, 'sel3');
		selectedArray.push(["3_"+Exercise.steps_given, ones]);
		
		if (carry!=0)
		{
			hintString+=getFontString(carry, 'sel4');
			if (Exercise.steps_given<topNumberDigits-1)
			{
				carryArray[Exercise.steps_given+1] = carry;
				document.getElementById("0_"+(Exercise.steps_given+1)).innerHTML = getFontString(carry, 'sel4');
				selectedArray.push(["0_"+(Exercise.steps_given+1), carry]);
			}
			else
			{
				document.getElementById("extra").innerHTML = getFontString(carry, 'sel4');
				selectedArray.push(["extra", carry]);
			}
		
		}
		hintString+=getFontString(ones, 'sel3');
		document.getElementById("hintbox").innerHTML = hintString;
		Exercise.steps_given++;
	}

}

//returns an integer between 0 and max, inclusive
function get_random(max)
{
	var epsilon = .9;
	return Math.round(KhanAcademy.random()*(max+epsilon) - epsilon/2);
}
function increment_counter()
{
	counter++;
	document.getElementById("testing").innerHTML = get_random(4);
}

function getFontString(text, font)
{
	return ('<FONT class=\"'+font+'\">'+text+'</FONT>');
}

document.write('<table width=100%><tr><td valign=top width=80%><div ID=\"hintbox\">'+getFontString('&nbsp;', 'inv')+'</div><center><table cellpadding=0 cellspacing=0><tr><td></td>');
	
for (var cols=0; cols<topNumberDigits; cols++)
{
	var index = topNumberDigits-1-cols;
	document.write('<td><div ID=\"0_'+index+'\">'+getFontString('&nbsp;','inv')+'</div></td>');
}
document.write('</tr><tr><td></td>');
for (var cols=0; cols<topNumberDigits; cols++)
{
	var index = topNumberDigits-1-cols;
	document.write('<td><div ID=\"1_'+index+'\">'+getFontString(topNumber[index], 'noSel')+'</div></td>');
}
document.write('</tr><tr><td>'+getFontString('+', 'noSel')+'</td>');

for (var i=0; i < (topNumberDigits - bottomNumberDigits); i++)
{
  document.write("<td></td>");
}

for (var cols=0; cols<bottomNumberDigits; cols++)
{
	var index = bottomNumberDigits-1-cols;
	document.write('<td><div ID=\"2_'+index+'\">'+getFontString(bottomNumber[index], 'noSel')+'</div></td>');
}

document.write('</tr><tr><td class=answer><div ID=\"extra\"></td>');
for (var cols=0; cols<topNumberDigits; cols++)
{
	var index = topNumberDigits-1-cols;
	document.write('<td class=answer><div ID=\"3_'+index+'\">'+getFontString('&nbsp;','inv')+'</div></td>');
}
document.write('</tr></table></center></td></tr></table>');

//-->
</script>
</div>

{% endblock maincell %}