let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

let vw = window.innerWidth;
	/*  height: calc((((var(--vh, 1vh) * 100) - ((100vw /3)*2)/5) - 80vw) - 11vh);  */
/* scoresHeight = (vh * 100) - ((((vw /3)*2)/5) - (vw * 0.8)) - (vh * 12);  */
scoresHeight = (((vh * 100) - (((vw /3)*2)/5)) - (vw * 0.8)) - (vh * 12);

document.documentElement.style.setProperty('--scoresHeight', `${scoresHeight}px`);


if (window.innerWidth/window.innerHeight < 0.6){
	document.documentElement.style.setProperty('--scoresColCount', `2`);
	document.documentElement.style.setProperty('--scoresFontSize', `3vh`);
	document.documentElement.style.setProperty('--scoresLineHeight', `1.6`);
}else{
	document.documentElement.style.setProperty('--scoresColCount', `3`);
	document.documentElement.style.setProperty('--scoresFontSize', `2.5vh`);
	document.documentElement.style.setProperty('--scoresFontSize',  `${scoresHeight/7}px`);
	document.documentElement.style.setProperty('--scoresLineHeight', `normal`);
}



window.addEventListener('resize', () => {
	// We execute the same script as before
	let vh = window.innerHeight * 0.01;
	document.documentElement.style.setProperty('--vh', `${vh}px`);
	/* location.reload(); */
});



//$(window).bind('orientationchange', function(event) {
$(window).on('orientationchange', function(event) {
	//alert('new orientation:' + event.orientation);
	location.reload();
});






var matchingGame = {
    elapsedTime: 0
};

elem = [];
clone = [];
var cloneCounter = 0;

var gameTimeout = 90;
var gameID = 9;
var gameStarted = false;
var clickCount = 0;
var matchCount = 0;
var runningScore = 0;
var rank = "";

//console.log(gameTimeout);

var Sml = 4;
var Med = 16;
var Lar = 20;
var xLar =30;
//var gridSize = 30 ;
var gridSize = xLar;

let screenHeight = screen.height/200;


var resetTimerRunning = false;

var lastTouchTimeout = 0;

var attractCounter = 0;
var attractTimeout = 300 ;
//var attractTimerRunning = false;
//attractTimeout = (resetTimeout + attractTimeout);

var fadeTiles = 1 ;

var disableRightClick = 1 ;

matchingGame.deck = [];

// Running Score Calculation
// --------------------------------------------------------
function xRunningScore(){
	var xStart = 3000;
	runningScore = ((xStart-(clickCount))*(matchCount*3))/10;
	runningScore = Math.floor(runningScore / 1);
	clickCount++;

	$("#runningScore").html(runningScore);
	$("#runningMatch").html(matchCount);
	
	//console.log("clickCount= " + clickCount);
	//console.log("runningScore= " + runningScore);
	//console.log("matchCount = " + matchCount);
}




// Disable right-click
//----------------------------------------------------------
if (disableRightClick){
	document.addEventListener("contextmenu", function (e){
    	e.preventDefault();
	}, false);
}


/* TEMPORARY
// disable long-press on iPad
function longClickHandler(e){
  e.preventDefault();
}

$(".wrapper").longclick(250, longClickHandler);


*/

/**/

// disable pinch/zoom
if(1){
	document.addEventListener("touchmove", function(e){
		e.preventDefault();
		},{passive: false});
}




function refreshGame(){
	location.reload();
}


function closeKeyboard(){
	document.getElementById("keyboard").style.visibility = "hidden";
}


// Touch fundtions ---
// -------------------------------------------------------
function touch(){

	if (document.getElementById("scoresWrapper")){
		var scores = document.getElementById("scoresWrapper");
		scores.addEventListener("click", function (e){

			if(gameStarted==false){
				location.replace("scoreboard.php?gameID=" + gameID);
			}
		});
	}

	if (document.getElementById("scoresWrapperPortrait")){
		var scores = document.getElementById("scoresWrapperPortrait");
		scores.addEventListener("click", function (e){

			if(gameStarted==false){
				location.replace("scoreboard.php?gameID=" + gameID);
			}
		});
	}

	if (document.getElementById("clockWrapper")){
		var scores = document.getElementById("clockWrapper");
		scores.addEventListener("click", function (e){

			if(gameStarted==false){
				attractCounter = 0;
				document.getElementById("touchIcon2").style.visibility = "hidden";
				myAdminModal.style.display = "block";
				document.getElementById("myAdmin").focus();
				document.getElementById("myAdmin").dispatchEvent(new Event('click'));
			}
		});
	}	

	if (document.getElementById("game")){
		var game = document.getElementById("game");
		game.addEventListener("click", function (e){

			if(gameStarted==false){
				document.getElementById("touchIcon2").style.visibility = "hidden";
				attractCounter = 0;
				modal.style.display = "block";
				document.getElementById("playerName").focus();
				document.getElementById("playerName").dispatchEvent(new Event('click'));

			}
		});
	}



	// temp disabled
	/*
	if(attractTimerRunning){
		// location.reload();

		alert("ATTRACT");

		lastTouchTimeout = 0;
		attractTimer = 0;
		attractCounter = 0;

		attractTimerRunning = false;
		//resetTimerRunning = false;

		//$("#game").load(location.href + " #game");
		
		modal.style.display = "block";
		//document.getElementById("firstName").focus();

		//doLoad();
		
	}
	*/
}

// required to over-ride z index of the icon
function touchToPlay(){
	document.getElementById("touchIcon2").style.visibility = "hidden";
	attractCounter = 0;
	modal.style.display = "block";
	document.getElementById("playerName").focus();
}


var photos = ["photos\/20230929-140940.png","photos\/20230929-140949.png","photos\/20230929-161228.png","photos\/20230929-141018.png","photos\/20230930-150201.png","photos\/20230929-144453.png","photos\/20230929-144425.png","photos\/20230929-144404.png","photos\/20230929-141127.png","photos\/20230929-141136.png","photos\/20230929-144343.png","photos\/20230929-141201.png","photos\/20230929-141215.png","photos\/20230929-144319.png","photos\/20230929-144300.png","photos\/20230929-144216.png","photos\/20230929-161304.png","photos\/20230929-161328.png","photos\/20230929-161400.png","photos\/20230930-194054.png"];

// Add new score to the Database
function newScore(gameID,score,nowPlaying,phone,email) { 
		$.ajax({
			url:"_doNewScore.php",
			type: "POST",
			data: ({gameID: gameID, score: score, player: nowPlaying, phone: phone, email: email}),
			success:function(result){
				var jsonData = JSON.parse(result);
				rank = jsonData[0];
				games = jsonData[1];

				var displayText = "";
				displayText = displayText + "Well done <player>";
				displayText = displayText + "<br>" + "Your Score: <score>";
				displayText = displayText + "<br>" + "You rank <rank> out of <games> games played..!";

				displayText = displayText.replace("<player>", nowPlaying);
				displayText = displayText.replace("<score>", runningScore);
				displayText = displayText.replace("<rank>", rank);
				displayText = displayText.replace("<games>", games);


				console.log(displayText);

				//$("#gameResult").html("Well done " + nowPlaying + "<br>Your Score: " + runningScore + "<br>You rank # " + rank + " out of " + games + " games played today..!");

				$("#gameResult").html(displayText);
			}
		});
	//}
}





function shuffle(array) {	// http://stackoverflow.com/a/2450976/1420197
    var currentIndex = array.length, temporaryValue, randomIndex ;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }
    return array;
}





function selectTile() {

	if(gameStarted){

		
		xRunningScore();

		if ($(".tile-flipped").size() > 1) {
			return;
		}
		$(this).addClass("tile-flipped");

	// ----------------------------------------------------------------------------------

		if (fadeTiles){
			cloneCounter++;
			elem[cloneCounter] = this;
			clone[cloneCounter] = elem[cloneCounter].cloneNode(true);
			clone[cloneCounter].id = 'faded';
			clone[cloneCounter].classList.remove("tile");
			clone[cloneCounter].classList.remove("tile-flipped");
			clone[cloneCounter].classList.add("faded");
		}

	// ---------------------------------------------------------------------------------- 



	if ($(".tile-flipped").size() == 2) {
		//setTimeout(checkPattern,1400);
		setTimeout(checkPattern,1000);

	}

	
	if (resetTimerRunning == false){
		resetTimerRunning = true;
        matchingGame.timer = setInterval(countTimer, 1000);
	}
	

	//
	lastTouchTimeout = 0;
	//attractTimer = 0;
	attractCounter = 0;
	//if(attractTimerRunning){location.reload()};

	}
}


function checkPattern() {
	if (isMatchPattern()) {
		$(".tile-flipped").removeClass("tile-flipped").addClass("tile-removed");
		$(".tile-removed").bind("webkitTransitionEnd",removeTookTiles);
	} else {
		$(".tile-flipped").removeClass("tile-flipped");
	}
}


function isMatchPattern() {
	var tiles = $(".tile-flipped");
	var pattern = $(tiles[0]).data("pattern");
	var anotherPattern = $(tiles[1]).data("pattern");
	return (pattern == anotherPattern);
}


function removeTookTiles() {

	if (fadeTiles){
		elem[cloneCounter].after(clone[cloneCounter]);
		elem[cloneCounter].after(clone[cloneCounter-1]);
	}

	$(".tile-removed").remove();

	matchCount++;
	xRunningScore();
	
	if ($(".tile").length == 0) {
		gameover();
	}
}

function gameover() {

	//alert("Game Over 1");
	modal2.style.display = "block";
	clearInterval(matchingGame.timer);
	//$(".score").html($("#elapsed-time").html());
/*
	var lastScore = localStorage.getItem("last-score");
	lastScoreObj = JSON.parse(lastScore);
	if (lastScoreObj == null) {
		lastScoreObj = {"savedTime": "no record", "score": 0};
	}
	var lastElapsedTime = lastScoreObj.score;
	var minute = Math.floor(lastElapsedTime / 60);
	var second = lastElapsedTime % 60;
	if (minute < 10) minute = "0" + minute;
	if (second < 10) second = "0" + second;
	$(".last-score").html(minute+":"+second);
	var savedTime = lastScoreObj.savedTime;
	$(".saved-time").html(savedTime);

	var currentTime = new Date();
	var month = currentTime.getMonth() + 1;
	var day = currentTime.getDate();
	var year = currentTime.getFullYear();
	var hours = currentTime.getHours();
	var minutes = currentTime.getMinutes();
	if (minutes < 10) minutes = "0" + minutes;
	var seconds = currentTime.getSeconds();
	if (seconds < 10) seconds = "0" + seconds;
	var now = day+"/"+month+"/"+year+" "+hours+":"+minutes+":"+seconds;
	var obj = {
		"savedTime": now,
		"score": matchingGame.elapsedTime
	};
	localStorage.setItem("last-score", JSON.stringify(obj));

	if (lastElapsedTime == 0 || matchingGame.elapsedTime < lastElapsedTime) {
		$(".ribbon").removeClass("hide");
	}

	$("#popup").removeClass("hide");
*/

	//$("#gameResult").html("Well done " + nowPlaying + "<br>Your Score: " + runningScore + "<br>You rank # " + rank);
	//$("#gameResult").html("Well done " + firstName + " " + lastName + "<br>Your Score: " + runningScore + "<br>You rank # " + rank);

	
	newScore(gameID,runningScore,playerName,phone,email);

}

function countTimer() {
	matchingGame.elapsedTime++;
	var countdown = gameTimeout-matchingGame.elapsedTime;
	//var minute = Math.floor(matchingGame.elapsedTime / 60);
	//var second = matchingGame.elapsedTime % 60;
	var minute = Math.floor(countdown / 60);
	var second = countdown % 60;
	//if (minute < 10) minute = "0" + minute;
	if (second < 10) second = "0" + second;
	// $("#elapsed-time").html(minute+":"+second);
	$("#elapsed-time").html("Timer: " + minute + ":" + second);
	//$("#clock").html("Timer:<br>" + minute + ":" + second);
	$("#clock").html(minute + ":" + second);

	//console.log("Countdown: " + countdown);

	//document.getElementById("clock").value = matchingGame.elapsedTime;
	document.getElementById("clock").value = matchingGame.elapsedTime;

	lastTouchTimeout++;
	//if (lastTouchTimeout > resetTimeout){location.reload()};

	if(countdown == 0){
		gameover();
	}

}

$(function(){
	doLoad();
	touch();
});



//$(function(){
function doLoad(){

	//clearInterval(attractUp);
	//clearInterval(attractRun);

    var $tiles = $("#tiles");
    var $loader = $("#loader");

    $tiles.hide();




		photos = shuffle(photos).slice(0, gridSize/2);

        for (var i = 0; i < photos.length; ++i) {
           	matchingGame.deck.push(photos[i], photos[i]);
        }


        shuffle(matchingGame.deck);
        //for(var i=0;i<15;i++){
        for(var i=0;i<gridSize-1;i++){

            $('.tile:first-child').clone().appendTo($tiles);
        }

        $tiles.children().each(function(index) {

            var Logos = matchingGame.deck.pop();

			
            var $this = $(this);
			if (gridSize == Lar){
            	$this.css({
                	'left': ($this.width() + 0) * (index % 5),
                	'top': ($this.height() + 0) * Math.floor(index / 5)
           		});
            $this
                .css("background", "#efefef url(" + Logos + ")")
            	.css("background-size", "20vh 20vh")


			}else if(gridSize == xLar){
            	$this.css({				
                	'left': ($this.width() + screenHeight) * (index % 6),
                	'top': ($this.height() + screenHeight) * Math.floor(index / 6)
           		});

				if (window.innerWidth > window.innerHeight){

            		$this
                		.css("background", "#efefef url(" + Logos + ")")
            			.css("background-size", "16.5vh 16.5vh")
				 }else{
					$this
                		.css("background", "#efefef url(" + Logos + ")")
            			.css("background-size", "15vw 15vw")
				   }
			}

            $this.attr("data-pattern",Logos);

            $this.click(selectTile);
			//$this.dblclick(selectTile);
			//$this.rightclick(selectTile);

			/*

			$this.onclick = function (e) {
				var isRightMB;
				e = e || window.event;
			
				if ("which" in e)  // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
					isRightMB = e.which == 3; 
				else if ("button" in e)  // IE, Opera 
					isRightMB = e.button == 2; 
			
				alert("Right mouse button " + (isRightMB ? "" : " was not") + "clicked!");
			} 

			*/

        });
        $tiles.fadeIn();
        $loader.fadeOut();

		setInterval(attractUp, 1000);








//});

}

function attractUp(){
	
	//console.log("attractCounter: " + attractCounter);

	if(attractCounter > attractTimeout){
		/*
		if (!attractTimerRunning){setInterval(attractRun, 250)};
		$("#elapsed-time").html("Touch Screen to load a new Game");
		//attractTimerRunning = true;
		*/
		location.replace("scoreboard.php?gameID=" + gameID);

		//alert("Attract");

	}

	attractCounter++;
}

/*
function attractRun(){
	var item = document.getElementsByClassName('face front');
	var randomNumber = Math.floor(Math.random() * item.length);

	if (item[randomNumber].classList.contains('visible')) {
		item[randomNumber].classList.remove('visible');
		item[randomNumber].classList.add('invisible');
	}else{
		item[randomNumber].classList.remove('invisible');
		item[randomNumber].classList.add('visible');
	}
}

function attractReset(){
	var item = document.getElementsByClassName('face front');
	var randomNumber = Math.floor(Math.random() * item.length);

	if (item[randomNumber].classList.contains('visible')) {
		item[randomNumber].classList.remove('visible');
		item[randomNumber].classList.add('invisible');
	}else{
		item[randomNumber].classList.remove('invisible');
		item[randomNumber].classList.add('visible');
	}
}
*/

function checkName(nameToCheck){

	const words = ["cunt", "fuck", "piss", "bollocks"];
	nameToCheck = nameToCheck.toLowerCase();

	let i = 0;

	while (i < words.length) {

    	let pattern = words[i];
		let replacement = "****";
		nameToCheck = nameToCheck.replace(pattern, replacement);
    	i++;

	}

	return nameToCheck


}