function init() {
	category.init();
	list.init();
} // End init
addListener(window,"load",init);


var category = {

	menuElem: null,	// Referens till elementet för kategorimenyn
	imagesElem: null,			// Referens till elementet där de små bildrutorna ska läggas in
	largeImgElem: null,		// Referens till img-element för den stora bilden

	init: function() {

		category.menuElem = document.getElementById("categoryMenu");
		category.menuElem.selectedIndex = 0;
		category.imagesElem = document.getElementById("images");
		addListener(category.menuElem,"change",category.category);
		category.largeImgElem = document.getElementById("largeImg");
	}, // End init

	// Avläs menyn för val av kategori
	category: function() {
		var catNr;	// Index för valt alternativ i menyn = nummer för vald kategori
		catNr = category.menuElem.selectedIndex;
		category.requestImages(catNr);
		category.menuElem.selectedIndex = 0;
	}, // End category

	// Gör ett Ajax-anrop för att läsa in begärd fil
	 requestImages: function(nr) { // Parametern nr används i url:en för den fil som ska läsas in
		var request; // Object för Ajax-anropet
		request = new XMLHttpRequest();
		request.open("GET","categories/images"+nr+".xml",true);
		request.send(null); // Skicka begäran till servern
		request.onreadystatechange = function () { // Funktion för att avläsa status i kommunikationen
			if ( (request.readyState === 4) && (request.status === 200) ) { category.getImages(request.responseXML);
			}
			// Då kommunikationen är klar blir readyState 4 och om filen fanns blir status 200 (OK).
		};
	}, // End requestImages

		// Funktion för att tolka XML-koden och skapa HTML-kod med innehållet som ska visas på sidan
	getImages: function(XMLcode) {

		var HTMLcode;		// Textsträng för den HTML-kod som ska skapas
		var categoryElem;	// Referens till category-elementet i XML-koden
		var urlElems;		// Array med url-elementen i XML-koden
		var captionElems;	// Array med caption-elementen i XML-koden
		var i;				// Loopvariabel
		var imgElems;		// Array med referenser till alla nya img-taggar för de små bilderna

		categoryElem = XMLcode.getElementsByTagName("category");
		urlElems = XMLcode.getElementsByTagName("url"); // Alla url-element
		captionElems = XMLcode.getElementsByTagName("caption"); // Alla caption-element
		HTMLcode = "<h3>" + categoryElem[0].firstChild.data + "</h3>";
		for (i=0; i<urlElems.length; i++) {
			HTMLcode += '<div><p>' + captionElems[i].firstChild.data + '</p><img src="' + urlElems[i].firstChild.data + '" alt=""></div>';
		}

		category.imagesElem.innerHTML = HTMLcode;
		imgElems = document.getElementById("images").getElementsByTagName("img");

		for (i=0; i<imgElems.length; i++) {
			addListener(imgElems[i],"mouseover",category.showLargeImage);
			addListener(imgElems[i],"click",list.addToList);
		}
	}, // End getImages

	// Visa den stora bild som motsvarar den lilla bild som man pekar på
	 showLargeImage: function() {
		category.largeImgElem.src = this.src;
	} // End showLargeImage

}; // End Category




var list = {

	elem: null,			// Referens till element med valda bilder
	imgElem: null,		// Referens till element för liten bild i listan
	imgUrls: null,			// Array med url:er till valda bilder
	imgCaptions: null,		// Array med bildtexter till valda bilder

	init: function() {

		list.elem = document.getElementById("list");
		list.imgElem = document.getElementById("listImg");
		addListener(document.getElementById("saveBtn"),"click",list.saveList);
		addListener(document.getElementById("goBtn"),"click",function() {location.href = "slideshow.htm";});
		list.imgUrls = [];
		list.imgCaptions = [];
	}, // End init

	// Lägg in den bild man klickat på i listan. Titeln ska visas i listan på sidan. Både titel och url sparas i arrayerna.
	 addToList: function() {
		var titleElem;	// Referens till det element som innehåller bildens titel.
		var newElem;	// Nytt element som skapas
		titleElem = this.parentNode.getElementsByTagName("p")[0];
		newElem = titleElem.cloneNode(true);
		addListener(newElem,"click",list.removeFromList);
		addListener(newElem,"mouseover",list.showListImg);
		addListener(newElem,"mouseout",list.hideListImg);
		list.elem.appendChild(newElem);
		list.imgUrls.push(this.src);
		list.imgCaptions.push(titleElem.innerHTML);
	}, // End addToList

	// Ta bort den rubrik som användaren klickat på ur listan, dvs ta bort elementet och motsvarande url och rubrik ur arrayerna.
	removeFromList: function() {
		var ix;	// index till markerad bild
		ix = list.getIndex(this);
		list.imgUrls.splice(ix,1);
		list.imgCaptions.splice(ix,1);
		list.elem.removeChild(this);
		list.imgElem.style.visibility = "hidden"; // Dölj även den lilla bilden, ifall den visades
	}, // End removeFromList

	// Ta fram index för en bild i listan.
	getIndex: function(thisP) { // thisP är referenstill det p-element som ska sökas upp i listan
		var pElems;	// Array med referenser till alla p-element i listan
		var i;		// Loopvariabel
		pElems = list.elem.getElementsByTagName("p");
		for (i=0; i<pElems.length; i++) {
			if (pElems[i] === thisP) { return i;
			}
		}
	}, // End getIndex

	// Visa en liten "popup"-bild för den rubrik i listan som man pekar på
	showListImg: function(e) { // e är event-objektet
		list.imgElem.src = list.imgUrls[list.getIndex(this)]; // Ta fram url till bilden
		list.imgElem.style.left = (e.clientX+window.pageXOffset+5) + "px"; // e.clientX och e.clientY är muspekarens koordinater i fönstret
		list.imgElem.style.top = (e.clientY+window.pageYOffset+5) + "px";  // window.pageXOffset och window.pageYOffset är antal pixlar fönstret scrollats
		list.imgElem.style.visibility = "visible";
	}, // End showListImg

	// Dölj den lilla "popup"-bilden
	hideListImg: function() {
		list.imgElem.style.visibility = "hidden";
	}, // End hideListImg

	// Spara listan i web storage. Använd #.# som skiljetecken i arrayerna, vilket förutsätter att sekvensen ej förekommeri någon url eller bildtitel
	saveList: function() {
		localStorage.imgUrls = list.imgUrls.join("#.#");
		localStorage.imgCaptions = list.imgCaptions.join("#.#");
	} // End saveList



	}; // End List