ctrlIsPressed = false
recentImage = 97
IMAGES_COUNT = recentImage + 1

function getRecentImage() {

	// TO DO

}

function getImage(filename) {
	
	// --- AJAX ----------
	
	next_image_request = new XMLHttpRequest()	
	parameter = "filename=" + encodeURIComponent(filename)

	next_image_request.open("POST", "scripts/getter.php", true)
	next_image_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
	
	// Callback function
	
	next_image_request.onreadystatechange = function() {
		if (this.readyState != 4) {
			document.getElementById("image").innerHTML = "<img src='../design/preloader_dark.gif' width='32' height='32' />"
		} else {
			if (this.status == 200) {
				document.getElementById("image").innerHTML = this.responseText
			}
		}
	}

	next_image_request.send(parameter)	
	
}

document.onkeydown = function(e) {
	switch (e.keyCode) {
		case 17: { // Ctrl
			document.getElementById("control").className = "key_pressed"
			ctrlIsPressed = true
			break
		}
		case 37: { // Left arrow
			document.getElementById("left_arrow").className = "key_pressed"
			if (ctrlIsPressed) {			
				recentImage = (recentImage - 1) % IMAGES_COUNT
				if (recentImage <= 16) {
					recentImage = 96
				}
				getImage(recentImage) 
			} 
			break
		}
		case 39: { // Right arrow
			document.getElementById("right_arrow").className = "key_pressed"
			if (ctrlIsPressed) {
				recentImage = (recentImage + 1) % IMAGES_COUNT
				if (recentImage <= 16) {
					recentImage = 17
				}
				getImage(recentImage) 
			}
			break
		}		
	}
}

document.onkeyup = function(e) {
	switch (e.keyCode) {
		case 17: {
			document.getElementById("control").className = "key"
			ctrlIsPressed = false
			break
		}
		case 37: {
			document.getElementById("left_arrow").className = "key"
			break
		}
		case 39: {
			document.getElementById("right_arrow").className = "key"
			break		
		}
	}
}