const tab_a = []; 
const tab_b = []; 
var przyklad=0, przyklady;
var liczba_a, liczba_b, wynik, blad=0, dobrze=0;
var countdown;
var element;
var cdTimer;

var Liczba = new String();

window.onload = load;


function load ()
{
	przyklad=0, blad=0, dobrze=0;
	var option1, option2;
	for (a=1; a<=10; a++) {if (a==3) {select = ' selected="selected"';} else {select = ''; } option1 += '<option value="'+a*10+'"'+select+'>'+a*10+'</option>';}
	for (a=2; a<=30; a=a+2) {if (a==10) {select = ' selected="selected"';} else {select = ''; } option2 += '<option value="'+a+'"'+select+'>'+a+'</option>';}
	option2 += '<option value="99">99</option>'

	var tresc_diva = '<div>Przed Tobą aplikacja do doskonalenia sztuki mnożenia. Za jej pomocą nauka tabliczko mnożenia będzie łatwiejsza. Wybierasz ilośc przykładów i czas na rozwiązanie jednego, następnie aplikacja losuje dwie liczby z przedziału od 1 do 10 i  Twoim zadaniem jest podać poprawny wymik mnożenia tych dwóch liczb.<br /><br />Wybierz ilość przykładów do rozwiązania <select id="przyklady">'+option1+'</select><br />Wybierz czas (w sekundach) na rozwiązanie przykładu <select id="czass">'+option2+'</select><br /><div id="start" onclick="start()">START</div></div><div><a href="https://play.google.com/store/apps/details?id=com.brylka.tabliczka" border="0"><img src="https://matematyka.wiki/obrazki/store-google-play-2.webp" width="30%"></a></div><div style="clear:both;"></div><div>Language: <a href="https://matematyka.wiki/app/tabliczka-mnozenia/"><img src="https://matematyka.wiki/app/tabliczka-mnozenia/lang_pl_pl.jpg" alt="Polski"></a> <a href="https://matematyka.wiki/app/tabliczka-mnozenia/en/"><img src="https://matematyka.wiki/app/tabliczka-mnozenia/lang_en_us.jpg" alt="English"></a></div>';
	document.getElementById("tabmn").innerHTML = tresc_diva;
	

}


function start()
{
	przyklady = document.getElementById("przyklady").value
	czas = document.getElementById("czass").value
	rysuj();
	losuj();

}
	
function stop () 
{
	if(blad==1) strblad="tylko 1 błąd!";
	else if ((blad>1 && blad<5)||(blad>21 && blad<25)||(blad>31 && blad<35)||(blad>41 && blad<45)||(blad>51 && blad<55)||(blad>61 && blad<65)||(blad>71 && blad<75)||(blad>81 && blad<85)||(blad>91 && blad<95)) strblad=blad + "  błędy!";
	else strblad=blad + " błędów!";
	info="Na " + przyklady + " przykładów popełniłeś(aś) " + strblad;
	if(blad==0) info = "Rozwiązałeś(aś) " + przyklady + " przykładów i nie popełniłeś(aś) żadnego błędu. BRAWO!";
	else if(blad==przyklady) info += "<br />Jedno jest pewne, bez kalkulatora nie przetrwasz w tym brutalnym świecie ;-)";
//	info += '<br /><a onclick="load()">Uruchom ponownie</a>';
	document.getElementById("czas").innerHTML = '';
	document.getElementById("czas").style.backgroundColor = "";
//	document.getElementById("zadanie").innerHTML = '';
	document.getElementById("zadanie").style.display = 'none';
	document.getElementById("przyciski").style.display = 'none';
	document.getElementById("restart").style.display = 'block';
	document.getElementById("koniec").innerHTML = info;
	document.getElementById("koniec").style.display = 'block';
}






function losuj ()
{

	if (przyklad>=przyklady) 
	{
		setTimeout("stop()", 500);
		
	} else {
	
	przyklad++;	
	poz_liczba = Math.floor(Math.random() * (tab_a.length));
	
	liczba = tab_a[poz_liczba];
	tab_a.splice(poz_liczba, 1);
	
	liczba_a = Math.floor(liczba/10);
	liczba_b = liczba - liczba_a*10;
	if (liczba_b == 0) liczba_b = 10;
	
	element = "a" + liczba_a + "b" + liczba_b;
	wynik = liczba_a*liczba_b;

//	document.getElementById(element).style.borderColor = "purple";
	document.getElementById(element).style.backgroundColor = "purple";
	document.getElementById("zadanie").innerHTML = liczba_a+'*'+liczba_b+'=?';

	for (a=0; a<liczba_a; a++)
	{
		element2 = "a" + a + "b" + liczba_b;
		document.getElementById(element2).style.borderColor = "purple";
	}
	for (b=0; b<liczba_b; b++)
	{
		element2 = "a" + liczba_a + "b" + b;
		document.getElementById(element2).style.borderColor = "purple";
	}
	element2 = "a" + 0 + "b" + liczba_b;
	document.getElementById(element2).style.backgroundColor = "purple";
	element2 = "a" + liczba_a + "b" + 0;
	document.getElementById(element2).style.backgroundColor = "purple";

	document.onkeydown=ReadKey;
	
	countdown = czas;
	
	odliczanie();
	
	}
}



function odliczanie() {
	if(countdown<=0) {
		document.getElementById("czas").innerHTML = "0";
		wyniczek();
		setTimeout("losuj()", 1000);
	} else {
		if(countdown<4) document.getElementById("czas").style.backgroundColor="red";
		else document.getElementById("czas").style.backgroundColor="green";
		document.getElementById("czas").innerHTML = countdown;
		cdTimer=setTimeout("odliczanie()",1000);
		countdown--;
	}
}

function ReadKey(e) {
	var key, n;
	if (!e) var e = window.event;
	if (e.keyCode) key = e.keyCode;
	else if (e.which) key = e.which;
	if (((key > 47) && (key < 58)) || ((key > 95) && (key < 106))) {
		
		if (key > 95) { key-=48; }
		key-=48; 
		
		zawartosc = document.getElementById(element).innerHTML
		if (zawartosc.length < 3) document.getElementById(element).innerHTML = zawartosc+key;

	} else if(key==13) { 
		clearTimeout(cdTimer);
		wyniczek();
		losuj(); 
	} else if(key==8) {
		
		zawartosc = document.getElementById(element).innerHTML
		n = zawartosc.length;
		
		if(n > 1) zawartosc = zawartosc.substr(0,n-1);
		else if(n==1) zawartosc="";
		document.getElementById(element).innerHTML = zawartosc;

	}
	return true;
} 

function klik(key)
{
	if (key >= 0 && key <= 9)
	{
		zawartosc = document.getElementById(element).innerHTML
		if (zawartosc.length < 3) document.getElementById(element).innerHTML = zawartosc+key;
	} else if(key==-1) 
	{
		clearTimeout(cdTimer);
		wyniczek();
		losuj(); 
	} else if(key==-2) {
		
		zawartosc = document.getElementById(element).innerHTML
		n = zawartosc.length;
		
		if(n > 1) zawartosc = zawartosc.substr(0,n-1);
		else if(n==1) zawartosc="";
		document.getElementById(element).innerHTML = zawartosc;

	}
	return true;
}

function wyniczek () 
{
	document.onkeydown=nullevent;
	document.onclick=nullevent;
	zawartosc = document.getElementById(element).innerHTML
	if (wynik != zawartosc) 
	{ 
		blad++;
		document.getElementById(element).style.backgroundColor = "red";
	} else {
		dobrze++;
		document.getElementById(element).style.backgroundColor = "green";
	}
	document.getElementById(element).innerHTML = wynik;
	document.getElementById(element).style.borderColor = "gray";
		
	for (a=0; a<liczba_a; a++)
	{
		element2 = "a" + a + "b" + liczba_b;
		document.getElementById(element2).style.borderColor = "gray";
	}
	for (b=0; b<liczba_b; b++)
	{
		element2 = "a" + liczba_a + "b" + b;
		document.getElementById(element2).style.borderColor = "gray";
	}
	element2 = "a" + 0 + "b" + liczba_b;
	document.getElementById(element2).style.backgroundColor = "blue";
	element2 = "a" + liczba_a + "b" + 0;
	document.getElementById(element2).style.backgroundColor = "blue";
	if (przyklad < przyklady) {document.getElementById("przykladow").innerHTML = przyklad+1+' z '+przyklady;}
	document.getElementById("odpowiedzi").innerHTML = 'dobrze: '+dobrze+' źle: '+blad;
}

function nullevent() {
	return true;
}

function rysuj()
{
	var tresc_diva ="";
	
	for (a=0; a<=10; a++)
	{
		for (b=0; b<=10; b++)
		{
			var element = "a" + a + "b" + b;

			if (a==0 && b==0)
			{
				tresc_diva = tresc_diva + '<div class="liczby_a" id="'+element+'">*</div>';
			} else if (a==0) 
			{ 
				tresc_diva = tresc_diva + '<div class="liczby_a" id="'+element+'">'+b+'</div>';
			} else if (b==0) {
				tresc_diva = tresc_diva + '<div class="liczby_a" id="'+element+'">'+a+'</div>';
			} else {
				tresc_diva = tresc_diva + '<div class="liczby" id="'+element+'">'+'</div>';
			}
		}
	tresc_diva = tresc_diva + '<div style="clear:both;"></div>';
	
	}
	
	tresc_diva = tresc_diva + '<div id="czas"></div><div id="przykladow">1 z '+przyklady+'</div><div id="odpowiedzi">dobrze: 0 źle: 0</div><div id="zadanie">'+liczba_a+'*'+liczba_b+'=?</div><div id="restart" onclick="load()">Uruchom ponownie</div><div style="clear:both;"></div><div id="przyciski">';
	for (a=1; a<=12; a++)
		{
			if (a<6)
			{
				tresc_diva = tresc_diva + '<div class="przyciski" onclick="klik('+a+')">'+a+'</div>';
			} else if (a>6 && a<11) 
			{ 
				tresc_diva = tresc_diva + '<div class="przyciski" onclick="klik('+(a-1)+')">'+(a-1)+'</div>';
			} else if (a==11) 
			{
				tresc_diva = tresc_diva + '<div class="przyciski" onclick="klik(0)">0</div>';
			} else if (a==6) 
			{
				tresc_diva = tresc_diva + '<div class="przyciski" onclick="klik(-2)">&lt;-</div>';
			} else if (a==12) 
			{
				tresc_diva = tresc_diva + '<div class="przyciski" onclick="klik(-1)">OK</div>';
			}
		}
	tresc_diva = tresc_diva + '</div><div style="clear:both;"></div><div id="koniec"></div>';
	
	for (a=0; a<=99; a++)
	{
		tab_a[a] = a+10;
	}

	document.getElementById("tabmn").innerHTML = tresc_diva;
		
}