$(document).ready(function () {
	// HTML-mal for et bilde med tittel og tekst i liste over bilder for slideshow.
	var HTML = '<li><img src="/slideshow/{filnavn}" alt="" /><h4>{tittel}</h4><p>{tekst}</p></li>';
	// Tid i sekunder mellom hvert bilde i slideshowet
	var INTERVALL = 10;
	
	var index = 0,	// Aktiv indeks som indikerer hvilket bilde i slideshowet som vises.
		liste,		// jQuery-referanse til listen over bilder
		bredde;		// Bredde i piksler for hvert bilde i slideshowet
	
	/**
	 * Animerer listen med bilder slik at neste bilde med tilhørende tittel og tekst
	 * vises. Hvis aktiv indeks i listen over bilder tilsvarer siste bilde i listen
	 * vil listen bli animert tilbake til første bildet.
	 */
	function visNeste () {
		if (index == (liste.children('li').length - 1)) {
			liste.animate({marginLeft: 0}, 1000, 'swing');
			index = 0;
		}
		else {
			liste.animate({marginLeft: -(bredde * ++index)}, 500, 'swing');
		}
	}
	
	// Initialisering
	$('#slideshow').each(function () {
		var beholder = $(this);
		
		$.getJSON('/slideshow/bilder.json', function (data) {
			if (data.length) {
				liste = $('<ul />').appendTo(beholder);
				for (var i = 0; i < data.length; i++) {
					liste.append($.substitute(HTML, data[i]));
				}

				bredde = liste.children('li:first').width();
				liste.width(bredde * data.length);
				setInterval(visNeste, INTERVALL * 1000);
			}
		});
	});
});