class Dialog {
	constructor() {
		this.dialogElem = document.getElementById('dialog')
		this.dialogTextElem = document.getElementById('dialog-text')
		
		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>.',
			'portfolio': 'Thanks for looking at my Resume!<br>Check out my <b>PORTFOLIO</b> by clicking on the <b>BOOKSHELF</br>.'
		}

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

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

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

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

			this.currentDialogIndex++

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

	}

	display(dialog) {
		this.dialogElem.style.display = 'block'
		this.dialogTextElem.innerHTML = this.dialogMap[this.dialogOrder[this.currentDialogIndex]]
	}

}