window.AnimTrek = {
	//parametri di configurazione
	//qui vanno inserite tutte le immagini di loading necessarie con le info relative ad ognuna (l'url da cui prenderla, il numero di blocchi di cui è composta l'animazione, l'altezza e la larghezza delle singole immagini dell'animazione
	//l'immagine deve essere una sola composta dalle singole immagini dell'animazione poste una di fianco all'altra nell'ordine in cui si vuole che appaiano
	//il parametro animSpeed indica ogni quanti millisecondi bisogna passare da un'immagine alla successiva dell'animazione
	//il parametro forcedKillTime indica dopo quanti millisecondi l'animazione verrà tolta anche se non è stata invocata la sua rimozione
	conf: {
		images: {
			"default": {
				"url": "url(./loading_FairPlay.png)",
				"blocks": 16,
				"height": 80,
				"width": 80,
				"animSpeed": 100,
				"forcedKillTime": 20000
			},
			"big": {"url": "url(./loading_FairPlay_big.png)",
				"blocks": 16,
				"height": 160,
				"width": 160,
				"animSpeed": 100,
				"forcedKillTime": 20000
			},
			"medium": {
				"url": "url(./loading_FairPlay.png)",
				"blocks": 16,
				"height": 80,
				"width": 80,
				"animSpeed": 100,
				"forcedKillTime": 20000
			},
			"small": {
				"url": "url(./loading_FairPlay_small.png)",
				"blocks": 16,
				"height": 40,
				"width": 40,
				"animSpeed": 100,
				"forcedKillTime": 20000
			}
		}
	},
	//conterrà l'elenco dei blocchi di animazione che è stato già creato nel dom
	alreadyLoaded: {},
	//conterrà le informazioni specifiche dei blocchi di animazione che sono stati creati nel dom
	created: {},
	//conterrà per ognuna delle animazioni create il passo dell'animazione a cui si è arrivati
	sel: {},
	//conterrà per ognuna delle animazioni create un riferimento all'interval che la anima in modo da poterlo fermare
	loadingInterval: {},
	//conterrà per ognuca delle animazioni create un riferimento al timer che la fermerà se non ne viene invocato il blocco prima
	killer: {},
	
	//template dell'html che si utilizza per creare i blocchi di animazione
	templateHTML: '<div class="animDiv animDiv-||name||" style="display: none; position: ||position||; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 15000;"><div style="height: 100%; width: 100%; background-color: white; opacity: 0.3; position: relative;"></div><div class="imgAnim" style="height: ||height||px; margin-top: -||marginTop||px; top: 50%; width: ||width||px; margin-left: -||marginLeft||px; left: 50%; position: absolute; background-image: ||image||;background-position: 0 0;"></div></div>',
	
	//per ogni blocco di animazione, la prima volta che viene eseguito viene costruito il suo html
	loaded: function(blockToLoad, selImage, selector){
		//se non gli viene dato un nome consideriamo "global" (cioè il loading a tuttoschermo)
		var blockName = blockToLoad;
		if (!blockName || typeof(blockName) != "string"){
			blockName = "global";
		}
		//se risulta già caricato un loading con quel nome ignora la costruzione
		if (!AnimTrek.alreadyLoaded[blockName]){
			//se il nome dell'immagine non gli viene passato allora utilizziamo il default
			var imageToPut = selImage;
			if (!imageToPut || typeof(imageToPut) != "string"){
				imageToPut = "default";
			}
			//utilizziamo il default anche se ci viene passato un nome di immagine non presente in configurazione
			if (!AnimTrek.conf.images[imageToPut]){
				imageToPut = "default";
			}
			
			//selezionamo l'elemento del dom in cui mettere il loading, se il selector passato non è una stringa o è vuoto o ancora non è un oggetto presente nel dom allora viene selezionato il body
			var objectToFill = selector;
			if (!objectToFill || typeof(objectToFill) != "string"){
				objectToFill = document.body;
			}else{
				objectToFill = document.querySelectorAll(objectToFill);
				if (objectToFill) {
					objectToFill = objectToFill[0];
				}else{
					objectToFill = document.body;
				}
			}
			//se l'oggetto in cui mettere il loading non ha position: absolute allora gli mettiamo position: relative
			
			if (window.getComputedStyle(objectToFill).getPropertyValue("position") != "absolute"){
				objectToFill.style.position = "relative";
			}
			//creiamo l'html necessario in base alle configurazioni passate
			objectToFill.innerHTML += AnimTrek.templateHTML.replace("||name||", blockName).replace("||image||", AnimTrek.conf.images[imageToPut].url).replace("||position||", blockName=="global" ? "fixed" : "absolute").replace("||height||", AnimTrek.conf.images[imageToPut].height).replace("||width||", AnimTrek.conf.images[imageToPut].width).replace("||marginTop||", parseInt(AnimTrek.conf.images[imageToPut].height/2)).replace("||marginLeft||", parseInt(AnimTrek.conf.images[imageToPut].width/2));
			
			//segnamo come creato il loading con tutte le sue configurazioni
			AnimTrek.alreadyLoaded[blockName] = true;
			AnimTrek.created[blockName] ={
				"blocks": AnimTrek.conf.images[imageToPut].blocks,
				"height": AnimTrek.conf.images[imageToPut].height,
				"width": AnimTrek.conf.images[imageToPut].width,
				"animSpeed": AnimTrek.conf.images[imageToPut].animSpeed,
				"forcedKillTime": AnimTrek.conf.images[imageToPut].forcedKillTime
			}
			AnimTrek.sel[blockName] = 0;
		}
	},
	
	loadingOn: function(blockToLoad, selImage, selector){
		//se non viene passato il nome di un loading da mostrare allora consideriamo si stia parlando del global
		var blockName = blockToLoad;
		if (!blockName || typeof(blockName) != "string"){
			blockName = "global";
		}
		//se il loading scelto non è stato ancora inserito nel dom allora lo creiamo
		if (!AnimTrek.alreadyLoaded[blockName]){
			AnimTrek.loaded(blockToLoad, selImage, selector);
		}
		
		//mostriamo il loading
		var animDiv = document.querySelectorAll(".animDiv-"+blockName);
		animDiv[0].style.display = "block";
		
		//lanciamo l'animazione
		if (!AnimTrek.loadingInterval[blockName]) {
			AnimTrek.loadingInterval[blockName] = window.setInterval(function(){
				AnimTrek.sel[blockName] = (AnimTrek.sel[blockName]+1) % AnimTrek.created[blockName].blocks;
				var animImgs = document.querySelectorAll(".animDiv-"+blockName+" .imgAnim")[0].style.backgroundPosition = (AnimTrek.sel[blockName] * AnimTrek.created[blockName].width) + " 0";
			}, AnimTrek.created[blockName].animSpeed);
		}
		//lanciamo il killer che ucciderà l'applicazione se scade il timeout
		AnimTrek.killer[blockName] = window.setTimeout(function(){
			AnimTrek.loadingOff(blockToLoad, selImage, selector);
		}, AnimTrek.created[blockName].forcedKillTime);
	},
	
	loadingOff: function(blockToLoad, selImage, selector){
		//se non viene passato il nome di un loading da mostrare allora consideriamo si stia parlando del global
		var blockName = blockToLoad;
		if (!blockName || typeof(blockName) != "string"){
			blockName = "global";
		}
		//se il loading scelto non è stato ancora inserito nel dom allora lo creiamo
		if (!AnimTrek.alreadyLoaded[blockName]){
			AnimTrek.loaded(blockToLoad, selImage, selector);
		}
		
		//nascondiamo il loading
		var animDiv = document.querySelectorAll(".animDiv-"+blockName);
		animDiv[0].style.display = "none";
		
		//se esiste l'interval dell'animazione allora lo fermiamo e fermiamo il timeout del killer
		if (AnimTrek.loadingInterval[blockName]) {
			window.clearInterval(AnimTrek.loadingInterval[blockName]);
			AnimTrek.loadingInterval[blockName] = undefined;
			if (AnimTrek.killer[blockName]){
				window.clearTimeout(AnimTrek.killer[blockName]);
			}
		}
	}
	
};