class Dialog {
	constructor() {
		this.dialogElem = document.getElementById('dialog')
		this.dialogTextElem = document.getElementById('dialog-text')
		this.controlsElem = document.getElementById('controls')
		
		this.currentDialogIndex = 0
		this.dialogOrder = ['intro', 'controls', 'resume']

		this.dialogMap = {
			'intro': 'Hello! Welcome to my Interactive Portfolio!<br>Press <b>ENTER</b> to continue, or click the links below for quick access to my Resume & Projects.',
			'controls': 'Use <b>ARROW KEYS</b> or <b>WASD</b> or <b>VIM</b> keys (HJKL) to move around. <br>Press the <b>ENTER</b> key to interact with what you see on the screen.<br><br>',
			'resume': 'Walk over to the <b>DESK</b> and click on my <b>RESUME</b>.<br> The <b>RESUME</b> is marked by the flashing red indicator light.<br><br>',
			'portfolio': 'Thanks for looking at my Resume!<br>Check out my <b>PORTFOLIO</b> by clicking on the <b>BOOKSHELF</b>.<br>',
			'other': 'Now that you have looked through my Porfolio, go explore the rest of the site! <ul><li>Click on the <b>GUITAR</b> to hear my music.</li><li>Mess around on the Terminal on the <b>COMPUTER</b></li><li>And before you leave, go to the <b>TV</b> and play some of the games I have made!</li></ul> Thanks for stopping by!'
		}

		this.resumeIndicator = document.getElementById('resume-indicator')
	}

	dialogListener(event) {
		console.log(event)
			if (event.key === 'Enter' || event.type === 'touchstart') {
				event.currentTarget.self.startIntroDialogSequence()
			}
	}
	
	startIntroDialogSequence() {
		document.removeEventListener("keydown", this.dialogListener);
		document.removeEventListener('touchstart', this.dialogListener)
		if (this.currentDialogIndex > this.dialogOrder.length - 1) {
			this.dialogElem.style.display = 'none'
			dialogMode = false

		} else {
			var dialog = this.dialogOrder[this.currentDialogIndex]
			this.display(dialog)

			if (this.dialogOrder[this.currentDialogIndex] in indicator.indicatorMap) {
				indicator.show(this.dialogOrder[this.currentDialogIndex])
			}

			this.currentDialogIndex++
		}
	}

	display(dialog) {
		dialogMode = true
		dialog = this.dialogMap[dialog]
		this.dialogElem.style.display = 'block'
		this.dialogTextElem.innerHTML = dialog

		var self = this
		document.addEventListener('keydown', this.dialogListener)
		document.addEventListener('touchstart', this.dialogListener)

		document.self = self
	}

}