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>
</head>

<body></body>

</html>

## main.js
MAX_NUM_IMAGES = 15;

URL_TO_PING = 'http://localhost:8080/action';

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


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

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

    function checkIfLoaded() {
        if (loadedCount === MAX_NUM_IMAGES) {
            console.debug("All images finished loading");
            writeImages(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);

            loadedCount += 1;
            checkIfLoaded();
        };

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

            loadedCount += 1;
            checkIfLoaded();
        };
    }
});


function writeImages(images) {
    console.debug("writeImages()");

    images.sort();

    var slides = [];

    for (var i = 0; i < images.length; i += 1) {
        slides.push({image: images[i]});
    }

    console.debug("slides = ", slides);

    SUPERSIZED_OPTIONS.slides = slides;

    $.supersized(SUPERSIZED_OPTIONS);
}


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

    $.get(URL_TO_PING, function() {
        window.location.reload();
    }).error(function() {
        console.error("Couldn't load URL");
    });

    // If the above does not work:

    // // Have to use an Image to ping the URL; XHR is forbidden across
    // // domains/locally:
    // var dummy = new Image();
    // dummy.src = URL_TO_PING;
    // dummy.onload = dummy.onerror = function() {
    //     window.location.reload();
    // };
});
	<!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>
	</head>

	<body></body>

	</html>
	MAX_NUM_IMAGES = 15;

	URL_TO_PING = 'http://localhost:8080/action';

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


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

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

	function checkIfLoaded() {
	if (loadedCount === MAX_NUM_IMAGES) {
	console.debug("All images finished loading");
	writeImages(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);

	loadedCount += 1;
	checkIfLoaded();
	};

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

	loadedCount += 1;
	checkIfLoaded();
	};
	}
	});


	function writeImages(images) {
	console.debug("writeImages()");

	images.sort();

	var slides = [];

	for (var i = 0; i < images.length; i += 1) {
	slides.push({image: images[i]});
	}

	console.debug("slides = ", slides);

	SUPERSIZED_OPTIONS.slides = slides;

	$.supersized(SUPERSIZED_OPTIONS);
	}


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

	$.get(URL_TO_PING, function() {
	window.location.reload();
	}).error(function() {
	console.error("Couldn't load URL");
	});

	// If the above does not work:

	// // Have to use an Image to ping the URL; XHR is forbidden across
	// // domains/locally:
	// var dummy = new Image();
	// dummy.src = URL_TO_PING;
	// dummy.onload = dummy.onerror = function() {
	// window.location.reload();
	// };
	});