erikkaplun/index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>img</title>

<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/supersized.3.1.3.min.js"></script>

<script src="main.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

    <input id="kblistener" style="position: absolute; left: -1000px" />

    <div id="loading-message" style="visibility: hidden; position: absolute; top: 20px; left: 20px; z-index: 10000; background-color: white">Värskendan...</div>

</body>

</html>

## main.js
// Begin configuration

MAX_NUM_IMAGES = 15;
URL_TO_PING = 'http://localhost:8080/action';
DELAY_BEFORE_RELOAD = 2000;
KB_RESTORE_FOCUS_INTERVAL = 1000;
RETRY_LOAD_DELAY = 5000;

SUPERSIZED_OPTIONS = {
    image_protect: 0, keyboard_nav: 0, navigation: 0, thumbnail_navigation: 0,
    slide_counter: 0, slide_caption: 0, slide_captions: 0
};

// End configuration


$(function() {
    beginLoad();
    setupKbListener();
});


function beginLoad() {
    var loadedCount = 0;
    var loadedImages = [];

    for (var i = 0; i < MAX_NUM_IMAGES; i += 1) {
        var img = new Image();
        img.src = "pilt" + i + ".jpg";

        console.debug("sent request for " + img.src);

        img.onload = img.onabort = function() {
            console.debug("onload or onabort called: ", this.src);

            loadedImages.push(this.src);

            startSlideshowIfFinished();
        };

        img.onerror = function() {
            console.debug("failed to load: ", this.src);

            startSlideshowIfFinished();
        };
    }

    function startSlideshowIfFinished() {
        if (++loadedCount === MAX_NUM_IMAGES) {
            console.debug("loading completed");

            if (loadedImages.length === 0) {
                console.debug("no images were loaded; retrying in %sms...", RETRY_LOAD_DELAY);
                setTimeout(function () { location.reload(); },
                           RETRY_LOAD_DELAY);
                return;
            }

            startSlideshow(loadedImages);
        }
    }
}


function startSlideshow(images) {
    console.debug("starting slideshow of %s images", images.length);

    images.sort();

    console.debug("images = ", $(images).map(function (_, i) { return i.split('/').pop(); }));

    var slides = $(images).map(function (_, image) {
        return {image: image};
    });

    SUPERSIZED_OPTIONS.slides = slides;

    $.supersized(SUPERSIZED_OPTIONS);
}


function setupKbListener() {
    $('#kblistener').focus().bind('keydown', function(event) {
        if (event.keyCode !== 32)  // Space
            return;

        $('#loading-message').css('visibility', 'visible');

        $.get(URL_TO_PING)

        setTimeout(function() { location.reload(); },
                   DELAY_BEFORE_RELOAD);
    });

    // Make sure the focus stays there:
    setInterval(function() { $('#kblistener').focus(); },
                KB_RESTORE_FOCUS_INTERVAL);
}


if (typeof console === 'undefined')
    console = {debug: $.noop, error: $.noop};
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

	<title>img</title>

	<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/supersized.3.1.3.min.js"></script>

	<script src="main.js" type="text/javascript"></script>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	</head>

	<body>

	<input id="kblistener" style="position: absolute; left: -1000px" />

	<div id="loading-message" style="visibility: hidden; position: absolute; top: 20px; left: 20px; z-index: 10000; background-color: white">Värskendan...</div>

	</body>

	</html>
	// Begin configuration

	MAX_NUM_IMAGES = 15;
	URL_TO_PING = 'http://localhost:8080/action';
	DELAY_BEFORE_RELOAD = 2000;
	KB_RESTORE_FOCUS_INTERVAL = 1000;
	RETRY_LOAD_DELAY = 5000;

	SUPERSIZED_OPTIONS = {
	image_protect: 0, keyboard_nav: 0, navigation: 0, thumbnail_navigation: 0,
	slide_counter: 0, slide_caption: 0, slide_captions: 0
	};

	// End configuration


	$(function() {
	beginLoad();
	setupKbListener();
	});


	function beginLoad() {
	var loadedCount = 0;
	var loadedImages = [];

	for (var i = 0; i < MAX_NUM_IMAGES; i += 1) {
	var img = new Image();
	img.src = "pilt" + i + ".jpg";

	console.debug("sent request for " + img.src);

	img.onload = img.onabort = function() {
	console.debug("onload or onabort called: ", this.src);

	loadedImages.push(this.src);

	startSlideshowIfFinished();
	};

	img.onerror = function() {
	console.debug("failed to load: ", this.src);

	startSlideshowIfFinished();
	};
	}

	function startSlideshowIfFinished() {
	if (++loadedCount === MAX_NUM_IMAGES) {
	console.debug("loading completed");

	if (loadedImages.length === 0) {
	console.debug("no images were loaded; retrying in %sms...", RETRY_LOAD_DELAY);
	setTimeout(function () { location.reload(); },
	RETRY_LOAD_DELAY);
	return;
	}

	startSlideshow(loadedImages);
	}
	}
	}


	function startSlideshow(images) {
	console.debug("starting slideshow of %s images", images.length);

	images.sort();

	console.debug("images = ", $(images).map(function (_, i) { return i.split('/').pop(); }));

	var slides = $(images).map(function (_, image) {
	return {image: image};
	});

	SUPERSIZED_OPTIONS.slides = slides;

	$.supersized(SUPERSIZED_OPTIONS);
	}


	function setupKbListener() {
	$('#kblistener').focus().bind('keydown', function(event) {
	if (event.keyCode !== 32) // Space
	return;

	$('#loading-message').css('visibility', 'visible');

	$.get(URL_TO_PING)

	setTimeout(function() { location.reload(); },
	DELAY_BEFORE_RELOAD);
	});

	// Make sure the focus stays there:
	setInterval(function() { $('#kblistener').focus(); },
	KB_RESTORE_FOCUS_INTERVAL);
	}


	if (typeof console === 'undefined')
	console = {debug: $.noop, error: $.noop};