/* -------------------------------------------------------------------
	GameStop - User interface Javascript Library
	
	Version:			1.0 - October 11 2009
	Last revision:		05.18.10
	Author:				Alessandro Placidi
	Contact:			a.placidi@mindgear.it
	Contributors:		Stefano Rossi
						
	Copyright 2009 GameStop Italy Srl
------------------------------------------------------------------- */


/* -- INDEX ------------------

[0.0] - Funzioni principali di setup
[1.0] - Funzioni generiche
[2.0] - Funzioni per il browser dei prodotti
[3.0] - Funzioni per la scheda prodotto
[4.0] - Funzioni per il carrello
[5.0] - Funzioni per il checkout
[6.0] - Funzioni per le main pages
[7.0] - Funzioni per la pagina dettagli utente

--------------------------- */




/* 0.0 - FUNZIONI PRINCIPALI DI SETUP
-------------------------------------------------------------------------------------------------------------------------------------------------------- */

// Questa è la funzione che gestisce il setup generale della pagina
function generalSetup() {
	promotionRolloverSetup();
}

// Chiamate per il Side My Account
function sideMyAccountSetup() {
	profileStars();

}

// Chiamate per il Side My Account
function cartSetup() {
	cartTabSetup();

}

// Chiamate per il browser
function browserSetup() {
//	browserBuySetup();
	browserInStoreSetup();
	filtersSetup();
	browserCheckBoxes();

}

// Chiamate per la scheda di dettaglio
function detailsSetup() {
	pegiRolloverSetup();
//	applyShadow("p", "price", "shadow");
//	applyShadow("p", "text", "shadow");
	detailsBuySetup();
	productCheckBoxes();
}

// Chiamate per il checkout
function checkoutSetup() {
	giftAndInvoiceSetup();
//	applyShadow("a", "description", "shadow");
//	applyShadow("p", "description", "shadow");
//  applyShadow("p", "price", "shadow");
  checkoutConfirmButton("confirmCheckContainer");
}




/* 1.0 - FUNZIONI GENERICHE
-------------------------------------------------------------------------------------------------------------------------------------------------------- */

// Questa è la funzione che gestisce il setup dei rollover delle promozioni
function promotionRolloverSetup() {
	
	// Creo un elenco di tutti i paragrafi e con un ciclo cerco quelli che hanno la classe "promotionContainer"
	var paragraph_list = document.getElementsByTagName("p");
	for (loop=0; loop<paragraph_list.length; loop++) {
		if (paragraph_list[loop].className == "promotionsContainer") {
			
			//Al loro interno, creo un elenco di tutti i link e con un ciclo cerco quelli che abbiano un nome di classe, non importa quale
			link_list = paragraph_list[loop].getElementsByTagName("a");
			for (loop2=0; loop2<link_list.length; loop2++) {
				if (link_list[loop2].className != "") {
					
					// Al loro interno, creo un elenco degli span ed al primo, che corrisponde al fumetto della promo, applico le azioni di setup:
					span_list = link_list[loop2].getElementsByTagName("span");
					
					// 1: Posiziono
					//span_list[0].style.left = (span_list[0].offsetWidth * -0.5) + (link_list[loop2].offsetWidth / 2) + "px";
					//span_list[0].style.top = link_list[loop2].offsetHeight - 7 + "px";
					span_list[0].style.left = "-62.5px";
					span_list[0].style.top = "23px"
					
					// 2: Nascondo
					span_list[0].style.display = "none";
				}
			}
		}
	}
	
	var outer_span_list = document.getElementsByTagName("span");
	for (loop=0; loop<outer_span_list.length; loop++) {
		if (outer_span_list[loop].className == "promotionsContainer") {
			
			//Al loro interno, creo un elenco di tutti i link e con un ciclo cerco quelli che abbiano un nome di classe, non importa quale
			link_list = outer_span_list[loop].getElementsByTagName("a");
			for (loop2=0; loop2<link_list.length; loop2++) {
				if (link_list[loop2].className != "") {
					
					// Al loro interno, creo un elenco degli span ed al primo, che corrisponde al fumetto della promo, applico le azioni di setup:
					 var span_list = link_list[loop2].getElementsByTagName("span");
					
					// 1: Posiziono
					//span_list[0].style.left = (span_list[0].offsetWidth * -0.5) + (link_list[loop2].offsetWidth / 2) + "px";
					//span_list[0].style.top = link_list[loop2].offsetHeight - 7 + "px";
					span_list[0].style.left = "-62.5px";
					span_list[0].style.top = "23px"
					
					// 2: Nascondo
					span_list[0].style.display = "none";
				}
			}
		}
	}
	
	var div_list = document.getElementsByTagName("div");
	for (loop=0; loop<div_list.length; loop++) {
		if (div_list[loop].className == "promotionsContainer") {
			
			//Al loro interno, creo un elenco di tutti i link e con un ciclo cerco quelli che abbiano un nome di classe, non importa quale
			link_list = div_list[loop].getElementsByTagName("a");
			for (loop2=0; loop2<link_list.length; loop2++) {
				if (link_list[loop2].className != "") {
					
					// Al loro interno, creo un elenco degli span ed al primo, che corrisponde al fumetto della promo, applico le azioni di setup:
					var span_list = link_list[loop2].getElementsByTagName("span");
					
					// 1: Posiziono
					//span_list[0].style.left = (span_list[0].offsetWidth * -0.5) + (link_list[loop2].offsetWidth / 2) + "px";
					//span_list[0].style.top = link_list[loop2].offsetHeight - 7 + "px";
					span_list[0].style.left = "-62.5px";
					span_list[0].style.top = "23px"
					
					// 2: Nascondo
					span_list[0].style.display = "none";
				}
			}
		}
	}
}

// Questa è la funzione che gestisce le apparizioni e le sparizioni dei rollover delle promozioni
function promotionRollover(action, elemento) {
	// Creo un elenco degli span contenuti nel link che ha richiamato la funzione
	var span_list = elemento.getElementsByTagName("span");
	
	// A seconda dell'azione (rollover o rollout) modifico il display mode del fumetto stesso
	// ed imposto uno z-index maggiore per metterlo visibile rispetto agli altri elementi
	if (action=="over") {
		span_list[0].style.display="block";
		span_list[0].style.zIndex = 100;
	} else if (action=="out") {
		span_list[0].style.display="none";
		span_list[0].style.zIndex = 0;
	}
}

// Questa funzione gestisce le ombre sul testo
function applyShadow(tag_to_search, class_to_search, shadow_class) {
	
	// Creo una matrice con tutti i tag analoghi al parametro specificato e con un ciclo li faccio passare per cercare quelli la cui classe è analoga a quella specificata
	var element_list = window.document.getElementsByTagName(tag_to_search);
	for (loop=0; loop<element_list.length; loop++) {
		if (element_list[loop].className == class_to_search) {
			
			// Di questi salvo l'HTML in una variabile ed aggiungo uno span per l'ombra, utilizzando la classe specificata nella chiamata della funzione
			content = element_list[loop].innerHTML;
			element_list[loop].innerHTML = content + '<span class="' + shadow_class + '">' + content + "</span>";
		}
	}
}

// Questa funzione gestisce il testo di placeholder nei textbox
function textboxPlaceholderText(action, textbox_id, text_color, placeholder_color) {
	
	// Controllo se è la prima volta che la funzione viene eseguita verificando il valore di una proprietà custom chiamata "first_run"
	if (window.document.getElementById(textbox_id).first_run == null) {
		
		// Se è la prima volta, cambio il valore di "first_run" in modo da rendere unico il passaggio
		window.document.getElementById(textbox_id).first_run = false;
		
		// Assegno tre proprietà custom al textbox:
		// - 1 . placeholder_string, che ottengo salvando il valore del campo alla partenza. Questo rappresenta il valore da mostrare se il campo è lasciato vuoto
		window.document.getElementById(textbox_id).placeholder_string = window.document.getElementById(textbox_id).value;
		
		// - 2 . text_color, che assegno di default al nero se il parametro opzionale "text_color" è vuoto
		// Rappresenta il colore del testo immesso nel textbox
		if (text_color==null) {
			window.document.getElementById(textbox_id).text_color = "#000";
		} else {
			window.document.getElementById(textbox_id).text_color = text_color;
		}
		
		// - 3 . placeholder_color, che assegno di default al grigio se il parametro opzionale "placeholder_color" è vuoto
		// Rappresenta il colore del testo di placeholder immesso nel textbox
		if (placeholder_color==null) {
			window.document.getElementById(textbox_id).placeholder_color = "#999";
		} else {
			window.document.getElementById(textbox_id).placeholder_color = placeholder_color;
		}
	}
	
	if (action=="clickOver") {
		// Se l'azione con cui è stata chiamata la funzione è di clic ed nel textbox c'è il testo di placeholder, allora svuoto il campo di testo e ne cambio il colore in quello per il testo
		// Controllo che il valore del campo sia uguale a quello di placeholder prima di svuotare, per non eliminare quello che l'utente ha eventualmente inserito
		if (window.document.getElementById(textbox_id).value==window.document.getElementById(textbox_id).placeholder_string) {
			window.document.getElementById(textbox_id).value="";
			window.document.getElementById(textbox_id).style.color=window.document.getElementById(textbox_id).text_color;
			//window.document.getElementById(textbox_id).className = "filledContent";
		}
	} else if (action=="clickOut") {
		// Se l'azione con cui è stata chiamata la funzione è di blur ed il campo è stato lasciato vuoto, allora ripristino il testo di placeholder con il suo colore
		if (window.document.getElementById(textbox_id).value=="") {
			window.document.getElementById(textbox_id).value = window.document.getElementById(textbox_id).placeholder_string;
			window.document.getElementById(textbox_id).style.color = window.document.getElementById(textbox_id).placeholder_color;
			//window.document.getElementById(textbox_id).removeAttribute("class");
		}
	}	
}

// Questa è la funzione che gestisce l'aumento o la diminuzione dei valori nei campi di testo
function quantityVariation(action, element) {
	
	// Individuo il textfield bersaglio
	var input_list = element.parentNode.getElementsByTagName("input");
	var target_input = input_list[0];
	
	// Estrapolo un numero intero dal value del textfield bersaglio
	var target_input_numeric_value = parseInt(target_input.value);
	
	// A seconda dell'azione invocata procedo a sommare o sottrarre dal valore del campo
	// Effettuo anche un controllo che il campo non sia vuoto. In caso mi comporto di conseguenza
	if (action == "subtract") {
		if (target_input.value > 0) {
			target_input_numeric_value--;
		} else if (target_input.value == "") {
			target_input_numeric_value = 0;
		}
	} else if (action == "sum") {
		if (target_input.value >= 0) {
			target_input_numeric_value++;
		} else if (target_input.value == "") {
			target_input_numeric_value = 1;
		}
	}
	
	// Applico il valore elaborato al textfield bersaglio
	target_input.value = target_input_numeric_value;
}


// Questa è la funzione che gestisce le stelle in relazione al completamento del profilo
function profileStars() {
	
	// Estrapolo la percentuale dal div con id "profilePercentage", ne estraggo il numero e lo divido per 10 arrotondando per difetto
	var raw_value = document.getElementById("profilePercentage").innerHTML;
	var cleanedup_value = parseInt(raw_value);
	var class_index = Math.floor(cleanedup_value/10);
	
	// Assegno al paragrafo una classe composta dalla particella "stars-" e dal numero calcolato
	document.getElementById("profileContainer").className = "stars-" + class_index;
}

// Questa è la funzione che gestisce l'animazione verticale dei pannelli
// I parametri sono:
// - element: il pannello da aprire o chiudere
// - action: l'azione da compiere, che può essere "open" o "close"
// - start: il frame di partenza dell'animazione, se servisse iniziare da più avanti. Di solito è 0
// - calling_link: il riferimento al link che ha invocato l'animazione
// - calling_link_onclick: il parametro "onclick" del link che ha invocato l'animazione
// - dependent_div: il riferimento ad un altro div dipendente che si deve muovere insieme all'elemento (esempio: la sezione inStore del browser) per il comportamento anomalo di IE6 e IE7
function verticalAnimation(element, action, start, calling_link, calling_link_onclick, dependent_div) {
	
	// Inizio annullando l'onclick del tasto che ha attivato l'animazione, così da evitare effetti spiacevoli
	calling_link.onclick = null;
	
	// In base all'azione aumento o diminuisco l'altezza dell'incremento equivalente al valore di start
	if (action == "open") {
		element.style.height = parseInt(element.offsetHeight) + element.step_details[start] + "px";
	} else if (action == "close") {
		element.style.height = parseInt(element.offsetHeight) - element.step_details[start] + "px";
	}
	
	// Controllo se c'è un div dipendente e ne riassegno la classe. Fonte: http://stackoverflow.com/questions/1228427/elements-positioned-relatively-dont-move-when-the-dom-is-updated-ie6-and-ie7
	if (dependent_div != null) {
		dependent_div.className = dependent_div.className;
	}
	
	// Aumento start di 1, così da proseguire all'incremento successivo
	start++;
	
	// Creo la funzione da richiamare con il setTimeout
	function call() {
		verticalAnimation(element, action, start, calling_link, calling_link_onclick, dependent_div);
	}
	
	// Controllo se l'animazione ha già effettuato tutte le sue iterazioni. In questo caso interrompo il temporizzatore e riattivo l'onclick originale del link
	if (start==element.iterations) {
		clearTimeout(timer);
		calling_link.onclick = calling_link_onclick;
		return;
	}
	
	// Con questa istruzione faccio ripetere questa stessa funzione
	timer = setTimeout(call,50);
}








/*function buyAlertSetup() {
	var div_list = document.getElementsByTagName("div");
	var p_list = document.getElementsByTagName("p");
	
	for (loop=0; loop<div_list.length; loop++) {
		if (div_list[loop].className == "actionButtons") {
			var span_list = div_list[loop].getElementsByTagName("span");
			alert(span_list.length);
			span_list[0].style.display = "none";
		}
	}
	
	for (loop=0; loop<p_list.length; loop++) {
		if (p_list[loop].className == "buyNowButton") {
			var span_list = p_list[loop].getElementsByTagName("span");
			span_list[0].style.display = "none";
		}
	}
}*/


// Questa è la funzione che gestisce l'apertura e la sparizione dei fumetti di avviso in caso l'ecommerce sia momentaneamente spento
function buyAlertShowAndHide(element, action) {
	if (action == "show") {
		var span_list = element.parentNode.parentNode.getElementsByTagName("span");
		span_list[0].style.display = "block";
	} else if (action == "hide") {
		var span_list = element.parentNode.parentNode.getElementsByTagName("span");
		span_list[0].style.display = "none";
	}
}









// Questa è la funzione che apre l'alert in caso l'utente non abbia selezionato almeno una versione del prodotto
function inlineAlertShow(element) {
	
	// Salvo in una variabile l'elemento browserBuy che contiene l'alert in questione
	var parent_div = element.parentNode.parentNode
	
	// Trovo l'alert in questione calcolandolo dal tasto che ha scatenato l'azione
	var p_list = element.parentNode.parentNode.getElementsByTagName("p");
	for (loop=0; loop<p_list.length; loop++) {
		if (p_list[loop].className == "alert") {
			var alert_paragraph = p_list[loop];
		}
	}
	
	// Rendo visibile l'alert
	alert_paragraph.style.display = "block";
	
	// Controllo se la proprietà custom "opened" è vera (vedi sotto)
	if (alert_paragraph.opened != true) {
		// Aumento l'altezza del browserBuy
		parent_div.style.height = parseInt(parent_div.style.height) + parseInt(alert_paragraph.offsetHeight) + "px";
		
		// Lancio la funzione che calcola le iterazioni
		parent_div.step_details = iterationsCalculator(parent_div.artificial_height, parseInt(parent_div.style.height));
		parent_div.iterations = parent_div.step_details.length;
	}
	
	// Imposto la proprietà custom "opened" come vera per assicurarmi che l'apertura ed il ridimensionamento avvengano una volta sola
	alert_paragraph.opened = true;
}

// Questa è la funzione che calcola le iterazioni necessarie alle animazioni dei pannelli
function iterationsCalculator (startPoint, endPoint) {
	
	// Creo un array temporaneo per immagazzinare i risultati dei calcoli ed una variabile per le iterazioni
	var temp_array = new Array();
	var iterations = 0;
	
	// Imposto una variabile per simulare la dimensione dell'elemento durante i calcoli
	var actualPoint = startPoint;
	
	// Con un ciclo calcolo ed immagazzino nell'array "step_details" gli incrementi necessari all'animazione dell'elemento
	while (actualPoint < endPoint) {
		var difference = Math.ceil((endPoint-actualPoint)/2);	
		temp_array[iterations] = difference;
		actualPoint = actualPoint + temp_array[iterations];
		iterations++;
	}
	
	// Restituisco i valori calcolati
	return temp_array;
}

// Login - My account section minimizer
// Questa è la funzione che gestisce il setup del login / myaccount, chiudendolo se chiamata col parametro 'closed'
function loginMyAccountAreaSetup() {
	
	var element = document.getElementById("sideMyAccountBox");
	
	if (element != null) {
	
		// Della sezione di acquisto calcolo l'altezza naturale aperta e la imposto come variabile "natural_height". Imposto anche una variabile corrispondente all'altezza artificiale chiusa, in questo caso 50
		element.natural_height = document.getElementById("sideMyAccountBox").offsetHeight;
		element.artificial_height = 50;
		element.current_status = 0;
		
		// All'elemento imposto una proprietà "iterations" che serve a contenere progressivamente il numero di step richiesti per l'animazione fluida dell'apertura
		// e un array che conterrà gli incrementi per ogni step
		element.iterations = 0;
		element.step_details = new Array();
		
		// Lancio la funzione che svolga i calcoli e riempia l'array
		element.step_details = iterationsCalculator(element.artificial_height, element.natural_height);
		
		// E mantengo il numero delle iterazioni in una variabile custom
		element.iterations = element.step_details.length;
		// Poi applico le azioni di setup se il primo aargomento della funzione è 'closed'
		if (arguments[0] == "closed") {document.getElementById("sideMyAccountBox").style.height = document.getElementById("sideMyAccountBox").artificial_height + "px";}
		else {
			document.getElementById("sideMyAccountBox").current_status = 1;
			}
	}
	
	var element = null;
	var element = document.getElementById("sideLogin");
	
		if (element != null) {
	
		// Della sezione di acquisto calcolo l'altezza naturale aperta e la imposto come variabile "natural_height". Imposto anche una variabile corrispondente all'altezza artificiale chiusa, in questo caso 40
		element.natural_height = document.getElementById("sideLogin").offsetHeight;
		element.artificial_height = 50;
		element.current_status = 0;
		
		// All'elemento imposto una proprietà "iterations" che serve a contenere progressivamente il numero di step richiesti per l'animazione fluida dell'apertura
		// e un array che conterrà gli incrementi per ogni step
		element.iterations = 0;
		element.step_details = new Array();
		
		// Lancio la funzione che svolga i calcoli e riempia l'array
		element.step_details = iterationsCalculator(element.artificial_height, element.natural_height);
		
		// E mantengo il numero delle iterazioni in una variabile custom
		element.iterations = element.step_details.length;
		// Poi applico le azioni di setup
		if (arguments[0] == "closed") { document.getElementById("sideLogin").style.height = document.getElementById("sideLogin").artificial_height + "px";}
		else {
			document.getElementById("sideLogin").current_status = 1;
		}

	}
	
}

// Questa è la funzione che gestisce l'apertura e la chisura del login / my account 
function showHideLoginMyAccount(element,toShowHide) {
	
	// imposto l'elemento da aprire
	var elementToShowHide = document.getElementById(toShowHide);
	
	// Se le dimensioni dell'area da chiudere non erano state calcolate e impostate glielo faccio fare ora
	if (elementToShowHide.current_status == undefined ){
		loginMyAccountAreaSetup();
	}

	// A seconda dell'azione invocata, mi occupo di aprire o chiudere l'elemento, regolando anche la proprietà custom "current_status";
	if (elementToShowHide.current_status == 0) {	
		elementToShowHide.current_status = 1;
		verticalAnimation(elementToShowHide, "open", 0, element, element.onclick);
	} else if (elementToShowHide.current_status == 1) {
		elementToShowHide.current_status = 0;
		verticalAnimation(elementToShowHide, "close", 0, element, element.onclick);
	}
}








/* 2.0 - FUNZIONI PER IL BROWSER DEI PRODOTTI
-------------------------------------------------------------------------------------------------------------------------------------------------------- */

// Questa è la funzione che gestisce il setup della sezione di acquisto dei prodotti
function browserBuySetup() {
	// Creo un elenco di tutti i div e con un ciclo cerco quelli che hanno la classe "browserBuy"
	var div_list = document.getElementsByTagName("div");
	for (loop=0; loop<div_list.length; loop++) {
		if (div_list[loop].className == "browserBuy") {
			
			// Di questi calcolo l'altezza naturale aperta e la imposto come variabile "natural_height". Imposto anche una variabile corrispondente all'altezza artificiale chiusa, in questo caso 0
			// oltre a una proprietà "current_status" che indichi se l'elemento è correntemente aperto o chiuso. In questo caso è ovviamente impostata a 0
			div_list[loop].natural_height = div_list[loop].offsetHeight;
			div_list[loop].artificial_height = 0;
			div_list[loop].current_status = 0;
			
			// All'elemento imposto una proprietà "iterations" che serve a contenere progressivamente il numero di step richiesti per l'animazione fluida dell'apertura
			// e un array che conterrà gli incrementi per ogni step
			div_list[loop].iterations = 0;
			div_list[loop].step_details = new Array();
			
			// Lancio la funzione che svolga i calcoli e riempia l'array
			div_list[loop].step_details = iterationsCalculator(div_list[loop].artificial_height, div_list[loop].natural_height);
			
			// E mantengo il numero delle iterazioni in una variabile custom
			div_list[loop].iterations = div_list[loop].step_details.length;
			
			// Poi applico le azioni di setup
			div_list[loop].style.height = div_list[loop].artificial_height + "px";
		}
	}
}

// Questa è la funzione che gestisce le apparizioni e le sparizioni della sezione di acquisto dei prodotti
function browserBuyShow(element) {
	// Controllo tutti gli elementi parent del link alla ricerca del contenitore del prodotto
	// Appena lo trovo, ne salvo l'id nella variabile "parent_id"
	var element_to_check = element.parentNode;
	for (loop=0; loop<8; loop++) {
		if (element_to_check.className == "browserSingleProduct") {
			var parent_id = element_to_check.id;
		} else {
			element_to_check = element_to_check.parentNode;
		}
	}
	
	// Creo una matrice di tutti i div contenuti nell'elemento corrispondente a "parent_id" e con un ciclo li faccio passare alla ricerca di quello che ha la classe "browserBuy"
	// Appena lo trovo, lo salvo nella variabile "selected_element"
	// A causa di un bug di IE, cerco anche il relativo div corrispondente alla parte InStore e lo salvo nella variabile "selected_item_instore"
	var div_list = document.getElementById(parent_id).getElementsByTagName("div");
	for (loop=0; loop<div_list.length; loop++) {
		if (div_list[loop].className == "browserBuy") {
			var selected_element = div_list[loop];
		}
		if (div_list[loop].className == "browserInStore") {
			var selected_item_instore = div_list[loop];
		}
		
	}
	
	// A questo punto controllo se l'elemento è aperto o chiuso tramite la proprietà custom "current_status" e, a seconda, lo chiudo oppure lo apro
	if (selected_element.current_status == 0) {	
		selected_element.current_status = 1;
		//selected_element.style.height = selected_element.natural_height + "px";
		verticalAnimation(selected_element, "open", 0, element, element.onclick, selected_item_instore);
		
	} else if (selected_element.current_status == 1) {
		selected_element.current_status = 0;
		//selected_element.style.height = selected_element.artificial_height + "px";
		verticalAnimation(selected_element, "close", 0, element, element.onclick, selected_item_instore);
	}
}

// Questa è la funzione che gestisce il setup della sezione In Store
function browserInStoreSetup() {
	// Creo un elenco di tutti i div e con un ciclo cerco quelli che hanno la classe "browserInStore"
	var div_list = document.getElementsByTagName("div");
	for (loop=0; loop<div_list.length; loop++) {
		if (div_list[loop].className == "browserInStore") {
			
			// Di questi calolo l'altezza naturale aperta e la imposto come variabile "natural_height". Imposto anche una variabile corrispondente all'altezza artificiale chiusa pari 0
			div_list[loop].natural_height = div_list[loop].offsetHeight;
			div_list[loop].artificial_height = 0;
			div_list[loop].current_status = 0;
			
			// All'elemento imposto una proprietà "iterations" che serve a contenere progressivamente il numero di step richiesti per l'animazione fluida dell'apertura
			// e un array che conterrà gli incrementi per ogni step
			div_list[loop].iterations = 0;
			div_list[loop].step_details = new Array();
			
			// Lancio la funzione che svolga i calcoli e riempia l'array
			div_list[loop].step_details = iterationsCalculator(div_list[loop].artificial_height, div_list[loop].natural_height);
			
			// E mantengo il numero delle iterazioni in una variabile custom
			div_list[loop].iterations = div_list[loop].step_details.length;
			
			// Poi applico le azioni di setup
			div_list[loop].style.height = div_list[loop].artificial_height + "px";
		}
	}
}

// Questa è la funzione che gestisce le apparizioni e le sparizioni della sezione In Store
function browserInStoreShow(element) {
	// Controllo tutti gli elementi parent del link alla ricerca del contenitore del prodotto
	// Appena lo trovo, ne salvo l'id nella variabile "parent_id" -->
	var element_to_check = element.parentNode;
	for (loop=0; loop<8; loop++) {
		if (element_to_check.className == "browserSingleProduct") {
			var parent_id = element_to_check.id;
		} else {
			element_to_check = element_to_check.parentNode;
		}
	}
	
	// Creo una matrice di tutti i div contenuto nell'elemento corrispondente a "parent_id" e con un ciclo li faccio passare alla ricerca di quello che ha la classe "browserBuy"
	// Appena lo trovo, lo salvo nella variabile "selected_element"
	var div_list = document.getElementById(parent_id).getElementsByTagName("div");
	for (loop=0; loop<div_list.length; loop++) {
		if (div_list[loop].className == "browserInStore") {
			var selected_element = div_list[loop];
		}
	}
	
	// A questo punto controllo se l'elemento è aperto o chiuso tramite la proprietà custom "current_status" e, a seconda, lo chiudo oppure lo apro;
	// Inoltre cambio la classe del link che ha aperto, come da layout
	if (selected_element.current_status == 0) {	
		selected_element.current_status = 1;
		verticalAnimation(selected_element, "open", 0, element, element.onclick);
		//selected_element.style.height = selected_element.natural_height + "px";
		element.className = "opened";
	} else if (selected_element.current_status == 1) {
		selected_element.current_status = 0;
		verticalAnimation(selected_element, "close", 0, element, element.onclick);
		//selected_element.style.height = selected_element.artificial_height + "px";
		element.className = "closed";
	}
}

// Questa è la funzione che gestisce il setup dei filtri nel Personal Assistant del browser prodotti
function filtersSetup() {
	
	// Creo una lista dei div contenuti nel personal assistant
	if (document.getElementById("filtersContainer")) {
		var div_list = document.getElementById("filtersContainer").getElementsByTagName("div");
	
		// Li faccio passare tutti con un ciclo 
		for (loop=0; loop<div_list.length; loop++) {
		
			// Poi applico le azioni di setup:
			// - li posiziono
			// - calcolo e salvo in proprietà custom l'altezza naturale e quella "artificiale"
			// - riduco l'altezza dell'elemento pari alla sua altezza artificiale
			div_list[loop].style.left = 164 * loop + "px";
			div_list[loop].natural_height = div_list[loop].offsetHeight;
			div_list[loop].artificial_height = 30;
			div_list[loop].style.height = div_list[loop].artificial_height + "px";
		}
	}
}

// Questa è la funzione che gestisce le apparizioni e le sparizioni dei filtri nel Personal Assistant del browser prodotti
function filtersShowHide(action, element) {
	
	// In base all'azione invocata, faccio apparire o sparire l'elemento
	if (action == "show") {
		element.style.height = element.natural_height + "px";
	} else if (action == "hide") {
		element.style.height = element.artificial_height + "px";
	}
}




/* 3.0 - FUNZIONI PER LA SCHEDA PRODOTTO
-------------------------------------------------------------------------------------------------------------------------------------------------------- */

// Questa è la funzione che gestisce il setup del rollover del PEGI
function pegiRolloverSetup() {
	
	// Assegno al fumetto la classe che lo nasconde
	var e = document.getElementById("pegiRollover");
	if (e != null)
	    e.className = "displayNone";
}

var ratingTimer;
var ratingTimerSwitch = 0;

// Questa è la funzione che gestisce le apparizioni e le sparizioni dei rollover del PEGI
function pegiRollover(action, element) {
	
	// Calcolo la posizione sull'asse X da assegnare al fumetto
	var new_x_position = element.offsetLeft -25;
	
	// A seconda dell'azione (rollover o rollout) modifico il display mode del fumetto stesso
	// ed imposto uno z-index maggiore per metterlo visibile rispetto agli altri elementi
	if (action=="over") {
		document.getElementById("pegiRollover").style.left = new_x_position + "px";
		document.getElementById("pegiRollover").style.top = "15px";
		ratingTimerSwitch = 1;
		ratingTimer = setTimeout('document.getElementById("pegiRollover").className = "displayBlock"; document.getElementById("pegiRollover").style.zIndex = 100;', 500);
	} else if (action=="out") {
		if (ratingTimerSwitch == 1) {
			ratingTimerSwitch = 0;
			ratingTimer = setTimeout('document.getElementById("pegiRollover").className = "displayNone"; document.getElementById("pegiRollover").style.zIndex = 0;', 1000);
		}
	} else if (action=="wait") {
		ratingTimerSwitch = 0;
		clearTimeout(ratingTimer);
	}
}

// Questa è la funzione che gestisce il setup della sezione di acquisto del prodotto nella scheda di dettaglio
function detailsBuySetup() {
	
	var element = document.getElementById("detailsBuy");
	
	if (element != null) {
	
		// Della sezione di acquisto calcolo l'altezza naturale aperta e la imposto come variabile "natural_height". Imposto anche una variabile corrispondente all'altezza artificiale chiusa, in questo caso 0
		element.natural_height = document.getElementById("detailsBuy").offsetHeight;
		element.artificial_height = 0;
		element.current_status = 0;
		
		// All'elemento imposto una proprietà "iterations" che serve a contenere progressivamente il numero di step richiesti per l'animazione fluida dell'apertura
		// e un array che conterrà gli incrementi per ogni step
		element.iterations = 0;
		element.step_details = new Array();
		
		// Lancio la funzione che svolga i calcoli e riempia l'array
		element.step_details = iterationsCalculator(element.artificial_height, element.natural_height);
		
		// E mantengo il numero delle iterazioni in una variabile custom
		element.iterations = element.step_details.length;
		
		// Poi applico le azioni di setup
		document.getElementById("detailsBuy").style.height = document.getElementById("detailsBuy").artificial_height + "px";
	}
}

// Questa è la funzione che gestisce l'apparizione e la sparizione della sezione di acquisto del prodotto nella scheda di dettaglio
function detailsBuyShow(element) {
	
	// A seconda dell'azione invocata, mi occupo di aprire o chiudere l'elemento, regolando anche la proprietà custom "current_status";
	if (document.getElementById("detailsBuy").current_status == 0) {	
		document.getElementById("detailsBuy").current_status = 1;
		//document.getElementById("detailsBuy").style.height = document.getElementById("detailsBuy").natural_height + "px";
		verticalAnimation(document.getElementById("detailsBuy"), "open", 0, element, element.onclick);
	} else if (document.getElementById("detailsBuy").current_status == 1) {
		document.getElementById("detailsBuy").current_status = 0;
		//document.getElementById("detailsBuy").style.height = document.getElementById("detailsBuy").artificial_height + "px";
		verticalAnimation(document.getElementById("detailsBuy"), "close", 0, element, element.onclick);
	}
}




/* 4.0 - FUNZIONI PER IL CARRELLO
-------------------------------------------------------------------------------------------------------------------------------------------------------- */

// Questa è la funzione che gestisce il setup dei tabset di tutti i prodotti nel carrello e taglia i titoli dei prodotti se troppo lunghi
function cartTabSetup() {
	
	// Creo un elenco di tutti i div e con un ciclo cerco quelli che hanno la classe "tabContent"
	var div_list = document.getElementsByTagName("div");
	
	for (loop=0; loop<div_list.length; loop++) {
		if (div_list[loop].className == "tabContentContainer") {
			
			var div_sublist = div_list[loop].getElementsByTagName("div");
			
			for (loop2=0; loop2<div_sublist.length; loop2++) {
				if (div_sublist[loop2].className == "1tabContent" || div_sublist[loop2].className == "2tabContent" || div_sublist[loop2].className == "3tabContent" || div_sublist[loop2].className == "4tabContent") {
					// Poi applico le azioni di setup
					div_sublist[loop2].style.display = "none";
				}
			}
		}
	}
	
	// Imposto una variabile con il limite massimo di caratteri consentiti
	var max_chars = 17;
	
	// Inizio una serie di cicli per trovare i link negli gli span senza classe contenuti nei paragrafi con classe "header" contenuti nei div con classe "shoppingCart"
	for (loop=0; loop<div_list.length; loop++) {
		if (div_list[loop].className == "shoppingCart") {
			var paragraph_list = div_list[loop].getElementsByTagName("p");
			for (loop2=0; loop2<paragraph_list.length; loop2++) {
				if (paragraph_list[loop2].className == "header") {
					var span_list = paragraph_list[loop2].getElementsByTagName("span");
					for (loop3=0; loop3<span_list.length; loop3++) {
						if (span_list[loop3].className == "") {
							var link_list = span_list[loop3].getElementsByTagName("a")
							
							// Una volta trovato il link, ne salvo l'HTML in una variabile...
							var link_content = link_list[0].innerHTML;
							
							// ... e ne confronto la lunghezza con il limite massimo di caratteri consentiti
							if (link_content.length > max_chars) {
								
								// Se il limite è superato, taglio la stringa ed aggiungo i puntini, poi sostituisco il contenuto del link
								var edited_link_content = link_content.substring(0, max_chars) + "...";
								link_list[0].innerHTML = edited_link_content;
							}
						}
					}
				}
			}
		}
	}
}

// Questa è la funzione che gestisce le apparizioni dei vari tab
function cartTabShow(element, element_index) {
	
	// Individuo e salvo il div del prodotto che contiene il link cliccato
	var parent_element = element.parentNode.parentNode.parentNode;
	
	// Creo un elenco di tutti i div al suo interno e con un ciclo cerco quelli che hanno la classe "tabContent"...
	var div_list = parent_element.getElementsByTagName("div");
	for (loop=0; loop<div_list.length; loop++) {
		if (div_list[loop].className == "1tabContent" || div_list[loop].className == "2tabContent" || div_list[loop].className == "3tabContent" || div_list[loop].className == "4tabContent") {
			
			// ... ne recupero l'id ed estraggo il numero al suo interno
			var div_index = parseInt(div_list[loop].className);
			
			// Se il numero corrisponde a quello del link che ha invocato la funzione rendo visibile il <div>, altrimenti faccio l'opposto.
			if (div_index == element_index) {
				div_list[loop].style.display = "block";
			} else {
				div_list[loop].style.display = "none";
			}
		}
	}
	
	// A questo punto creo un elenco di tutti i li contenuti nel prodotto specifico, li faccio passare tutti con un ciclo e rimuovo ogni classe eventualmente assegnata
	// Così facendo riporto il tabset alla sua condizione iniziale.
	var li_list = parent_element.getElementsByTagName("li");
	for (loop=0; loop<li_list.length; loop++) {
		li_list[loop].className = "notSelected";
	}
	
	// Dopo individuo il li che contiene il link cliccato e gli assegno la classe "selected"
	var parent_li = element.parentNode;
	parent_li.className = "selected";
}

// Questa è la funzione che gestisce le sparizioni dei vari tab
function cartTabHide(element, element_index) {
	
	// Individuo e salvo il div del prodotto che contiene il link cliccato
	var parent_element = element.parentNode.parentNode.parentNode.parentNode;
	
	// Creo una matrice dei li in esso contenuti e li faccio passare con un ciclo, assegnando una classe inesistente
	// Sono costretto a questo perchè IE non si comporta correttamente con il metodo removeAttribute
	var li_list = parent_element.getElementsByTagName("li");
	for (loop=0; loop<li_list.length; loop++) {
		li_list[loop].className = "notSelected";
	}
	
	// Individuo il div che contiene il link cliccato e lo nascondo
	var parent_div = element.parentNode.parentNode;
	parent_div.style.display = "none";
}




/* 5.0 - FUNZIONI PER IL CHECKOUT
-------------------------------------------------------------------------------------------------------------------------------------------------------- */

// Questa è la funzione che gestisce il setup delle sezioni "E' un regalo" e "Voglio la fattura"
function giftAndInvoiceSetup() {
	
	// Salvo in tre matrici tutti i div, gli input e gli span contenuti in "checkoutGift"
	var div_list = document.getElementById("checkoutGift").getElementsByTagName("div");
	var input_list = document.getElementById("checkoutGift").getElementsByTagName("input");
	var span_list = document.getElementById("checkoutGift").getElementsByTagName("span");
	
	// Faccio passare con un ciclo tutti i div alla ricerca di quello con classe "checkoutOptions"
	for (loop=0; loop<div_list.length; loop++) {
		if (div_list[loop].className == "checkoutOptions") {
			
			// Quando lo trovo, se il checkbox non è selezionato nascondo la sezione corretta, altrimenti la lascio visibile e coloro lo sfondo dello span che contiene il checkbox (il primo span dell'elenco)
			if(input_list[0].checked == false) {
				div_list[loop].style.display = "none";
				span_list[0].className = span_list[0].className;
			} else {
				span_list[0].style.backgroundColor = "#E7DFD1";
			}
		}
	}
	
	// Salvo in tre matrici tutti i div, gli input e gli span contenuti in "checkoutInvoice"
	var div_list = document.getElementById("checkoutInvoice").getElementsByTagName("div");
	var input_list = document.getElementById("checkoutInvoice").getElementsByTagName("input");
	var span_list = document.getElementById("checkoutInvoice").getElementsByTagName("span");
	
	// Faccio passare con un ciclo tutti i div alla ricerca di quello con classe "checkoutOptions"
	for (loop=0; loop<div_list.length; loop++) {
		if (div_list[loop].className == "checkoutOptions") {
			
			// Quando lo trovo, se il checkbox non è selezionato nascondo la sezione corretta, altrimenti la lascio visibile e coloro lo sfondo dello span che contiene il checkbox (il primo span dell'elenco)
			if (input_list[0].checked == false) {
				div_list[loop].style.display = "none";
				span_list[0].className = span_list[0].className;
			} else {
				span_list[0].style.backgroundColor = "#E9D8D8";
			}
		}
	}
}

// Questa è la funzione che si occupa dell'apparizione e della sparizione della sezione "E' un regalo"
function giftSelection(calling_element) {
	
	// Individuo il div di interesse partendo dal checkbox selezionato e risalendo per il DOM, poi faccio passare tutti i div alla ricerca di quello della sezione relativa. Quando lo trovo lo salvo nella variabile "target_element"
	var div_list = calling_element.parentNode.parentNode.parentNode.getElementsByTagName("div");
	for (loop=0; loop<div_list.length; loop++) {
		if (div_list[loop].className == "checkoutOptions") {
			var target_element = div_list[loop];
		}
	}
	
	// Individuo lo span che contiene il checkbox cliccato e lo salvo nella variabile "target_tag"
	var target_tag = calling_element.parentNode;
	
	// A seconda dello stato del checkbox, gestisco il display mode del div ed il colore di sfondo dello span
	if (calling_element.checked == true) {
		target_element.style.display = "block";
		target_tag.style.backgroundColor = "#E7DFD1";
	} else if (calling_element.checked == false) {
		target_element.style.display = "none";
		target_tag.style.backgroundColor = "transparent";
	}
}

// Questa è la funzione che si occupa dell'apparizione e della sparizione della sezione "Voglio la fattura"
function invoiceSelection(calling_element) {
	
	// Individuo il div di interesse partendo dal checkbox selezionato e risalendo per il DOM, poi faccio passare tutti i div alla ricerca di quello della sezione relativa. Quando lo trovo lo salvo nella variabile "target_element"
	var div_list = calling_element.parentNode.parentNode.parentNode.getElementsByTagName("div");
	for (loop=0; loop<div_list.length; loop++) {
		if (div_list[loop].className == "checkoutOptions") {
			var target_element = div_list[loop];
		}
	}
	
	// Individuo lo span che contiene il checkbox cliccato e lo salvo nella variabile "target_tag"
	var target_tag = calling_element.parentNode;
	
	// A seconda dello stato del checkbox, gestisco il display mode del div ed il colore di sfondo dello span
	if (calling_element.checked == true) {
		target_element.style.display = "block";
		target_tag.style.backgroundColor = "#E9D8D8";
		document.getElementById("checkoutAddedDetail").style.display = "inline";
	} else if (calling_element.checked == false) {
		target_element.style.display = "none";
		target_tag.style.backgroundColor = "transparent";
		document.getElementById("checkoutAddedDetail").style.display = "none";
	}
}

// Questa è la funzione che gestisce l'apparizione del tasto di conferma solo dopo l'approvazione delle condizioni di vendita, devo passargli l'id del checkbox che attiva il pulsante
function checkoutConfirmButton(element) {
	
	// Individuo il link da far apparire o sparire
	var link_list = document.getElementById("confirmButtonContainer").getElementsByTagName("a");
	link_list[0].dependantCheck = document.getElementById(element);
	
	// Modifico il display mode dell'elemento a seconda dello stato del checkbox
	if (document.getElementById(element) && document.getElementById(element).checked == false) {
		link_list[0].style.display = "none";
	} else {
		link_list[0].style.display = "inline";
	}
}

function checkoutConfirmButtonBlock(element) {
	if (element.dependantCheck) element.dependantCheck.disabled = true;
	element.style.display = "none";
	
	var p_list = element.parentNode.parentNode.parentNode.getElementsByTagName("p");
	for (loop=0; loop<p_list.length; loop++) {
		if (p_list[loop].className == "transactionAlert") {
			var transaction_paragraph = p_list[loop];
		}
	}
	transaction_paragraph.style.display = "block";
	
}


// Funzione che mostra la gif di loading
function showWaitingImage(element) {
	document.getElementById(element).style.visibility = "visible";
}



/* 6.0 - FUNZIONI PER LE MAIN PAGES
-------------------------------------------------------------------------------------------------------------------------------------------------------- */
// Questa è la funzione che si occupa di richiedere i dati delle classifiche in modo asincrono
function chartDataRequest(fileName, chartWrapperId) {

	// Creo l'oggetto XMLHttpRequest
	var request = null;
	if(window.XMLHttpRequest) {
		request = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		request = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	// Recupero il contenuto del file di testo
	request.open("GET", fileName);
	
	// Salvo il contenuto attuale del tag che ospiterà i dati
	var chartWrapperContent = document.getElementById(chartWrapperId).innerHTML;
	
	// Creo una funzione anonima che si occupi del caricamento e poi richiami la funzione di parsing dei dati una volta terminato il caricamento del file di testo
	request.onreadystatechange = function() {
		if(request.readyState < 4) {
			document.getElementById(chartWrapperId).innerHTML = chartWrapperContent + "<p>Caricamento in corso, attendere prego...</p>";
		} else if (request.readyState == 4) {
			chartDataSetup(request.responseText, chartWrapperId, chartWrapperContent);
		}
	}
	
	// Avvio la richiesta
	request.send(null);
}

// Questa è la funzione che si occupa di preparare i dati delle classifiche
function chartDataSetup(rawData, chartWrapperId, chartWrapperContent) {
	
	// Creo una matrice per contenere i dati della classifica
	var chart_data = new Array();
	
	// Imposto il carattere di separazione delle varie colonne
	chart_data = rawData.split("|");
	
	// Imposto il numero delle colonne e, di conseguenza, calcolo il numero di righe
	var column_number = 5;
	var row_number = Math.floor(chart_data.length/column_number);
	
	// Creo una variabile che conterrà il contenuto della classifica e la riempio con il contenuto iniziale del tag che la ospiterà
	var chart_content = chartWrapperContent;
	
	// Creo una variabile con la lunghezza massima del titolo. Se è superiore viente tagliato e vengono messi ...
	var max_chart_text = 23;
	
	// Con un ciclo costruisco la classifica utilizzando i dati grezzi della matrice
	for (loop=0; loop<row_number; loop++) {
		
		// Questo if taglia il titolo del prodotto e mette i "..." se è piu lungo del valore in max_chart_text
		if (chart_data[column_number*loop+1].length > max_chart_text ) {
		  chart_data[column_number*loop+1] = chart_data[column_number*loop+1].substring(0,max_chart_text-3) +"...";
		}
		
		chart_content = chart_content + "<p><span class='chartPosition"+ parseInt(chart_data[column_number*loop]) + "'>" + parseInt(chart_data[column_number*loop]) + "</span><span class='title'><strong><a href='" + chart_data[column_number*loop+4] + "'>" + chart_data[column_number*loop+1] + "</a></strong> " + chart_data[column_number*loop+2] + "</span><span class='price'> " + chart_data[column_number*loop+3] + "</span><span class='buyNow'><a href='" + chart_data[column_number*loop+4] + "'>Acquistalo ora!</a></span></p>"
	}
	
	// Scrivo i dati della classifica nel tag opportuno
	document.getElementById(chartWrapperId).innerHTML = chart_content;
}


// Script che conta il numero di checkbox presenti nel browserbuy di ogni prodotto e se ce n'è uno solo (ossia o solo nuovo o solo usato) lo flagga
function browserCheckBoxes() {
	
	// Faccio passare i div che si chiamano browserbuy nella pagina
	var div_list = document.getElementsByTagName("div");
	for (loop=0; loop<div_list.length; loop++) {
		if (div_list[loop].className == "browserBuy") {
			
			// All'interno setto il numero di checkbox uguale a 0
			var checkbox_number = 0;		
			
			// Conto il numero di checkbox
			var input_list = div_list[loop].getElementsByTagName("input");
			for (loop2=0; loop2<input_list.length; loop2++) {
				if (input_list[loop2].type == "checkbox")  {	 
				  checkbox_number = checkbox_number+1 ;
				}	
			}
			
			// Se i checkbox sono esettamente uguali a 1 allora li flaggo
			if (checkbox_number == 1) {
				for (loop2=0; loop2<input_list.length; loop2++) {		
					if (input_list[loop2].type == "checkbox") {		
						input_list[loop2].checked= true;
					}
				}
			}
			
			
		}
	}
}


// Script che conta il numero di checkbox presenti in browserbuy e se ce n'è uno solo (ossia o solo nuovo o solo usato) lo flagga
function productCheckBoxes() {
	
	// Faccio passare i div che si chiamano browserbuy nella pagina
	var details = document.getElementById("detailsBuy");
	
		if (details != null) {
				// All'interno setto il numero di checkbox uguale a 0
				var checkbox_number = 0;		
				
				// Conto il numero di checkbox
				var input_list = details.getElementsByTagName("input");
				for (loop2=0; loop2<input_list.length; loop2++) {
					if (input_list[loop2].type == "checkbox")  {	 
						checkbox_number = checkbox_number+1 ;
					}	
				}
				
				// Se i checkbox sono esettamente uguali a 1 allora li flaggo
				if (checkbox_number == 1) {
					for (loop2=0; loop2<input_list.length; loop2++) {		
						if (input_list[loop2].type == "checkbox") {		
							input_list[loop2].checked= true;
						}
					}
				}
		}
}





/* 7.0 - USER DETAILS PAGE FUNCTIONS
-------------------------------------------------------------------------------------------------------------------------------------------------------- */


function showUserWaitingImage(element) {
	var container = element.parentNode;
	var waitImg = container.getElementsByTagName("img");
	waitImg[0].style.visibility = "visible";
	//document.getElementById(element).style.visibility = "visible";
}

function hideLoadingImages() {
	var imgList = document.getElementsByTagName("img");
	for (loop2=0; loop2<imgList.length; loop2++) {
		if (imgList[loop2].className == "userLoadingImage")  {	 
			imgList[loop2].style.visibility = "hidden";
		}	
	}
}


/* 8.0 -MAIN HOMEPAGE FUNCTIONS
-------------------------------------------------------------------------------------------------------------------------------------------------------- */

function openLogin() {
	var userBarCont = document.getElementById('userBarContent');	
	if (userBarCont.open != 1 )
		{
		// embed its real height in the element
		userBarCont.finalHeight = 170;
		userBarCont.style.display = "block";
		for (loop=0; loop<=12; loop++)
			{ 
			 var loginTimer=setTimeout(function(){rollBar(userBarCont,"open");}, loop*30)
			}
	  userBarCont.open = 1;
		}		
	else {
		
		for (loop=0; loop<=12; loop++)
			{ 
			 var loginTimer=setTimeout(function(){rollBar(userBarCont,"closse");}, loop*30)
			}
	  userBarCont.open = 0;
	}
	
}


function rollBar(userBarCont,openClose) {
//	if (userBarCont.offsetHeight <= userBarCont.finalHeight)
	if(openClose=="open"){
		userBarCont.style.height = userBarCont.offsetHeight+Math.ceil((userBarCont.finalHeight-userBarCont.offsetHeight)/2) +"px"
		
	}
	else {
		userBarCont.style.height = userBarCont.offsetHeight-(userBarCont.offsetHeight/2) +"px"
	}
}

function openStoreFinder() {
	var userBarCont = document.getElementById('findAStore');
	if (userBarCont.open != 1 )
	{
	userBarCont.style.display = "inline-block";
	userBarCont.parentNode.className = "storeFinderOpened";
	userBarCont.open = 1;
		}
	else {
		userBarCont.style.display = "none";
		userBarCont.parentNode.className = "storeFinder";
	  userBarCont.open = 0;
	}
}


function showTab(tab,tabButton) {
	// get this moment
	var ora = new Date().getTime();
	//transform in a string
	ora = ora+"";
	//get the less significative digits
	var lung = ora.substring(6,ora.length+1);
	//get the div to open
	tabToOp = document.getElementById(tab);
	// set the opacity to 0
	setOpac1(tabToOp,0);
	// set the z index of the element equal to the date
	tabToOp.style.zIndex = lung ;
	// set the embeddet op veriable to 0
	tabToOp.op = 0;
	//start the fading loop
	for (loop=0; loop<10; loop++)
	{ 
	   var timer = window.setTimeout(function(){augOpac(tabToOp);}, loop*15)
	}
	//mark the actual tab button
	markActualTab(tabButton);
}

function augOpac(what) {
	  what.op = what.op+10;
    if(document.all) /* se sto usando internet explorer*/
       what.style.filter = "alpha(opacity=" + what.op + ")";
    else
       what.style.opacity = what.op / 100;
			 
		// Start the video if tab4 is selected and the tab is fully visible
		
		//if(what.id == "tab4" && ytplayer && what.op == 100) {ytplayer.playVideo();}
}

function setOpac1(what,obscurity) {
    if(document.all) /* se sto usando internet explorer*/
       what.style.filter = "alpha(opacity=" + obscurity + ")";
    else
       what.style.opacity = obscurity / 100;
	
}


function markActualTab (actualTab) {
	var tabMenu = document.getElementById("tabMenu");
	var tabLabels = tabMenu.getElementsByTagName("span");
	for (loop=0; loop< tabLabels.length; loop++)
	{
		tabLabels[loop].className = "";
		}
	tabLabels[actualTab-1].className = "selected";
			 // Pauses the video if tab4 is not selected
	if(tabLabels[3].className != "selected" && ytplayer) ytplayer.pauseVideo();
	if(tabLabels[3].className == "selected" && ytplayer) ytplayer.playVideo();
}


function initialTab(tabToShow) {
	if (gup("tab") != 0) { tabToShow = gup("tab");}
	if (tabToShow<1 || tabToShow > 4) {tabToShow = Math.floor((5-1)*Math.random()) + 1;}
	showTab("tab"+tabToShow, tabToShow ) ;
}

function gup(name)
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "0";
  else
    return results[1];
}

/* 9.0 - Details page
-------------------------------------------------------------------------------------------------------------------------------------------------------- */

function showDetailTab(tabToOpen,tabButton) {
	document.getElementById("tab1").style.display = "none";
	document.getElementById("tab2").style.display  = "none";
	document.getElementById("tab3").style.display = "none";
	document.getElementById(tabToOpen).style.display = "block";
	document.getElementById("tabButton1").className = "";
	document.getElementById("tabButton2").className = "";
	document.getElementById("tabButton3").className = "";
	document.getElementById(tabButton).className = "selected";
}