MAX_IMG_NUMBER = 7
ASSET_PATH = "\"assets/frame1/"
ASSET_SUFFIX = ".JPG\""

var frames = [
	{
		DOMElement : "",
		IMGCounter : 0,
	},
	{
		DOMElement : "",
		IMGCounter : 0,
	},
	{
		DOMElement : "",
		IMGCounter : 0,
	}
]

FOOBAR = ""

document.addEventListener('DOMContentLoaded', function() {
	frames[0].DOMElement = document.querySelector("#left.side .frame")
	frames[1].DOMElement = document.querySelector("#right.side .frame")
	
	frames.forEach(function(val, i) {
		if (frames[i].DOMElement != "") {
			nextImage(frames[i])
		}
	});
	
}, false);

document.addEventListener("keypress", function(keyEvent) {
	switch (keyEvent.key) {
		case "q":
			targetFrame = frames[0]
			prevImage(targetFrame)
			break;
		case "w":
			targetFrame = frames[0]
			nextImage(targetFrame)
			break;
		case "a":
			targetFrame = frames[1]
			prevImage(targetFrame)
			break;
		case "s":
			targetFrame = frames[1]
			nextImage(targetFrame)
			break;
		case "y":
			targetFrame = frames[2]
			prevImage(targetFrame)
			break;
		case "x":
			targetFrame = frames[2]
			nextImage(targetFrame)
			break;
	}
}, false);

function nextImage(targetFrame) {
	console.log(targetFrame)
	if (targetFrame.IMGCounter >= MAX_IMG_NUMBER) {
		targetFrame.IMGCounter = 0
	} else {
		targetFrame.IMGCounter++
	}
	
	setFrameImage(targetFrame.DOMElement, ASSET_PATH + targetFrame.IMGCounter + ASSET_SUFFIX)
}

function prevImage(targetFrame) {
	if (targetFrame.IMGCounter <= 0) {
		targetFrame.IMGCounter = MAX_IMG_NUMBER
	} else {
		targetFrame.IMGCounter--
	}
	
	setFrameImage(targetFrame.DOMElement, ASSET_PATH + targetFrame.IMGCounter + ASSET_SUFFIX)
}

function setFrameImage(frame, imgPath) {
	frame.style.backgroundImage = "url(" + imgPath + ")"
}