////////////////////////////////////////////////////////////
// CANVAS
////////////////////////////////////////////////////////////
var stage
var canvasW=0;
var canvasH=0;

/*!
 * 
 * START GAME CANVAS - This is the function that runs to setup game canvas
 * 
 */
function initGameCanvas(w,h){
	var gameCanvas = document.getElementById("gameCanvas");
	gameCanvas.width = w;
	gameCanvas.height = h;
	
	canvasW=w;
	canvasH=h;
	stage = new createjs.Stage("gameCanvas");
	
	createjs.Touch.enable(stage);
	stage.enableMouseOver(20);
	stage.mouseMoveOutside = true;
	
	createjs.Ticker.setFPS(60);
	createjs.Ticker.addEventListener("tick", tick);	
}

var guide = false;
var canvasContainer, mainContainer, gameContainer, statusContainer, gameStatusContainer, worldContainer, resultContainer, confirmContainer;
var guideline, bg, logo, buttonStart, buttonStartTxt, buttonRestart, buttonFacebook, buttonTwitter, buttonWhatsapp, buttonFullscreen, buttonSoundOn, buttonSoundOff;
var dimOverlay;

$.sprites = {};
$.background = {};

// SOUND TOGGLE (új rajzolt gomb)
var soundToggleButton, soundToggleBg, soundIconOn, soundIconOff;
var __isMuted = false; // induló állapot (szinkronizáljuk, ha van SoundJS)

/*!
 * 
 * BUILD GAME CANVAS ASSERTS - This is the function that runs to build game canvas asserts
 * 
 */
function buildGameCanvas(){
	canvasContainer = new createjs.Container();
	mainContainer = new createjs.Container();
	gameContainer = new createjs.Container();
	statusContainer = new createjs.Container();
	gameStatusContainer = new createjs.Container();
	worldContainer = new createjs.Container();
	resultContainer = new createjs.Container();
	confirmContainer = new createjs.Container();
	
	bg = new createjs.Bitmap(loader.getResult('base'));
	logo = new createjs.Bitmap(loader.getResult('logo'));

// --- LOGO: max 300x400 px
centerReg(logo); // a (x,y) innentől a logó közepe

(function capLogo(){
  if (!logo || !logo.image) return;
  var img = logo.image;
  var w = img.naturalWidth  || img.width  || 0;
  var h = img.naturalHeight || img.height || 0;
  if (!w || !h) return;

  var maxW = 400, maxH = 300;
  var scaleW = maxW / w;
  var scaleH = maxH / h;
  var scale  = Math.min(scaleW, scaleH, 1); // ne nagyítsunk

  logo.scaleX = logo.scaleY = scale;
})();

// pozíció: középre és lejjebb 80%-ra
logo.x = canvasW / 2;
logo.y = canvasH * 0.2;

// --- 60% fekete overlay az egész vászonra ---
dimOverlay = new createjs.Shape();
dimOverlay.mouseEnabled = false;           // ne fogja el a kattintást
dimOverlay.alpha = 0.4;
dimOverlay.graphics.beginFill("#000").drawRect(0, 0, canvasW, canvasH);

	// button új háttér layer ide
	//buttonStart = new createjs.Bitmap(loader.getResult('buttonStart')); // button régi rész, ez kijön
	buttonStart = new createjs.Shape();
	buttonStart.graphics.beginFill("#0099cc").drawRoundRect(0, 0, 300, 100, 10); // button_start radius = 10
	buttonStart.x = (canvasW - 300) / 2;
	buttonStart.y = canvasH/100 * 82;
	// centerReg(buttonStart);

	// button szöveg ide
	buttonStartTxt = new createjs.Text();
	buttonStartTxt.font = "2.5rem gotham_blackregular"; // button_start font
	buttonStartTxt.color = "#ffffff";
	buttonStartTxt.textAlign = "center";
	buttonStartTxt.textBaseline='alphabetic';
	buttonStartTxt.text = 'START';
	buttonStartTxt.x = canvasW/2;
	buttonStartTxt.y = canvasH/100 * 88;
	buttonStartTxt.visible=true;
	//

	//road	
	for(var key in spritesData) {
		if(spritesData[key].src != undefined){
			spritesData[key].id = key;
			$.sprites[key] = new createjs.Bitmap(loader.getResult(key));
			$.sprites[key].y -= $.sprites[key].image.naturalHeight;
			gameContainer.addChild($.sprites[key]);
			
			spritesData[key].id = key;
			spritesData[key].w = $.sprites[key].image.naturalWidth;
			spritesData[key].h = $.sprites[key].image.naturalHeight;
		}
	}
	
	for(var key in backgroundData) {
		if(backgroundData[key].src != undefined){
			$.background[key] = new createjs.Bitmap(loader.getResult(key));
			$.background[key].y -= $.background[key].image.naturalHeight;
			gameContainer.addChild($.background[key]);
			
			backgroundData[key].id = key;
			backgroundData[key].w = $.background[key].image.naturalWidth;
			backgroundData[key].h = $.background[key].image.naturalHeight;
		}
	}
	
	for(var key in playerCarData) {
		if(playerCarData[key].src != undefined){
			$.sprites[key] = new createjs.Bitmap(loader.getResult(key));
			$.sprites[key].y -= $.sprites[key].image.naturalHeight;
			gameContainer.addChild($.sprites[key]);
			
			playerCarData[key].id = key;
			playerCarData[key].w = $.sprites[key].image.naturalWidth;
			playerCarData[key].h = $.sprites[key].image.naturalHeight;
		}
	}
	
	var _frameW = 70;
	var _frameH = 100;
	
	var _frame = {"regX": 0, "regY": 0, "height": _frameH, "count": 2, "width": _frameW};
	var _animations = {animate:{frames: [0,1], speed:1}};
						
	smokeData = new createjs.SpriteSheet({
		"images": [loader.getResult('itemSmoke').src],
		"frames": _frame,
		"animations": _animations
	});
	
	smokeAnimate = new createjs.Sprite(smokeData, "animate");
	smokeAnimate.framerate = 20;
	smokeAnimate.x = -200;
	
	var _frameW = 155;
	var _frameH = 55;
	var _frame = {"regX": 0, "regY": 0, "height": _frameH, "count": 2, "width": _frameW};
	var _animations = {animate:{frames: [0,1], speed:1}};
						
	fireData = new createjs.SpriteSheet({
		"images": [loader.getResult('itemFire').src],
		"frames": _frame,
		"animations": _animations
	});
	
	fireAnimate = new createjs.Sprite(fireData, "animate");
	fireAnimate.framerate = 20;
	fireAnimate.x = -200;
	
	scoreTxt = new createjs.Text();
	scoreTxt.font = "10rem gotham_blackregular";
	scoreTxt.color = "#ffffff";
	scoreTxt.textAlign = "center";
	scoreTxt.textBaseline='alphabetic';
	scoreTxt.text = scoreData.text;
	scoreTxt.x = canvasW/100 * 50;
	scoreTxt.y = canvasH/100 * 15;
	
	scoreShadowTxt = new createjs.Text();
	scoreShadowTxt.font = "10rem gotham_blackregular";
	scoreShadowTxt.color = "#00000060";
	scoreShadowTxt.textAlign = "center";
	scoreShadowTxt.textBaseline='alphabetic';
	scoreShadowTxt.text = scoreData.text;
	scoreShadowTxt.x = scoreTxt.x+3;
	scoreShadowTxt.y = scoreTxt.y+2;
	
	fuelTxt = new createjs.Text();
	fuelTxt.font = "20px gotham_blackregular";
	fuelTxt.color = "#1a4539";
	fuelTxt.textAlign = "left";
	fuelTxt.textBaseline='alphabetic';
	fuelTxt.text = fuelData.text;
	fuelTxt.x = canvasW/100 * 2;
	fuelTxt.y = canvasH/100 * 9;
	
	fuelShadowTxt = new createjs.Text();
	fuelShadowTxt.font = "20px gotham_blackregular";
	fuelShadowTxt.color = "#00000060";
	fuelShadowTxt.textAlign = "left";
	fuelShadowTxt.textBaseline='alphabetic';
	fuelShadowTxt.text = fuelData.text;
	fuelShadowTxt.x = fuelTxt.x+3;
	fuelShadowTxt.y = fuelTxt.y+2;
	fuelBarBackground = new createjs.Shape();
	fuelBarBackground.graphics.beginFill(fuelData.bar.backgroundColor).drawRect(0, 0, fuelData.bar.width, fuelData.bar.height);
	fuelBarBackground.x = canvasW/100-10; //12
	fuelBarBackground.y = canvasH/100 * 96; //6.8
	
	fuelBarEmpty = new createjs.Shape();
	fuelBarEmpty.graphics.beginFill(fuelData.bar.blankColor).drawRect(0, 0, fuelData.bar.width - (fuelData.bar.space*2), fuelData.bar.height - (fuelData.bar.space * 4));
	fuelBarEmpty.x = fuelBarBackground.x + fuelData.bar.space;
	fuelBarEmpty.y = fuelBarBackground.y + fuelData.bar.space;
	
	fuelBarFill = new createjs.Shape();
	fuelBarFill.x = fuelBarBackground.x + fuelData.bar.space;
	fuelBarFill.y = fuelBarBackground.y + fuelData.bar.space;
	
	gameStatusTxt = new createjs.Text();
	gameStatusTxt.font = "12rem gotham_blackregular";
	gameStatusTxt.color = "#fff";
	gameStatusTxt.textAlign = "center";
	gameStatusTxt.textBaseline='alphabetic';
	gameStatusTxt.text = '';
	gameStatusTxt.x = canvasW/100 * 50;
	gameStatusTxt.y = canvasH/100 * 30;
	
	gameStatusShadowTxt = new createjs.Text();
	gameStatusShadowTxt.font = "12rem gotham_blackregular";
	gameStatusShadowTxt.color = "#00000060";
	gameStatusShadowTxt.textAlign = "center";
	gameStatusShadowTxt.textBaseline='alphabetic';
	gameStatusShadowTxt.text = '';
	gameStatusShadowTxt.x = gameStatusTxt.x+3;
	gameStatusShadowTxt.y = gameStatusTxt.y+2;
	
	instructionTxt = new createjs.Text();
	instructionTxt.font = "18rem gotham_blackregular";
	instructionTxt.color = "#fff";
	instructionTxt.textAlign = "center";
	instructionTxt.textBaseline='alphabetic';
	instructionTxt.text = intructionDisplayText;
	instructionTxt.x = canvasW/2;
	instructionTxt.y = canvasH/100 * 40;
	
	instructionShadowTxt = new createjs.Text();
	instructionShadowTxt.font = "18rem gotham_blackregular";
	instructionShadowTxt.color = "#00000060";
	instructionShadowTxt.textAlign = "center";
	instructionShadowTxt.textBaseline='alphabetic';
	instructionShadowTxt.text = intructionDisplayText;
	instructionShadowTxt.x = instructionTxt.x+3;
	instructionShadowTxt.y = instructionTxt.y+2;
	
	//key
	itemTouchUp = new createjs.Bitmap(loader.getResult('itemTouchUp'));
	centerReg(itemTouchUp);
	createHitarea(itemTouchUp);
	itemTouchDown = new createjs.Bitmap(loader.getResult('itemTouchDown'));
	centerReg(itemTouchDown);
	createHitarea(itemTouchDown);
	itemTouchLeft = new createjs.Bitmap(loader.getResult('itemTouchLeft'));
	centerReg(itemTouchLeft);
	createHitarea(itemTouchLeft);
	itemTouchRight = new createjs.Bitmap(loader.getResult('itemTouchRight'));
	centerReg(itemTouchRight);
	createHitarea(itemTouchRight);
	
	itemTouchUp.alpha = itemTouchDown.alpha = itemTouchLeft.alpha = itemTouchRight.alpha = .2;
	
	//result
	resultTitleTxt = new createjs.Text();
	resultTitleTxt.font = "80px gotham_blackregular";
	resultTitleTxt.color = "#ffffff";
	resultTitleTxt.textAlign = "center";
	resultTitleTxt.textBaseline='alphabetic';
	resultTitleTxt.text = resultTitleText;
	resultTitleTxt.x = canvasW/2;
	resultTitleTxt.y = canvasH/100 * 30;
	
	resultTitleShadowTxt = new createjs.Text();
	resultTitleShadowTxt.font = "80px gotham_blackregular";
	resultTitleShadowTxt.color = "#00000060";
	resultTitleShadowTxt.textAlign = "center";
	resultTitleShadowTxt.textBaseline='alphabetic';
	resultTitleShadowTxt.text = resultTitleText;
	resultTitleShadowTxt.x = resultTitleTxt.x+3;
	resultTitleShadowTxt.y = resultTitleTxt.y+2;
	
	resultScoreTxt = new createjs.Text();
	resultScoreTxt.font = "200px gotham_blackregular";
	resultScoreTxt.color = "#ffffff";
	resultScoreTxt.textAlign = "center";
	resultScoreTxt.textBaseline='alphabetic';
	resultScoreTxt.text = '1500PTS';
	resultScoreTxt.x = canvasW/2;
	resultScoreTxt.y = canvasH/100 * 47;
	
	resultScoreShadowTxt = new createjs.Text();
	resultScoreShadowTxt.font = "0px gotham_blackregular";
	resultScoreShadowTxt.color = "#00000060";
	resultScoreShadowTxt.textAlign = "center";
	resultScoreShadowTxt.textBaseline='alphabetic';
	resultScoreShadowTxt.text = '1500PTS';
	resultScoreShadowTxt.x = resultScoreTxt.x+3;
	resultScoreShadowTxt.y = resultScoreTxt.y+2;
	
	resultScoreDescTxt = new createjs.Text();
	resultScoreDescTxt.font = "60px gotham_blackregular";
	resultScoreDescTxt.color = "#363838ff";
	resultScoreDescTxt.textAlign = "center";
	resultScoreDescTxt.textBaseline='alphabetic';
	resultScoreDescTxt.text = resultScoreText;
	resultScoreDescTxt.x = canvasW/2;
	resultScoreDescTxt.y = canvasH/100 * 38;
	
	resultScoreDescShadowTxt = new createjs.Text();
	resultScoreDescShadowTxt.font = "60px gotham_blackregular";
	resultScoreDescShadowTxt.color = "#2f2f2f";
	resultScoreDescShadowTxt.textAlign = "center";
	resultScoreDescShadowTxt.textBaseline='alphabetic';
	resultScoreDescShadowTxt.text = resultScoreText;
	resultScoreDescShadowTxt.x = resultScoreDescTxt.x+3;
	resultScoreDescShadowTxt.y = resultScoreDescTxt.y+2;
	
	resultShareTxt = new createjs.Text();
	resultShareTxt.font = "25px gotham_blackregular";
	resultShareTxt.color = "#fff";
	resultShareTxt.textAlign = "center";
	resultShareTxt.textBaseline='alphabetic';
	resultShareTxt.text = shareText;
	resultShareTxt.x = canvasW/2;
	resultShareTxt.y = canvasH/100 * 73;
	
	resultShareShadowTxt = new createjs.Text();
	resultShareShadowTxt.font = "25px gotham_blackregular";
	resultShareShadowTxt.color = "#00000060";
	resultShareShadowTxt.textAlign = "center";
	resultShareShadowTxt.textBaseline='alphabetic';
	resultShareShadowTxt.text = shareText;
	resultShareShadowTxt.x = resultShareTxt.x+3;
	resultShareShadowTxt.y = resultShareTxt.y+2;
	
// EREDETI (ezeket ki lehet kommentelni)
// buttonFacebook = new createjs.Bitmap(loader.getResult('buttonFacebook'));
// buttonTwitter = new createjs.Bitmap(loader.getResult('buttonTwitter'));
// buttonWhatsapp = new createjs.Bitmap(loader.getResult('buttonWhatsapp'));

// ÚJ FACEBOOK gomb
buttonFacebook = new createjs.Shape();
buttonFacebook.graphics.beginFill("#3b5998").drawRoundRect(0, 0, 180, 70, 20);
buttonFacebook.x = canvasW/5 * 2 - 90; // középre igazítás kb.
buttonFacebook.y = canvasH/100 * 80;

buttonFacebookTxt = new createjs.Text();
buttonFacebookTxt.font = "1.4rem gotham_blackregular";
buttonFacebookTxt.color = "#fff";
buttonFacebookTxt.textAlign = "center";
buttonFacebookTxt.textBaseline = "alphabetic";
buttonFacebookTxt.text = "FACEBOOK";
buttonFacebookTxt.x = buttonFacebook.x + 90;
buttonFacebookTxt.y = buttonFacebook.y + 47;
buttonFacebookTxt.visible = true;

// ÚJ TWITTER gomb
buttonTwitter = new createjs.Shape();
buttonTwitter.graphics.beginFill("#1DA1F2").drawRoundRect(0, 0, 180, 70, 20);
buttonTwitter.x = canvasW/5 * 3 - 90;
buttonTwitter.y = canvasH/100 * 80;

buttonTwitterTxt = new createjs.Text();
buttonTwitterTxt.font = "1.4rem gotham_blackregular";
buttonTwitterTxt.color = "#fff";
buttonTwitterTxt.textAlign = "center";
buttonTwitterTxt.textBaseline = "alphabetic";
buttonTwitterTxt.text = "TWITTER";
buttonTwitterTxt.x = buttonTwitter.x + 90;
buttonTwitterTxt.y = buttonTwitter.y + 47;
buttonTwitterTxt.visible = true;

// ÚJ WHATSAPP gomb
buttonWhatsapp = new createjs.Shape();
buttonWhatsapp.graphics.beginFill("#25D366").drawRoundRect(0, 0, 180, 70, 20);
buttonWhatsapp.x = canvasW/100 * 75 - 90;
buttonWhatsapp.y = canvasH/100 * 80;

buttonWhatsappTxt = new createjs.Text();
buttonWhatsappTxt.font = "1.4rem gotham_blackregular";
buttonWhatsappTxt.color = "#fff";
buttonWhatsappTxt.textAlign = "center";
buttonWhatsappTxt.textBaseline = "alphabetic";
buttonWhatsappTxt.text = "WHATSAPP";
buttonWhatsappTxt.x = buttonWhatsapp.x + 90;
buttonWhatsappTxt.y = buttonWhatsapp.y + 48;
buttonWhatsappTxt.visible = true;

// EREDETI (ezeket ki lehet kommentelni)
// buttonFacebook = new createjs.Bitmap(loader.getResult('buttonFacebook'));
// buttonTwitter = new createjs.Bitmap(loader.getResult('buttonTwitter'));
// buttonWhatsapp = new createjs.Bitmap(loader.getResult('buttonWhatsapp'));

// ÚJ FACEBOOK gomb
buttonFacebook = new createjs.Shape();
buttonFacebook.graphics.beginFill("#3b5998").drawRoundRect(0, 0, 180, 70, 20);
buttonFacebook.x = canvasW/5 * 2 - 90; // középre igazítás kb.
buttonFacebook.y = canvasH/100 * 80;

buttonFacebookTxt = new createjs.Text();
buttonFacebookTxt.font = "1.4rem gotham_blackregular";
buttonFacebookTxt.color = "#fff";
buttonFacebookTxt.textAlign = "center";
buttonFacebookTxt.textBaseline = "alphabetic";
buttonFacebookTxt.text = "FACEBOOK";
buttonFacebookTxt.x = buttonFacebook.x + 90;
buttonFacebookTxt.y = buttonFacebook.y + 48;
buttonFacebookTxt.visible = true;

// ÚJ TWITTER gomb
buttonTwitter = new createjs.Shape();
buttonTwitter.graphics.beginFill("#1DA1F2").drawRoundRect(0, 0, 180, 70, 20);
buttonTwitter.x = canvasW/5 * 3 - 90;
buttonTwitter.y = canvasH/100 * 80;

buttonTwitterTxt = new createjs.Text();
buttonTwitterTxt.font = "1.4rem gotham_blackregular";
buttonTwitterTxt.color = "#fff";
buttonTwitterTxt.textAlign = "center";
buttonTwitterTxt.textBaseline = "alphabetic";
buttonTwitterTxt.text = "TWITTER";
buttonTwitterTxt.x = buttonTwitter.x + 90;
buttonTwitterTxt.y = buttonTwitter.y + 48;
buttonTwitterTxt.visible = true;

/* ==== SOUND TOGGLE BUTTON (Shape + SVG ikonok) ==== */
(function(){
  var W = 70, H = 70, R = 10;

  // konténer
  soundToggleButton = new createjs.Container();

  // háttér (alap: nem némított -> szürke)
  soundToggleBg = new createjs.Shape();
  soundToggleBg.graphics.beginFill("#0099cc").drawRoundRect(0, 0, W, H, R);

  // fehér SVG ikonok (640x640 viewBox-hoz skálázunk 40x40-re)
  var svgOn = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M533.6 96.5C523.3 88.1 508.2 89.7 499.8 100C491.4 110.3 493 125.4 503.3 133.8C557.5 177.8 592 244.8 592 320C592 395.2 557.5 462.2 503.3 506.3C493 514.7 491.5 529.8 499.8 540.1C508.1 550.4 523.3 551.9 533.6 543.6C598.5 490.7 640 410.2 640 320C640 229.8 598.5 149.2 533.6 96.5zM473.1 171C462.8 162.6 447.7 164.2 439.3 174.5C430.9 184.8 432.5 199.9 442.8 208.3C475.3 234.7 496 274.9 496 320C496 365.1 475.3 405.3 442.8 431.8C432.5 440.2 431 455.3 439.3 465.6C447.6 475.9 462.8 477.4 473.1 469.1C516.3 433.9 544 380.2 544 320.1C544 260 516.3 206.3 473.1 171.1zM412.6 245.5C402.3 237.1 387.2 238.7 378.8 249C370.4 259.3 372 274.4 382.3 282.8C393.1 291.6 400 305 400 320C400 335 393.1 348.4 382.3 357.3C372 365.7 370.5 380.8 378.8 391.1C387.1 401.4 402.3 402.9 412.6 394.6C434.1 376.9 448 350.1 448 320C448 289.9 434.1 263.1 412.6 245.5zM80 416L128 416L262.1 535.2C268.5 540.9 276.7 544 285.2 544C304.4 544 320 528.4 320 509.2L320 130.8C320 111.6 304.4 96 285.2 96C276.7 96 268.5 99.1 262.1 104.8L128 224L80 224C53.5 224 32 245.5 32 272L32 368C32 394.5 53.5 416 80 416z"/></svg>`;

  var svgOff = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M80 416L128 416L262.1 535.2C268.5 540.9 276.7 544 285.2 544C304.4 544 320 528.4 320 509.2L320 130.8C320 111.6 304.4 96 285.2 96C276.7 96 268.5 99.1 262.1 104.8L128 224L80 224C53.5 224 32 245.5 32 272L32 368C32 394.5 53.5 416 80 416zM399 239C389.6 248.4 389.6 263.6 399 272.9L446 319.9L399 366.9C389.6 376.3 389.6 391.5 399 400.8C408.4 410.1 423.6 410.2 432.9 400.8L479.9 353.8L526.9 400.8C536.3 410.2 551.5 410.2 560.8 400.8C570.1 391.4 570.2 376.2 560.8 366.9L513.8 319.9L560.8 272.9C570.2 263.5 570.2 248.3 560.8 239C551.4 229.7 536.2 229.6 526.9 239L479.9 286L432.9 239C423.5 229.6 408.3 229.6 399 239z"/></svg>`;


  // ikonok középre
// fehér SVG ikonok
soundIconOn  = svgToBitmap(svgOn, 35, 35);
soundIconOff = svgToBitmap(svgOff, 35, 35);

var isDesktopPointer = window.matchMedia && window.matchMedia('(pointer:fine)').matches;
var ICON_NUDGE = { x: -4, y: isDesktopPointer ? -4 : 0 };

soundIconOn.x  = Math.round(W/2 + ICON_NUDGE.x);
soundIconOn.y  = Math.round(H/2 + ICON_NUDGE.y);
soundIconOff.x = Math.round(W/2 + ICON_NUDGE.x);
soundIconOff.y = Math.round(H/2 + ICON_NUDGE.y);

  // kezdeti állapot (ha van SoundJS)
  if (window.createjs && createjs.Sound) {
    __isMuted = !!createjs.Sound.muted;
  }
  soundIconOn.visible  = !__isMuted;
  soundIconOff.visible =  __isMuted;

  // vizuál helper
  function refreshSoundVisual(){
    if (__isMuted){
      soundToggleBg.graphics.clear().beginFill("#0099cc").drawRoundRect(0,0,W,H,R); // némított
      soundIconOn.visible  = false;
      soundIconOff.visible = true;
    } else {
      soundToggleBg.graphics.clear().beginFill("#0099cc").drawRoundRect(0,0,W,H,R); // hang
      soundIconOn.visible  = true;
      soundIconOff.visible = false;
    }
  }
  refreshSoundVisual();

  // nagyobb hitArea
  var hit = new createjs.Shape();
  hit.graphics.beginFill("#fff").drawRect(0, 0, W, H);
  soundToggleButton.hitArea = hit;

  // POZÍCIÓ: tedd a jobb felső sarokba (offsetekkel)
  // Ha inkább más helyre szeretnéd, később a resize-ben is állítjuk.
  soundToggleButton.x = (canvasW - offset.x) - (W + 20);
  soundToggleButton.y = offset.y + 25;

  // összeállítás és hozzáadás
  soundToggleButton.addChild(soundToggleBg, soundIconOn, soundIconOff);
  soundToggleButton.cursor = "pointer";
  soundToggleButton.addEventListener("click", function(){
    if (window.createjs && createjs.Sound){
      createjs.Sound.muted = !createjs.Sound.muted;
      __isMuted = createjs.Sound.muted;
    } else if (typeof toggleMute === "function"){
      toggleMute();
      __isMuted = !__isMuted;
    } else {
      __isMuted = !__isMuted;
    }
    refreshSoundVisual();
  });

  // FONTOS: legfelül legyen a rétegsorrendben → addChild a legvégén fogjuk (lásd lejjebb)
  soundToggleButton.refreshSoundVisual = refreshSoundVisual; // ha máshonnan is hívnád
})();

/* // ÚJ WHATSAPP gomb
buttonWhatsapp = new createjs.Shape();
buttonWhatsapp.graphics.beginFill("#25D366").drawRoundRect(0, 0, 180, 70, 20);
buttonWhatsapp.x = canvasW/100 * 75 - 90;
buttonWhatsapp.y = canvasH/100 * 80;

buttonWhatsappTxt = new createjs.Text();
buttonWhatsappTxt.font = "1.4rem gotham_blackregular";
buttonWhatsappTxt.color = "#fff";
buttonWhatsappTxt.textAlign = "center";
buttonWhatsappTxt.textBaseline = "alphabetic";
buttonWhatsappTxt.text = "WHATSAPP";
buttonWhatsappTxt.x = buttonWhatsapp.x + 90;
buttonWhatsappTxt.y = buttonWhatsapp.y + 48;
buttonWhatsappTxt.visible = true; */

/* Helper: SVG string → Bitmap (640x640-es viewBox-hoz) */
function svgToBitmap(svgString, targetW, targetH) {
  var img = new Image();
  var svg = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
  var url = URL.createObjectURL(svg);
  img.src = url;

  var bmp = new createjs.Bitmap(img);

  // a legtöbb "ikon" SVG 640x640-es viewBox-szal jön
  // regX/regY = 320/320 -> valódi középre igazítás
  bmp.regX = 320;
  bmp.regY = 320;

  img.onload = function () {
    var sx = targetW / 640;
    var sy = targetH / 640;
    bmp.scaleX = sx;
    bmp.scaleY = sy;
    URL.revokeObjectURL(url);
  };
  return bmp;
}

/* Méretek/pozíciók */
var shareW = 80, shareH = 80, shareR = 10;
var shareY = canvasH / 100 * 80;
var fbX = canvasW / 5 * 2 - shareW / 2;
var twX = canvasW / 5 * 3 - shareW / 2;

/* FACEBOOK (háttér + ikon) */
buttonFacebook = new createjs.Shape();
buttonFacebook.graphics.beginFill("#0099cc").drawRoundRect(0, 0, shareW, shareH, shareR);
buttonFacebook.x = fbX;
buttonFacebook.y = shareY;
// hitArea a Shape-hez
var fbHit = new createjs.Shape();
fbHit.graphics.beginFill("#000").drawRect(0, 0, shareW, shareH);
buttonFacebook.hitArea = fbHit;

// Fehér Facebook SVG (tőled kapott)
var facebookSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="#ffffff" d="M240 363.3L240 576L356 576L356 363.3L442.5 363.3L460.5 265.5L356 265.5L356 230.9C356 179.2 376.3 159.4 428.7 159.4C445 159.4 458.1 159.8 465.7 160.6L465.7 71.9C451.4 68 416.4 64 396.2 64C289.3 64 240 114.5 240 223.4L240 265.5L174 265.5L174 363.3L240 363.3z"/></svg>`;
var buttonFacebookIcon = svgToBitmap(facebookSVG, 40, 40);
{
  const isDesktop = window.matchMedia && window.matchMedia('(pointer:fine)').matches;
  const DESKTOP_NUDGE = { x: -3, y: -3 }; // állítható desktop eltolás
  const MOBILE_NUDGE  = { x:  0, y:  0 };
  const n = isDesktop ? DESKTOP_NUDGE : MOBILE_NUDGE;

  buttonFacebookIcon.x = Math.round(canvasW * 0.4 + n.x);
  buttonFacebookIcon.y = Math.round(canvasH * 0.839 + n.y);
}

/* TWITTER (háttér + ikon) */
buttonTwitter = new createjs.Shape();
buttonTwitter.graphics.beginFill("#0099cc").drawRoundRect(0, 0, shareW, shareH, shareR);
buttonTwitter.x = twX;
buttonTwitter.y = shareY;
// hitArea a Shape-hez
var twHit = new createjs.Shape();
twHit.graphics.beginFill("#000").drawRect(0, 0, shareW, shareH);
buttonTwitter.hitArea = twHit;

// Fehér Twitter SVG (tőled kapott)
var twitterSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="#ffffff" d="M453.2 112L523.8 112L369.6 288.2L551 528L409 528L297.7 382.6L170.5 528L99.8 528L264.7 339.5L90.8 112L236.4 112L336.9 244.9L453.2 112zM428.4 485.8L467.5 485.8L215.1 152L173.1 152L428.4 485.8z"/></svg>`;
var buttonTwitterIcon = svgToBitmap(twitterSVG, 40, 40);
{
  const isDesktop = window.matchMedia && window.matchMedia('(pointer:fine)').matches;
  const DESKTOP_NUDGE = { x: -3, y: -3 }; // ugyanaz az eltolás desktopon
  const MOBILE_NUDGE  = { x:  0, y:  0 };
  const n = isDesktop ? DESKTOP_NUDGE : MOBILE_NUDGE;

  buttonTwitterIcon.x = Math.round(canvasW * 0.6 + n.x);
  buttonTwitterIcon.y = Math.round(canvasH * 0.839 + n.y);
}
	
/* 	buttonRestart = new createjs.Bitmap(loader.getResult('buttonRestart'));
	centerReg(buttonRestart);
	createHitarea(buttonRestart);
	buttonRestart.x = canvasW/2;
	buttonRestart.y = canvasH/100 * 55; */
	
	// ÚJ restart gomb (rajzolt háttér + szöveg)
buttonRestart = new createjs.Shape();
buttonRestart.graphics.beginFill("#0099cc").drawRoundRect(0, 0, 380, 90, 10);
buttonRestart.x = (canvasW - 380) / 2;
buttonRestart.y = canvasH/100 * 55;

// szöveg
buttonRestartTxt = new createjs.Text();
buttonRestartTxt.font = "2rem gotham_blackregular";
buttonRestartTxt.color = "#ffffff";
buttonRestartTxt.textAlign = "center";
buttonRestartTxt.textBaseline = "alphabetic";
buttonRestartTxt.text = "ÚJRA";
buttonRestartTxt.x = canvasW/2;
buttonRestartTxt.y = canvasH/100 * 61 - 6; 
buttonRestartTxt.visible = true;

	//option
	buttonFullscreen = new createjs.Bitmap(loader.getResult('buttonFullscreen'));
	centerReg(buttonFullscreen);
	buttonSoundOn = new createjs.Bitmap(loader.getResult('buttonSoundOn'));
	centerReg(buttonSoundOn);
	buttonSoundOff = new createjs.Bitmap(loader.getResult('buttonSoundOff'));
	centerReg(buttonSoundOff);
	buttonSoundOn.visible = false;
	buttonExit = new createjs.Bitmap(loader.getResult('buttonExit'));
	centerReg(buttonExit);
	buttonSettings = new createjs.Bitmap(loader.getResult('buttonSettings'));
	centerReg(buttonSettings);
	
	createHitarea(buttonFullscreen);
	createHitarea(buttonSoundOn);
	createHitarea(buttonSoundOff);
	createHitarea(buttonExit);
	createHitarea(buttonSettings);
	optionsContainer = new createjs.Container();
	optionsContainer.addChild(buttonFullscreen, buttonSoundOn, buttonSoundOff, buttonExit);
	optionsContainer.visible = false;
	
	//exit
	itemExit = new createjs.Bitmap(loader.getResult('itemExit'));
	
	buttonConfirm = new createjs.Bitmap(loader.getResult('buttonConfirm'));
	centerReg(buttonConfirm);
	buttonConfirm.x = canvasW/100* 37;
	buttonConfirm.y = canvasH/100 * 58;
	
	buttonCancel = new createjs.Bitmap(loader.getResult('buttonCancel'));
	centerReg(buttonCancel);
	buttonCancel.x = canvasW/100 * 66;
	buttonCancel.y = canvasH/100 * 58;
	
	confirmMessageTxt = new createjs.Text();
	confirmMessageTxt.font = "60px gotham_blackregular";
	confirmMessageTxt.color = "#363838ff";
	confirmMessageTxt.textAlign = "center";
	confirmMessageTxt.textBaseline='alphabetic';
	confirmMessageTxt.text = exitMessage;
	confirmMessageTxt.x = canvasW/2;
	confirmMessageTxt.y = canvasH/100 *38;
	
	confirmContainer.addChild(itemExit, buttonConfirm, buttonCancel, confirmMessageTxt);
	confirmContainer.visible = false;
	
	if(guide){
		guideline = new createjs.Shape();
		guideline.graphics.setStrokeStyle(2).beginStroke('red').drawRect((stageW-contentW)/2, (stageH-contentH)/2, contentW, contentH);
	}

	mainContainer.addChild(dimOverlay, logo, buttonStart, buttonStartTxt);
	gameStatusContainer.addChild(gameStatusShadowTxt, gameStatusTxt);
	gameContainer.addChild(smokeAnimate, fireAnimate, gameStatusContainer, statusContainer, instructionShadowTxt, instructionTxt, itemTouchUp, itemTouchDown, itemTouchLeft, itemTouchRight);
	statusContainer.addChild(scoreShadowTxt, scoreTxt, fuelShadowTxt, fuelTxt, fuelBarBackground, fuelBarEmpty, fuelBarFill);
	resultContainer.addChild(
  resultTitleShadowTxt, resultTitleTxt, 
  resultScoreDescShadowTxt, resultScoreDescTxt, 
  resultScoreShadowTxt, resultScoreTxt, 
  buttonRestart, buttonRestartTxt
);
	
if (shareEnable) {
  resultContainer.addChild(
    resultShareShadowTxt, resultShareTxt,
    buttonFacebook, buttonFacebookIcon,
    buttonTwitter,  buttonTwitterIcon
    // WhatsApp nincs használatban
  );
}
	
	canvasContainer.addChild(bg, worldContainer, mainContainer, gameContainer, resultContainer, confirmContainer, optionsContainer, buttonSettings, guideline, soundToggleButton);
	stage.addChild(canvasContainer);
	
	resizeCanvas();
}


/*!
 * 
 * RESIZE GAME CANVAS - This is the function that runs to resize game canvas
 * 
 */
function resizeCanvas(){
 	if(canvasContainer!=undefined){
		statusContainer.x = offset.x;
		statusContainer.y = offset.y;
		
		buttonSettings.x = (canvasW - offset.x) - 6000; //Kitolva a képből
		buttonSettings.y = offset.y + 120;
		
		var distanceNum = 75;
		if(curPage != 'game'){
			buttonExit.visible = false;
			buttonSoundOn.x = buttonSoundOff.x = buttonSettings.x;
			buttonSoundOn.y = buttonSoundOff.y = buttonSettings.y+distanceNum;
			buttonSoundOn.x = buttonSoundOff.x;
			buttonSoundOn.y = buttonSoundOff.y = buttonSettings.y+(distanceNum);
			
			buttonFullscreen.x = buttonSettings.x;
			buttonFullscreen.y = buttonSettings.y+(distanceNum*2);
		}else{
			buttonExit.visible = true;
			buttonSoundOn.x = buttonSoundOff.x = buttonSettings.x;
			buttonSoundOn.y = buttonSoundOff.y = buttonSettings.y+distanceNum;
			buttonSoundOn.x = buttonSoundOff.x;
			buttonSoundOn.y = buttonSoundOff.y = buttonSettings.y+(distanceNum);
			
			buttonFullscreen.x = buttonSettings.x;
			buttonFullscreen.y = buttonSettings.y+(distanceNum*2);
			
			buttonExit.x = buttonSettings.x;
			buttonExit.y = buttonSettings.y+(distanceNum*3);
		}
		
		/*itemTouchUp.x = offset.x + 90;
		itemTouchDown.x = offset.x + 90;
		itemTouchDown.y = canvasH - (offset.y + 90);
		itemTouchUp.y = itemTouchDown.y - 140;*/
		
		itemTouchUp.x = (offset.x - 200) // + 90 volt
		itemTouchUp.y = canvasH - (offset.y + 90);
		itemTouchDown.x = itemTouchUp.x + 110;
		itemTouchDown.y = itemTouchUp.y;
		
		itemTouchRight.x = canvasW - (110); //+160
		itemTouchRight.y = canvasH - (390); //+90
		itemTouchLeft.x = itemTouchRight.x - 550; //-290
		itemTouchLeft.y = itemTouchRight.y;
	}
	
	
}

/*!
 * 
 * REMOVE GAME CANVAS - This is the function that runs to remove game canvas
 * 
 */
 function removeGameCanvas(){
	 stage.autoClear = true;
	 stage.removeAllChildren();
	 stage.update();
	 createjs.Ticker.removeEventListener("tick", tick);
	 createjs.Ticker.removeEventListener("tick", stage);
 }

/*!
 * 
 * CANVAS LOOP - This is the function that runs for canvas loop
 * 
 */ 
function tick(event) {
	updateGame();
	stage.update(event);
}

/*!
 * 
 * CANVAS MISC FUNCTIONS
 * 
 */
function centerReg(obj){
	obj.regX=obj.image.naturalWidth/2;
	obj.regY=obj.image.naturalHeight/2;
}

function createHitarea(obj){
	obj.hitArea = new createjs.Shape(new createjs.Graphics().beginFill("#000").drawRect(0, 0, obj.image.naturalWidth, obj.image.naturalHeight));
}