var aImages = 13;
var aElements = 5;

onload=function(){	
	aFirst();
	aDraw();
	window.addEventListener("resize", reDraw, false);
}

function aFirst(){
	a = localStorage.getItem("aImg");
	aElements = localStorage.getItem("aImg");
	if(!a){
		var elements = localStorage.getItem("aElements");
		var showBg = localStorage.getItem("aShowBg");
		if(!elements) localStorage.setItem("aElements", 3);
		if(!showBg) localStorage.setItem("aShowBg", "allways");
		for (var i=1; i<=aImages; i++) {
			localStorage.setItem("time_3allways_m"+i, "--");	// allways
			localStorage.setItem("time_3allways_s"+i, "--");
			localStorage.setItem("time_4allways_m"+i, "--");
			localStorage.setItem("time_4allways_s"+i, "--");
			localStorage.setItem("time_5allways_m"+i, "--");
			localStorage.setItem("time_5allways_s"+i, "--");
			localStorage.setItem("time_6allways_m"+i, "--");
			localStorage.setItem("time_6allways_s"+i, "--");
			localStorage.setItem("time_3never_m"+i, "--");		// never
			localStorage.setItem("time_3never_s"+i, "--");
			localStorage.setItem("time_4never_m"+i, "--");
			localStorage.setItem("time_4never_s"+i, "--");
			localStorage.setItem("time_5never_m"+i, "--");
			localStorage.setItem("time_5never_s"+i, "--");
			localStorage.setItem("time_6never_m"+i, "--");
			localStorage.setItem("time_6never_s"+i, "--");
			localStorage.setItem("time_35s_m"+i, "--");			// 5s
			localStorage.setItem("time_35s_s"+i, "--");
			localStorage.setItem("time_45s_m"+i, "--");
			localStorage.setItem("time_45s_s"+i, "--");
			localStorage.setItem("time_55s_m"+i, "--");
			localStorage.setItem("time_55s_s"+i, "--");
			localStorage.setItem("time_65s_m"+i, "--");
			localStorage.setItem("time_65s_s"+i, "--");
		}
	}
}

function reDraw(){
	wi = window.innerWidth;
	hi = window.innerHeight;
	if(wi<=hi)mi=wi*0.47;
	if(wi>hi)mi=wi*0.30;
	for (var i=1; i<=aImages; i++) {
		document.getElementById("lvl"+i).style.backgroundImage = "url('img/"+i+".jpg')";
		document.getElementById("lvl"+i).style.width = mi+"px";
		document.getElementById("lvl"+i).style.height = mi+"px";
		document.getElementById("lvl"+i).style.backgroundSize = mi+"px";
	}
		document.getElementById("lvlUser").style.width = mi+"px";
		document.getElementById("lvlUser").style.height = mi+"px";
		document.getElementById("lvlUser").style.backgroundSize = mi/1.5+"px";
}

function aDraw(){
	var aShowBg = localStorage.getItem("aShowBg");
	var aElements = localStorage.getItem("aElements");

	wi = window.innerWidth;
	hi = window.innerHeight;
	if(wi<=hi)mi=wi*0.47;
	if(wi>hi)mi=wi*0.30;
	
	for (var i=1; i<=aImages; i++) {
		c = localStorage.getItem("time_"+aElements+""+aShowBg+"_m"+i);
		d = localStorage.getItem("time_"+aElements+""+aShowBg+"_s"+i);
		if(c<10) c = "0"+c;
		if(d<10) d = "0"+d;
		z = '<div class="level" id="lvl'+i+'"onclick="level('+i+')"><div class="times">'+c+':'+d+'</div></div>';
		document.getElementById("levels").innerHTML += z;
		document.getElementById("lvl"+i).style.backgroundImage = "url('img/"+i+".jpg')";
		document.getElementById("lvl"+i).style.width = mi+"px";
		document.getElementById("lvl"+i).style.height = mi+"px";
		document.getElementById("lvl"+i).style.backgroundSize = mi+"px";
	}
		document.getElementById("levels").innerHTML += '<div class="level" id="lvlUser" onclick="level(999)"></div>';
		document.getElementById("lvlUser").style.width = mi+"px";
		document.getElementById("lvlUser").style.height = mi+"px";
		document.getElementById("lvlUser").style.backgroundSize = mi/1.5+"px";
}

function level(e){
	localStorage.setItem("aImg", e);
	location.href='game.html';
}