html5-slideshow/js/index.js

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

var frames = [
	{
		DOMElement : null,
		IMGCounter : 0,
		ASSET_FOLDER : "assets/frame1/",
	},
	{
		DOMElement : null,
		IMGCounter : 0,
		ASSET_FOLDER : "assets/frame2/",
	},
	{
		DOMElement : null,
		IMGCounter : 0,
		ASSET_FOLDER : "assets/fpk2/",
	}
]

FOOBAR = ""

document.addEventListener('DOMContentLoaded', function() {
	frames[0].DOMElement = document.querySelector("#left.side .frame")
	frames[1].DOMElement = document.querySelector("#right.side .frame")
	frames[2].DOMElement = document.querySelector("#fpk.side .frame")

	frames.forEach(function(val, i) {
		if (frames[i].DOMElement != null) {
			nextImage(frames[i])
		}
	});

	old_cookies = document.cookie
	setInterval(function() {
		var new_cookies = document.cookie
		if (old_cookies != new_cookies && !SET_COOKIE) {
			var cookie = new_cookies
			var deviderPos = cookie.indexOf("=")
			var name = deviderPos > -1 ? cookie.substr(0, deviderPos) : cookie;
			var value = cookie.substr(deviderPos + 1, cookie.length)

			if (name != "") {
				console.log("processing remote keypress: " + value )
				processKeypress(value)
				cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
			}
			document.cookie = cookie
			old_cookies = new_cookies
		} else {
			SET_COOKIE = false
		}
	}, 10)
}, false);



function deleteAllCookies() {
	var cookies = document.cookie.split(";");
	
	for (var i = 0; i < cookies.length; i++) {
		var cookie = cookies[i];
		var eqPos = cookie.indexOf("=");
		var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
		document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
	}
}

document.addEventListener("keypress", function(keyEvent) {
	processKeypress(keyEvent.key)
}, false);

function processKeypress(keypress) {
	switch (keypress) {
		case "q":
			targetFrame = frames[0]
			if (targetFrame.DOMElement != null) {
				prevImage(targetFrame)
				SET_COOKIE = false
			} else {
				console.log("frame not available, setting cookie")
				document.cookie = "key="+keypress
				SET_COOKIE = true
			}
			break;
		case "w":
			targetFrame = frames[0]
			if (targetFrame.DOMElement != null) {
				nextImage(targetFrame)
				SET_COOKIE = false
			} else {
				console.log("frame not available, setting cookie")
				document.cookie = "key="+keypress
				SET_COOKIE = true
			}
			break;
		case "a":
			targetFrame = frames[1]
			if (targetFrame.DOMElement != null) {
				prevImage(targetFrame)
				SET_COOKIE = false
			} else {
				console.log("frame not available, setting cookie")
				document.cookie = "key="+keypress
				SET_COOKIE = true
			}
			break;
		case "s":
			targetFrame = frames[1]
			if (targetFrame.DOMElement != null) {
				nextImage(targetFrame)
				SET_COOKIE = false
			} else {
				console.log("frame not available, setting cookie")
				document.cookie = "key="+keypress
				SET_COOKIE = true
			}
			break;
		case "y":
			targetFrame = frames[2]
			if (targetFrame.DOMElement != null) {
				prevImage(targetFrame)
				SET_COOKIE = false
			} else {
				console.log("frame not available, setting cookie")
				document.cookie = "key="+keypress
				SET_COOKIE = true
			}
			break;
		case "x":
			targetFrame = frames[2]
			if (targetFrame.DOMElement != null) {
				nextImage(targetFrame)
				SET_COOKIE = false
			} else {
				console.log("frame not available, setting cookie")
				document.cookie = "key="+keypress
				SET_COOKIE = true
			}
			break;
	}
}

function nextImage(targetFrame) {
	if (targetFrame.IMGCounter >= MAX_IMG_NUMBER) {
		targetFrame.IMGCounter = 0
	} else {
		targetFrame.IMGCounter++
	}
	
	setFrameImage(targetFrame.DOMElement, "\"" + targetFrame.ASSET_FOLDER + targetFrame.IMGCounter + ASSET_SUFFIX + "\"")
}

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

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