/////////////////////////////
// Main game

var game = new Phaser.Game(1000, 800, Phaser.CANVAS, "RoundRectButton",
	{preload:preload, create:create, update:update, render:render}
);

var textAlign, textAlign2;

function preload() {
	// game.load.image('phaser', '../../resources/image/phaser.png');
	// game.load.spritesheet('button', './image/button_basic.png', 200, 100);
}

function create() {
	// var i = game.add.image(game.world.centerX, game.world.centerY + 70, 'phaser');
	// i.anchor.set(0.5);
	game.stage.backgroundColor = '#4d4d4d';
	graphics = game.add.graphics(0, 0);

	printHowToPlay(
		"가나다라마바사 아자차카타파하 \n \
		가나다라마바사 아자차카타파하"
	);

	SetBounds();

    game.input.onDown.add(changeAlign, this);
}

function SetBounds() {
	this.BOTTOM_BAR_HEIGHT					= 50;
	this.BOTTOM_BAR_NAME_WIDTH				= 200;
	this.BOTTOM_BAR_TEXT_OFFSET				= 10;

	this.bottomAreaPositionY = game.world.height - this.BOTTOM_BAR_HEIGHT;

	let style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" };

	let posX = this.BOTTOM_BAR_TEXT_OFFSET;
	this.leftText = game.add.text(posX, this.bottomAreaPositionY, "왼쪽", style)
		.setTextBounds(0, 0, this.BOTTOM_BAR_NAME_WIDTH, this.BOTTOM_BAR_HEIGHT)
		.addColor('#ffffff', 0);
		// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
	this.leftText.stroke = "#333";
	this.leftText.strokeThickness = 5;

	// let style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "bottom" };
	style.align = "center";
	style.boundsAlignH = "center";
	posX = game.world.width / 2 - this.BOTTOM_BAR_NAME_OFFSET_RIGHT;
	this.centerText = game.add.text(0, this.bottomAreaPositionY, "중간", style)
		.setTextBounds(0, 0, game.world.width, this.BOTTOM_BAR_HEIGHT)
		.addColor('#ffffff', 0);
		// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);

	// let style = { font: "32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "bottom" };

	style.align = "right";
	style.boundsAlignH = "right";
	posX = game.world.width - this.BOTTOM_BAR_NAME_WIDTH - this.BOTTOM_BAR_TEXT_OFFSET;
	this.rightText = game.add.text(posX, this.bottomAreaPositionY, "오른쪽", style)
		.setTextBounds(0, 0, this.BOTTOM_BAR_NAME_WIDTH, this.BOTTOM_BAR_HEIGHT)
		.addColor('#ffffff', 0);
		// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
}

function changeAlign() {
	console.log("print dummy");


    textAlign.text = "가나다라마바사 아자차카타파하 \n \
		가나다라마바사 아자차카타파하";

  //   textAlign2.text = "가나다라마바사 아자차카타파하 \n \
		// 가나다라마바사 아자차카타파하";
}

function printHowToPlay(text) {
	const style_origin = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" };
	let howToPlayText = game.add.text(0, 0, text, style_origin);
	howToPlayText.setTextBounds(100, 100, game.world.width - 200, 200);
	howToPlayText.stroke = "#333";
	howToPlayText.strokeThickness = 5;


	var ipsum = "Click to change alignment\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur?\n\nSi longus, levis; Ita relinquet duas, de quibus etiam atque etiam consideret. Optime, inquam. Sed quanta sit alias, nunc tantum possitne esse tanta.\n\nQuid, si etiam iucunda memoria est praeteritorum malorum?";

	var style = { font: "16px Arial", fill: "#fff",
        align: "right", // the alignment of the text is independent of the bounds, try changing to 'center' or 'right'
        boundsAlignH: "right", 
        boundsAlignV: "top", 
        wordWrap: true, wordWrapWidth: 300 };

    textAlign = game.add.text(600, 100,ipsum, style);

    // textAlign.setTextBounds(16, 16, 768, 568);
	textAlign.stroke = "#333333";
	textAlign.strokeThickness = 5;


/*
    textAlign2 = game.add.text(200, 300, ipsum, style);

    //	Center align
    // textAlign2.anchor.set(0.5);
    // textAlign2.align = 'right';
    // textAlign2.setTextBounds(16, 216, 368, 768);

    //	Font style
    // textAlign2.font = 'Arial Black';
    // textAlign2.fontSize = 50;
    // textAlign2.fontWeight = 'bold';

    //	Stroke color and thickness
    textAlign2.stroke = '#000000';
    textAlign2.strokeThickness = 5;
    // textAlign2.fill = '#43d637';
    */
}


function update() {
}

function render() {
}